2

Estou animando algumas sprites da LPC em um canvas, usando Javascript. Porém, a cada vez que troco de animação, a animação começa a ficar mais rápido. O teste pode ser feito no código abaixo. Apenas aperte qualquer tecla para ele executar a animação de ataque, e veja acontecer.

Sinceramente, não consegui descobrir o problema, tentei zerar todos os objetos ao trocar a animação, mas o erro persiste

var battleField;
var entities = [];

$(document).ready(function (){
	battleField = document.getElementById("duel");
	//duel.width = 64;
	//duel.height = 64;
	
	// Create sprite sheet
	var mySprite = new Image();	
	mySprite.height = 64;
	// Create sprite
	var me = {
		state : 0,
		defaultAnim : function (){},
		render : function (){
			if(this.state === 0){
				this.defaultAnim.render();
			}
		},
		update : function (){
			if(this.state === 0){
				this.defaultAnim.update();
			}
		}
	};
	me.defaultAnim = sprite({
		context: battleField.getContext("2d"),
		width: 128,
		height: 64,
		image: mySprite,
		numberOfFrames: 2,
		ticksPerFrame: 30,
		loop: true
	});
	
	// Load sprite sheet
	mySprite.addEventListener("load", gameLoop);
	mySprite.src = "https://image.ibb.co/jmgXCb/male_white_idle.png";
	entities.push(me);
});

function sprite (options, reset) {
	var mySprite = new Image();	
	mySprite.height = 64;
	var that = {},
		frameIndex = 0,
		tickCount = 0,
		ticksPerFrame = options.ticksPerFrame || 0,
		numberOfFrames = options.numberOfFrames || 1;
	
	that.context = options.context;
	that.width = options.width;
	that.height = options.height;
	that.image = options.image;
	that.loop = options.loop;
	
	that.update = function () {
      tickCount += 1;
      if (tickCount > ticksPerFrame) {
			  tickCount = 0;
        if (frameIndex < numberOfFrames - 1) {	
          frameIndex += 1;
        } else if(that.loop) {
          frameIndex = 0;
        } else {
				  that.onAnimationEnded();
			  }
   }
};
	
	that.render = function () {
	
	  // Clear the canvas
	  that.context.clearRect(0, 0, that.width, that.height);
	  
	  // Draw the animation
	  that.context.drawImage(
	    that.image,
	    frameIndex * that.width / numberOfFrames,
	    0,
	    that.width / numberOfFrames,
	    that.height,
	    0,
	    0,
	    that.width / numberOfFrames,
	    that.height);
	};
	
	that.onAnimationEnded = function (){
		
	}
	
	return that;
}

function gameLoop () {
	
  window.requestAnimationFrame(gameLoop);
  for(let i = 0; i < entities.length; i++){
	  var e = entities[i];
	  e.render();
	  e.update();
  }
}

document.onkeydown = function (){
	var mySprite = new Image();	
	mySprite.height = 64;
	entities[0] = sprite({
		context: battleField.getContext("2d"),
		width: 260,
		height: 64,
		image: mySprite,
		numberOfFrames: 4,
		ticksPerFrame: 12	
	}, true);
	mySprite.addEventListener("load", gameLoop);
	mySprite.src = "https://image.ibb.co/eXq3JG/male_white_cast.png";
	entities[0].onAnimationEnded = function (){
		goToIdle(0);
	}
}

function goToIdle(entityIndex){
	var mySprite = new Image();	
	mySprite.height = 64;
	mySprite.src = "https://image.ibb.co/jmgXCb/male_white_idle.png";
	// Create sprite
	entities[entityIndex] = sprite({
		context: battleField.getContext("2d"),
		width: 128,
		height: 64,
		image: mySprite,
		numberOfFrames: 2,
		ticksPerFrame: 30,
    loop: true
	});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="duel"></canvas>

1 Resposta 1

1

Você não precisa da linha mySprite.addEventListener("load", gameLoop); no onkeydown.

O seu gameLoop já está constantemente agendando a próxima execução. Se essa função é invocada de novo, você acaba tendo dois (ou mais) loops acontecendo em "paralelo", o que causa esse efeito de aceleração da animação.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .