lgibson02

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

Recommended Posts

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.

image.png.57502d4e96b6687068eb1cf77d3712f2.png

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:

image.png.7cc999ff9c4ad1f2ed2f93cbc347832f.png 

Here is a crude diagram I made in microsoft paint:

image.thumb.png.da6dffa7776e8dca8cd5a5eeb8d6b762.png

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:

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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. :)

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.