SE 320 – Introduction to Game Development Lecture 11: Animations and GoKit Lecturer: Gazihan Alankuş Please look at the last slides for assignments (marked with TODO) 1

Topics Today Revisiting animations Using Animations Using GoKit 2

Moving Things in Unity 3 Setting position/rotation in the Update() function ManualAnimations Applying forces/setting velocities in the update function Position-basedPhysics-based Creating animations in Unity’s Animation pane In Unity Creating animations in the modeling software In Blender, etc. Tedious, have to keep state and do something every frame Things can go out of control, most motions are not physically viable Static motions, cannot adjust easily in runtime

Deciding how to move things All methods have their pros and cons, you have to decide for your situation – Animations are great for most cases In week 8, we have learned how to create animations in the Unity editor Let’s see how we can use animations coming from a model created in Blender – Models from 3DS Max and Maya are similar 4

Using animations created in Blender We have a model that was created in Blender.model It has a number of animations in a single timeline, one after the other 5

Using animations created in Blender Now we would like to use this in Unity Select the.blend file and the textures, drag them together to the Assets folder or Project pane – You can also drag the folder that contains them 6

Using animations created in Blender Now you see a prefab-like entry in the Project pane. You should see the textured robot in the inspector when you select it. 7

Using animations created in Blender You can drag it into the scene and run the game. You’ll see it doing some motions one after the other These are the animations that are in the timeline of the Blender file. We need to separate them and name them. 8

Using animations created in Blender The artist that created the animations (yours truly) told us which frames contain which animations: – 1-20: Walk – 30-50: Damage – : Rejoice Now we want Unity to know them as well. Select the model in the project pane and look at the inspector. 9

Using animations created in Blender There you will see import options for this Blender file. Under Animations, we want to add all the animation segments 10

Using animations created in Blender We add them and name them accordingly. We can set them to loop if it makes sense. Don’t forget to press the Apply button on the bottom 11

Using animations created in Blender Now select the robot in the hierarchy. In the inspector, under the Animation component, we see that Play Automatically is marked. This is why it was moving when we ran the game earlier. When we run it now, it will only play the Walk animation. This is because the Animation property is set to Walk. 12

Using animations created in Blender Under Animations property, we should see all three of the animations. We can set Animation to be one of the others and view them by running the game 13

Using animations created in Blender Now disable Play Automatically and let’s start to initiate animations through the code 14

Starting animations in code These are just like the animations that we created in Unity’s Animation pane in week #8 Create a new C# script and add it to the robot. Add the code below to create buttons that initiate the animations 15

Starting animations in code Notice how clicking only once is sufficient for starting the animation. Similarly, your code should call the.Play() function only when it’s needed. – We have talked about this extensively in Week #8 16

Preparation for this week’s homework At the end of the slide deck you will see more information about this homework. Here we will go over the necessary steps for you to start working on the homework Download this package: Create an empty Unity project and import the package 17

18 (Create an empty Unity project and import the package)

Preparation for this week’s homework Play the game and observe that you lose health when you hit the arrows, the axe, spikes, etc. Jump to the other side and get rich. 19

Preparation for this week’s homework Now let’s prepare to add our animation. In Hierarchy, under 3rd Person Controller, remove Bip001 and construction_worker. Let the DamageReceiver stay. 20

Preparation for this week’s homework Download the robot model from here: Extract it, then import the extracted folder into your project by dragging it into the project pane 21

Preparation for this week’s homework When you select the robot model in the project pane, you should see the robot textured in the preview part of the inspector pane 22

Preparation for this week’s homework Drag the robot model into the scene at the beginning of the level 23

Preparation for this week’s homework Now we will make it work with the 3 rd person controller. – Create an empty game object and drag it under 3rd Person Controller. Rename it “Offsetter” – Reset its transform component – We will use this to locate the robot without touching the robot’s transform, which is driven by animations coming from Blender. 24

