Play Back Animation (SDK for Cocos Creator)
Updated: 03/14/2023
This tutorial describes how to play an embedded animation file exported from the Cubism Editor on a model in a Cocos Creator project.
The explanation is based on the assumption that the project is the same as the project for which the “Import SDK” was performed.
Summary
To play Cubism animations in a Cocos Creator project, a motion file in .motion3.json format is required.
See “Data for Embedded Use” for information on exporting motion files.
The SDK also provides an Importer for motion3.json as well as models, and motion3.json is automatically converted to Cocos Creator’s animation format, AnimationClip, upon import.
The converted AnimationClip enables Cocos Creator to handle animations using only Cocos Creator’s built-in functions, without using Live2D’s functions on Cocos Creator.
The procedure for playing back motion in a Cocos Creator project is as follows.
- Import motion files
- Play AnimationClip
Import motion files
Drag and drop a motion file exported from the Cubism Editor for embedding into the Project View, along with the folder containing it.
Then, an AnimationClip is generated from motion3.json, as shown in the following image.
Loop can also be set for the generated AnimationClip.
TIPS
The AnimationClip has a curve with values to set for each parameter of the model, and the properties for the parameters set by this curve are located in the following hierarchy of the model’s Prefab.
(Value is hidden in Inspector.)
[model root]/Parameters/[Parameter ID]/Cubism Parameter/Value
The maximum and minimum values to be set for Value are different for each parameter ID, but values outside that range are treated as maximum or minimum values.
The opacity of the part is also located in the following hierarchy of Prefab. (Opacity is hidden in Inspector.)
[model root]/Parameters/[Part ID]/Cubism Part/Opacity
The value set for Opacity ranges from 0 to 1. Values outside this range are treated as 0 or 1.
Specifying these properties will allow you to manipulate the parameters of the model and the opacity of the parts from an AnimationClip or program created in Cocos Creator.
Play AnimationClip
To play an AnimationClip in Cocos Creator, use Animator.
- Drag and drop the Prefab of the model into the Hierarchy.
- In the Prefab Inspector of the model, add an Animation component.
- Drag and drop the AnimationClip generated by “Import Motion Files” onto the Default Clip of the Animation component.
- Check the [Play On Load] checkbox in the Animation component.
When a Scene is executed in this state, the animation is played.
