Multiple animations on collision

[rlcasper]

Hi,

 

I am trying to build my first phaser game. The game itself is quite simple, it's an infinite climbing game. I have the main game play working fine but I am trying to add in some animations to make it more interesting.

 

the hero bounces up on platforms in the shape of clouds. Every now and again there is a thunder cloud. If he hits a thunder cloud I want two animations to play, the first is one that makes the hero appear to have been electrocuted (this is added on overlap and is working fine) the second is the thunder cloud should play an animation where lightning comes out of it. The thunder clouds are added to a group. I cannot get the lightening animation to play.

 

any help would be amazing as I have a few other animations i'd like to add like playing a 'bounce' animation on the hero when he hits a normal cloud but I can't get that working either and I think it is the same issue. I'm just not sure I am adding/calling the animations correctly.

 

Here is my code

define(["jquery", "phaser", "gyro"], function($, phaser, gyro) {	$(function() {		var Jumper = function() {};Jumper.Play = function() {};var flying = false;var storm;Jumper.Play.prototype = {  preload: function() {         game.load.image('sky', 'img/sky.png');    game.load.spritesheet('storm_cloud', 'img/storm.png', 89, 76);    game.load.image('ground', 'img/platform.png');	  game.load.image('cloud', 'img/cloud.png');				   	  game.load.spritesheet('hero', 'img/hugo.png', 81, 81);	  game.load.image('instruct1', 'img/instruction1.png');	  game.load.image('instruct2', 'img/instruction2.png');  },  create: function() {    // background color    this.stage.backgroundColor = '#000000';       game.world.setBounds(0, 0, this.game.width, this.game.height); //var bg = game.add.sprite(0, 0, 'sky');      game.add.tileSprite(0, -4800, 480, 5500, 'sky');    // scaling    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    this.scale.maxWidth = this.game.width;    this.scale.maxHeight = this.game.height;    this.scale.pageAlignHorizontally = true;    this.scale.pageAlignVertically = true;    this.scale.setScreenSize( true );    // physics    this.physics.startSystem( Phaser.Physics.ARCADE );    // camera and platform tracking vars    this.cameraYMin = 99999;    this.platformYMin = 99999;    this.stormYMin = 99999;    //  create the ground  	var  earth = this.add.group();  	earth.enableBody = true;  	var ground = earth.create(0, game.world.height - 2, 'ground');  	ground.scale.setTo(2, 2);  	ground.body.immovable = true;	    // create platforms    this.platformsCreate();    this.stormCreate();    // create hero    this.heroCreate();    // cursor controls    this.cursor = this.input.keyboard.createCursorKeys();     },  update: function() {    this.world.setBounds( 0, -this.hero.yChange, this.world.width, this.game.height + this.hero.yChange );    // make camera follow hero    this.cameraYMin = Math.min( this.cameraYMin, this.hero.y - this.game.height + 130 );    this.camera.y = this.cameraYMin;    // collisions and movement       this.physics.arcade.collide(this.hero, this.platforms, this.bounce, null, this);    this.heroMove();    // for each plat form, find out which is the highest    // if one goes below the camera view, then create a new one at a distance from the highest one    this.platforms.forEachAlive( function( elem ) {      this.platformYMin = Math.min( this.platformYMin, elem.y );      if( elem.y > this.camera.y + this.game.height ) {        elem.kill();        this.platformsCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.platformYMin - 100, 50 );      }    }, this );       //create storm clouds     this.storm.forEachAlive( function( elem ) {      this.stormYMin = Math.min( this.stormYMin, elem.y );      if( elem.y > this.camera.y + this.game.height ) {        elem.kill();        this.stormCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.stormYMin - 500, 50 );      }    }, this );	game.physics.arcade.overlap(this.hero, this.storm, this.stormCollision, null, this);  },  shutdown: function() {    // reset everything, or the world will be messed up    this.world.setBounds( 0, 0, this.game.width, this.game.height );    this.cursor = null;    this.hero.destroy();    this.hero = null;    this.platforms.destroy();    this.platforms = null;     this.storm.destroy();    this.storm = null;    flying = false;  },  platformsCreate: function() {    // platform basic setup    this.platforms = this.add.group();    this.platforms.enableBody = true;    this.platforms.createMultiple( 10, 'cloud' );        // create a batch of platforms that start to move up the level    for( var i = 0; i < 9; i++ ) {      this.platformsCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.world.height - 100 - 100 * i, 50 );    }  },  platformsCreateOne: function( x, y, width ) {        var platform = this.platforms.getFirstDead();    platform.reset( x, y );    platform.scale.x = 1;    platform.scale.y = 1;    platform.body.immovable = true;    return platform;  },  stormCreate: function() {    // storm basic setup    this.storm = this.add.group();    this.storm.enableBody = true;    this.storm.physicsBodyType = Phaser.Physics.ARCADE;    this.storm.createMultiple( 10, 'storm_cloud' );    for( var i = 0; i < 2; i++ ) {      this.stormCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.world.height - 600 * i, 50 );    }  },  stormCreateOne: function( x, y, width ) {         var cloud = this.storm.create( x, y, 'storm_cloud' );         cloud.scale.x = 1;      cloud.scale.y = 1;      cloud.body.immovable = true;      cloud.animations.add('light', [0,23], 10, true);      game.physics.enable(cloud, Phaser.Physics.ARCADE);      return cloud;  },  heroCreate: function() {       this.hero = game.add.sprite( this.world.centerX, this.world.height - 81, 'hero' );    this.hero.anchor.set( 1,1 );        // track where the hero started and how much the distance has changed from that point    this.hero.yOrig = this.hero.y;    this.hero.yChange = 0;    // hero collision setup    // disable all collisions except for down    this.physics.arcade.enable( this.hero );    this.hero.body.gravity.y = 500;    this.hero.body.collideWorldBounds = true;    this.hero.body.checkCollision.up = false;    this.hero.body.checkCollision.left = false;    this.hero.body.checkCollision.right = false;    //our player animations    this.hero.animations.add('left', [5,8], 10, true);  	this.hero.animations.add('right', [1,4], 10, true);  	this.hero.animations.add('bounce', [9,12], 10, true);  	this.hero.animations.add('shock', [13,16], 10, true);  	this.hero.animations.add('fall', [17,18], 10, true);  },   heroMove: function() {    // handle the left and right movement of the hero    if( this.cursor.left.isDown ) {      this.hero.body.velocity.x = -200;       this.hero.animations.play('left');    }     else if( this.cursor.right.isDown ) {      this.hero.body.velocity.x = 200;      this.hero.animations.play('right');    }     else {      this.hero.body.velocity.x = 0;       this.hero.frame = 0;    }    if( flying == false){	  		this.game.input.onDown.add(this.jump, this);  	}	    // handle hero jumping    if( this.cursor.up.isDown && this.hero.body.touching.down ) {      this.hero.body.velocity.y = -350;    }     // track the maximum amount that the hero has travelled    this.hero.yChange = Math.max( this.hero.yChange, Math.abs( this.hero.y - this.hero.yOrig ) );        // if the hero falls below the camera view, gameover    if( this.hero.y > this.cameraYMin + this.game.height && this.hero.alive ) {      this.state.start( 'Play' );    }  },   jump : function() {		flying=true;		this.hero.body.velocity.y = -450;					    			game.input.onDown.removeAll(); // only allows first click to make hugo jump	},	bounce : function() {		var shouldLoop = false;		this.hero.animations.play('bounce', 10, shouldLoop);		this.hero.body.velocity.y = -450; 	},	 stormCollision: function(){	   	    var shouldLoop = false;		this.hero.animations.play('shock', 10, shouldLoop);				//this.storm.getChildAt(0).animations.add('light', [0,23]);		console.log(this.storm.getChildAt(0));		 this.storm.getChildAt(0).animations.play('light');   // var shouldLoop2 = true;	 // this.storm.getChildAt(0).animations.play('light', 10, shouldLoop2);	}}	var game = new Phaser.Game( 480, 700, Phaser.CANVAS, '' );	game.state.add( 'Play', Jumper.Play );	game.state.start( 'Play' );	});});