Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411275 Posts in 69323 Topics- by 58380 Members - Latest Member: bob1029

March 28, 2024, 09:31:17 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)individual animation within group on overlap
Pages: [1]
Print
Author Topic: individual animation within group on overlap  (Read 484 times)
old_blueyes
TIGBaby
*


View Profile
« on: June 29, 2018, 06:28:47 AM »

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.

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

};
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic