individual animation within group on overlap

[old_blueyes]

Hi,

I hope that I find you well, I am a little stuck.

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));
                
    },
    

};

 

[old_blueyes]

Anyone? Please am willing to make a donation for your efforts.

[scope2229]

Hi old_blueyes it looks like your using phaser 3 not phaser 2.

Also place the overlap outside the group for each function.

basically though for phaser 3 NOT 2 i do this

create my group inside create function

for the game im working on i have two enemies so far

 

this.enemies = this.physics.add.group({
  defaultKey: 'tai_fighter1'
})
//TaiBomber
this.taiBombers = this.physics.add.group({
  defaultKey: 'taiBomber'
})

 

then inside my update function (the main game loop)

this.physics.add.collider(this.player, this.enemies, this.shipCollision, null, this)
this.physics.add.collider(this.player, this.taiBomber, this.shipCollision, null, this)
this.physics.add.collider(this.bullets, this.enemies, this.bulletKillsEnemy, null, this)
this.physics.add.collider(this.bullets, this.taiBomber, this.bulletKillsEnemy, null, this)

Finally i set my call back functions.

  shipCollision(player, enemy, taiBomber){
    console.log("explode")
    let explosion = this.explosions.create(enemy.x, enemy.y, 'explosionTai')
    enemy.destroy()
    explosion.anims.play('explosionTai')
    explosion.on('animationcomplete', () => { explosion.destroy()})
    this.playerHP -= 10;
    this.registry.set('playerHP', this.playerHP);
  }
  bulletKillsEnemy(bullet, enemy){
    let explosion = this.explosions.create(enemy.x, enemy.y, 'explosionTai');
    enemy.destroy();
    bullet.destroy();
    explosion.anims.play('explosionTai');
    explosion.on('animationcomplete', () => { explosion.destroy()});
    this.score += 10;
    console.log(this.score);
    this.registry.set('score', this.score);
  }

For yourself i would think you are jumping then running again. it might be best to create the running and jumping all in one sprite then rather than call a new sprite like i do here you could just play the animation of that sprite.

You could also then set the frames per second based on your horses speed so the animation is fast and slow.

so i would have something like this.

create(){
  this.horseGroup = game.add.group({key: 'horsepng'});
  let horseSpeed = 160;
  let horseJumpSpeed = horseSpeed / (a number that makes the fps reasonable)
  this.anims.create({
    key: 'jumpHorseyJump',
    frames: this.anims.generateFrameNumbers('horsepng', { start: 0, end: 4 }),
    frameRate: horseJumpSpeed,
    repeat: -1
  })
}
update(){
  this.physics.add.collider(this.horseGroup, this.jumpPoint, this.horseJumping,null, this)
}
horseJump(horseGroup, jumpPoint){
  horseGroup.play('jumpHorseyJump')  
}