Animation Issues

[WholemealDrop]

I'm working on a dungeon/cave exploration game and created some torches to scatter throughout the gamespace to guide the player via a tutorial here: Game Mechanic Explorer Lighting. Got the lighting working wonderfully finally but when I try to animate the sprite linked to the torches nothing happens or it breaks the game. I've tried standard animation add and play calls along with the shown callAll animation.Both animations and callAll throws errors of cannot read property animations/callAll of undefined. Any thoughts as to why I can't get the torch to animate? 

Relevant code below (my game is broken out to gamestates so assume that the sprite calls for the preload are correct): 

var PrototypeMaze = PrototypeMaze || {};

PrototypeMaze.Game = function() {};

PrototypeMaze.Level1 = {

  create: function() {

    // Create torch objects
    // Torch constructor
    var torch = function(game, x, y) {
        Phaser.Sprite.call(this, game, x, y, 'torch');

        // Set the pivot point for this sprite to the center
        this.anchor.setTo(0.5, 0.5);
    };

    // Torches are a type of Phaser.Sprite
    torch.prototype = Object.create(Phaser.Sprite.prototype);
    torch.prototype.constructor = torch;

    //Tilemap setup
    var map;
    var layer;

    //specify the tile size here or we can't render it
    this.map = this.game.add.tilemap('L1Map', 64, 64);

    //  Now add in the tileset
    this.map.addTilesetImage('tiles');

    //  Create our layer
    this.layer = this.map.createLayer(0);

    //  Resize the world
    this.layer.resizeWorld();

    //Set wall collision with tilemap
    this.map.setCollisionBetween(1, 1);

    // //animation for torch
    //this.torches.callAll('animations.add', 'animations', 'flicker', [0, 1, 2], 3.5, true);
    //this.torches.callAll('animations.play', 'animations', 'flicker');
    this.torches.animations.add('flicker', [0, 1, 2], 3.5, true);
    this.torches.animations.play('flicker');

    //add torch group
    this.torches = this.game.add.group();
    this.torches.add(new torch(this.game, 500, 100));
    this.torches.add(new torch(this.game, 500, 400));

    // The radius of the circle of light
    this.LIGHT_RADIUS = 150;

    // Create the shadow texture
    this.shadowTexture = this.game.add.bitmapData(2560, 3008);

    // Create an object that will use the bitmap as a texture
    var lightSprite = this.game.add.image(0, 0, this.shadowTexture);

    // Set the blend mode to MULTIPLY. This will darken the colors of
    // everything below this sprite.
    lightSprite.blendMode = Phaser.blendModes.MULTIPLY;

  },

  update: function() {

    //tilemap collision
    this.game.physics.arcade.collide(this.mainChar, this.layer);

    // Update the shadow texture each frame
    this.updateShadowTexture();

  },

  render: function() {

},

updateShadowTexture: function() {
    // This function updates the shadow texture (this.shadowTexture).
    // First, it fills the entire texture with a dark shadow color.
    // Then it draws a white circle centered on the pointer position.
    // Because the texture is drawn to the screen using the MULTIPLY
    // blend mode, the dark areas of the texture make all of the colors
    // underneath it darker, while the white area is unaffected.

    // Draw shadow, rgb dictates how dark the shadow is
    this.shadowTexture.context.fillStyle = 'rgb(100, 100, 100)';
    this.shadowTexture.context.fillRect(0, 0, 2560, 3008);

    //Draw circle of light around torch
    this.torches.forEach(function(torch) {
    var radius = this.LIGHT_RADIUS + this.game.rnd.integerInRange(1, 10);
    var gradient = this.shadowTexture.context.createRadialGradient(torch.x, torch.y, this.LIGHT_RADIUS * 0.75, torch.x, torch.y, radius);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)');
    this.shadowTexture.context.beginPath();
    this.shadowTexture.context.fillStyle = gradient;
    this.shadowTexture.context.arc(torch.x, torch.y, this.LIGHT_RADIUS, 0, Math.PI * 2);
    this.shadowTexture.context.fill();
  }, this);

    // Draw circle of light around companion
    var radius = this.LIGHT_RADIUS + this.game.rnd.integerInRange(1, 10);
    var gradient = this.shadowTexture.context.createRadialGradient(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS * 0.75, this.sideChar.x, this.sideChar.y, radius);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)');
    this.shadowTexture.context.beginPath();
    this.shadowTexture.context.fillStyle = gradient;
    this.shadowTexture.context.arc(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS, 0, Math.PI * 2);
    this.shadowTexture.context.fill();


    // This just tells the engine it should update the texture cache
    this.shadowTexture.dirty = true;

},

};

 

[samme]

`callAll` should work but it needs to go after `add.group()` etc.

[WholemealDrop]

On 10/31/2016 at 1:11 PM, samme said:

`callAll` should work but it needs to go after `add.group()` etc.

OMG duh! Thanks samme!