spritesheet.js
-------------------------------------------------------------------------------------------------
function Spritesheet(context, imagem, linhas, colunas) {
this.context = context;
this.imagem = imagem;
this.numLinhas = linhas;
this.numColunas = colunas;
this.intervalo = 0;
this.linha = 0;
this.coluna = 0;
}
Spritesheet.prototype = {
proximoQuadro: function() {
var agora = new Date().getTime();
// Se ainda não tem último tempo medido
if (! this.ultimoTempo) this.ultimoTempo = agora;
// Já é hora de mudar de coluna?
if (agora - this.ultimoTempo < this.intervalo) return;
if (this.coluna < this.numColunas - 1)
this.coluna++;
else
this.coluna = 0;
// Guardar hora da última mudança
this.ultimoTempo = agora;
},
desenhar: function(x, y) {
var largura = this.imagem.width / this.numColunas;
var altura = this.imagem.height / this.numLinhas;
this.context.drawImage(
this.imagem,
largura * this.coluna,
altura * this.linha,
largura,
altura,
x,
y,
largura,
altura
);
}
}
------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Testando a classe Spritesheet</title>
<script src="spritesheet.js"></script>
</head>
<body>
<canvas id="canvas_spritesheet_1" width="500" height="500"></canvas>
<script>
var context = document.getElementById('canvas_spritesheet_1')
.getContext('2d');
var imgSonic = new Image();
imgSonic.src = 'spritesheet.png';
// Quero passar: context, imagem, linhas, colunas
var sheet = new Spritesheet(context, imgSonic, 3, 8);
// Duração de cada quadro
sheet.intervalo = 60;
// "correndo para direita"
sheet.linha = 1;
// Animação
imgSonic.onload = gameLoop;
function gameLoop() {
context.clearRect(0, 0, context.canvas.width,
context.canvas.height);
// Avançar na animação
sheet.proximoQuadro();
// Onde desenhar o quadro atual
sheet.desenhar(100, 100);
requestAnimationFrame(gameLoop);
}
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário