Animation – Lets Dance


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:

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.:

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.:

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.:

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:

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:

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:

Next Topic:

2,102 total views, 1 views today