Skip to main content

Animation

PlayCanvas animates entity hierarchies by playing animation clips on them. A clip is a set of keyframes over time for properties of named nodes: the bones of a character, the parts of a machine, or the properties of components, such as the color of a light. The anim component plays clips on the hierarchy below its entity, and everything else in this section builds on it.

GLB Animation

Load the T-Rex above, and drag to orbit around it. It is a Web Components example, and all of its animation comes from one empty <pc-anim> element inside the model's <pc-model> element. With no clips declared, it plays the model's own clip on a loop. On Each Surface compares how each surface does the same.

How Animation Works​

  • Clips usually come from the models you import. A GLB, or an FBX file imported in the Editor, brings its animations with it, and you can also build a clip from keyframes in code. A clip binds to its targets by node name, so one clip can animate any model whose nodes have the same names.
  • The anim component plays clips on the hierarchy below its entity. Each clip it plays is held in a state, and the component cross-fades between states when you switch.
  • State graphs decide which state plays. A state graph is a state machine of states, the transitions between them and the parameters that the transitions test, such as a speed or a jump trigger. You set the parameters from code, and the graph does the rest.
  • Blend trees blend several clips in one state by the value of parameters, so a character can move smoothly from a walk into a run.
  • Layers and masks play several state graphs on one model at the same time, each limited to some of its nodes, so a character can wave while it walks.
  • Events fire at chosen times in a clip, for footstep sounds, effects or gameplay.

On Each Surface​

The anim component is the same everywhere, but the surfaces expose different amounts of it. Anything a surface has no markup or UI for, you can reach through the engine component from code.

EngineEditorReactWeb Components
Play a model's clipsentity.anim.assignAnimation()An Anim component and a state graph asset<Anim playing /><pc-anim>
Switch clips with a cross-fadelayer.transition()Transitions in the state graphThe engine APIThe clip and transition-time attributes
State graphs and parametersentity.anim.loadStateGraph()The Anim State Graph asset editorThe engine APIThe engine API
Blend treesIn the state graph dataFrom a script onlyThe engine APIThe engine API
Layers and masksentity.anim.addLayer()Layers in the graph, masks in the Anim componentThe engine APIThe engine API
Eventsnew pc.AnimEvents() on a clipEvents on the animation assetThe engine APIThe engine API
note

The anim component replaced the older animation component, which plays clips without state graphs. That component still works, but use the anim component in new projects. For 2D skeletal animation made with Spine, see Spine.

In This Section​

  • Playing Animations - Adding the anim component, playing and switching clips, speed, pausing, looping and finished clips.
  • Animation Clips - Clips in GLB and FBX files, how they bind to nodes, and building clips in code.
  • State Graphs - States, transitions, parameters and conditions, built in the Editor or in code.
  • Blend Trees - Blending clips by one or two parameters, or by a weight each.
  • Layers and Masks - Playing several graphs at once, blending them, and masking them to parts of a model.
  • Animation Events - Firing events at chosen times in a clip and handling them.

See Also​