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画布上动画精灵的非常简单的工作示例。请注意，这不适用于＆lt; 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}
_{版权/归因通知：Gaurav Munjal}

使用Sprite HTML5进行动画制作

1 个答案: