Tweening

Contents

• What is Tweening?
• Easing
• Uses for Tweening
• Gotchas
• Tweening and Physics
• Additional Reading

What is Tweening?

Tweens. We’re not talking about pre-teens.

Instead, we’re talking about a powerful ability to bring numerical properties of actors to a destination value over time.

Tweens apply to the following properties.

• X,Y Position
• Angle
• Scale (Size)
• Opacity (Fading)

How To Tween

All Tweens are initiated using blocks under the Actor > Tweening category.

Easing

You may wonder what the final dropdown in each tweening block is all about. We call this the Easing Function, or Easing for short.

Easing adds “elasticity” to the tweening effect in different ways that are best experienced in a live demo. Without Easing, the tweening effects would feel flat and boring.

(View the Demo)

Uses for Tweening

Use tweens to add visual flair and polish to your game. How so?

• Slide buttons off the screen when exiting a menu.
• Grow a button when your mouse rolls over it.
• Rotate an object to provide visual affordance or flair.
• Fade out elements that are inactive or not meant to be touched.

Tweens can make all the difference between a game that feels polished and one that is functional but feels raw.

Next time you play a game, observe where tweens are used. You’ll be surprised to see how pervasive they are!

Gotchas

Falling Short

On occasion, you may notice that a tween falls a little short of its “destination.”

This is particularly noticeable when rotating an actor (by say, 90 degrees) and expecting it to finish up at the target value. Due to timing imprecision, this is not guaranteed. We’ll fix this in a future version of Stencyl.

We encourage you to employ a workaround in which you manually set the value in the future.

Avoid 0 second durations.

The other gotcha is trying to tween with a 0 second duration. Avoid doing this if possible and use a small, positive value instead such as 0.01 seconds.

Scaling sometimes doesn’t scale up the collision bounds.

On iOS or if you specify an Actor to not auto-scale its collision bounds, you will observe that scaling an Actor up or down will, as expected, not change its collision bounds accordingly.

Tweening and Physics

When sliding, rotating or scaling actors, do not expect the physics to act ultra-reliably during this time.

For example, if you are sliding an actor to the right, and it slams into a box, it may sail past the box instead. Why? Because tweening is directly setting the position (or rotation) of the actor continually.

If accurate physics are desired, avoid using tweens and use conventional methods instead: setting the actor’s velocity or angular velocity, or using forces to push the actor or twist it.

Further Reading

One of our veterans has created a slideshow form demo to follow for further reading.

View it on Kongregate!

Summary

• Tweens let you apply gradual changes to an Actor’s property over time.
• Tweens are not 100% accurate and do not guarantee arrival at the exact final value.
• Avoid tweening with a 0 second duration. Use a small value like 0.01 instead.
• Physics becomes inaccurate (it works but is like directly setting position) when using tweening to move an Actor. Use forces or velocity setting instead.

Commenting Guidelines