Composable animations with Flambe

Animating sprites in Flambe is very easy, when working with AnimatedFloats. Let me introduce another way of animating things, that can be very helpful when creating games. This approach is maybe different than you are used to, but can be very powerful.

Take a look at this code example. This is the most basic form of animating values in Flambe.

Animate the x-position of a sprite to 100px (absolute position) with some easing:

mySprite.x.animateTo(100, 1, Ease.backInOut);

The example below is actually the same as the first code example, but makes use of the Script. Basically you use a Script, that runs an Action. A Script manages a set of actions that are updated over time. Scripts simplify writing composable animations.

// create a script
var script = new Script();

// run an action
script.run(new AnimateTo(mySprite.x, 100, 1));

// add the script (which is a Component) to an Entity.
System.root.add(script);


Note on adding Script
In this case I just added the Script to the root. Remember, an Entity can only have one type of Component at the same time. So if you want to run multiple scripts, wrap in new Entities. Mostly I add the script to the most relevant Entity.

If you want to run multiple actions sequentially, you can add a Sequence, which is also an Action, which can run other actions. You’ll get the idea.

// First move a sprite horizontally, then move it vertically
script.run(new Sequence([
new AnimateTo(mySprite.x, 100, 1),
new AnimateTo(mySprite.y, 100, 1)
]));
Now you can see a bit of the power of the Script class, since this is not easy to do with the basic tween in the first example. Let’s take it further!
If you want to do both things at the same time, but still using the Script, you can add them as Parallel actions. If you want to do everything in parallel, you don’t need a script of course.

// prepare things to do at the same time
var parallelActions = new Array();
parallelActions.push(new AnimateTo(mySprite.x, 100, 1));
parallelActions.push(new AnimateTo(mySprite.y, 100, 1));

// First move the box diagonal (horizontal and vertical), then rotate the box to 45degrees
script.run(new Sequence([
new Parallel(parallelActions),
new AnimateTo(mySprite.rotation, 45, 1)
]));
Now your able to run multiple actions, you can mix up endlessly.

The Script class isn’t only for animating stuff, you can also use it for repeating things. Note Haxe has also its own buildin Timer, so if you only want to delay things, I would go for that. Also, since the actions makes use of Flambe’s gametimer, it would be possible to make slowmotion effects using the SpeedAdjuster, and make the delays relative to that speed (not tested, and not illustrated in any example).

// Call a function every two seconds
script.run(new Repeat(new Sequence([
new CallFunction(function () {
trace(“Tick”);
}),
new Delay(2)
])));

entity.add(script);

To stop the script, call
script.stopAll()

If you want to animate normal Floats in Haxe, I suggest to use Actuate, which is the TweenLite of Haxe. (You know what I mean, Actionscript developers). Actuate does not work with Flambe’s Animated float, and could have some NME/OpenFL dependencies.

There are several build-in Actions in Flambe you can use:
AnimateBy, AnimateTo, Delay, CallFunction, FirstOf, MoveBy, MoveTo, Parallel, Repeat, Sequence, Shake

Because writing simple delayed animation can be a pain, I’ve also created a Tweener class, for (delayed) tweening AnimatedFloats, with a simple onComplete.

// syntax: Tweener.to(object:Dynamic, seconds:Float, params:Dynamic, delay:Float = 0, onComplete:Void->Dynamic = null, ?easing:EaseFunction)
Tweener.to(mySprite, 1, {x:100, y:100}, .5, onComplete, Ease.backInOut);
// moves a sprite diagonal after half a second using backInOut-easing, and then calls onComplete function.

Have fun!