JavaScript анимация анимации холста

Question

У меня проблема с анимацией холста. Я работаю с this tutorial. Это довольно просто, но теперь я хочу сделать анимацию с 60 кадров в секунду. Я пробовал setInterval(Update, 1000/60), и, конечно, он работает, но теперь есть проблема с спрайтом. Его анимация слишком быстрая. Есть ли способ сделать 60 кадров в секунду и замедлить анимацию символьного спрайта (чтобы выглядеть более естественным)?

Прошу прощения, что у меня нет живого примера, но создать немного без ftp для спрайтов немного сложно.

код:

var canvas; 
var ctx; 
var dx = 10; 
var x = 30; 
var y = 0; 
var WIDTH = 1000; 
var HEIGHT = 340; 
var tile1 = new Image(); 
var posicao = 0; 
var NUM_POSICOES = 3; 

    function KeyDown(e){ 
     switch (e.keyCode) { 
      case 39: 
       if (x + dx < WIDTH){ 
        x += dx; 
        posicao++; 
        if(posicao == NUM_POSICOES) 
         posicao = 1; 
       } 
       break; 
     case 37: 
      if (x + dx < WIDTH){ 
        x -= dx; 
        posicao++; 
        if(posicao == NUM_POSICOES) 
         posicao = 1; 
       } 

     } 
    } 
    function KeyUp(e){ 
     posicao = 0; 
    } 
    function Draw() { 
     tile1.src = posicao+".png"; 
     ctx.drawImage(tile1, x, y); 
    } 
    function LimparTela() { 
     ctx.fillStyle = "rgb(233,233,233)"; 
     ctx.beginPath(); 
     ctx.rect(0, 0, WIDTH, HEIGHT); 
     ctx.closePath(); 
     ctx.fill(); 
    } 
    function Update() { 
     LimparTela(); 
     Draw(); 
    } 
    function Start() { 
     canvas = document.getElementById("canvas"); 
     ctx = canvas.getContext("2d"); 
     return setInterval(Update, 1000/60); 
    } 
     window.addEventListener('keydown', KeyDown); 
     window.addEventListener('keyup', KeyUp); 
Start(); 

Answer 1

Просто идея, простое исправление вы можете попробовать добавить дополнительные кадры в spritesheet? Это также улучшит вашу анимацию, не беспокоясь о нарушении чего-то еще :)

Answer 2

Вы можете «дросселировать» Update() для выполнения реже.

var counter=5; 

function Update() { 
    if(--counter>0){ return; }; 
    LimparTela(); 
    Draw(); 
    counter=5; 
} 

Если пользователь нажимает клавишу можно заставить анимацию, установив счетчик на 0.

function KeyDown(e){ 
    switch (e.keyCode) { 
     case 39: 
      if (x + dx < WIDTH){ 
       x += dx; 
       posicao++; 
       if(posicao == NUM_POSICOES) 
        posicao = 1; 
      } 
      // zero the counter to force the animation now 
      counter=0; 
      break; 
    case 37: 
     if (x + dx < WIDTH){ 
       x -= dx; 
       posicao++; 
       if(posicao == NUM_POSICOES) 
        posicao = 1; 
      } 
      // zero the counter to force the animation now 
     counter=0; 
    } 
} 

Answer 3

Всякий раз, когда вы двигаете спрайт, вы должны разделить количество пикселей, перемещаемых количество кадров в секунду. Например, если вы хотите переместить его dx пикселей в секунду при 60 кадров в секунду, определите var fps = 60; как глобальную переменную и сделайте x += dx/fps; при его перемещении. Какова была частота кадров раньше? 30 кадров в секунду или что-то еще? Как бы то ни было, если вы хотите, чтобы скорость была такой же, как и раньше, со скоростью 60 кадров в секунду, сделайте ваш dx равным количеству пикселов, которые он совершил в секунду, умножив предыдущие dx на fps. Поэтому, если он двигался со скоростью 10 пикселей на кадр со скоростью 30 кадров в секунду, сделайте var dx = 300;.