Computer Game Development and Design 2022/23 fall

Lab 11 - Animations

This lab consists of three tasks that add up to 2 points.

• 0.5p - Tweening and basic animation
• 1.0p - Unity animations [0.5p - correct solution, 0.5p - quality of the animation]
• 0.5p - Unity animation controller - transitioning between animations.

The solution should be submitted as an executable game. Be sure to test your solution and verify that scene transitions are working!

Task 0: Preparation and setup

1. To get started first download the base package: Download from here
2. Create a new unity 2D project.
3. Import the base package
4. Add All 3 scenes from the package to the Build Settings. Do not add the SampleScene!

Task 1: Basic animation

Due to some finer intricacies how Unity has implemented its animation and UI systems, it is a good idea to not use the full animation system for simple UI transitions. Using the animation system for UI can have a very high impact on game performance. Implementing a very simple animation system ourselves will also give us a tiny bit of insight as to what might be going on behind the scenes in the Unity animation system.

1. Open the scene 0_Tweening
2. Create a new script named ScalingAnimation.
3. Open up the TweeningPanelPresenter and finish the TODOs
4. Find the TweeningPanelPresenter component in the scene. It is attached to the Animated Panel gameobject.
5. Add ScalingAnimation script to the Animated Panel gameobject to control the opening animation
6. Add another ScalingAnimation to the same gameobject to control the closing animation.
7. Give TweeningPanelPresenter references to both of the animations.
8. Disable both of the ScalingAnimation components from the editor. We will enable them only during the animation.

ScalingAnimation

1. Replace the Start method with OnEnable. This method is called every time the component is activated, while the Start method is only executed once during a components lifecycle.
2. Add a public variable of type AnimationCurve configure the animation.
3. Add a public variable of type float to configure the speed of the animation.
4. Add a public variable of type Vector3 to configure the target scale.
5. Add a public variable of type Vector3 to configure the starting scale.
6. Add a private variable of type float to aggregate the time.
7. In the OnEnable method assign values to the private variables.
8. In the OnEnable also assign the value of starting scale to the transform. Otherwise, there can be a single frame where the panel has full size before the animation starts.
9. In the Update method
   1. Aggregate time based on the speed variable.
   2. Evaluate the animation curve based on the aggregated time. Help
   3. Lerp the scale of the transform based on the evaluation. Use the unclamped version of this method so we can make the UI elements pop. Help
   4. When the aggregated time reaches 1, then disable the script (Not the gameobject!).

Configuring the opening ScalingAnimation

1. Set the starting scale to (0, 0, 0)
2. Set the target scale to (1, 1, 1)
3. Set the speed according to your liking. 1 / Speed is the duration of the animation.
4. Open the curve editor by clicking on it next to the animation curve variable in the Inspector.
5. Assign a curve. It has to start from (0.0, 0.0) and end at (1.0, 1.0). The curve between the points will control the flow of the tweening. On image is an example that will make the panel slightly pop.

The closing ScalingAnimation

For opening animation we are enabling both the gameobject and the animation script. On closing we can not do the opposite however, as then there is nothing to animate. To work around this we have to trust disabling of the object to the animation script.

1. Add a public bool CloseOnEnd to the ScalingAnimation
2. If this variable is set to true, then also disable the gameobject
3. Replace the line to disable gameobject from the Close method in TweeningPanelPresenter with a line that only enables the closing animation.
4. Configure the closing animation component.
5. Test the solution.

Tips and tricks

A more general, but slightly more complicated solution would be to use UnityEvent instead of the boolean value. This way you can configure through the editor what should happen when the animation finishes. This will also be shown in the practice session but isn't necessary to complete the task.

The UI object that is being animated will always scale in from the pivot point. This can be used to easily create buttons that seem to expand into full windows by setting the pivot point of the panel over the button.

You can easily modify this script to control the rotation and position values as well to create other tweening effects.

Task 2: Unity Animations

While the approach covered in task 1 is great for very simple animations and UI transition effects, it is a bit lacking for more advanced movements. For those, we should use the Unity animation system.

The goal of this task is to make the ball in scene 1_Animation bounce up and down while moving from left end of the screen to the right. The completed animation should look like a thrown ball coming to a stop after a few bounces. Also, set the loop time on the animation file to true so that it would repeat as long as the game is running.

