Module 2 Examples: Object Control/Interaction + User Interface

Link to GitHub

Coverage

Unity specific skills you will need, practice, and demonstrate include:

· Finding GameObjects and accessing Components

· Setting a Component reference in the editor

· Working with Unity Prefab

o Create a prefab in the editor

o Create/Delete objects at run time

· Continue working with Transform of GameObject

o Set positions

o Set object rotation/orientation

· Object collisions and responses

· User Interface

o Getting world position from the mouse

o Assign a component of a GameObject to a script-variable

o Sharing the editor between the GameObject world and the UI coordinate system

o Working with UI RectTransform

o Event vs Polling

· Packages: create and import

· Useful Unity API knowledge (not covered in the examples)

o GameObject.Find()

o GameObject.GetComponent<DataType>()

Concepts you will explore and understand include

· Direct object control: driving an object

· Frame update time vs wall-clock real time

· System and component re-use

· Approximating object bounds with colliders

· Coordinate systems for game play and user interactions

· Event vs Polling user interactions

1. Object navigation: All in GreenArrowBehavior.cs

o Run Behavior: green arrow follow mouse, or <Space> and navigate with WASD

§ Space bar: to toggle mouse positioning vs keyboard WASD

§ Note: Color change between mouse and keyboard

• Organization: created a new folder in Assets, Scripts, to organize the scripts
• Subfolders in Scripts (for now): Hero (support GreenUp)
• GreenArrowBehavior
• WASD: as previously move
• Initialization of color in Start(), and checking for error (Debug.Assert)
• Debug.Log: Print out current mode, output shown in the Console Panel (WindowàPanels àConsole)
• Notice: the alternate of getting the reference to the Camera on Main Camera
• Camera.main
• How to get Component (GetComponent<SpriteRenderer>().color)

o Public variables: show up in Inspector and you can change these during runtime via the editor!

§ WATCH OUT: changes made during runtime in the editor WILL NOT be saved!

§ mTheCamera: Reference to the Camera component on the Main Camera (must be set in the editor)!

§ Mouse vs Keyboard control can be toggled

§ Travel speed/rotation speed can be controlled

o Speed: Distance per unit time. Update() function is called at about 60 times per second!

§ mHeroSpeed: is units per second (Unity defines: Time.smoothDeltaTime) to convert frame update time period to wall clock time

§ Remember total height of the world is 200 units. Verify travel from top to bottom is about 10 seconds

§ mHeroRotateSpeed: 45-degree/second, takes about 8 seconds to do a 360-degree rotation

o Mouse position: must translate pixel position to camera space

§ Make sure to zero out the z-component

§ Note: actual position must be transformed by the Camera (Main Camera)

§ The alternate ways to access the Main Camera: Camera.main, and via GameObject.Find()

o GetKey vs GetKeyDown:

§ State of a key vs. transition (event) of a key went from up to down state

§ Many time vs only once!

o Navigation:

§ Move towards the original y-direction: this is transform.up

newPosition = oldPosition + (Speed * Time.smoothDeltaTime * transform.up)

§ Rotate left/right: rotation with respect to the z-axis or the transform.forward

Transform.Rotate(transform.forward, RotateSpeed * Time.smoothDeltaTime)

o Learned:

• Source code (script) organization is important!
• Strategy: organize based using folder structure
• Unity’s function calling sequence!
• Constructor èAwake èStart èUpdate
• Setting Component reference in the editor (mTheCamera)
• Locating objects
• Gameobject.Find() find any object based on its name, returns null if not found
• Unity components: Can always call gameObject.GetComponent<ComponentClassName>() to access component on an object
• gameObject is a variable that references the hosting GameObject
• returns null if the component with the specific datatype (ComponentClassName, in this case) is not found

§ Public variables show up in the Inspector window: Convenient!

§ WATCH OUT: The configuration of these variables in the editor when the game is running will NOT be saved!

§ [SerializeField]: Note that mHeroRotateSpeed is private and yet is visible in the editor.

§ Frame rate vs real time wall clock

§ Unity variable: Time.smoothDeltaTime

§ Access mouse position (via the camera!)

§ Navigate an object by keyboard

§ How to move forward: transform.up/forward/right variables

1. Note: these directions updates as you change the objects orientation

§ How to rotate: transform.rotate function changes the transform.up (forward/right) directions!

2. Pre fab: Editor create prefabs and instantiate at runtime

