phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.05k stars 7.09k forks source link

setOrigin on container #4943

Closed blopa closed 4 years ago

blopa commented 4 years ago

Hello peeps.

I'm having a lot of fun with Phaser this past weeks, and I'm still learning. Recently I started working in a game like Pokemon - player movement, sprites, items, everything is set within tiles size (in my case 16x16). So whenever I create a new GameObject, I set origin to x:0, y:0.

Everything was working fine until I started working with Containers. When I create sprites for the container, all of them have Origin(0, 0), so when I add them to the container and set container size and position, the sprites are shown in the right place visually, but they are actually offset with the container itself.

Now when I do scene.input.setHitAreaRectangle() passing the container's position and width and height, the hit area is off, because the container itself is actually off, but we can't see this as the container and the hit area are invisible. This was really hard to debug.

To fix this now I'm offsetting the sprites created position by using the container origin, but it would be nice to be able to set containers origin.

Now the question is, is this a feature that will be implemented eventually or is it containers like this by design? And if they are, why?

Thanks again for everything.

samme commented 4 years ago

4201

blopa commented 4 years ago

Thanks @samme ! Since containers already have origin in them, would just creating the setter solve this problem?

photonstorm commented 4 years ago

There are no plans to add in Container origin as containers have no dimensions. A Containers origin is always 0 x 0, so if you require your sprites to be centered around that, you need to factor this in when setting their positions. The same goes for hit areas.

samme commented 4 years ago

You can do, e.g.,

this.input.enableDebug(container);

to see the hit area.