Preparation for this week’s homework Drag the robot under Offsetter Revert the transform of the robot to prefab by clicking “Revert to Prefab”. This will ensure that we don’t compete with the transform values coming from Blender’s animations. – Finally, these transform values should not be in bold 25

Preparation for this week’s homework Now, when we run the game, we see that the robot is huge and sideways. – We will fix this using the Offsetter 26

Preparation for this week’s homework Rotate and scale the offsetter so that the robot is smaller and looks at the correct direction. 27

Preparation for this week’s homework From here on, it’s up to you to complete the rest of the homework. Take a look at the earlier parts of this slide deck for more information. 28

Limitations of Animations Animating displacement is static. In code, I should be able to give a destination that I calculated, and an object should move there in a specific duration. Tweening libraries – GoKit

Getting GoKit Go to and download a zip filehttps://github.com/prime31/GoKit Extract it to a folder. This is a Unity project. Open it with Unity. 30

Getting GoKit Open the scenes in the Demo folder and play with them 31

Using GoKit To use GoKit in your own projects, you just need to copy the Editor and Plugins folders into your own project Let’s create a new empty Unity project and copy these folders from the GoKit-master project into our project. 32

Using GoKit Let’s create a cube, a c# script "CubeScript" and attach the script to the cube. Create a directional light and align the camera to view When you run the game, nothing happens, yet. 33

Using GoKit Add the code below to the script. When you run the game and press the button, you will see the cube move to (5, 0, 0) in 3 seconds. Notice how GoKit added new functions to the existing Transform class Run it and see the cube move 34

Using GoKit Take a look at the GoKit Code Basics page in the GoKit wiki: Instead of calling extension methods such as transform.positionTo(), you can also do this – Go.to(someTransform, duration, someTweenConfig) – This way you have more control over the configuration of your tween. 35

Creating Tween Configurations Try this code, it will move the cube, make it smaller and make it red, simultaneously in 3 seconds. The TweenConfig class encapsulates these operations. 36

Using GoKit You can tween any property you see in the components. For example, lets move it by changing the position property by name: Instead of transform, you can use any other component and any property that they may have. It behaves as if you are changing the property using the inspector. 37

Using GoKit You can shorthand the config creation if you want. The two code pieces below are equivalent. 38

Using GoKit You can also chain tweens one after the other, or place them in different points in time, using TweenChain and TweenFlow classes 39

Visual Path Editor GoKit includes a visual path editor that you can create paths composed of spline curves – You can create these paths visually, or you can supply the points in runtime – Let’s see how we can use the visual path editor 40

Visual Path Editor Create a folder named StreamingAssets in your project. This is where GoKit will save path files. Create an empty game object and drag the GoDummyPath script onto it 41

Visual Path Editor When you select this GameObject, you will see some new markers in the scene. You can drag these to set the begin and end of the path. You can double click on them to create new points for the path 42

Visual Path Editor Once you’re done, name your path and save it using the inspector. The file in StreamingAssets folder contains information about this path. If you don’t want to create any new paths, you can remove this GameObject. 43

Visual Path Editor Here is how we can play this path in our code 44

Visual Path Editor When we run the game, we see that the cube follows the path nicely 45

TODO: Homework Start with slides here. Using Blender animations – Make the robot play the Walk animation while it is moving. Stop it when it is not moving (handle input independently in your script) – Make the robot play the Damage animation when it receives a damage – Make the robot play the Rejoice animation when it reaches the gold. Play it only once. Using GoKit – Change the red balls so that they hit the character like a homing missile – Add another ball cannon that shoots green balls that go in a predefined path that looks like a wave Get Özkan to grade your work, according to – (NOTE THE ADDRES CHANGE!) – Subject (paste this): SE 320 Homework 11 – What to send: Assets -> Export package File -> Build Settings -> Web player -> Build (for both games) – DUE DATE: Dec 11 46