• Run Behavior: space bar to spawn new eggs
• Prefab: "programming by example" drag an object (Egg) from Hierarchy/Scene-Window to Asset!
• Created a subfolder to keep Assets folder organized.
• NOTE: the "Resources" folder name is not an option!! Resources.Load(): depends on it!!
• EggBehavior
• Spawns and travels in its transform.up direction
• Kills self in a fix amount of time
• GreeArrowBehavior.cs::SpawnAnEgg
• How to load and instantiate from the Resources folder.
• After instantiated, can change new objects’ values (e.g., localPosition)
• Learned:
• How to create and use Prefabs in the editor:
• Drag a GameObject into the Assets folder
• Drag a Prefab back into the Scene Window
• Warning: changing instances of a Prefab does NOT change the Prefab
• Organization of Prefeb: must be in the Resources folder (under Assets)
• How to instantiate a prefab at run time
• How to delete (Destroy) a GameObject
• Note: as in C++, you create, you delete, if you don’t delete, it will be there forever!
  
  

3. Collision + Color + Texture: there is no WebGL link for this example as object manipulation must be performed via the editor window!

• Run Behavior: boring! Does not even do anything!!
• You must run and move objects in the editor to overlap the two
• Move either of the objects to collide the two
• Wiggle Plane or Arrow to see Plane disappear and regenerate as an Egg
• How Unity Collision works, conceptual model: Mechanics and Cost
• Arrow and Plane wants to collide.
• Requirements: Both must have Collider2D defined, at least one has a RigithBody2D
• I looked at this: https://answers.unity.com/questions/536674/how-to-detech-collision-without-rigidbody.html
• NOTE: this is NOT physics, just collision detection (we will look at “Unity Physics” a little later)
• In this example: Arrow has RigidBody, Plane does not
• Two Arrows can collide
• An Arrow can collide with a Plane
• Two Planes CANNOT collide
• Arrow: [The object that wants to handle the collision]
• Add BoxCollider2D (can be any collider 2D)
• Check “isTriggered”
• Trigger-related functions on this object will be called
• Add RigidBody2D (in Physics2D)
• TypeèKinematic
• Plane:
• Add CapsuleColldier2D (or any collider 2D)
• If Plane has a script, its onTrigger functions will also be called independent from if “isTrigger” is enabled.
• Try:
• Toggle on Plane’s isTriggered (it’s script’s triggered-function will be called)
• When to switch on isTriggered? Only the “actively colliding objects” need to have isTriggered on.
1. E.g., my car is driving down the road, I want my car to collide with all the objects in the world, so my car is the “active colliding objects” and its “isTriggered” should be on. The rest of the objects in the world, they are NOT actively colliding with anything, so, I should not switch on their isTriggered. It is all about performance!
• Scripts:
• Arrow: onTrigger() functions
• Plane: onTrigger è calls UpdateColor()
• NOTICE: onTriggerStay2D() is called as long as collision status changes (e.g., if the two objects stop moving, this function is not called, but will get called again when the either of or both of the two objects move).
• Texture/Sprite loading: https://docs.unity3d.com/ScriptReference/Resources.Load.html
• Notice the “GetComponent<aComponent>()
• aComponent: look at the Unity editor, Inspector Window, any component is accessible!
• SpriteRenderer:
• Color + Sprite
• Adjust in UI, adjust from Script
• WATCH OUT!
• If Obj-A collides with ObjB + ObjC at the same time (e.g., ObjB and ObjC are perfectly overlapped), then ObjA.OnTriggered2D() will be called twice!
• Learned:
• How to enable and work with Unity 2D collisions and receive the collision function calls for response
• How to change the color/transparency of an object at run time.
• How to change the texture of an object at run time
  
  

4. Game Manager + Simple UI Text

o Run Behavior: space-bar to spawn eggs, see the echo count on screen

o Create UI:

§ RMB: UI => Text (Canvas and EventSystems created automatically if not already there)

§ UI elements MUST BE child of Canvas, otherwise, will not show

§ Zoom out to see two spaces: Camera and UI

§ UI elements are in pixel space! (NOT camera space)

§ Size of UI space corresponds 1:1 to Game Window

§ Use Layer manager show/hide UI

o UI Text Mesh Pro (TMP): Always use TextMeshPro, LMB => UI => Text – TextMeshPro

§ TextMeshPro is a package addition to Unity, you will have to import the package.

§ The first time you try to create a TMP-Text, you will encounter the TMP-Importer:

§ Import the Essentials (click on Import TMP Essentials), I do not import the Examples and Extra. I have no need for those.

§ In your script, e.g., in GameManager.cs:

using TMPro; // The library to use

public TMP_Text mEggCountEcho = null; // The variable data type to use

o GreenArrowBehavior: includes an int to keep track of number of eggs on screen

§ OnMouseDown: a method on MonoBehavior that can be over-written to receive calls when right mouse button goes down on the game object. You can take a look at this function.

o EggBehavior:

