Play Animation Using AnimationController (AnimationGraph)

Updated: 03/14/2023

This page explains how to use Cocos Creator’s AnimationController (AnimationGraph) with Cubism models.

In this example, the two animations are set to repeat without any complicated settings.

Summary

1. Create an Animation Graph from the Create asset context menu in the Asset view.
2. Open the Animation Graph. (Double-click or press the Inspector’s Edit button during selection)

3. Right-click on an appropriate location in the Animation Graph View and select Add State – Animation Clip from the menu to add a State.
4. Select the added State and set the Inspector’s Animation Clip Motion – > Clip to the AnimationClip that was generated when the model was imported. (Select from select buttons, drag and drop, etc.)
5. Set Transition to the State that will be played first from Entry.
6. Add the animation to be used subsequently in the same way as 3 and 4.
7. Set Transition to transition from each State.

8. Set the created Animation Graph to the AnimationController of the Model.
9. Add CubismMotionApplier to the Model.

This completes the setup for playing back animations using AnimationController.

For details on setting variables in the Animation Graph and transition conditions in Transition, please refer to Marionette Animation System in the Cocos Creator Manual.