--- title: Comment appliquer une animation personnalisée slug: world-sdk-guide-fr/comment-appliquer-une-animation-personnalisee docTags: createdAt: 2024-09-02T08:34:13.135Z --- Apprenons à importer des fichiers d'animation externes et à les appliquer aux personnages ZEPETO. ## ÉTAPE 1 : Configuration de l'animation Accédez au site où vous souhaitez télécharger l'animation. Ce guide est un exemple d'utilisation du site Mixamo. :::hint{type="info"} **📘 Mixamo** [https://www.mixamo.com/](https://www.mixamo.com/) ::: Cliquez sur l'animation humanoïde souhaitée. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Kdv5dUQnLhGwEBEGy2QrS-20240904-102415.png) Téléchargez l'animation et sélectionnez l'option "FBX pour Unity (.fbx)". ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-x0s--QNTC5tCmLVrKGkB0-20240904-102415.png) Faites glisser et déposez le fichier téléchargé dans le panneau du projet Unity. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-AvIB5VKV756ZABBJuLJMy-20240904-102415.png) Cliquez sur l'onglet Rig et changez le type d'animation en Humanoïde. ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-eiAQhUSYAyCJzuhBoAaWY-20240904-102416.png" size="64" width="397" height="292" position="center" showCaption="false"} :::hint{type="danger"} **❗️ Avertissement** Sans le paramètre humanoïde, il ne sera pas compatible avec le personnage ZEPETO. Assurez-vous de le configurer. ::: Changez l'option Animation > Motion > Root Motion Node en \ pour rendre l'animation de votre personnage plus fluide et plus réaliste. ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-1RwYLA2iCS68RneiSUA8B-20240904-102416.png" size="86" width="466" height="1098" position="center" showCaption="false"} :::hint{type="info"} 📘 **Unity Sélectionner un nœud de mouvement racine** [https://docs.unity3d.com/560/Documentation/Manual/AnimationRootMotionNodeOnImportedClips.html](https://docs.unity3d.com/560/Documentation/Manual/AnimationRootMotionNodeOnImportedClips.html) ::: ## ÉTAPE 2 : Configuration de l'animateur Clonez un objet animateur associé à une variable animateur dans l'inspecteur du composant ZepetoPlayers. - Chemin du fichier : Packages/zepeto.character.controller/Runtime/\_Resources/AnimatorController/ZepetoAnimatorV2.controller - Faites glisser l'animateur dans le dossier Assets. - Après la copie, renommez-le en ZepetoAnimatorV2\_Custom. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-5LWxc0ZhjEip2Iv2Jm3WW-20240904-102416.png) Cliquez sur Hiérarchie > ZEPETO > ZepetoPlayers pour le créer, et faites glisser une copie de l'animateur que vous avez créé dans le champ Contrôleur d'animation du composant ZepetoPlayers. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N--_0qoi-16BEq8dfZapGlC-20240904-102416.png) Double-cliquez sur ZepetoAnimatorV2\_Custom pour ouvrir l'onglet animateur. - Faites glisser et déposez la nouvelle animation dans l'animateur pour créer un état d'animation. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-8n8gaURsgk8TXvVqJUZQ8-20240904-102416.png) - Cliquez avec le bouton droit sur l'état d'animation que vous avez créé, puis cliquez sur Faire la transition pour créer une transition qui revient à l'état Idle. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-F02XEpZ2gi4BYCqP10LNl-20240904-102416.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-xB7pemgHNZaXw0gnou7hb-20240904-102416.png) ## ÉTAPE 3 : Exemple d'utilisation d'un fichier d'animation personnalisé Créons un exemple de comment jouer une animation lorsque vous cliquez sur un bouton. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-oTOKTkoLzcUS_spT6Hvu5-20240904-102418.gif) ### ÉTAPE 3-1 : Configuration de l'interface utilisateur - Ajouter Hiérarchie > UI > Bouton. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-0hxxDqBK32km_ljZVHQHB-20240904-102416.png) ### ÉTAPE 3-2 : Écriture d'un script 1. Créer une hiérarchie > Créer un objet vide et le renommer en CharacterController. 2. Créer un projet > Créer > ZEPETO > TypeScript et le renommer en CharacterController. 3. Écrire un script d'exemple comme suit : ```typescript 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(); }); } } ``` - Le flux du script est le suivant : - Démarrer() - Ajoute un écouteur à playCustomAnimationButton qui joue l'animation lorsqu'il est cliqué. - Appelle la fonction ZepetoPlayers.instance.CreatePlayerWithUserId() pour créer un joueur local. - Obtient le composant animateur du joueur local et le stocke dans la variable localPlayerAnimator. - Attribuez un clip d'animation qui est défini sur Clip d'animation personnalisé. - Faites glisser et attribuez le bouton au Bouton d'animation personnalisée. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7Kzj-j7IacEilseOPmAkC-20240904-102416.png) 6\. Jouez et cliquez sur le bouton pour jouer l'animation. :::hint{type="success"} **👍 **Si vous utilisez un personnage personnalisé autre qu'un personnage ZEPETO, vous pouvez appliquer l'animation ZEPETO si c'est un personnage humanoïde. :::