Sometimes animation plays, sometimes not. Simple code. Weird as hell!

[kriket]

I have a game concept where a few cannons are falling on the player. Everytime a canon overlaps the ground, an explosion animation should play. It plays when the canon hits the same ground at the right side but not on the left. Weird as hell!!

 

Check it out at http://ice.site44.com/

 

Pls use the developer tools to check the simple code. Appreciate it.

 

[Skeptron]

Ok so if you comment out a lot of code : 

SideScroller.Game4.prototype = {  preload: function() {      this.world.resize(1024, 480);            this.game.time.advancedTiming = true;    },  create: function() {    this.game.physics.p2.setImpactEvents(true);    this.game.physics.p2.gravity.y = SideScroller.GRAVITY;                this.stationaryCollisionGroup = this.game.physics.p2.createCollisionGroup();          //for(var i = 0; i < 2; i++){    //    this.add.image(512*i, 0, 'back');    //}    //for(var i = 0; i < 2; i++){    //    this.add.image(512*i, 256, 'back');    //}            //  PLATFORMS    this.stationary = this.game.add.group();    this.stationary.enableBody = true;    this.stationary.physicsBodyType = Phaser.Physics.P2JS;    //this.bottom_soil5_3 = this.stationary.create(this.game.width*0.9, this.game.height*0.95, 'fore_edged_persp');                for(var i = 0; i < this.stationary.children.length; i++){            this.stationary.children[i].body.setRectangle(2000, 60, 0, -40);            this.stationary.children[i].body.static = true;            this.stationary.children[i].body.setCollisionGroup(this.stationaryCollisionGroup);    }      // BOTTOM SOIL, NO PHYSICS    //this.bottom1 = this.add.image(-100, this.game.height*0.79, 'fore_edged_persp');    //this.bottom2 = this.add.image(this.game.width*0.3, this.game.height*0.79, 'fore_edged_persp');    // CANNONBALLS    this.cannon1 = this.game.add.sprite(-this.game.width*0.5, this.game.height*2, 'cannonball');    this.game.time.events.loop(1000, function() {    this.cannon1.x = this.rnd.integerInRange(-this.game.width*0.5, 0);    this.cannon1.y = -100;    this.game.add.tween(this.cannon1).to({x: this.rnd.integerInRange(0, this.game.width), y: this.game.height*0.8}, 1000, Phaser.Easing.Cubic.easeIn, true);    }, this)    //ANIMATIONS    //this.exp4 = this.game.add.sprite(400, this.game.height/2, 'exp4');    //this.exp4.anchor.setTo(0.5, 0.7);    //this.exp4.animations.add('exp4_anim');    //this.exp = this.game.add.sprite(400, this.game.height/2, 'exp');    //this.exp.anchor.setTo(0.5, 0.7);    //this.exp.animations.add('exp_anim');          //this.exp_copy = this.game.add.sprite(400, this.game.height/2, 'exp');    //this.exp_copy.anchor.setTo(0.5, 0.7);    //this.exp_copy.animations.add('exp_copy_anim');          this.game.renderer.renderSession.roundPixels = true;    this.yAxis = p2.vec2.fromValues(0, 1);    this.cursors = this.input.keyboard.createCursorKeys();    this.game.physics.p2.updateBoundsCollisionGroup();        },      update: function() {    //if (this.checkOverlap(this.bottom_soil5_3, this.cannon1))    {    this.exp.position.x = this.cannon1.position.x;     this.exp.position.y = this.cannon1.position.y;    this.exp.animations.play('exp_anim', 48);    }       },    checkOverlap: function(spriteA, spriteB) {        var boundsA = spriteA.getBounds();        var boundsB = spriteB.getBounds();        return Phaser.Rectangle.intersects(boundsA, boundsB);    },        render: function() {      this.bottom_soil5_3.body.debug = true;    }};

You will notice that ONLY the cannonBall which is tweend has explosions. Comment out this line to verify : 

this.game.add.tween(this.cannon1).to({x: this.rnd.integerInRange(0, this.game.width), y: this.game.height*0.8}, 1000, Phaser.Easing.Cubic.easeIn, true);

So even if it seems that you are popping multiple cannon balls, only one is kept as reference by this.cannon1.

 

Your way of doing this feature is really weird. You should really consider using emitters. And I don't see the need for tweens : just use gravity and have the balls fall on the ground.

[kriket]

skeptron mate, the reason why I am doing it this way is cos of performance on mobiles. Tweens are better than full-blown physics objects for such a simple feature.

 

Back to the problem. You lost me. Yes, there are only three cannonsballs which are tweened again and again to give an effect of many. But thats still doesnt answer my question about why explosions sometimes and not other times. 

 

Just to prove this issue, I have commented out cannons 2 and 3 and we are left with one one cannon and its respective explosion. Why is it still exploding in the second half of the screen and not the first half?

 

http://ice.site44.com/

[kriket]

Here is the complete code.

 

 

SideScroller.Game4 = function(game){};SideScroller.Game4.prototype = {  preload: function() {    },  create: function() {    this.game.physics.p2.setImpactEvents(true);          this.stationaryCollisionGroup = this.game.physics.p2.createCollisionGroup();                  //  PLATFORMS    this.stationary = this.game.add.group();    this.stationary.enableBody = true;    this.stationary.physicsBodyType = Phaser.Physics.P2JS;    this.bottom_soil5_3 = this.stationary.create(this.game.width*0.9, this.game.height*0.95, 'fore_edged_persp');                for(var i = 0; i < this.stationary.children.length; i++){            this.stationary.children[i].body.setRectangle(2000, 60, 0, -40);            this.stationary.children[i].body.static = true;            this.stationary.children[i].body.setCollisionGroup(this.stationaryCollisionGroup);    }      // BOTTOM SOIL, NO PHYSICS    this.bottom1 = this.add.image(-100, this.game.height*0.79, 'fore_edged_persp');    this.bottom2 = this.add.image(this.game.width*0.3, this.game.height*0.79, 'fore_edged_persp');    // CANNONBALLS    this.cannon1 = this.game.add.sprite(-this.game.width*0.5, this.game.height*2, 'cannonball');    this.game.time.events.loop(1000, function() {    this.cannon1.x = this.rnd.integerInRange(-this.game.width*0.5, 0);    this.cannon1.y = -100;    this.game.add.tween(this.cannon1).to({x: this.rnd.integerInRange(0, this.game.width), y: this.game.height*0.8}, 1000, Phaser.Easing.Cubic.easeIn, true);    }, this)    //ANIMATIONS    this.exp = this.game.add.sprite(400, this.game.height/2, 'exp');    this.exp.anchor.setTo(0.5, 0.7);    this.exp.animations.add('exp_anim');    this.game.renderer.renderSession.roundPixels = true;    this.yAxis = p2.vec2.fromValues(0, 1);    this.game.physics.p2.updateBoundsCollisionGroup();        },      update: function() {    if (this.checkOverlap(this.bottom_soil5_3, this.cannon1))    {    this.exp.position.x = this.cannon1.position.x;     this.exp.position.y = this.cannon1.position.y;    this.exp.animations.play('exp_anim', 48);    }  },    checkOverlap: function(spriteA, spriteB) {        var boundsA = spriteA.getBounds();        var boundsB = spriteB.getBounds();        return Phaser.Rectangle.intersects(boundsA, boundsB);    }    };

 

http://ice.site44.com/

 

Still can't find the bug 

[jmp909]

probably because you launch cannonball (cannon1) on a timer, and so sometimes you have reset cannon1 to reference a new sprite, before the overlap check has run.

 

since your cannon1 is now referencing the sprite back at top left, it won't be overlapping the soil. (that will be the other original sprite with no reference pointer to it anymore)