Creating an animation in Unity takes place entirely in the editor. If you missed the practice session and are working on your own then it is recommended to watch a video tutorial, as this is a very visual process. Luckily there exists an excellent video that explains bouncing a ball from the very start. However, you will have to add the loss of force between each bounce and horizontal movement on your own.

Animation 101 - Intro to Animation in Unity

Workflow

1. Select the ball in hierarchy view.
2. Open the Animation view from Window > Animation > Animation (or Ctrl + F6)
3. In the new Animation window click on the Create button. This will do a number of things for you automatically, which could all also be done manually depending on current needs. In short, it will:
   • Add an Animator component to the ball gameobject
   • Create an Animator Controller asset in the project files with the name Ball
   • Opens a file saving window where the name for the first animation of ball has to be entered.
4. Enter the name of the animation. E.g. Bounce
5. Use the Dopesheet to set the timings of the animation. (See video tutorials if not in class)
6. Use the Curves sheet to fine tune and control the spacing of the animation. (See video tutorials if not in class)

0.5p for this task comes from the quality of the animation. To improve the feel of your animation it is recommended to watch the following videos:

1. Animation basics: The art of timing and spacing - TED-Ed
2. Animation- Bouncing Ball Explained | Darkmane The Werewolf

Task 3: Unity Animation Controller

Use the robot sprites and the included CharacterInput script to make an animated character.

The input is implemented in the CharacterInput script. To make it work, you will have to create an Animator.

Creating animations

First we will create the idle animation. The process for the rest of the animations is the same.

1. Find the spritesheets in the sprites folder. Each robot boy animation is on a different spritesheet.
2. Select all the subsprites of the RobotBoyIdleSprite.
3. Open the context menu with right click on the selected files.
4. Choose Create > Animation.
5. Name the animation RobotIdle
6. Select the animation asset and set the Loop Time value to true in the inspector.
7. Move the animation to the Animations folder.
8. Bonus: add squash and stretch to the ball bouncing (up to 0.5p).

Creating Controller

The controller could be created and added to the character same way as we did with the ball using the create button, but we will try each of these steps manually to hopefully better understand the parts animation system uses.

1. Go to animation folder
2. Use the create menu to create an Animation Controller and name it RobotBoy (or anything else you fancy)
3. Select the RobotBoy gameobject in the scene.
4. Add an Animator component. (Not the Animation component! That is part of an old animation system that has been replaced)
5. Set the Animator components Controller value to the RobotBoy controller you created in step 2.
6. Doubleclick on the RobotBoy controller to open the Animator window. This is used to create transitions between animations.
7. Drag the RobotIdle animation into the grid in the Animator window.
8. Hit play. The robot should be doing an idle animation now. If it only plays once, then you missed step 6 in creating animations.

Creating transitions

We will first look at how to enable the walking transition. The script part of controlling the animations has already been implemented in the CharacterInput script, but the lines that send information to the controller have been commented out. The implementation should be easy to understand, as we have already done input handling a number of times during the course.

1. Find the commented out line that is responsible for walking.
2. Add the line back to code.
3. In editor go to the Animator window and select Parameters tab.
4. Click on the + sign to create a new parameter. If this is not clickable, then you might still be in play mode.
5. Set the name and type of the parameter based on what was used in the code part at step 2.
6. Repeat Creating Animations for the Walking spritesheet.
7. Add the walking animation to the controller.
8. In the controller window right click on the Idle state and select Make Transition. Drag the other end to the Walking state.
9. Select the created transition by clicking on the created line.
10. Add a condition to the conditions list.
11. If you have followed the guide exactly, then the values should be already correct. Otherwise, the condition should be Walk and value true.
12. Set the Has Exit Time value to false. This way the transition will start immediately when we want the character to walk.
13. Set the transition duration to 0. During this time two animations are being blended together. Blending is great for skeletal animations, but not recommended with a spritesheet animation.
14. By pressing play, you should now be able to make the robot walk when using left or right arrows. Setting the Walking parameter true from animator window would also work.
15. Now also create an animation back from walking to idle.

Task

Repeat the previous steps to implement the rest of the input.

The CharacterInput has implemented the following inputs:

• Left or right - walking animation
• Walking + shift - running animation
• Walking + ctrl - crouch walking animation
• Walking or running + space - jumping animation
• Crouching + space - roll animation
• 1 - taking a nap (dying animation, doesn't have out transition)

Submission

The solution should be submitted as an executable game. Be sure to test your solution and verify that scene transitions are working!