动画与精灵HTML5

Question

我想努力做出一个游戏，但我卡住试图做一个动画。

我正在尝试修改我找到的教程，但我没有看到动画。相反，我看到在屏幕上绘制的整个文件都是.png。

这里是我的代码（以及到的jsfiddle http://jsfiddle.net/ae3nj03a/3/链接）

我会很感激的任何帮助或指导。

var fantom = new Image(300,60); //obrazek ma wymiary 24,24 
fantom.src = 'obrazki/SpriteGracz.png'; 

function draw() { 
var nr_klatki = 1; 
var liczba_klatek_fantom = 5; 
var szerokosc_klatki = fantom.width/liczba_klatek_fantom; 
var wysokosc_klatki = fantom.height;0 
var c = document.createElement('canvas'); 
    ggctx=c.getContext('2d'); 
c.fillStyle = "#111"; 
    //c.fillRect(0,0,200,100); 

nr_klatki++; 
if (nr_klatki>liczba_klatek_fantom) { 
    nr_klatki = 1; 
} 
var xklatki = (nr_klatki-1)*szerokosc_klatki; 
ggctx.drawImage(fantom, xklatki, 0, szerokosc_klatki, wysokosc_klatki, 60, 35, szerokosc_klatki, wysokosc_klatki); 
return draw;  
} 

function rysuj(callback){ 
    var gracz = document.createElement("canvas"); 
    gctx = gracz.getContext("2d"); 
    gctx.fillStyle = "black"; 
    //gracz.width = 640; 
    //gracz.height = 480; 
    gracz = new Image(); 
    gracz.onload = function(){ 
      setInterval(draw(), 20); 

    }; 

    gracz.src = "../obrazki/SpriteGracz.png"; 
    //gctx.arc(310, 410, 20, 0, 2*Math.PI); 
    //gctx.fill(); 
    // dom.dodKlase(gracz, "plansza"); 
    dom.dodKlase(gracz, "gracze"); 
    return gracz; 
    callback(); 
} 

//function() 

function setup(){ 
    var boardElement = $("#ekran-gry .ekran-planszy")[0]; 
    canvas = document.createElement("canvas"); 
    ctx = canvas.getContext("2d"); 
    dom.dodKlase(canvas, "plansza"); 
    boardElement.appendChild(createBackground()); 
    boardElement.appendChild(rysuj()); 
    boardElement.appendChild(canvas); 

    // rysuj();   
} 

Answer 1

我不会直接回答你的问题，因为根本就不是你的问题足够的工作代码很容易诊断问题。

根据你的描述，很可能你并没有足够好地修剪精灵表。您需要提供想要使用的精灵图片的x/y/w/h坐标。这听起来像你没有这样做。

下面是一个非常简单的在HTML5画布上动画精灵的工作示例。请注意，这不适用于IE10的<。

$(function(){ 
 
    
 
    var spritesheet = new Image(), 
 
     canvas = $("#game")[0].getContext('2d'), 
 
     spriteWidth = 64, 
 
     spriteHeight = 64, 
 
     indexX = 0, 
 
     indexX_max = 7, 
 
     indexY = 11, 
 
     lastFrameUpdate = 0, 
 
     frameRate = 1000/16, // 16 frames per second (calculated in milliseconds) 
 
     destX = 0, 
 
     destY = 0; 
 
    
 
    spritesheet.src = 'http://i.stack.imgur.com/X2Dt6.png'; 
 
    
 
    function drawNextSprite(){ 
 
    var currentTime = Date.now(), 
 
     timeSinceLastUpdate = currentTime - lastFrameUpdate, 
 
     spriteX, 
 
     spriteY; 
 
    
 
    // If it's been less than 1/16 of a second since the last update, then 
 
    // don't update the sprite yet 
 
    if (timeSinceLastUpdate < frameRate){ 
 
     window.requestAnimationFrame(drawNextSprite); 
 
     return; 
 
    } 
 
    
 
    lastFrameUpdate = currentTime; 
 
    
 
    if (indexX > indexX_max) indexX = 0; 
 
    if (destX > 80) destX = -spriteWidth; 
 
    
 
    // find the next sprite image to use 
 
    spriteX = spriteWidth * indexX; 
 
    spriteY = spriteHeight * indexY; 
 
    
 
    // clear the area we last drew on (so that we don't leave a trail) 
 
    canvas.clearRect(destX, destY, spriteWidth, spriteHeight); 
 
    canvas.drawImage(
 
     spritesheet, // the spritesheet 
 
     spriteX, spriteY, spriteWidth, spriteHeight, // where is the sprite frame? 
 
     destX, destY, spriteWidth, spriteHeight // where should we draw it on the canvas? 
 
    ); 
 
    
 
    // increment to the next sprite image 
 
    indexX++; 
 
    // move our sprite across the screen 
 
    destX += 3; 
 
    
 
    window.requestAnimationFrame(drawNextSprite); 
 
    } 
 
    
 
    drawNextSprite(); // draw the first frame 
 
    
 
    
 
});

#game{ 
 
    border: solid black 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="game" height="80" width="80"></canvas>

_{关于我使用的精灵表，包括相关的版权信息，可以在这里找到：http://opengameart.org/content/universal-lpc-sprite-male-01
版权所有/署名声明：拉夫Munjal}