Animations by huanghengdong


Outcomes from this Document
Unity3D provides a powerful and easy to use animation tool which allows properties of any components
to be animated. In this lab we will walk through the process of creating animations in Unity and working
with the Animation panel. At the end you should understand how to create animations, modify
animation curves and call scripted methods from the timeline.

    1. Open the animation panel. You may position it within your layout to how it suits you.

    2. To begin animating an object you need to have an object in your scene. Create a simple cube
       and place it in view of the camera.
    3. When you have the new Cube object selected you will see that the animation panel fills with
       extra information.
You will see that the cube hierarchy within the animation manager contains the various components
attached to GameObject. Transform, Box Collider, Mesh Filter, Mesh Renderer and the Material
applied all contain properties which can be exposed by dropping down the left triangle beside the

4. The animation panel provides you with several controls, from left to right
    Record - You will need to enable this before Unity will begin recording any changes made to
       the animation of an object.
    Play - Will allow you to preview the currently selected animation on the GameObject.
    Previous Key Frame/ Next Key Frame - These buttons will allow you to jump to the previous
       or next keyframe on the timeline.
    Frame - Indicates the current frame the animation is on
    Add Key Frame - This becomes enabled when recording is turned on. For the selected
       properties of a component this will add a keyframe for those in the animation.
    Add Event - Allows you to call methods from scripts attached to the GameObject.
6. Below the animation controls the combo box on the left represents the selected GameObject,
   while the combo box on the right when dropped, shows all of the animations attached to the
   current GameObject. If no animations are attached, like how our scene should be now, click this
   combo box and select Create New Clip.

7. A save dialog box will appear. I would recommend creating a new folder called "Animations"
   then name the animation "SimpleBoxAnimation" within this folder. Save this.

8. You will now see in the animation combo box that our SimpleBoxAnimation will be currently
   selected. Enable the record button so that we can begin animating the box. Also note that the
   Play, Pause and Next buttons at the top of Unity change to indicate that the animations are
   being recorded.

   The properties for each component will be added to the animation panel. In the above image
   you can see that each property of the Transform component has been added beside the
   property name.
9. Select the Transform component on the animation panel and click the add key frame button.

    Unity will add coloured indicators, diamonds, to say that the current frame contains a key. Later
    when you move the timeline you may see these indicators change to circles indicating that it is a
    normal key between key frames.

10. Move the time line to 2:00 either by clicking on the timeline or entering 120 into the Frame
    number box. You can work with either system, you will need to remember that if you change
    the number of fixed frames per second this will change these values in the animation panel.

11. Add another key frame at this point. You animation timeline should look like the following.

12. Now we want to adjust the second key frame that we created and create a simple movement
    animation of the cube. Make sure the transform components are still selected and move the
    cube on the Y axis.

13. You should see that the lines in the animation panel have changed to reflect how the Y axis
    changes on the cube over time. If the lines are too close together like the above image, grab the
    ends of the vertical scroll bar of the timeline and 'squeeze' the ends together to adjust the scale.
    Adjust it so that the Y axis line is focused like so. You may want to just select the Position.y
    property so that only the Y axis line is visible.
14. Click play when you finish moving the cube. You can see how the change over time in the
    timeline affects the animation.

15. Let's change how the curves can affect the animation. Unity allows you to edit the curves of
    these animations. We should separate these into different animations for now so that we can
    see the effects they will have on the cubes movement. Make a new animation and name it

16. Add 2 key frames as before on 0:00 and 2:00, as outlined in steps 9-12.

17. With this done we can now modify the handles of the key frames. Right click on the second
    keyframe and select "Free Smooth"
18. A small gray icon handle will appear on the line. Grab this and move it upwards to check how
    this affects the animation. If your animation curve looks like below you will notice that the cube
    will slow down and pop back to its correct position around 1:45 on the timeline as it has a crest.
    This crest means that the object will move further than the point on the keyframe it is moving

19. Move the timeline to 1:00 and add a new keyframe. You will notice this will add a point on the
    curve along with 2 handles either side of the new point.
20. Grab the right handle and move it upwards to look like the following. You will notice that the
    handle on the left side moves inversely while you do this. These are linked.

21. Play the animation to and you should see that the cube bounces through the animation.

22. Next we are going to break the link between the handles so we can change the shape from a
    smooth curve. Right click on the middle key frame. On the Both Tangents select Free.
23. Grab the left handle of the second keyframe and drag it upwards. You should have something
    similar to this.

    Here we have the cube bouncing upwards until the second key frame where it curves back to
    the point before making a second small bounce. You can see how you can use an animation like
    this for a bouncing ball animation, in conjunction with changing the scale properties will provide
    a good effect.

24. We can also use one of the presets alongside Free to change how the individual handles behave.
    Right click on the key frame again, this time select Right Tangent and Linear. The curve will
    smooth out from this keyframe.

25. Test the animation with this curve.
   26. Change the Right Tangent to Constant to see that the cube will jump to the correct position
       instantly at 2:00

Before you continue you should try the following:
              Create a new animation. Change several properties in this animation such as position
               rotation and scale on the Transform component to make a bouncing animation.

              Create a new animation and adjust the material properties for the objects colour over
               time. This may come in useful when you want to indicate an attack or highlight
               something in your game.
27. Triggering events can make your animations more complex, having one animation update a call
    to open a door for example without the need to animate it, or add health points to a character.
    To do this we first need to add a script to our project. Create a new C Sharp Script called
    "BoxScript" and add the following code for MyMethod which will just print out a message when

28. Add this BoxScript to our cube in the scene.

29. On the Cube create a new animtion called SimpleBoxMethods. Add 2 keyframes, 1 at 0:00 and a
    2nd at 2:00

30. At 1:30 on the timeline click the Add Event. A small box should appear like so.

    On the drop down box select our MyMethod.

31. You should now have an event indicator on your timeline.
32. In order to view this animation and get the method to call we need to change the default
    animation which is assigned to the cube when the game plays. Select the Cube in the scene and
    under the Animation component which is now attached to the Cube, select the Animation
    property. Click on the selection icon to the right of the currently select animation, to display the
    animation selection dialog like below.
33. With this done, Play the game with the Console window open and the message will print out.

34. Update the BoxScript with a second method MyMethod2. This will allow us to pass a value from
    the timeline and print that value out to the console again. This can be used again anywhere you
    need an animation to update a components properties etc.
35. On the timeline change our event so that it calls this MyMethod2 and pass a value like so

    To delete any event keys, right click and select delete.

36. Play the game and the animation should print out the value you entered.

37. Lastly you will notice that the animation just plays once. you can change this so that the
    animations loop by selecting the animation in the Project panel for example
    "SimpleBoxAnimationFree" and select the Wrap mode on the inspector panel.

38. Test this by setting "SimpleBoxAnimationFree" as the default animation on the cube. Also try
    the PingPong wrap mode where the animation will reverse its direction over time.
Additional Tasks
With the animation panel covered you should try to add a simple scene to your AngryPenguin game
from the last lab. This will involve creating a simple animation of the character in front of the camera
before loading the gameplay level. The steps to do so should include.

    1) Create a new "Intro" scene in your project.
    2) Add the Penguin prefab. You may want to modify some of the components depending on your
       animation, like removing gravity etc.
    3) Create a new animation for the Penguin in front of the camera.
    4) Create a script which has a method to load the next level . The code to load a level is

                Application.LoadLevel("Name of your level");
    5) Call this method from the last frame of your animation.

To top