Jump to content

Collide world bounds with atlas sprite colliding in center not bottom


Recommended Posts


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.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);

    // 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;
    }else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
        facing = 'left';
        player.body.velocity.x = -90;
    }else if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
        if (facing == 'right') {
        if (facing == 'right') {


Screen Shot 2017-01-09 at 14.05.16.png

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...