Introduction
One of Booty5’s biggest and best features is its animation editor. The Booty5 timeline animation editor enables rapid production of Flash style animations. Booty5 exports animations that utilise the Booty5 engines timeline animation system. The animation system is split over a number of classes:
- Animation – An animation is a collection of animation frames
- Timeline – A timeline is a collection of animations
- TimelineManager – A collection of timelines
Each Scene, Actor has its own TimelineManager that generally manages its local timelines. In addition, the global App object has its own TimelineManager that handles global animations.
To see what type of animations Booty5 can create take a look at the basic animation demo and world animation demo.
Working with Animations
Animations are created by creating instances of b5.Animation objects that target specific objects and their properties. Created animations are added to a Timeline (a container for multiple animations), usually all of the animations that target a specific object are added to the same Timeline although this is not a restiction. Timelines are then added to the TimelineManager to be processed each frame.
An Animation consists of a target, a property and a collection of key frames and key times. A key frame is the value of a property at a specific point in time stipulated by the key times. For example, the target could be an actor called player, the property could be the x position of the actor and the key frames could be an array of numbers that specify the values of the actors x position at specific points in time. e.g.:
- At time 0 seconds objects x position is 0
- At time 2 seconds objects x position is 200
Whilst the animation is playing it will interpolate the values of the objects property over time to create a smooth transition from one value to the next, so for example at time 1 second the value will be 100 (half way between 0 and 200). You can modify how this interpolation (tweening) is applied by using easing functions. Easing functions affect how the value is tweened from one value to the next, the default is Linear easing which simply smoothly tweens from one value to the next. You can specify which tweening function to apply to each individual frame by passing in an optional array to the animation creation function that specifies which tweening functions to use for each frame. The current list of available tweening functions includes:
- b5.Ease.linear
- b5.Ease.quadin
- b5.Ease.quadout
- b5.Ease.cubicin
- b5.Ease.cubicout
- b5.Ease.quartin
- b5.Ease.quartout
- b5.Ease.sin
Lets take a quick look at an example that shows how to create an Animation:
|
1 2 3 4 5 |
var anim = new b5.Animation(null, actor1, "_x", [0, 200], [0, 2], 0, [b5.Ease.quartin]); In the above example we create an animation that targets the _x property of actor1, it changes this property from 0 to 200 over 2 seconds, using the quartic-in easing function. Note that we target the _x property setter instead of the x property of an actor because internally the actor system has to rebuild its visual transform, which the property setter does. Simply creating the animation is not enough, it must be added to a Timeline and then that Timeline must be added to a TimelineManager, e.g.: |
|
1 2 3 4 5 6 7 8 9 10 11 |
// Create a timeline var timeline = new b5.Timeline(); // Add the animation timeline.add(anim); // Add the timeline to the actors timeline manager actor1.timelines.add(timeline); // Start the timeline playing timeline.play(); |
Once an animation has been created and added to a Timeline, you can later locate it by calling b5.Timeline.find(animation_name). You can also locate a timeline using a path, e.g.:
|
1 |
b5.Utils.resolveObject("scene1.actor1.timeline1", "timeline"); |
Animations can repeat playback multiple times by passing in the number of times to repeat when creating the Animation object, passing a value of 0 will repeat the animation forever.
Once an animation reaches the end of its duration it will automatically be destroyed, unless you set the b5.Animation.destroy property to false. You can also remove an animation from a Timeline by calling b5.Timelime.remove(animation).
Working with Timelines
Timelines represent collections of animations with each animation potentially targeting a different property and a different object. Timelines are a way of creating a complete set of animations that represent a complete sequence of animation. For example, a timeline could contain all of the animations that represent a cut scene sequence during a game, or all of the animations that represent an action that takes place when a certain event occurs, such as a pick-up animation when the player picks up certain objects.
To create a Timeline we create an instance of a b5.Timeline object, e.g.:
|
1 |
var timeline = new b5.Timeline(); |
Once a Timeline is created we can begin adding animations to it using b5.Timeline.add(), which has two flavours:
- b5.Timeline.add(anim) – Adds the supplied Animation instance “anim” to the timeline
- b5.Timeline.add(target, property, frames, times, repeat, easing) – Creates an animation with the specified properties then adds it to the timeline. This is a convenience function that allows you to add animations without having to create the animation up front. Internally an Animation object will be created for you
Once a Timeline has been created it should be added to a TimelineManager in order to be processed each game frame, e.g.:
|
1 |
scene.timelines.add(timeline); |
Once a timeline has been created and added to a TimelineManager, you can later locate it by calling b5.TimelineManager.find(timeline_name).
The main App, Scenes and Actors all have their own TimelineManager’s (e.g. scene.timelines) that you can add created timelines to. However, you can create and manage your own as long as you call b5.TimelineManager.update() on a regular basis.
To later remove a Timeline from its manager you can call b5.TimelineManager.remove(timeline). Be aware that the timeline may no longer be present as timelines clean themselves up when all animations within the Timeline have been destroyed; an animation object will destroy itself when it reaches the end of its playback, unless its destroy property is set to false.
A number of methods are available which can affect the timeline:
- b5.Timeline.play() – Plays all animations in the timeline, resumes play back it is paused
- b5.Timeline.pause() – Pauses playback of all animations in the timeline
- b5.Timeline.restart() – Restarts all animations from their starts, also resets the total number of times to repeat each animation to their original values
These methods are also available within the TimelineManager and operate across all Timelines that the manager contains:
- b5.TimelineManager.play() – Plays all timeline in the timeline manager, resumes play back it is paused
- b5.TimelineManager.pause() – Pauses playback of all timelines in the timeline manager
- b5.TimelineManager.restart() – Restarts all timelines in the timeline manager from their starts
Animation Events
Animations can fire off various events based on the status of the animation. The following events are currently supported:
- onEnd – Called when the animation finishes playing
- onRepeat – Called when the animation repeats
- Frame hit – Called when a specific animation frame is hit
The first two events are simple to to set up and use, lets take a quick look at an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Create animation var anim = new b5.Animation(null, actor1, "_x", [0, 200], [0, 2], 2, [b5.Ease.linear]); anim.name = "anim1"; // Set callbacks anim.onEnd = function (e) { console.log("Animation ended " + e.name); }; anim.onRepeat = function (e) { console.log("Animation repeated " + e.name); }; // Create a timeline var timeline = new b5.Timeline(); // Add the animation timeline.add(anim); // Add the timeline to the actors timeline manager and play actor1.timelines.add(timeline).play(); |
The animation system can also fire events when each individual frame is hit by setting action functions (not to be confused with action lists) with b5.Animation.setAction(index, action_function). Lets take a quick look at an example:
|
1 2 3 4 5 |
var timeline = new b5.Timeline(); var anim = timeline.add(this, "x", [0, 100, 300, 400], [0, 5, 10, 15], 0, [b5.Ease.quartin, b5.Ease.quartin, b5.Ease.quartin]); anim.setAction(0,function() { console.log("Hit frame 0"); }); anim.setAction(1,function() { console.log("Hit frame 1"); }); anim.setAction(2,function() { console.log("Hit frame 2"); }); |
In the above example, we create an animation with 4 key frames then assign an action to the first 3 frames, note that we do not assign an action to the last frame as that frame will call either onEnd or onRepeat. When the animation reaches each of the frames the corresponding action function will be called.
Responding to animation events are great for setting off other animations, updating game logic, playing sound effects and so on.
Animation Playback Speed
You can change the speed at which an animation is played back by setting the b5.Animation.time_scale property. Setting it to a value less than 1 will play the animation back at a slower speed, whilst setting it to a value of greater than 1 will play back the animation at an higher speed. For example, setting time_scale to 2 will play back the animation at double its intended speed, whilst setting it to 0.5 will play back the animation at half the intended speed.
Adjusting the time_scale of animations can be used to create temporal distortion effects.
Tween or not to Tween
Each animation has a tween property which when set to true will cause animation key frames to be smoothly interpolated. This is however not appropriate for all types of object properties. For example, if we create an animation that changes the text of a label over time, tweening is not possible as we want the text to change to a discrete value. In this case tweening can be turned off by setting the tween property of the animation to false. Lets take a quick look at a none tweened animation:
|
1 2 3 4 |
var timeline = new b5.Timeline(); var anim = timeline.add(actor, "text", ["Hello", "World", ""], [0, 1, 2], 0); anim.tween = false; actor.timelines.add(timeline); |
Next Topic:
2,221 total views, 2 views today