Sign in to follow this  

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

Share this post

Link to post
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?

Share this post

Link to post
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?

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.