Using animation events

animation events provide a way to call a customized function or perform an action at a specific time in an animation clip this allows interaction between animations and scripts, and is useful when performing actions at the exact timing of an animation adding events to object animation the following example adds an animation event to an animated object this structure outputs information to the console log whenever an event is executed by adding an up event and a down event to the animation that repeats up and down 1\) select gameobject > 3d object > cube to create a cube in the scene select the created cube and add an animator component by clicking the add component button in the inspector panel apply the cube animator controller to the added animator apply the cube animation clip to the entry of the cube animator controller so that the cube animation can be played when the scene is played please refer to the following guide for animator registration and animation clip editing 📘 unity animation event guide https //docs unity3d com/kr/current/manual/script animationwindowevent html https //docs unity3d com/kr/current/manual/script animationwindowevent html 📘 unity learn animation tutorial https //learn unity com/tutorial/may 18 animation?language=en# https //learn unity com/tutorial/may 18 animation?language=en# 2\) add the following properties to the cube animation clip there is a key frame of position (x 0, y 0, z 0) in the 0 second, 2 second section of the cube's animation clip there is a key frame of position (x 0, y 1, z 0) in the 1 second section of the cube's animation clip (1) register an animation event in the 1 second section of the animation clip of the cube function invoke string up (2) register an animation event in the 2 second section of the animation clip of the cube function invoke string down when writing animation events through c# in unity, write the function name in function however, in order to call an animation event in typescript, invoke must be written in funtion and the function name must be written in string, the argument value 3\) create project > create > zepeto > typescript and rename it to objectanimationcontroller write a sample script as below objectanimationcontroller ts import { zepetoscriptbehaviour } from 'zepeto script' export default class objectanimationcontroller extends zepetoscriptbehaviour { public up() { console log(`cube is up`); } public down(){ console log(`cube is down`); } } 4\) if you press the play button to run it, you can see the console log output while the animation of the cube is played play footstep sounds using animation events on local characters in order to add animation events to the animator of zepeto's character, the event must be added at runtime, when the character is created the following example applies an event to a specific animation clip of the local player animator at runtime, and plays a footstep sound when the event fires 1\) create a footstepcontroller script that will be applied to the local player's animator object footstepcontroller is responsible for adding animation events to animator create project > create > zepeto > typescript and rename it to footstepcontroller write the script as below footstepcontroller ts import { animationevent, animator, audioclip, audiosource } from 'unityengine'; import { zepetoscriptbehaviour } from 'zepeto script'; export default class footstepcontroller extends zepetoscriptbehaviour { // sound used for footstep effects public footstepsound audioclip; // audio source for playing footstep sound private zepetoaudio audiosource; // adds animation events to trigger footstep sounds public addanimationevent() { // get the animator component attached to this gameobject const anim = this getcomponent\<animator>(); // check if the animator component exists if (anim != null) { // create the audiosource for footstep sounds this setaudio(); // specify the times in animation clips when footstep sounds should play const runsoundeventtimes = \[0 1, 0 6]; // add animation events to the specified animation clip this addanimationclipevent(anim, "move walk", runsoundeventtimes); } } // sets up the audiosource for playing footstep sounds private setaudio() { // create and configure the audiosource component this zepetoaudio = this gameobject addcomponent\<audiosource>(); this zepetoaudio clip = this footstepsound; } // activates footstep sounds public activatefootsteps() { // output a log message indicating that footstep sounds are playing console log("footsteps!"); // play the footstep sound using the configured audiosource this zepetoaudio play(); } // adds animation events to a specified animation clip private addanimationclipevent(anim animator, clipname string, eventtimes number\[]) { // initialize the index of the animation clip let animationclipindex number; // get all animation clips from the runtimeanimatorcontroller const clips = anim runtimeanimatorcontroller animationclips; // find the index of the specified animation clip for (let i = 0; i < clips length; i++) { if (clips\[i] name == clipname) { animationclipindex = i; } } // iterate through the specified event times eventtimes foreach(eventtime => { // create a new animationevent for the footstep sound trigger const newevent animationevent = new animationevent(); newevent time = eventtime; newevent functionname = "invoke"; newevent stringparameter = "activatefootsteps"; // add the new animationevent to the animation clip clips\[animationclipindex] addevent(newevent); }); } } script description footstepcontroller adds an animation event and plays a footstep sound effect when that event occurs setaudio() adds an audiosource component to apply the footstep sound to the object addanimationclipevent() adds an animation event to the specified animation clip you must put the following elements as argument values animator for local player animation clip name to which the event is applied an array of animation times to apply the event to in the newevent registered with addanimationclipevent(), the following items are set (1) newevent time the animation time when the event fires a value of 0 is the beginning of the full length, and a value of 1 is the end of the full length (2) newevent functionname the name of the function the event fires in typescript, it should be typed as "invoke" (3) newevent stringparameter the parameter value set to the function when the event executes the function typescript lists the function name to be executed when an event occurs, activatefootsteps() is executed and footstep sounds are played 2\) now create a footstepmanager that adds a footstepcontroller component to the local player's animator object when the local player is created at runtime project > create > zepeto > typescript and rename it to footstepmanager write the script as below footstepmanager ts import { spawninfo, zepetoplayers } from 'zepeto character controller' import { zepetoscriptbehaviour } from 'zepeto script' import footstepcontroller from ' /footstepcontroller' import { worldservice } from 'zepeto world' import { audioclip } from 'unityengine'; export default class footstepmanager extends zepetoscriptbehaviour { // sound to be played for footsteps public footstepsound audioclip; start() { // event listener when the local player is added zepetoplayers instance onaddedlocalplayer addlistener(() => { // access the zepeto character of the local player const zepetocharacter = zepetoplayers instance localplayer zepetoplayer character; // attach the footstepcontroller script to the zepetoanimator's gameobject const footstepcontroller = zepetocharacter zepetoanimator gameobject addcomponent\<footstepcontroller>(); // set the footstepsound for the footstepcontroller footstepcontroller footstepsound = this footstepsound; // add animation events to trigger footsteps footstepcontroller addanimationevent(); }); } } script description after the footstepmanager detects that a local player is being added, it attaches the footstepcontroller script to the player's zepetoanimator's gameobject footstepcontroller is responsible for adding animation events that play footstep sounds the script of the function executed by the animation event of the animator must be identically applied to the object to which the corresponding animator component is applied so you need to find zepetoanimator gameobject and apply the footstepcontroller script as addcomponent 3\) apply footstep sound to footstepsound of footstepmanager 4\) if you press the play button to run it, you can see that the sound is played according to the steps of the local player whenever they walk 👍 tips zepeto basic animator's walk state consists of several animation blends and states since the example applies sound only to the move walk state, you can customize addanimationclipevent() and input it directly to states such as fast walking and running when sound is applied to multiple animation states, footstep sounds may overlap due to animation blend to solve this, write an additional conditional statement so that the corresponding sound is played when animationevent animatorclipinfo weight is 0 5 ❗️ known issue when implemented following the development guide style, the following error message may appear, but there should be no problem with execution