{"id":77006,"date":"2018-01-24T15:18:18","date_gmt":"2018-01-24T15:18:18","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=77006"},"modified":"2021-07-29T19:44:17","modified_gmt":"2021-07-29T19:44:17","slug":"using-c-functions-animations","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/using-c-functions-animations\/","title":{"rendered":"Using C# Functions in Your Animations"},"content":{"rendered":"<h4>The series so far:<\/h4>\n<ol>\n<li><a href=\"https:\/\/www.red-gate.com\/simple-talk\/dotnet\/c-programming\/introduction-game-development-unity-c\/\">Introduction to Game Development with Unity and C#<\/a><\/li>\n<li><a href=\"https:\/\/www.red-gate.com\/simple-talk\/dotnet\/c-programming\/using-c-functions-animations\/\">Using C# Functions in Your Animations<\/a><\/li>\n<li><a href=\"https:\/\/www.red-gate.com\/simple-talk\/dotnet\/c-programming\/procedural-generation-unity-c\/\">Procedural Generation with Unity and C#<\/a><\/li>\n<li><a href=\"https:\/\/www.red-gate.com\/simple-talk\/dotnet\/c-programming\/pathfinding-unity-c\/\">Pathfinding with Unity and C#<\/a><\/li>\n<li><a href=\"https:\/\/www.red-gate.com\/simple-talk\/dotnet\/c-programming\/extending-unity-editor-c\/\">Extending the Unity Editor with C#<\/a><\/li>\n<li><a href=\"https:\/\/www.red-gate.com\/simple-talk\/dotnet\/c-programming\/using-unity-ui-and-c-to-create-a-tic-tac-toe-game\/\">Using Unity UI and C# to Create a Tic-Tac-Toe Game<\/a><\/li>\n<\/ol>\n\n<p>Animations are what make a game go from dull to exciting. Imagine playing Super Mario Bros without Mario&#8217;s animations. This would mean that anytime you move, you&#8217;d just be moving a static image across the level. That wouldn&#8217;t be very exciting, would it? Often taken for granted, animations play a vital role in giving a game its tone and personality.<\/p>\n<p>Now what if you were told that animations could do more than just bringing an object to life? What if you could use functions you wrote in C# during specific frames of an animation in your game? Turns out, it is possible to time certain code actions to an animation frame, whether it be something as simple as changing a boolean variable to creating a fireball in the player&#8217;s hand. Virtually anything is possible if you know how to do it. Even better, the Unity game engine gives us an easy way to use animations and code in tandem.<\/p>\n<h2>Setting up the Project<\/h2>\n<p>The first task that you must do is to create the project. Open Unity and select <em>New<\/em> on the projects screen as shown in Figure 1.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"136\" class=\"wp-image-77007\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-2.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 1: Creating a new project<\/p>\n<p>Call your project <em>Animations and Functions<\/em> and set it as a <em>2D<\/em> project. Figure 2 shows what your screen should look like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"578\" class=\"wp-image-77008\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-3.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 2: The final new project set up screen<\/p>\n<p>Click <em>Create Project<\/em> near the bottom of the window and allow Unity a moment to create the project. Once it&#8217;s completed, you&#8217;ll be greeted with a blank project as shown in Figure 3.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1472\" height=\"749\" class=\"wp-image-77009\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-4.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 3: New 2D project<\/p>\n<p>You&#8217;re going to borrow some assets created by Unity Technologies to make this project work. To do that, you&#8217;ll need to make a visit to Unity&#8217;s asset store. You can find the asset store by going to the top of the screen, selecting <em>Window<\/em>, and then selecting <em>Asset Store<\/em>. Figure 4 shows where to find this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"422\" class=\"wp-image-77010\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-168.png\" \/><\/p>\n<p class=\"caption\">Figure 4: Accessing the Asset Store<\/p>\n<p>Once this is done, you&#8217;ll be greeted by Unity&#8217;s asset store, a place where developers can purchase assets made by the community and use them as a base for their games. For this project, you won&#8217;t need to buy anything since Unity Technologies have provided these assets for free. Use the search box near the top of the asset store window to search <em>2D Roguelike<\/em> as shown in Figure 5.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1055\" height=\"510\" class=\"wp-image-77011\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-5.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 5: The asset store and what to search for.<\/p>\n<p>Select the <em>2D Roguelike Unity Essentials<\/em> at the top of the list. Figure 6 shows what to look for.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1055\" height=\"510\" class=\"wp-image-77012\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-6.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 6: Where to find the &#8216;2D Roguelike Unity Essentials.&#8217;<\/p>\n<p>Finally, select the <em>Import<\/em> button as shown in Figure 7 to import the 2D Roguelike assets into your current project. Note that it may say <em>Download<\/em> if this is the first time you\u2019ve used this asset. Unity will most likely warn you that importing a complete project like 2D Roguelike will overwrite your current project settings. No project settings have been set at this point, so go ahead and continue with the import process.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"437\" height=\"383\" class=\"wp-image-77013\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-7.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 7: Click the &#8216;Import&#8217; button.<\/p>\n<p>Unity will then show you one more window showing a list of all the assets you&#8217;re about to import into your project. It should also show everything currently selected, which is what you want. Figure 8 shows what this window should look like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1172\" height=\"958\" class=\"wp-image-77014\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-8.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 8: The import window. Everything should be selected for this project.<\/p>\n<p>Import everything and allow Unity a moment to import the files into your project. Once it&#8217;s fininshed you&#8217;ll notice your <em>Assets<\/em> window near the bottom will have some new assets in it. Your assets window should look similar to the one as shown in Figure 9. Note that depending on your version of Unity, your <em>Assets<\/em> folder may look slightly different.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"443\" height=\"416\" class=\"wp-image-77015\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-9.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 9: Your new assets window.<\/p>\n<p>There are still a few items to complete before you can begin writing your code. Search for the <em>Player<\/em> object in the search box in the <em>Assets<\/em> window. Unity will pull up each asset with &#8216;player&#8217; in the name, but you want the object with a blue cube icon in front of the name. Figure 10 shows what this object looks like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"443\" height=\"183\" class=\"wp-image-77016\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-10.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 10: The player object needed for the project.<\/p>\n<p>Drag this object into the hierarchy window just above the <em>Assets<\/em> window. This will place the <em>Player<\/em> object into the game world and automatically set both its X and Y coordinates to zero which is what you want. With the player object selected in the hierarchy, go to the <em>Inspector<\/em> window to the right and scroll down as far as you can. You should see a component called <em>Player (Script)<\/em> with several fields that should already be filled in. This component needs to be deleted, so right click on it and choose <em>Remove Component<\/em>. Figure 11 shows where to find this component.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"932\" class=\"wp-image-77017\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-11.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 11: Removing the &#8216;Player&#8217; script component from the player object.<\/p>\n<p>Now you need a user interface (UI) for displaying the text. Go back to your <em>Hierarchy <\/em>window, select the <em>Create<\/em> button and then choose <em>UI<\/em>, then <em>Text<\/em>. Figure 12 shows where these options are.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"855\" height=\"936\" class=\"wp-image-77018\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-12.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 12: Setting up the UI.<\/p>\n<p>Once you select <em>Text,<\/em> a canvas and text object will be created, shown in Figure 13.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"143\" class=\"wp-image-77019\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-13.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 13: What your project&#8217;s hierarchy window should look like<\/p>\n<p>Select the <em>Text<\/em> object in the hierarchy and press <em>Ctrl+D<\/em> twice to make two duplicates. Before continuing you should rename these objects. After selecting a text object, go to the inspector window and use the top most field to change the name. Figure 14 shows where this field is.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"856\" height=\"504\" class=\"wp-image-77020\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-14.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 14: Where to change the name of an object.<\/p>\n<p>Give each Text object one of the following names:<\/p>\n<ul>\n<li>Idle Count Text<\/li>\n<li>Hit Count Text<\/li>\n<li>Chop Count Text<\/li>\n<\/ul>\n<p>When you&#8217;ve named your text objects your hierarchy should look like Figure 15.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"292\" height=\"173\" class=\"wp-image-77021\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-15.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 15: What your project&#8217;s hierarchy window should look like with the added text objects.<\/p>\n<p>These text objects are going to keep track of how many times the corresponding animation is played. Now you have to set up some transitions in the animator. With the <em>Player<\/em> object selected, go to the top of the screen and select <em>Window<\/em> and this time choose <em>Animator<\/em>. Figure 16 shows where to find this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"628\" class=\"wp-image-77022\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-169.png\" \/><\/p>\n<p class=\"caption\">Figure 16: How to open the animator window.<\/p>\n<p>Your <em>Scene<\/em> window should change to the <em>Animator<\/em> window shown in Figure 17. Make sure that the <em>Parameters<\/em> tab is also selected.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1057\" height=\"531\" class=\"wp-image-77023\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-170.png\" \/><\/p>\n<p class=\"caption\">Figure 17: The Animator window.<\/p>\n<p>First you need to add a new animation trigger to the triggers already included by the <em>2D Roguelike<\/em> assets. Animation triggers in Unity are used to switch between an object&#8217;s animations, such as when an object is moving and when it&#8217;s standing still. Click the plus button shown in Figure 18 and select <em>Trigger<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1057\" height=\"531\" class=\"wp-image-77024\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-16.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 18: Adding a trigger.<\/p>\n<p>Give your new animation trigger the name <em>playerIdle<\/em> as shown in Figure 19.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"143\" class=\"wp-image-77025\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-17.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 19: Full list of triggers.<\/p>\n<p>To finish the setup you\u2019ll need to create some new animation transitions as well as modify the existing transitions created by Unity Technologies. An animation transition is an item that allows an object to &#8216;transition&#8217; between different animations. These transitions are represented by white arrows in the animator window and will activate by setting triggers in code, which is why you needed to make the <em>PlayerIdle<\/em> trigger. Without the triggers, you will be unable to transition between different animations, and if you can&#8217;t transition to different animations then the animation events you create later will never be called. To create a transition, you will right-click on an animation and select <em>Make Transition<\/em> and then connect it to another animation. With that in mind, right click the <em>PlayerHit<\/em> animation and select <em>Make Transition<\/em> as shown in Figure 20.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"467\" class=\"wp-image-77026\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-18.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 20: Creating a new transition.<\/p>\n<p>Click on the <em>PlayerChop<\/em> animation in the animator to finish making the transition. Your animator window should look like the one in Figure 21.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"467\" class=\"wp-image-77027\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-19.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 21: How your animator window should currently look.<\/p>\n<p>You&#8217;ll need to do the same thing in reverse now. Right click the <em>PlayerChop<\/em> animation, select <em>Make Transition<\/em> and click on the <em>PlayerHit<\/em> animation. Once complete, your <em>Animator<\/em> window will look like Figure 22.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"467\" class=\"wp-image-77028\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-20.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 22: The animator window with all the transitions needed for the project.<\/p>\n<p>As mentioned before, transitions only activate by assigning our triggers to these transitions. This is done by clicking on a transition arrow and setting the condition that will control when to transition to an object&#8217;s animation. Once this is complete, we will then be able to set the triggers in code and thus transition to different animations as desired. Since you imported the <em>2D Roguelike<\/em> assets into your project, a couple of these transitions should already be done for you.<\/p>\n<p>Start with the transition from <em>PlayerHit<\/em> to <em>PlayerIdle<\/em> by selecting it in the <em>Animator<\/em> window. Add the condition in the inspector window by clicking the plus button near the bottom right. Set this condition to <em>playerIdle<\/em>. Then be sure to uncheck the boxes that say <em>Has Exit Time<\/em> and <em>Fixed Duration<\/em>. Once complete, this transition should look like the one in Figure 23.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"514\" class=\"wp-image-77030\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-21.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 23: The PlayerHit to PlayerIdle transition condition.<\/p>\n<p>The same thing must be done for all the other transitions, but different transitions will requre different conditions. Table 1 shows all the transitions for the project with the correct conditions.<\/p>\n<p><strong>Table 1: All animation transitions and the conditions to set for them<\/strong><\/p>\n<table class=\"table--tight\">\n<thead>\n<tr>\n<td>\n<p><strong>Transition<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>Condition<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>Has Exit Time?<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>Fixed Duration?<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<p>PlayerIdle -&gt; PlayerHit<\/p>\n<\/td>\n<td>\n<p>playerHit<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>PlayerIdle -&gt; PlayerChop<\/p>\n<\/td>\n<td>\n<p>playerChop<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>PlayerHit -&gt; PlayerIdle<\/p>\n<\/td>\n<td>\n<p>playerIdle<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>PlayerHit -&gt; PlayerChop<\/p>\n<\/td>\n<td>\n<p>playerChop<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>PlayerChop -&gt; PlayerIdle<\/p>\n<\/td>\n<td>\n<p>playerIdle<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>PlayerChop -&gt; PlayerHit<\/p>\n<\/td>\n<td>\n<p>playerHit<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<td>\n<p>FALSE<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Once you have finished setting up all the transitions and their conditions, everything will be in place for coding, which means it&#8217;s time to create a new script and open Visual Studio. Go back to your scene window by clicking <em>Window<\/em> at the top and then <em>Scene<\/em> like in Figure 24.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"619\" class=\"wp-image-77031\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-22.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 24: Going back to the scene window.<\/p>\n<p>Select the <em>Player<\/em> object in the hierarchy, go to the <em>Inspector<\/em> window, and then scroll down to find the <em>Add Component<\/em> button. Select it and choose <em>New Script. <\/em>Then give the script the name <em>AnimationCounter<\/em>. Set your language as <em>C Sharp<\/em> (C#) and click <em>Create and Add<\/em> to create the script as shown in Figure 25.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"963\" class=\"wp-image-77032\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-23.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 25: Creating the AnimationCounter script<\/p>\n<p>When this is complete, your Player object should look like the one shown in Figure 26.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"861\" height=\"943\" class=\"wp-image-77033\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-171.png\" \/><\/p>\n<p class=\"caption\">Figure 26: How the Player object should look at this stage.<\/p>\n<p>Unity will then create the new script. Once complete, double click the script field in the Animation Counter component as shown in Figure 27 to open Visual Studio and begin coding.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"101\" class=\"wp-image-77034\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-24.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 27: Where to double click to open Visual Studio and the Animation Counter script.<\/p>\n<h2>The Code<\/h2>\n<p>Unity will have automatically created a <strong>Start <\/strong>and <strong>Update<\/strong> function for you upon creating the script, but you only want the <strong>Update <\/strong>function of these two. Since it&#8217;s not needed, go ahead and comment out the <strong>Start <\/strong>function. Once you have done this, it will be time to start adding your own code, beginning with <strong>using UnityEngine.UI; <\/strong>at line 4. After that has been entered you can then declare the variables you&#8217;ll need to make the project work as intended. Inside the <strong>AnimationCounter<\/strong> class, enter the following lines of code:<\/p>\n<pre class=\"lang:c# theme:vs2012\">   \r\n      private int idleCount;\r\n      private int chopCount;\r\n      private int hitCount;\r\n      public Animator anim;\r\n      public Text idleCountText;\r\n      public Text chopCountText;\r\n      public Text hitCountText;<\/pre>\n<p>Once you&#8217;ve entered these lines of code your project should look something like the code shown in Figure 28 excluding the comments.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"441\" class=\"wp-image-77035\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-25.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 28: The declared variables.<\/p>\n<p>Skip past the <strong>Update <\/strong>function for now and create some space for a new function. You&#8217;ll declare the first function needed to keep track of how many times an animation plays. This function will increment the <strong>idleCount<\/strong> variable and then update the <strong>idleCountText<\/strong> every time it is called. Within the <strong>AnimationCounter<\/strong> class after the <strong>Update<\/strong> function, enter the following:<\/p>\n<pre class=\"lang:c# theme:vs2012\">public void UpdateIdleCount() {\r\n  \tidleCount++;\r\n  \tidleCountText.text = \"Idle Animation played \" + idleCount + \" times.\";\r\n  }<\/pre>\n<p>Now your code should look like the code shown in Figure 29.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"175\" class=\"wp-image-77036\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-26.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 29: The UpdateIdleCount function.<\/p>\n<p>The next two functions are similar to the <strong>UpdateIdleCount <\/strong>function with the main difference being you need to change the variables you&#8217;ll be using. Add the following code to create the additional functions:<\/p>\n<pre class=\"lang:c# theme:vs2012\">public void UpdateChopCount() {\r\n  \tchopCount++;\r\n  \tchopCountText.text = \"Chop Animation played \" + chopCount + \" times.\";\r\n  }\r\n  public void UpdateHitCount() {\r\n  \thitCount++;\r\n  \thitCountText.text = \"Hit animation played \" + hitCount + \" times.\";\r\n  }<\/pre>\n<p>With these functions completed, your code should now look like the code shown in Figure 30.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"392\" class=\"wp-image-77037\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-27.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 30: The completed functions.<\/p>\n<p>By this point you have the variables and functions needed to keep track of how many times a certain animation plays. There&#8217;s one question remaining though; how are we going to switch between different animations? This is where animation triggers come into play. Go back to the <strong>Update <\/strong>function and add the following code.<\/p>\n<pre class=\"lang:c# theme:vs2012\">if (Input.GetKeyDown(KeyCode.A)) {\r\n  \tanim.SetTrigger(\"playerChop\");\r\n  }<\/pre>\n<p>Whenever the player presses the <em>A<\/em> key, the <em>playerChop<\/em> trigger we set up earlier will activate, allowing the user the switch to the chop animation. Figure 31 shows what this code looks like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"909\" height=\"132\" class=\"wp-image-77038\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-28.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 31: Activating the playerChop trigger if the A key is pressed.<\/p>\n<p>Similar code needs to be added to the <strong>Update<\/strong> function for the other triggers. Inside the <strong>Update<\/strong> function, enter the following lines of code to complete the code section of your project.<\/p>\n<pre class=\"lang:c# theme:vs2012\">if (Input.GetKeyDown(KeyCode.S)) {\r\n  \tanim.SetTrigger(\"playerHit\");\r\n  }\r\n  if (Input.GetKeyDown(KeyCode.D)) {\r\n  \tanim.SetTrigger(\"playerIdle\");\r\n  }<\/pre>\n<p>After this is finished, your <strong>Update <\/strong>function should look similar to Figure 32.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"307\" class=\"wp-image-77039\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-29.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 32: The completed Update function.<\/p>\n<p>With the <strong>Update <\/strong>function complete, your code is now ready to work with your project. You have declared the necessary variables, created the functions needed to update the number of times an animation has played, and have checks in place for when the <em>A<\/em>, <em>S<\/em>, and <em>D<\/em> keys are pressed. When any of these keys are pressed, they&#8217;ll activate one of your animation triggers which will allow your player object to transition between different animations. The completed code should look similar to Figure 33. Be sure to save your code before continuing!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"960\" class=\"wp-image-77040\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-172.png\" \/><\/p>\n<p class=\"caption\">Figure 33: The completed code<\/p>\n<h2>Completing the Project<\/h2>\n<p>After saving the code in Visual Studio, switch back to the project in Unity. There are only a few tasks left to do before the project is complete. You&#8217;ll notice on your player object that some new fields will appear under the <em>AnimationCounter<\/em> component. All these fields will need to be filled in order for our project to do anything. Begin with the <em>Anim<\/em> field by dragging the <em>Animator<\/em> component on the <em>Player<\/em> object into that field. Figure 34 shows where this is.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"925\" class=\"wp-image-77041\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-30.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 34: Setting the Player&#8217;s Animator component as the value of the Anim field.<\/p>\n<p>Next you should fill in the text fields. All you need to do here is click and drag the <em>Idle Count Text<\/em>, <em>Hit Count Text<\/em>, and <em>Chop Count Text<\/em> into their respective fields. Figure 35 shows what your player object should look like now.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"501\" height=\"926\" class=\"wp-image-77042\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-173.png\" \/><\/p>\n<p class=\"caption\">Figure 35: Where to place the Text objects in the AnimationCounter component.<\/p>\n<p>Now the position and size of those text objects should be set. Select all three text objects and then go to the <em>Rect Transform<\/em> component in the <em>Inspector<\/em> window. Locate the <em>Width<\/em> field and set it to 250, then find the <em>Height<\/em> field and set that to 30. In addition, change the <em>Pos X<\/em> field to a value of 30. Since you have all text objects selected these changes will apply to all three text objects. Figure 36 shows where these fields are and what they should be.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"259\" class=\"wp-image-77043\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-31.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 36: The Pos X, Width, and Height fields and their respective values.<\/p>\n<p>Each text object needs to have its own <em>Pos Y<\/em> value, otherwise the text will all be sitting in the exact same location and will be illegible. Figure 37 shows where to locate the <em>Pos <\/em>Y field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"166\" class=\"wp-image-77044\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-32.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 37: Where to find the <em>Pos Y <\/em>field<\/p>\n<p>Once located, each text object will need a different value for their respective <em>Pos Y <\/em>fields. Table 2 shows what each text object&#8217;s <em>Pos Y <\/em>value should be.<\/p>\n<p><strong>Table 2: All text objects and the required value of each <em>Pos Y<\/em> field.<\/strong><\/p>\n<table class=\"table--tight\">\n<thead>\n<tr>\n<td>\n<p><strong>Text Object<\/strong><\/p>\n<\/td>\n<td>\n<p><strong><em>Pos Y <\/em>Value<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<p>Idle Count Text<\/p>\n<\/td>\n<td>\n<p>150<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Hit Count Text<\/p>\n<\/td>\n<td>\n<p>125<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Chop Count Text<\/p>\n<\/td>\n<td>\n<p>100<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For the final step you&#8217;ll need to access the animations and set what&#8217;s called an \u2018animation event&#8217; in order to use the functions and keep track of how many times an animation plays. Select the <em>Player<\/em> object from the <em>Hierarchy<\/em>, then go to <em>Window<\/em> and select <em>Animation<\/em> to open the <em>Animation <\/em>window. Figure 38 will show where to find this option.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"609\" class=\"wp-image-77045\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-33.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 38: Locating the Animation window option.<\/p>\n<p>Even though the names are similar, the <em>Animation<\/em> window and the <em>Animator<\/em> window have completely different uses. You&#8217;ve already used the <em>Animator<\/em> window to set animation transitions and make a new trigger. The <em>Animation<\/em> window is what you&#8217;ll use to edit an object&#8217;s animation and, more importantly for this project, set animation events. Around the top of the animation window and a little to the left you&#8217;ll see a button that looks like a white banner with a plus button next to it. Figure 39 shows where this button is.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"603\" height=\"364\" class=\"wp-image-77046\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-34.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 39: Locating the Add animation event button.<\/p>\n<p>After clicking this button you&#8217;ll see the <em>Inspector<\/em> window change to show an animation event and a field that simply says <em>Function<\/em>. Move there and click on the drop-down menu to see the functions you made earlier in C#. You should be on the <em>PlayerIdle<\/em> animation by default, so you will want to select <em>UpdateIdleCount()<\/em> from the drop down menu. Figure 40 shows where this is.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"400\" class=\"wp-image-77047\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-35.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 40: Selecting the UpdateIdleCount function for the animation event.<\/p>\n<p>Animation events will call a function whenever the animation tells them to. In this case you have told Unity to call the <strong>UpdateIdleCount<\/strong> function at frame 0 (the beginning) of the <em>PlayerIdle<\/em> animation. Now all that&#8217;s left is to create an animation event for the other animations. Go back to the animation window and select the drop down menu in the upper left corner of the window. It will say <em>PlayerIdle<\/em> on it, revealing the current animation you&#8217;re on. Once the drop-down menu is open, select the <em>PlayerHit<\/em> animation. Figure 41 will show where this menu is and where the <em>PlayerHit<\/em> option should be.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"481\" height=\"510\" class=\"wp-image-77048\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-36.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 41: Changing the current animation you&#8217;re editing.<\/p>\n<p>Now you must set an animation event to the beginning of the animation like you did before with the <em>PlayerIdle<\/em> animation. You will also need to do the same with the PlayerChop animation. Table 3 shows each animation and what function should be called with each animation event.<\/p>\n<p><strong>Table 3: The functions to assign to the animation events of each animation.<\/strong><\/p>\n<table class=\"table--tight\">\n<thead>\n<tr>\n<td>\n<p><strong>Animation<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>Function to call<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<p>PlayerIdle<\/p>\n<\/td>\n<td>\n<p>UpdateIdleCount()<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>PlayerHit<\/p>\n<\/td>\n<td>\n<p>UpdateHitCount()<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>PlayerChop<\/p>\n<\/td>\n<td>\n<p>UpdateChopCount()<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>With all your animations set, go back to the scene window by clicking <em>Window<\/em> and then <em>Scene<\/em> as shown in Figure 42.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"655\" height=\"608\" class=\"wp-image-77049\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-37.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 42: Switching to the scene window<\/p>\n<p>One last task you should do is set some default text for the text objects. Select the <em>Idle Count Text<\/em> object from the hierarchy, go to the <em>Text<\/em> component and change the text field to say <em>Idle Animation played 0 times<\/em>. Figure 43 shows where to find this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"373\" class=\"wp-image-77050\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-38.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 43: Changing the default text for Idle Count Text.<\/p>\n<p>Do the same with the <em>Hit Count Text<\/em> and <em>Chop Count Text<\/em> objects. Table 4 will show each text object and what its default text should be.<\/p>\n<p><strong>Table 4: The default text for each text object.<\/strong><\/p>\n<table class=\"table--tight\">\n<thead>\n<tr>\n<td>\n<p><strong>Text Object<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>Default text<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<p>Idle Count Text<\/p>\n<\/td>\n<td>\n<p>Idle Animation played 0 times.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Hit Count Text<\/p>\n<\/td>\n<td>\n<p>Hit animation played 0 times.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Chop Count Text<\/p>\n<\/td>\n<td>\n<p>Chop animation played 0 times.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Your project is now complete! Play your game by clicking the play button near the top of the Unity editor. As it plays, notice that whenever the animation reaches frame 0 the animation counter goes up. Press the <em>A<\/em>, <em>S<\/em>, and <em>D<\/em> keys to change animations. Figure 44 is an example of what the finished project will look like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"625\" class=\"wp-image-77051\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/01\/word-image-39.jpeg\" \/><\/p>\n<p class=\"caption\">Figure 44: The completed project.<\/p>\n<h2>Conclusion<\/h2>\n<p>There&#8217;s a lot to digest after completing this project. You&#8217;ve been shown how to navigate the asset store, how to create animation events, and how to use the animator window. Using all these items together allowed you to create counter that tracks the number of times an animation plays, but they can be used for so much more than that. All it takes is a little creativity and thought and you can have animations and code do much more together than either one could accomplish by itself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animation is a very important feature of games. In this article, Lance Talbert shows you how to add animations to your Unity project that take advantage of C# functions.&hellip;<\/p>\n","protected":false},"author":317499,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[],"coauthors":[52549],"class_list":["post-77006","post","type-post","status-publish","format-standard","hentry","category-dotnet-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/77006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/317499"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=77006"}],"version-history":[{"count":9,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/77006\/revisions"}],"predecessor-version":[{"id":78313,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/77006\/revisions\/78313"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=77006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=77006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=77006"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=77006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}