Collide world bounds with atlas sprite colliding in center not bottom

[icetimux]

Hello,

I am trying to make a platformer and have loaded my sprite with atlas, it works perfectly until I add collision.

to keep the example simple I am using collideWorldBounds and the problem is that the sprite is colliding in the center and not the bottom where the little feet are.

here are some screenshots and code snippets.

var game = new Phaser.Game(300, 200, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render});

function preload() {
    this.game.load.atlas('player', 'assets/player/player_full.png', 'assets/player/player_full.json');
    game.load.image('bg', 'assets/bg.jpg');
    game.load.image('ground', 'assets/world/ground.png');
}

var player;
var facing = 'right';

function create() {
    // START
    game.physics.startSystem(Phaser.Physics.ARCADE);

    // ADD SPRITES
    game.add.image(0, 0, 'bg');
    game.stage.backgroundColor = "#4488AA";

    // PLAYER
    player = game.add.sprite(10, 176, 'player');

    game.physics.enable(player, Phaser.Physics.ARCADE);
    player.animations.add('idle_right', ['idle_1_right.png', 'idle_1_right.png', 'idle_2_right.png', 'idle_3_right.png'], 4, true);
    player.animations.add('running_right', ['running_1_right.png', 'running_2_right.png', 'running_3_right.png', 'running_4_right.png', 'running_5_right.png', 'running_6_right.png'], 9.5, true);

    player.animations.add('idle_left', ['idle_1_left.png', 'idle_1_left.png', 'idle_2_left.png', 'idle_3_left.png'], 4, true);
    player.animations.add('running_left', ['running_1_left.png', 'running_2_left.png', 'running_3_left.png', 'running_4_left.png', 'running_5_left.png', 'running_6_left.png'], 9.5, true);

    player.animations.add('jump_right', ['jump_1_right.png', 'jump_2_right.png', 'jump_3_right.png', 'jump_3_right.png', 'jump_4_right.png', 'jump_5_right.png', 'jump_6_right.png'], 11, true);
    player.animations.add('jump_left', ['jump_1_left.png', 'jump_2_left.png', 'jump_3_left.png', 'jump_3_left.png', 'jump_4_left.png', 'jump_5_left.png', 'jump_6_left.png'], 11, true);
    player.animations.play('idle');

    // WORLD
    game.physics.arcade.gravity.y = 250;
    game.physics.enable(player, Phaser.Physics.ARCADE);
    player.body.collideWorldBounds = true;
}

function update() {
    player.body.velocity.x = 0;

    if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        facing = 'right';
        player.body.velocity.x = 90;
        player.animations.play('running_right');
    }else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
        facing = 'left';
        player.body.velocity.x = -90;
        player.animations.play('running_left');
    }else if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
        if (facing == 'right') {
            player.animations.play('jump_right');
        }else{
            player.animations.play('jump_left');
        }
    }else{
        if (facing == 'right') {
            player.animations.play('idle_right');
        }else{
            player.animations.play('idle_left');
        }
    }
}

 

[icetimux]

UPDATE: setting the sprite body.height allows me to collide correctly.

Is there a way to automatically get the sprite height?

[samme]

The body height should be identical to the sprite texture height (unless you resize the body).

What does 

game.debug.body(player, 'rgba(255,255,0,0.5)');

look like?

[icetimux]

10 hours ago, samme said:

The body height should be identical to the sprite texture height (unless you resize the body).

What does 

game.debug.body(player, 'rgba(255,255,0,0.5)');

look like?

Like this.

[drhayes]

Try "player.anchor.set(0.5, 1);" This will set the anchor of the texture in the middle horizontally and at the bottom vertically, probably what you want in a platformer.

[icetimux]

On 10/01/2017 at 4:57 PM, drhayes said:

Try "player.anchor.set(0.5, 1);" This will set the anchor of the texture in the middle horizontally and at the bottom vertically, probably what you want in a platformer.

Works beautifully! thanks for answering. Can you elaborate a little on what it does?

[drhayes]

I always get this wrong. I hope someone steps in and corrects me.

The anchor point sets the "origin" of the texture. When you position a sprite at (x, y), you can use the anchor to determine what pixel that is on your texture. As such it determines where the rest of your texture is. Does that make sense?

[samme]