Let's learn how to import external animation files and apply them to ZEPETO characters.
STEP 1 : Setting up animation
Access the site where you want to download animation.
This guide is an example of using the Mixamo site.
Mixamo
Click the desired humanoid animation.
![custom-ani-1.png 3584](https://files.readme.io/b3fadc8-custom-ani-1.png)
Download the animation and select the "FBX for Unity (.fbx)" option.
![custom-ani-2 (1).png 2880](https://files.readme.io/d3804b9-custom-ani-2_1.png)
Drag and drop the downloaded file to the Unity Project panel.
![image-2023-2-10_18-20-37.png 1349](https://files.readme.io/e38976d-image-2023-2-10_18-20-37.png)
Click the Rig tab and change the Animation Type to Humanoid.
![image-2023-2-10_18-25-17.png 397](https://files.readme.io/71f9b40-image-2023-2-10_18-25-17.png)
Caution
Without the humanoid setting, it will not be compatible with the ZEPETO character.
Make sure to set it up.
Change the Animation > Motion > Root Motion Node option to <Root Transform> to make your character's animation smoother and more realistic.
![custom-ani-4-2.png 466](https://files.readme.io/eb46614-custom-ani-4-2.png)
Unity Selecting a Root Motion Node
https://docs.unity3d.com/560/Documentation/Manual/AnimationRootMotionNodeOnImportedClips.html
STEP 2 : Setting the animator
Clone an animator object associated with an animator variable in the ZepetoPlayers component inspector.
- File path : Packages/zepeto.character.controller/Runtime/_Resources/AnimatorController/ZepetoAnimatorV2.controller
- Drag the animator into the Assets folder.
- After copying, rename it to ZepetoAnimatorV2_Custom.
![image-2023-2-10_18-35-28.png 2880](https://files.readme.io/df46d79-image-2023-2-10_18-35-28.png)
Click Hierarchy > ZEPETO > ZepetoPlayers to create it, and drag a copy of the animator you created in the Animation Controller field of the ZepetoPlayers component.
![image-2023-2-10_18-47-2.png 909](https://files.readme.io/1f6368f-image-2023-2-10_18-47-2.png)
Double-click ZepetoAnimatorV2_Custom to open the animator tab.
- Drag and drop the new animation into the animator to create an animation state.
![image-2023-2-10_18-53-17.png 2880](https://files.readme.io/86c3eb4-image-2023-2-10_18-53-17.png)
- Right-click the animation state you created, and then click Make Transition to create a transition that returns to the Idle state.
![custom-ani-9.png 2880](https://files.readme.io/147d04a-custom-ani-9.png)
![custom-ani-10.png 2880](https://files.readme.io/44de4a6-custom-ani-10.png)
STEP 3 : Example of using a custom animation file
Let's create an example of how to play an animation when you click a button.
![custom-ani.gif 800](https://files.readme.io/2059390-custom-ani.gif)
STEP 3-1 : Setting the UI
- Add Hierachy > UI > Button.
![image-2023-2-10_19-16-17.png 2570](https://files.readme.io/9c54a7f-image-2023-2-10_19-16-17.png)
Example Button
STEP 3-2 : Writing a script
- Create a Hierarchy > Create Empty Object and rename it to CharacterController.
- Create Project > Create > ZEPETO > TypeScript and rename it to CharacterController.
- Write a sample script as follows:
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Button } from 'UnityEngine.UI';
import { Animator, AnimationClip } from 'UnityEngine';
import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
export default class CharacterController extends ZepetoScriptBehaviour {
public customAnimationClip: AnimationClip;
public playCustomAnimationButton: Button;
private _localPlayerAnimator: Animator;
Start() {
this.playCustomAnimationButton.onClick.AddListener(() => {
this._localPlayerAnimator.Play(this.customAnimationClip.name);
})
ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);
ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer;
this._localPlayerAnimator = player.zepetoPlayer.character.GetComponentInChildren<Animator>();
});
}
}
- The flow of the script is as follows:
- Start()
- Adds a listener to playCustomAnimationButton that play animation when clicked.
- Calls the ZepetoPlayers.instance.CreatePlayerWithUserId() function to create a local player.
- Get the animator component of the local player and stores it in the localPlayerAnimator variable.
- Start()
- Attach the CharacterController script to the CharacterController object.
- Assign Custom Animation Clip, Play Custom Animation Button from the inspector.
- Assign an animation clip that is set to Custom Animation Clip.
- Drag and assign the button to the Play Custom Animation Button.
![custom-ani-.png 811](https://files.readme.io/b5d4c83-custom-ani-.png)
Example script setting screen
- Play and click the button to play the animation.
If you use a custom character other than a ZEPETO character,
you can apply the ZEPETO animation if it is a humanoid character.