Creating and Triggering Animations 1. Download the zip file containing BraidGraphics and unzip. 2. Create a new Unity project names TestAnimation and set the 2D option. 3. Create the following folders under Assets (folders indented under other folder will be created Sprites Greeteridle Greeterwalk Animations Scripts Scenes 4. Click the File menu, choose Save Scene, name the Scene AnimationScene and save it in the Scenes folder. 5. In the BraidGraphics folder open the GreeterIdle folder. 6. Drag all the single image files into the Greeteridle folder. (Click the first image, hold down the shift key, and click the last image to select a group.) 7. In the BraidGraphics folder open the GreeterWalk folder. 8. Drag all the single image files into the Greeterwalk folder. You will next create game objects that consist of these individual files. This is done by dragging a group of files into the Scene. An Animation will automatically be created. 9. In Unity, open the Greeteridle folder, hold down the Ctrl key and type the letter A to select all the images.
10. Drag this selected group of images onto the scene object in the Hierarchy window 11. A dialog box opens and prompts you to name and save an Animation. A new Animation is being created for your list of images. Name this animation GreeterIdle and save it in the GreeterIdle folder. You see an Animator window open over the Scene window. 12. Click the Scene tab to show the Scene.
13. In the Hierarchy window rename the just added object to Greeter. There were two objects created in the Greeteridle folder. A Greeter Animator and a Greeter Animation. The Animator is the controller for the Animation. 14. Using the above steps for creating the Greeter animation, use the images in the Greeterwalk folder to create another greeter object in the hierarchy and another greeter animation/animator. When you save the Animation name it GreeterWalk. You should now have two objects in the Scene (you may have to drag the second object to the left/right so it does not cover the first object). We will remove this second object because all we want is the Greeter Walk animation. 15. In the Hierarchy window click the name of the new object and press the Delete key. 16. In the Greeterwalk and Greeteridle folders drag the animations GreeterWalk and Greeteridle into the Animations folder. We will next create conditions on the Animator to switch between the idle and walk animations. 17. Click the Animator tab next to the Scene tab to show the Animator window.
This shows the Greeteridle animation and under what conditions it will be run. In this case, the Entry box indicates that the idle animation will start when the object (greeter) is first displayed. We want to add the second animation to this animator and set transition conditions. 18. Click in the Animations folder. You see the two animations created earlier. Drag the greeterwalk animation into the Animator window and drop it just above the Greeteridle block. Before adding transition logic you need to set a Parameter on the animation. 19. Click the Parameters tab in the animator window to select this option:
20. Click the plus symbol to add a parameter and choose Bool as the data type. 21. For the parameter name type standing and press Enter. 22. Click the check box next to this parameter to set the value to True. It should look like: You will next set transitions between these two animations. 23. Right click the greeteridle box in the Animator and choose Make Transition. 24. Move the mouse over the Greeterwalk animation and click. You see a transition arrow running from the idle to the walk animation. 25. Right click the mouse on the greeterwalk animation box, click the right mouse button, and choose Make Transition.
26. Move the mouse back over the greeteridle animation and click. You should now have to arrows between these two animations. 27. Click the arrow from the greeteridle to the greeterwalk animation blocks. The arrow turns blue since it is selected. 28. In the Inspector area uncheck the option Has Exit Time. 29. In the inspector window, under the conditions area, click the plus symbol to add a condition. You see the parameter named standing with the Boolean value true in a drop-down menu. This describes the condition under which the animation switches from the idle animation to the walk animation. We want to set this condition to False. That is, when the standing value is false then the animation switches to walk. Change the parameter value to false. 30. Click the other transition from the walk animation to the idle animation blocks.
31. In the inspector window for this transition, uncheck the Has Exit Time and add a condition for standing to be true. 32. Run your program with the Animator window open. In the game window you see the greeter idle animation. In the animator window when you click the Standing parameter check box to turn on and turn off the parameter value you notice the animation change to walking. Moving with a Script You will next create a Script to move your object. 1. Right click the Scripts folder and create a new C# Script. 2. Name this script greetermove and double click the script to open it in the editor window. You want this script to do three things, move the figure left/right if the keyboard or controller is pressed, flip the image if the left/right keys are pressed, and swap the animation. 3. Edit the script so it looks like: This will move the figure left/right. 4. Drag the script and drop it on the Greeter object in the hierarchy window. 5. Run your scene and move the figure around the screen. You will next add the animation switch. If the x value of the pos vector is zero then the object is not moving and the animation should be set to idle. If the x value of pos is not zero then it is moving.
6. Edit the script so it looks like: You first define an Animator variable to hold the Animator object associated with this Greeter object. You then get a reference to this Animator object in the Start() method using the GetComponent<Animator>() command. In the Update() method you check the value of the Vector3 object pos. If the x value is zero (the object is not moving left or right) you use the SetBool method on the animator object to set the parameter to true or false. Notice that the name used in the SetBool command is the same name you used when you set the parameter on the Animator. 7. Save your script and run your scene. The greeter now switches between animations when the arrow keys are held down. You will next flip the image on the X axis. This is done by using the command transform.localscale being set to a positive or negative value. In order to do this you must add a facingright flag (Boolean) and then swap the localscale value. You can only add a new localscale value and not directly edit the existing value.
Edit your code so it looks like the following: