How to set the position of sprite body aligned when not using tiled?

Phaser 3
1

I have a block image as “wall”, and I need to resize its display size and body size so that its boundary would feel like “wall” when a player walks around it.

I have “small wall” (64 * 48) and “big wall” (64 * 2, 48 * 2), and they are placed on positions kind of like tile ( every 64 on x, 48 on y, I manually calculate the number). But after setting the size and offset of the body, these two kinds of bodies are not aligned on x or y.

// small wall
sprite.setSize(64, 48).setOffset((134 - 64) / 2, (100 - 48));
sprite.setDisplaySize(110, 100);
// big wall
sprite.setSize(64 * 2, 48 * 2).body.setOffset((134 - 64 * 2) / 2, (100 - 60));
sprite.setDisplaySize(110 * 2, 100 * 2);

2020_07_26_12_01_46-size-and-place-of-sprite-body
2020_07_26_12_01_46-size-and-place-of-sprite-body841×460 48.2 KB

So I wonder whether there is a way to set the position of the body directly and then adjust the offset to change the image position. I tried using sprite.setOrigin(0) , and this would set the body at the aligned position. But I don’t know how to move the display image then.

sprite.setOrigin(0);
sprite.setSize(64, 48, false);
sprite.setDisplaySize(110, 100);

2020_07_26_12_36_54-sprite-origin-body

Or, is there a better way to place the walls? Thank you for advise.

2

Hi,
Sorry i don’t know how to solve your problem, but i suggest you to use Tiled for the map, it makes editing the map so easy once you get the config.

3

BlunT76, thank you for your advise :slight_smile:.
But I am trying to achieve a kind of perspective, making it looks more like 3D by resizing the body and depth of sprites.

2020_07_27_11_40_32-sprite-before-and-behind-wall

Actually, I want to imitate the visual effect of box-head, like below, with players standing before or behind walls. Above was my idea, and I wonder whether Tiled would bring this?

boxhead-bh-2play-ss.jpg.pagespeed.ce.P_TcvfF9-_

Besides, I want to align the walls so that I could easily manage them, otherwise walls would overlap with each other.

4

I think you can achieve this result with Tiled, with layers:
A ground layer with no collision, with setDepth(0)
A collide layer for the parts of the wall that collides, with setDepth(10)
Your player with a setDepth > 10
Another layer for the parts of walls with no collision, with setDepth > player.depth

5

Thank you for advise! To be honest, I have not tried Tiled, and your method seems a little complicated.

And luckily, I found the method to change image position, using sprite.setDisplayOrigin().

  sprite.setSize(64, 48);
  sprite.setDisplaySize(110, 100);
  sprite.displayOriginY += 20;
// sprite.setDisplayOrigin(xx, yy);

And I need to put small walls on (n * 64, n * 48), big walls on (n * 64 + 32, n * 48 + 24). The offset helps align the body.

2020_07_27_17_50_58-aligned-body