Hi,
I hope that I find you well, I am a little stuck with my Phaser code.
I have a group of sprites, that on overlap of another jump sprite image, I require it to play the jump animation, but only on the individual sprite within the group, when it has overlapped.
My code, is pretty much working how I want apart from this issue, in the current build, on overlap the animation will play for all sprites within the group (not an individual basis), and will trigger again (beyond the original, overlap) if another sprite hits the jump image.
Appreciate any assistance.
var game;
var globalParams = {
calculatedWidth: 1350,
calculatedHeight: 900
}
var GameResolution = {
_1350: 1350,
_960: 960
};
function calculateSize() {
// Get Pixel Width and Height of the available space
var w_w = window.innerWidth * window.devicePixelRatio;
var w_h = window.innerHeight * window.devicePixelRatio;
var g_w = w_w;
// We prepared all assets according to aspect ratio of 1.5
// Since we are going to use different assets for different resolutions, we are not looking at the resolution here
var originalAspectRatio = 1.5;
// Get the actual device aspect ratio
var currentAspectRatio = g_w / w_h;
if (currentAspectRatio > originalAspectRatio) {
// If actual aspect ratio is greater than the game aspect ratio, then we have horizontal padding
// In order to get the correct resolution of the asset we need to look at the height here
// We planned for 1350x900 and 960x640 so if height is greater than 640 we pick higher resolution else lower resolution
if(w_h > 640){
globalParams.selectedResolution = GameResolution._1350;
globalParams.calculatedHeight = 900;
globalParams.calculatedWidth = w_w * (900 / w_h);
} else {
globalParams.selectedResolution = GameResolution._960;
globalParams.calculatedHeight = 640;
globalParams.calculatedWidth = w_w * (640 / w_h);
}
} else {
// If actual aspect ratio is less than the game aspect ratio, then we have vertical padding
// In order to get the correct resolution of the asset we need to look at the width here
if(w_w > 960){
globalParams.selectedResolution = GameResolution._1350;
globalParams.calculatedWidth = 1350;
globalParams.calculatedHeight = w_h * (1350 / w_w);
} else {
globalParams.selectedResolution = GameResolution._960;
globalParams.calculatedWidth = 960;
globalParams.calculatedHeight = w_h * (960 / w_w);
}
}
}
window.onload = function () {
calculateSize();
game = new Phaser.Game(globalParams.calculatedWidth, globalParams.calculatedHeight, Phaser.AUTO, 'gameDiv');
game.state.add('main', mainState);
game.state.start('main');
//game.forceSingleUpdate = true;
}
var yourGroup;
var mainState = {
preload: function() {
if(!game.device.desktop) {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.setMinMax(game.width/2, game.height/2, game.width, game.height);
}
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
// Background
game.stage.backgroundColor = '#71c5cf';
// Horse Sprites
for (var i = 1; i <= 3; i++) {
this.load.spritesheet('runner'+i, 'assets/horse-'+i+'.png', 368, 300);
}
// Other Sprites
game.load.image('fence', 'assets/jumpfence1.png');
game.load.image('track', 'assets/grasstrack1.png');
},
create: function() {
this.jumpGroup = game.add.group();
this.timer = game.time.events.loop(12000, this.addNewJump, this);
this.horseGroup = game.add.group();
this.horseGroup.enableBody = true;
this.horseGroup.physicsBodyType = Phaser.Physics.ARCADE;
this.addHorse(this);
},
addHorse: function() {
for (var i = 1; i <= 3; i++) {
var posY = game.rnd.integerInRange(300, 500);
var posX = game.rnd.integerInRange(30, 120);
geegee = this.horseGroup.create(posX, posY, 'runner'+i); // Add 'sprite' to the group
this.horseGroup.sort('y', Phaser.Group.SORT_ASCENDING);
geegee.animations.add('gallop', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 20, true);
geegee.animations.add('jump', [4, 11, 12, 13, 14, 15, 16, 17, 4], 14, false);
}
},
addJump: function(x, y) {
var fence = game.add.sprite(x, y, 'fence');
this.jumpGroup.add(fence);
game.physics.arcade.enable(fence);
fence.body.setSize(50, 350, 105, 0);
fence.body.velocity.x = -500;
fence.checkWorldBounds = true;
fence.outOfBoundsKill = true;
},
addNewJump: function() {
this.addJump(game.world.width - 40, this.game.height - this.game.cache.getImage('fence').height);
},
update: function() {
this.horseGroup.forEach(function(item) {
// jump fences
this.game.physics.arcade.overlap(this.horseGroup, this.jumpGroup, this.fenceJump, null, this);
this.hurdle();
// move up and down field
if (item.x > game.width - 650) {
item.x = game.width - 650;
item.body.velocity.x += game.rnd.integerInRange(-5, 0);
} else {
item.body.velocity.x += game.rnd.integerInRange(-5, 5);
}
if (item.x < 50) {
item.x = 50;
item.body.velocity.x = 0;
}
}.bind(this));
},
fenceJump: function(horseGroup,jumpGroup) {
this.horseGroup.forEach(function(item) {
item.body.velocity.y = 1;
hurdleFence=false;
}.bind(this));
},
hurdle: function() {
this.horseGroup.forEach(function(item) {
if(!this.hurdleFence){ //check if we already have -50 gravity or not
if(item.body.velocity.y > 0){
item.events.onAnimationStart.add(airJump, this);
function airJump() {
item.body.velocity.x = 5;
item.body.gravity.x = 100;
}
item.animations.play('jump');
item.events.onAnimationComplete.add(groundGallop, this);
function groundGallop() {
item.body.velocity.y = 0;
}
} else {
item.animations.play('gallop');
}
}
}.bind(this));
},
};