Skip to main content

Animation Sequence Editor

To edit an Animation Sequence, use the Animation Sequence Editor extension in the Editor.

What is an Animation Sequence?

The Animation Sequence asset allows you to create entity-based animations directly in the Editor. More specifically, you can animate the component data of entities.

An Animation Sequence can be used to make a cinematic cut scene, or a simple animation that livens up your application.

Simple examples of animations that can be done with animation sequence:

  • Animating the albedo of a material component
  • Animating the position of a local transform component

Tracks

Animation sequences are composed of tracks. A track is made of up keys which have an associated value and time. There are three different kinds of tracks: animation, trigger and event.

Each track is associated to an entity.

You associate entities to tracks via the Animation Sequence Controller component.

Animation Track

Animation tracks are used to animate an entity’s component attribute. An animation track will interpolate between keys. At a time t of the animation sequence playing, the two keys between which t fall will be the keys that are interpolated.

In the example below, at time 600ms, the animation sequence will set the entity’s position to the result of the interpolation between the values of keys A and B.

Animation track in the Animation Sequence Editor
Animation track in the Animation Sequence Editor

Trigger Track

Trigger tracks are also used to animate an entity’s component attribute. Unlike animation tracks, a trigger track will not interpolate between keys, but will simply set the key value at the key time.

In the example below, at time 1000ms, the animation sequence will set the entity’s position to the value specified by key B.

Trigger track in the Animation Sequence Editor
Trigger track in the Animation Sequence Editor

Event Track

Event tracks are used to emit events of an Event Map asset. Its keys correspond to specific events in the Event Map specified upon creating the track. While the animation sequence plays, these specified events will be emitted at their specified times.

These events are listenable in scripts and in client-side Livelink.js code, allowing your application to react to key points in a sequence.

Event tracks are also associated to an entity, which will be the one emitting the specified events.

In the example below, at time 1000ms, the entity “cube” will emit the event specified in key B.

Event track in the Animation Sequence Editor
Event track in the Animation Sequence Editor

Animation Sequence Controller

To add an animation sequence instance to your scene, add an entity with an Animation Sequence Controller component and link your animation sequence to it. You will then be able to assign entities to each of its tracks.

You can also modify the loop, playback speed, start offset and stop offset of an animation sequence via the Animation Sequence Controller.

Animation Sequence Controller

animation_sequence_controller

Animation sequence controller with reference to an animation sequence and assigned entities.

animationSequenceRef

Asset UUID

A reference to an animation sequence.

entities

Track to entity map. Key is track uuid, value is the entity to assign to it.

loop

Boolean

Default: false

Whether or not the animation loops when it reaches the end of the sequence.

playbackSpeed

Float

Default: 1

The speed at which to play the animation sequence. The sequence will go in reverse if set to a value lower than 0.

startOffset

Float

Default: 0

The normalized offset at which to start the playback.

stopOffset

Float

Default: 1

The normalized offset at which to stop the playback (or loop back to start offset).


Multiple Instances of the Same Animation Sequence By having multiple entities with their
Animation Sequence Controller

pointing to the same animation sequence, you can have multiple instances of the same animation with different sets of entities assigned to the tracks.

Animation Sequence Editor

Open the Animation Sequence Editor

To work on animation sequence, select an entity with Animation Sequence Controller and have the Animation Sequence Editor open.

As you’re working, the progress you make will be automatically saved in the animation sequence editor. You can close the session and open a new one and nothing will be lost.

However, when you’re ready to compile your animation sequence and see your changes reflected in the playback, make sure to press Publish.

A general overview of the Animation Sequence Editor
A general overview of the Animation Sequence Editor

Create a Track

Drag and drop an entity from the scene graph to “drop an entity to create a new track” . You can animate all entities (including external entities). This will create a new track in the animation sequence and automatically assign the entity to that track in the Animation Sequence Controller of the currently selected animation entity.

You will be given the option to decide what component attribute (like transform.position.y or material.albedo.xyz) you want to animate in that track.

There are three different kinds of tracks you can create.

Recap: Differences between tracks

Animation track: the component attribute will be interpolated between keys.

Trigger track: the component attribute will be set at each key. No interpolation will happen.

Event track: the entity will emit an event that can be listened to in application code and/or in a script.

Delete a Track

Create a Key

Double click on the track to create a new key at that time. You can always modify the time more precisely afterwards (check “modify a key”).

You can only create keys in the scope of your animation sequence’s duration. In the example above, you can only create keys from 0 to 5000ms. To create keys past 5000ms change the duration first.
You can only create keys in the scope of your animation sequence’s duration. In the example above, you can only create keys from 0 to 5000ms. To create keys past 5000ms change the duration first.

Modify a Key

Click on a key to modify it. You can modify the key’s time, value and the easing function which will impact the way time passes from that key to the next. Here are examples of the easing functions available.

Copy the current value

To copy the current value of your entity’s component onto the key, press the camera.

Delete a Key

Modify Duration

Modify Time Range

Press Ctrl and scroll over the sequencer time range to increase/decrease the time range.

Disabled Tracks

Disabled Tracks

If you delete an entity or the component of an entity that is referenced by a track, the track will appear disabled and the entity or component in question will be crossed out in red. A disabled track due to a missing component can be re-enabled if you reattach the component on the entity in question.

Play, Pause, Stop

You can play, pause and stop animation sequences. Stopping an animation sequence will restore the values of the first keys of each track.

Editor

To control the playback of an animation sequence use the play, pause and stop buttons in the Animation Sequence Editor.

Scripts / Application Code

To play, pause and stop an animation sequence, you need to modify the component attribute playState of the Animation Sequence Controller. This attribute is hidden in the Editor but can be modified in a script or with Livelink.js. playState is an int enum whose values can be:

0 - (stop)

1- (play)

2 - (pause).