怪異的行爲動畫人條紋

Question

時，這是我的jsfiddle：http://jsfiddle.net/yKvuK/6/

if (keydown.right) { 
       characterImg.src = 'http://pixenate.com/pixenate//cache/photo_e2094a30725ccd74a6d889648d34343b.jpg'; 
       character.CurentPos++; 

       character.x += character.speed; 

       if (character.x > CanvasWidth - character.width) { // make the character keep walking even if he step outside the canvas 
        character.x = 0; 
       } 

      } 

      if (keydown.up) { 
       characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_5ef90294cd2afeb4486dedd663cfd872.jpg"; 
       character.y -= character.speed; 

       if (character.y < 0) { 
        character.y = 0; 
       } 
       character.CurentPos++; 


      } 

      if (keydown.down) { //going down 
       characterImg.src = "http://pixenate.com/pixenate//cache/photo_1_ff6712ddd80b138f1865eb4937622d1b.jpg"; 
       character.CurentPos++; 

       character.y += character.speed; 
       if (character.y > CanvasHeight - character.height) { 
        character.y = CanvasHeight - character.height; 
       } 
      } 

試圖拉昇的字符和下誰能幫助我，當你可以看到這個問題？

Answer 1

您需要創建一個新版本的圖像，我的意思是爲每個創建一個新的PNG文件。 jpg不支持透明度。

（我做了你，你可以在下面的網址看到）

當你有文件，你可以這樣做：

var characterImgL = new Image(); // Image Left to be loaded and drawn on canvas 
var characterImgR = new Image(); // Image Right to be loaded and drawn on canvas 
var characterImgU = new Image(); // Image Up to be loaded and drawn on canvas 
var characterImgD = new Image(); // Image Down to be loaded and drawn on canvas 

... 

function init() { 
    characterImgL.src = "http://david.blob.core.windows.net/easeljstutorials/img/MonsterARun.png"; 
    characterImgR.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png"; 
    characterImgU.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png"; 
    characterImgD.src = "http://s23.postimg.org/8j8gi9owb/Monster_ARun_R.png"; 
    characterImg = characterImgL; //Start image = Left image 
} 

，然後在每一個動作你分配characterImg到正確的那一個。

像

characterImg = characterImgR; if movement to right 
characterImg = characterImgL; if movement to left 

檢查fiddle，左/右工作時，上，下，你必須修復png格式的，它會採取一些分鐘旋轉每一幀。

選項1（你可以從URL中的小提琴向右移動複製巴紐）：（簡單的方法）
用作小提琴。請注意，Monster_ARun_R.png圖像幾乎是正確的，它有10個圖像，它們應該改變位置。你在左邊看到的那個應該在右邊看右邊。第二個應該是下一個最後的（也向右看，ECT） 實施例（數字圖像）：

1 2 3 4 5 6 7 8 9 10應10 9 8 7 6 5 4 3 2 1BUT向右看（否則是相同的MonsterARun.png

選項2：（多一點的工作）
如果你將有向右，向左，向上&上下運動，你需要爲每個運動的不同PNG /文件中的每個png文件是由多個圖像來製作動畫。我剛剛修復的那個我只是將原始png文件翻轉（如m irror view），但要做得好，你還需要反轉每個圖像的順序。然後同樣向上移動&。 AND所有png文件都是水平的。你把你的編造者是垂直的，你需要這樣的形象：