Working with values

Mark Knol edited this page Oct 18, 2017 · 29 revisions

Understanding Value wrappers

AnimatedFloat / Value<A> for properties (like x, y, rotation etc..)

Value<A> wraps a single value, notifying listeners when the value changes.

Why does sprite.x = 10 does not work? Because of AnimatedFloats, which extends Value<A>. Many properties in Flambe are AnimatedFloats. Using animateTo-function on an AnimatedFloat value makes it dead simple to say, spin a sprite or fade out a sound.

:thought_balloon: Note: To change the actual value, you should use the underscore.

Some examples

// Direct set value
sprite.x._ = 130;

// animate to 130px (absolute) with easing
sprite.x.animateTo(130, 1, Ease.backInOut); 

// animate += 10px (relative) with easing
sprite.x.animateBy(10, 1, Ease.backInOut); 

// coin flip animation
// scales 20 times from 1 to -1 at 0.8 seconds per flip
sprite.scaleX.behavior = new Sine(1, -1, 0.8, 20); 

// shake animation
sprite.x.behavior = new Jitter(sprite.x._, 20); 
sprite.y.behavior = new Jitter(sprite.y._, 20); 

// Edit global volume
System.volume._ = 0.5;

Value wrappers for several types

System.hidden._ // Bool
System.stage.orientation._ // Orientation

Listen to change events

sprite.x.changed.connect(function(to, from)
{
  trace('sprite x-pos changed from $from to $to');
});

Easings

Flambe supports a lot of common easing functions. An easy cheatsheet for choosing the right easing can be found here http://easings.net/en

Animation and timing

The classes in the flambe.script-package provide a way to compose complex animations. The Script component can be added to an Entity to give it some scripted behavior.

    var script = new Script();

    // First spin a sprite, and then fade out a sound
    script.run(new Sequence([
        new AnimateTo(someSprite.rotation, 360, 1),
        new AnimateTo(somePlayback.volume, 0, 1),
    ]));

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

    entity.add(script);

More on composable animations can be found in this blogpost.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.