old_blueyes

individual animation within group on overlap

Recommended Posts

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

};



 

Share this post


Link to post
Share on other sites

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')  
}

 

 

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.