Smooth Animation when rotating sprite

SDK Get Help
, , ,
1

Hi everyone,
I am trying to create a simple but complete game to familiarize myself with the SDK.
I am trying to reproduce an animation similar to the one displayed in the Designing for Playdate page. Does anyone know how to get such a smooth animation? I have been trying in many different ways but can't get anything good at all!

Thanks

2

I assume you're talking about this section in Designing for Playdate?

I'm not sure what method you're using in your GIF, but as noted in Designing For Playdate, using drawRotated() can result in a distorted image.

However if you use pre-render your frames, you can use a rotation tool in your image editor of choice, then clean up each frame by hand.

EDIT: I forgot to say, that I think the rotation looks good as its stands IMO! What in particular do you not like about it? Knowing what specifically would be "smoother" would help with more direct suggestions :slight_smile:

3

Hey thank you for looking into this. The rotation looks good indeed but this is not my catpure as it is taken directly from the section you linked to. My question is more about to get to this kind of rotation (especially the easing part where you go back into a straight line). I am not too worried about the sprite/graphics per se, but I really wonder how to render this smooth animation programmatically.
I hope it makes more sense with my explanation!
Thanks

4

Doh, totally missed that GIF in the doc, I was just looking at the ghost :man_facepalming:

I'm not sure what the control scheme is in the GIF, or even if it's real gameplay vs scripted, so how I'd recommend go about reproducing it depends on what you're looking for. Here's two scenarios:

  1. If you're looking for free-steering with the crank (which I assume is being used in the GIF) you probably could get away with just directly mapping the angle of rotation to the crank angle. You could also have the car's angle rotated towards the crank angle, and use an easing function to smooth it.
  2. If you're looking for something a little more constrained, where the player simply changes lanes with an up/down button press, I'd again use an easing function on the angle and y-position of the image to smoothly move it.

Let me know if these was enough to answer your question, if not, I can write some code for a small proof-of-concept :slight_smile:

5

You're right, the easing function seems to be the way to go. I think the input buttons can be used to steer, but the easing function would be used when reverting to a straight line (no input for instance).
I am just not sure how to use the easing function with the rotation of the sprite (apologies if I missed this in the doc...)

6

Use easing as the index for the image table of pre-rendered car orientations.

7

Thanks @matt . The question is more on how to use these functions when you don't pre-render the sprite. I couldn't make it work, any idea how to get this done?

8

I would really recommend pre-rendering the sprite. Even if you do it all in your game and save out the images to disk, then load them in as pre-rendered. It's best for performance and battery to not be re-rendering these things over and over.

You would use easing to manage the rotation value.

Instead of saying (pseudo code)
rotate(angle)

you would do
rotate(easing(angle))

The easing maps your linear value to the easing curve you choose.

Take a look at: SDK/Examples/Single File Examples/animator.lua

9

Matt is correct - pre-rendered sprites are the best for performance. However its not always necessary and it's perfectly fine to rotate a sprite at runtime.

Since I enjoy reverse engineering things, I've attached a project that recreates the GIF from the design docs. It's not an exact recreation, but hopefully it gets you pointed in the right direction.

car-example
car-example.zip (1.9 KB)

2 Likes
10

That's awesome! Thank you for putting this together, let me have a look!

1 Like