Sprite size does not change when cropped, ends up shown in wrong position

[lgibson02]

Hello, I've recently started upgrading a game I'm making from Phaser 2 over to Phaser 3. While doing so, I've stumbled into a problem with using the .setCrop method for cropping sprites. The game is supposed to be a mario maker clone of sorts, so your supposed to be able to create and edit levels. In the level editor which is shown below in a screenshot you have a hotbar to contain different items you may place, each item is just a sprite of course. Sprites which are bigger than 16x16, such as the player sprite which is 24x32 must be cropped down to 16x16 so that they do not show outside of the hotbar slot.

When I was writing the game in Phaser 2 this was easily achieved by doing something like this in the case of the player sprite:

rect = new Phaser.Rectangle(4, 2, 16, 16);
playerIcon.crop(rect);

What this would do was display only a 16x16 part of the sprite and it would change the sprite size to 16x16 as well. This worked perfectly and would give me what is shown in the screenshot you see above.

When changing to Phaser 3 I did something like this:

playerIcon.setCrop(4, 2, 16, 16)

However what I found was, while this does make it so that only a 16x16 part of the sprite is displayed, the sprite size still remains at 24x32. So all it's really doing is blanking out any pixel which is not in the specified area. This ends up causing problems with the appeared position of the sprite as shown here:

 

Here is a crude diagram I made in microsoft paint:

Believe it or not, I did actually spend a lot of time on that one.

Since I would not like to show my game at this time but I would like to demonstrate my problem better I have made two (what should be) equivalent demos. One uses Phaser 2, the other uses Phaser 3. They should be exactly the same but as I've explained the playerIcon at the top left corner ends up in the wrong position. You can have a look at both demos for yourself here:

• Phaser 2 Demo
• Phaser 3 Demo

I realise this may seem like a very small problem but I can't for the life of me figure this one out. Any help is appreciated, thank you very much.

[mapacarta]

It seems like this is the normal behaviour of the Phaser 3. This is what written in the code comments:

* The crop is a rectangle that limits the area of the texture frame that is visible during rendering.
* 
* Cropping a Game Object does not change its size, dimensions, physics body or hit area, it just
* changes what is shown when rendered.

 

Also your game's graphics look quite nice. Good job

[lgibson02]

12 hours ago, mapacarta said:

It seems like this is the normal behaviour of the Phaser 3. This is what written in the code comments:

* The crop is a rectangle that limits the area of the texture frame that is visible during rendering.
* 
* Cropping a Game Object does not change its size, dimensions, physics body or hit area, it just
* changes what is shown when rendered.

I guess I should read the documentation better, I figured it might have been intended. So if this is the case, how can I also change the sprite size. So far my attempts to do this have just ended up stretching the sprite which is not what I want.

 

12 hours ago, mapacarta said:

Aso your game's graphics look quite nice. Good job

Thank you, I do my best. 

[mapacarta]

You can try using setSize() method. But I am a little bit confused with what exactly setSize method does. I am not sure whether it sets the sprite's width and height or its body's. Or both. I remember having a little problem with setSize sometime ago. I should read the docs I guess

[lgibson02]

52 minutes ago, mapacarta said:

You can try using setSize() method. But I am a little bit confused with what exactly setSize method does. I am not sure whether it sets the sprite's width and height or its body's. Or both. I remember having a little problem with setSize sometime ago. I should read the docs I guess

I've tried it out and it while it does change the width and height. It doesn't seem to change the displayWidth and displayHeight which I think is what matters. But I'm unable to change these without the sprite being stretched.

[rich]

If you translate your sprite position by -crop.x -crop.y it'd offset it by whatever amount you cropped it by.

[lgibson02]

7 hours ago, rich said:

If you translate your sprite position by -crop.x -crop.y it'd offset it by whatever amount you cropped it by.

This is what I had eventually ended up doing but I thought there might be a 'proper' way to do it that I had missed. I guess not. Anyway thanks for the help.

[rich]

The "proper" way would be to create a Texture Frame and use that instead of cropping, but I'm not sure it's worth the effort tbh.