Phaser 2.1.3 animation from graphics
Basic Phaser setup for testing
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.1.3/phaser.min.js"></script>
<div id="test"></div>
JavaScript
// Phaser 2.1.3, happens in 2.2.0 too
// In versions below 2.1.3 animation doesn't work at all
var preload = function(game) {
}
var create = function(game) {
var lavaColors = [
0xfbe402, 0xe7e900, 0xe9c300,
0xebbb00, 0xff9e19, 0xff8b2c,
0xfa5630, 0xfd302d, 0xfc272d,
0xe8041b, 0xd50118, 0xbd0217,
0xa10008
];
var lavaParticlesGraphics = game.make.graphics(0, 0);
for(var i = 0, len = lavaColors.length; i < len; i++){
lavaParticlesGraphics.beginFill(lavaColors[i]);
lavaParticlesGraphics.drawRect(i * 8, 0, 8, 8);
lavaParticlesGraphics.endFill();
}
var lavaParticlesTexture = lavaParticlesGraphics.generateTexture();
game.cache.addSpriteSheet('lavaParticles', '', lavaParticlesTexture, 8, 8, -1, 0, 0);
// Comment out next line and rerun fiddle
var particlesSprite = game.add.sprite(game.width/2, game.height/2, lavaParticlesTexture);
var particles = game.add.sprite(game.width/2, game.height/2 + 32, 'lavaParticles');
particles.animations.add('blink');
particles.animations.play('blink', 30, true);
}
var update = function(game) {
}
var game = new Phaser.Game(500, 400, Phaser.AUTO, 'test', { preload: preload, create: create, update: update });