Recommended Posts

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) {, 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 ='L1Map', 64, 64);

    //  Now add in the tileset'tiles');

    //  Create our layer
    this.layer =;

    //  Resize the world

    //Set wall collision with tilemap, 1);

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

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

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

    // Create the shadow texture
    this.shadowTexture =, 3008);

    // Create an object that will use the bitmap as a texture
    var lightSprite =, 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.layer);

    // Update the shadow texture each frame


  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 +, 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.fillStyle = gradient;
    this.shadowTexture.context.arc(torch.x, torch.y, this.LIGHT_RADIUS, 0, Math.PI * 2);
  }, this);

    // Draw circle of light around companion
    var radius = this.LIGHT_RADIUS +, 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.fillStyle = gradient;
    this.shadowTexture.context.arc(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS, 0, Math.PI * 2);

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




Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.