Tweening

Chilli Source has a tweening library that can be used to change values over time based on an easing function (examples of different easing functions can be found here http://easings.net/. Note: not all are currently available but will be added over time).

The most common use of tweening is to animate the position, rotation or colour of an entity or widget; so let’s focus on that with a simple example of sliding in a button with some overshoot:

In the header file of your state or system add the following include and member:

#include 
CSCore::EaseInOutBackTween m_tweenButton;

Notice that the tween is a templated type. In this example we are sliding the button in from the left of the screen to the centre and are therefore tweening the x coordinate which is an f32 (we could of tweened on a Vector2 if we wished to update x and y).

Next we instantiate the tween with a duration, start and end value. We are using the EaseInOutBack tween in this example which overshoots at both ends with acceleration and deceleration:

//We are using relative coords so off screen is half the screen width to the left and on 
//screen is centre of the screen.
const f32 k_offX = -0.5f;
const f32 k_onX = 0.0f;
const f32 k_durationSecs = 1.0f;
const f32 k_delaySecs = 0.0f;
m_tweenButton = CSCore::MakeEaseInOutBackTween(k_offX, k_onX, k_durationSecs, k_delaySecs);

We then call play on the tween and give it a play mode (i.e. looping, ping-pong, reverse, etc); in this example we only want to play once:

m_tweenButton.Play(CSCore::TweenPlayMode::k_once);

Now we update the tween, with respect to time, and get the value based on the easing equation:

auto newXPos = m_tweenButton.Update(in_dt);

Then update the position of the button with the tweened value:

m_playButton->SetRelativePosition(newXPos, 0.0f);

Note: Currently the tween update must be called manually. There is every chance in the near future that for entity and UI objects this will be offloaded to a state system which will conveniently update the correct properties.

Sometimes it is useful to perform actions when the tween starts or completes (in this example we may wish to disable user interaction on the button until the tween ends). This is achieved by setting the start or end delegates prior to playing:

m_tweenButton.SetOnEndDelegate([](CSCore::Tween* in_tween)
{
    //This will be called when the tween ends
});

That’s all there is to it. Try experimenting with different easing functions and chain multiple together using delays or the end delegate to create some interesting ceremonies.