boolean

Sprite and physics body seem to be in two different locations

Recommended Posts

Hi there

 

Is there a reason why the .body.x/y property on my sprite would be different to sprite.x/y? I've been trying to figure out all afternoon why I can't see to get the correct location, and it appears the sprite.x location is about a full width away from the actual sprite (the body has the correct coordinates). 

 

I've scaled the image up to 4, set the anchor to 0.5 and added it to a group. Would any of those have this effect? Is there any reason the body would be in a different location to the sprite? I can't imagine why the two wouldn't always be the same.

Share this post


Link to post
Share on other sites

A major cause is the sprite texture being cropped or the texture image having extra padding around it. I would check those two factors. Also, debug the body and sprite bounds so you can see what they are. In render():

 

game.debug.body(sprite, 'red', false);game.debug.spriteBounds(sprite, 'pink', false);

 

Are you manually defining sprite.width and sprite.height? You ought too. 

Share this post


Link to post
Share on other sites

A major cause is the sprite texture being cropped or the texture image having extra padding around it. I would check those two factors. Also, debug the body and sprite bounds so you can see what they are. In render():

 

game.debug.body(sprite, 'red', false);game.debug.spriteBounds(sprite, 'pink', false);

 

Are you manually defining sprite.width and sprite.height? You ought too. 

 

No cropping, padding or offsets. I tried your debug code and the body and spriteBounds appear to be in the same spot, which is interesting.

 

Maybe it's how I'm using the numbers. Originally I was trying to do a Phaser.Line to the four corners of my sprite so I could do an Phaser.Line.intersects check. When I noticed my laser was hitting the target while wildly off target I tried doing a debug.pixel to see where it thought the 4 corners were. Here's what I get:

 

phaser_strange_positions.png

 

:wacko:

Share this post


Link to post
Share on other sites

Aha! I figured out what is causing it...I'm just not sure why its happening. 
 
It's when I set the anchor point to (0.5, 0.5). For some reason that's moving the sprite coordinates way off center.
 
If you to this example page and paste in the following code, you'll see the same effect. I'm sure I'm missing something obvious here...
 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });function preload() {	game.load.spritesheet('gameboy', 'assets/sprites/gameboy_seize_color_40x60.png', 40, 60);}var sprite;function create() {        game.physics.startSystem(Phaser.Physics.ARCADE);	game.stage.backgroundColor = '#124184';	sprite = game.add.sprite(300, 100, 'gameboy', 3);	game.physics.arcade.enable(sprite);	sprite.body.immovable = true;		sprite.anchor.setTo(0.5, 0.5);  //this is being set to the bottom right corner instead of middle}function update() {}function render() {	game.debug.body(sprite);	    	//BODY  - RED        game.debug.pixel(sprite.body.x, sprite.body.y, 'red', 10);        game.debug.pixel(sprite.body.x + sprite.width, sprite.body.y, 'red', 10);        game.debug.pixel(sprite.body.x, sprite.body.y + sprite.height, 'red', 10);        game.debug.pixel(sprite.body.x + sprite.width, sprite.body.y + sprite.height, 'red', 10);                    //WORLD - GREEN        game.debug.pixel(sprite.world.x, sprite.world.y, 'green', 10);        game.debug.pixel(sprite.world.x + sprite.width, sprite.world.y, 'green', 10);        game.debug.pixel(sprite.world.x, sprite.world.y + sprite.height, 'green', 10);        game.debug.pixel(sprite.world.x + sprite.width, sprite.world.y + sprite.height, 'green', 10);                                        //SPRITE - BLUE        game.debug.pixel(sprite.x, sprite.y, 'blue', 10);        game.debug.pixel(sprite.x + sprite.width, sprite.y, 'blue', 10);        game.debug.pixel(sprite.x, sprite.y + sprite.height, 'blue', 10);        game.debug.pixel(sprite.x + sprite.width, sprite.y + sprite.height, 'blue', 10);}

Share this post


Link to post
Share on other sites

After some more experimentation, I think I know what is making this confusing.

 

Setting an anchor point moves the position of the texture that is assigned to a sprite object, but it does not change the position of the sprite object itself (as seen in this example). However, the physics body DOES move with the texture (not the sprite) when the anchor point is changed. Even more confusingly, game.debug.spriteBounds shows the box of the texture position (via the anchor point), not the sprite game object. This also means that because the sprite is not moving, the .world position also stays the same resulting in my original problem - the texture and the body being in two different places.

 

:wacko:

 

 

Share this post


Link to post
Share on other sites

Since Phaser 3, there is the Phaser.physics.arcade.body.syncBounds Boolean property. Setting this to True will align the physics body bounds to the visual bounds the associated image.

syncBounds :boolean

Whether to automatically synchronize this Body's dimensions to the dimensions of its Game Object's visual bounds.

Type:
  • boolean
Since: 3.0.0
Default Value:
  • false
Source: src/physics/arcade/Body.js (Line 682)
See:

 

 

 

From: Phaser 3 Documentation on Photonstorm's GitHub

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

  • Recently Browsing   0 members

    No registered users viewing this page.