§ Static variable: refer to GreenArrowBehavior

§ What is a “static” variable?

§ Tells GreenArrowBehavior when an egg is destroyed

o GameManager: central object to coordinate the entire game state

§ Hang off the MainCamera (always there), can also hang off an empty object

§ Two public variables must be set in the editor before game starts

§ GreeArrowBehavior and

§ TMP_Text for echoing egg status (UI-CanvasàEggStatusEcho [a TMP_Text object])

§ Singleton pattern: One instance in the world, “well-known”

§ What is a “static” variable?

§ This is a GLOBAL variable!

§ Note: Play the important role of “central coordinator”

§ Connect GreenArrowBehavior to EggBehavior

§ Central place for echoing state of the game

o Learned:

§ GameManager: Need to a central coordinator, often enforce to only have one

§ static declaration in a class

§ Class Variable persist for the entire process life time

§ Will persist over different levels (scenes)

§ UI: Two objects created automatically:

§ A Canvas object will be created, all UI objects must be a child of this canvas

1. All UI elements must be a child to this object! (otherwise will not be visible)

§ An EventSystem object, I drag the EventSystem to be a child of the Canvas (for organization purpose).

§ Default UI-Layer: to see or not to see

• Coordinate Systems:
• Working on TWO separate groups of objects: GameObjects and UI
• Two distinct coordinate systems!!?
1. GameObjects: arbitrary
2. UI: Pixels
• Learn about Canvas and placement of GUI elements
• Canvas: UI Canvas - Unity Official Tutorials
• Rect Transform: Rect Transform - Unity Official Tutorials
1. UI element references are NOT with respect to the main camera!!
1. They are with respect to the Canvas! (in pixels!)
   
   
   

5. User Interface and Packages:

o Run Behavior: press-space bar to launch egg at slider-bar-value interval

o Packet Import:

§ Assets èImport Package: select SliderWithEcho.unitypackage

§ From the github look for ClassExample/Packages

§ PreFab: UI-SliderWithEcho

§ Scripts/UI/SliderWithEcho.cs

§ To create your own package, do the reverse: AssetsèExport and select the appropriate components (remember to select the necessary scripts)

o UI: Using the imported package

§ Remember, first your scene must have a Canvas (create by: UIàCanvas)

§ To use: drag SliderWithEcho pre-fab into the Canvas:

1. Align anchor: lower-left

§ Rename to: SpawnRate

§ Must configure: (Select SpawnRate and look in the Inspector Window)

1. mLabelText

2. SliderValue: (this is a Text UI object)

1. Customize the text detail, e.g., color

3. SliderBar (in the Slider component)

1. Set: Min Value, Max Value, Init Value

§ Careful: when adjusting positions of the SliderWithEcho object, do not adjust the children positions!

o GreenArrowBehavior: reference an SliderWithEcho

§ In the editor: drag the entire SliderWithEcho (SpawnRate) to the GreenArrowBehaivor object

§ The value() of SpwanRate is how many seconds to wait in between spawning new eggs

§ Note: Time.time amount of seconds elapsed since the beginning of the game

o Learned:

§ Almost all Unity specific:

§ Time.time: time (in seconds) after game began

§ Package: import/export of prefab watch to check all dependent components

§ Note the logic in GreeArrowBehavior::Update() on check for spawn rate.

o Alternate implementation:

§ SpawnRateèSliderBar has a call back (event handler)

§ Can define a function in GreenArrowBehavior and add the function here.

1. Pros: Receives value change via event, no need to refer in update()

2. Cons: Implicit references (via event service functions), can be challenging to figure out all event handlers.

§ I usually poll UI events in Update() function.

§ Exercise:

§ Implement this alternative.

6. Cool Down Bar: simple continuation from the previous example
• Run Behavior: press-space bar to launch egg at slider-bar-value interval and watch the cool down bar
• Package Import:
• Assets èImport Package: select CoolDownBar.unitypackage
• From the github look for ClassExample/Packages
• PreFab: UI-CoolDownBar
• Scripts/UI/CoolDownBar.cs
• UI: Using the imported package
• Remember: you must have a Canvas (to create: UIàCanvas)
• Optional: set the value of Sec_To_Cool_Down
• Select CoolDownBar, and look for the CoolDownBar.cs component
• GreenArrowBehavior: reference an SliderWithEcho, and CoolDownBar
• In the editor: connect CoolDownBar UI to the instance variable
• Note: the re-spawn time restriction logic is now hidden
• Learned: Importance and beauty of OO, CoolDownBar hides spawn rate logic from GreenArrowBehavior!
  
  

Here is a self-practice exercise to practice some of the above coverage. Once again, my solution is available at the end of the document.