SE 320 – Introduction to Game Development

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

2. Topics Today • Revisiting animations • Using Animations • Using GoKit

3. Moving Things in Unity Manual Animations Setting position/rotation in the Update() function Applying forces/setting velocities in the update function Creating animations in Unity’s Animation pane Creating animations in the modeling software Position-based Physics-based In Unity 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 dragthe 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 lightand 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