Jump to content

Any way to define a "center" for each frame in a sprite atlas?

Recommended Posts

Whenever we animate a sprite or image from an atlas, our reference is a (x,y) coordinate that would correspond to the top left of each frame. However, that has some issues when a frame has different dimensions from the previous.


Suppose these two frames (i misspelled there, it should be "frame 1" and "frame 2" instead) represent, respectively, the object standing still and the object in movement (that's supposed to be motion blur). Frame 2 has a bigger length than Frame 1, so, relative to its coordinates, the face is more to the right. I want it to look something like this when in movement (let's suppose linear velocity):

598a3dee15e19.png(in dislocation)

For each passing frame, the face is equally distant. The dark red lines represent the spacing between the face in each frame.


The red lines represent the (x,y) coordinates in each frame. It's equally spaced. But, since the sprites in movement are larger, between the first and second frames the face is more distant, whereas between the last and second-to-last frames the face looks closer (as shown by the dark red line). The linear movement doesn't look so linear now because of the motion blur.

I tried using pictures to be more clear, but I'm not sure if you follow. Having said that, I bet this is a very common problem, so I'm fairly sure this is a known situation. What's the best solution in Phaser?

Link to post
Share on other sites

Whenever your software trims the white space, the original dimensions are recorded along with the difference between the origin and trimmed dimensions. When imported into Phaser, Phaser will create a texture the size of the original sprite, and offset the trimmed image by the difference within the dimensions of the original.

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.

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.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...