Sign in to follow this  
QLNEO

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.

598a3d9854065.png

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.

598a3e1b53d88.png

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?

Share this post


Link to post
Share on other sites

First, make all frames of your animation as large as largest frame in it - atlas tools will trim empty space, so there is no waste,
Second, position you characters within frame so it is convenient for you - see example below. Anchor 0.5, 1 can be used for all frames:

frames.png.185f3271f204a16370f3c8dcfd847f8c.png

Share this post


Link to post
Share on other sites

Hmm.. The idea of making each frame as large as needed is good and I even thought of it at some point, but if the atlas trims empty space anyway, won't that render these efforts useless?

Share this post


Link to post
Share on other sites

But aren't sprite dimensions defined by the atlas software itself? I've been creating the spritesheets directly in my paint software and use the atlas tool only to generate the atlas, so maybe that's the problem?

Share this post


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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.