1

SE 320 – Introduction to Game Development

Lecture 11: Animations and GoKitLecturer: Gazihan Alankuş

Please look at the last slides for assignments (marked with TODO)

2

Topics Today• Revisiting animations• Using Animations• Using GoKit

Moving Things in Unity

3

Setting position/rotation in the Update()

function

Manual Animations

Applying forces/setting

velocities in the update function

Position-based Physics-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

4

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

5

Using animations created in Blender

• We have a model that was created in Blender.

• It has a number of animations in asingle timeline, one after the other

6

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

7

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.

8

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.

9

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– 60-100: Rejoice

• Now we want Unity to know them as well. Select the model in the project pane and look at the inspector.

10

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

11

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

12

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.

13

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

14

Using animations created in Blender

• Now disable Play Automatically and let’s start to initiate animations through the code

15

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

16

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

17

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: http://homes.ieu.edu.tr/~galankus/teaching/12fall/se320/material/day11/animhw.unitypackage

• Create an empty Unity project and import the package

18

(Create an empty Unity project and import the package)

19

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.

20

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.

21

Preparation for this week’s homework

• Download the robot model from here:• http://homes.ieu.edu.tr/~galankus/teaching/12fall/se320/material/day11/robotmodel.zip

• Extract it, then import the extracted folder into your project by dragging it into the project pane

22

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

23

Preparation for this week’s homework

• Drag the robot model into the scene at the beginning of the level

24

Preparation for this week’s homework

• Now we will make it work with the 3rd 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.

25

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 valuesshould not be inbold

26

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

27

Preparation for this week’s homework

• Rotate and scale the offsetter so that the robot is smaller and looks at the correct direction.

28

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.

29

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• https://github.com/prime31/GoKit • https://github.com/prime31/GoKit/wiki • http://prime31.com/unity/docs/#goKitDoc

30

Getting GoKit• Go to https://github.com/prime31/GoKit and

download a zip file• Extract it to a folder.

This is a Unity project.Open it with Unity.

31

Getting GoKit• Open the scenes in the Demo folder and play

with them

32

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.

33

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.

34

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 GoKitadded new functions to the existing Transformclass

• Run it and see the cube move

35

Using GoKit• Take a look at the GoKit Code Basics page in

the GoKit wiki: https://github.com/prime31/GoKit/wiki/1.-GoKit-Code-Basics

• 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.

36

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.

37

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.

38

Using GoKit• You can shorthand the config creation if you

want. The two code pieces below are equivalent.

39

Using GoKit• You can also chain tweens one after the other, or place them

in different points in time, using TweenChain and TweenFlow classes

40

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

41

Visual Path Editor• Create a folder named

StreamingAssets in your project. This is where GoKit will save pathfiles.

• Create an empty game object and drag the GoDummyPath script onto it

42

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

43

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.

44

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

45

Visual Path Editor• When we run the game, we see that the cube

follows the path nicely

46

TODO: Homework• Start with slides 17-28 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 http://homes.ieu.edu.tr/~osayin/gd/homework_policy.html– ozkansayin.ieu@gmail.com (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