JSFiddle - React, Tailwind, and code Playground
HTML
<body onLoad="init();">
<canvas id="myCanvas" width="300" height="300">
Aqui deveria haver um canvas! :)
</canvas>
<button id="toggleButton" onclick="togglePause();">Pausar</button>
</body>
JavaScript
// Função de inicialização
function init() {
// Cria o palco com o canvas
g_oStage = new createjs.Stage("myCanvas");
var oHomerSpriteSheet = new Image();
oHomerSpriteSheet.onload = handleImageLoad;
oHomerSpriteSheet.onerror = handleImageError;
oHomerSpriteSheet.src = "http://i.stack.imgur.com/zLNtw.png"; // Imagem no SOPT
// Atualiza o palco em uma taxa de 30 quadros por segundo
createjs.Ticker.addEventListener("tick", doUpdate);
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.setFPS(30);
}
// Função de tragamento do fim de carregamento da imagem
// Cria um sprite e adiciona ao palco.
function handleImageLoad() {
// Cria o sprite sheet (no código abaixo, 'this' é
// a referência para o objeto Image carregado)
var oSpriteSheet = new createjs.SpriteSheet({
images: [this], // this = objeto Image carregado
frames: {width: 270, height: 270, regX: 135, regY: 135},
animations: {
run: [0, 9, "run", 0.3]
}
});
// Cria o objeto sprite
var oSprite = new createjs.Sprite(oSpriteSheet);
oSprite.name = "Homer"; // Para facilitar o acesso
// Adiciona o sprite ao palco
g_oStage.addChild(oSprite);
// Centraliza o sprite no palco (note no sprite sheet que o ponto de
// registro é (135, 135), ou seja, no centro da imagem).
oSprite.x = g_oStage.canvas.width / 2;
oSprite.y = g_oStage.canvas.height / 2;
// Toca a animação chamada "run" (no exemplo, a única definida)
g_bPlaying = true;
oSprite.gotoAndPlay("run");
}
// Função de tratamento de erro do carregamento da imagem
function handleImageError() {
alert("Oops! Não consegui carregar a imagem do sprite sheet!");
}
// Função de atualização. Simplesmente atualiza o palco.
// A chamada de update no palco chama também o update de cada
// objeto contido (no exemplo, o sprite). Sem isso, a "animação"
// não acontece.
function doUpdate(oEvent) {
...