Sprite and physics body seem to be in two different locations

[boolean]

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.

[ForgeableSum]

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. 

[loafer]

The body position will differ from the sprite position if there is an offset defined. Could you check if this property is anything other than 0? https://phaser.io/docs/2.3.0/Phaser.Physics.Arcade.Body.html#offset

[boolean]

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:

 

 

[boolean]

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

[boolean]

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.

 

 

 

[Psychic_Supernova]

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:

• Phaser.GameObjects.Components.GetBounds#getBounds

 

 

 

From: Phaser 3 Documentation on Photonstorm's GitHub