Unite Training Day 16 - Tech'N'Smile …Unite 2016 - Training Day Welcome to Unite Training Day 2016...

Unite 2016 - Training Day

Welcome to Unite Training Day 2016• Take a USB stick and find a seat • If you do not have Unity 5.3.5 already installed: • Find the appropriate installer for your operating system • Copy that UnityInstaller to your computer and install the UnityEngineSetup, launch and activate Unity

• Wifi: Unite Europe No Password

• Copy the TrainingDayProjects zip file to your computer

• Unzip TrainingDayProjects


What is Training Day?• Training day is where we get together to create an

awesome game learning Unity techniques along the way

• We are James Bouckley and Adam Buckner

• We have a great group of helpers on the floor - if you have any trouble at any time, raise your hand, someone will come and give you a hand

What we will build:


• Introduction and Installation

• Phase 01 - The Security Room

• Phase 02 - The Player

• Phase 03 - The Interactable Prefab

• Phase 04 - An example Interactable

What is Training Day?


What is Training Day?• Introduction and Installation






What is Training Day?• Introduction and Installation






What is Training Day?• Phase 01 - The Security Room




• Phase 05 - Changing Scenes


What is Training Day?• Phase 02 - The Player




• LUNCH!


What is Training Day?• Phase 03 - The Interactable Prefab



• LUNCH!

• Phase 06 - The Inventory


What is Training Day?• Phase 04 - An example Interactable


• LUNCH!


• Phase 07 - Interacting with the Inventory


What is Training Day?• Phase 05 - Changing Scenes

• LUNCH!



• Phase 08 - Data persistence



• LUNCH!






• LUNCH!





What you need to know:• Unity Adventure Game is a point and click adventure

• Catch up zip files:

• Each phase has it’s own dedicated project zip file

• If you fall behind, use the project file for the new phase to catch up

• Dedicated Helpers are available - just raise your hand!

• Q & A is limited to end of day


Make sure you have done this:• Copied the zip on the USB stick to your computer

• Extracted the installer and all copies of the project

• Installed the Unity version supplied

• Launched Unity

• Opened the project called UniteEurope2016TrainingDayPhase1

OK! Let’s

DO THIS!

Phase 01 The Security Room


The Security Room

1. With the correct project open: UniteEurope16TrainingDayPhase1

2. Navigate to the Project window

3. Expand the Scenes folder

4. Open the SecurityRoom scene

Phase 1/8

Slide 1/12


The Security Room

Add the Security Room Environment to the Scene


2. Expand the Prefabs folder

3. Drag the SecurityRoom prefab into the Hierarchy

4. Frame Selected by pressing F while the pointer is over the Scene View then zoom as needed

Phase 1/8

Slide 2/12


The Security Room

The Event System

• We need to be able to interact with our environment

• An event system has 3 requirements. Something to -

1. Send events

2. Receive events

3. Manage events

Phase 1/8

Slide 3/12


The Security Room

The Event System

1. Send events

1. Physics Raycaster component

2. Receive events

1. Colliders & Event Triggers

3. Manage events

1. The Event System

Phase 1/8

Slide 4/12


The Security Room

The Event System

1. Send events


2. Receive events


3. Manage events

1. The Event System

Phase 1/8

Slide 5/12


The Security Room

The Event System

1. Send events


2. Receive events


3. Manage events

1. The Event System

Phase 1/8

Slide 6/12


The Security Room

1. Navigate to the Hierarchy

2. Find the Camera GameObject: SecurityRoom/CameraRig/Camera

3. Select the Camera GameObject

4. Add a Physics Raycaster component to the Camera Add Component/Event/Physics Raycaster (Not 2D!)

Phase 1/8

Slide 7/12


The Security Room

1. Select the root SecurityRoom GameObject

2. Add a Mesh Collider component to the SecurityRoom

3. Set the Mesh to SecurityRoomMeshCollider

Phase 1/8

Slide 8/12


The Security Room

1. Add an EventTrigger component to the SecurityRoom

2. On the EventTrigger component:

A. Click Add New Event Type

B. Select PointerClick

C. Note: We will leave this list empty for now

Phase 1/8

Slide 9/12


The Security Room

1. Collapse the SecurityRoom GameObject

2. Add an EventSystem GameObject to the Scene Create > UI > Event System

3. Note: This Event System will be Temporary and is for testing purposes only!

Phase 1/8

Slide 10/12


The Security Room

1. Open the Navigation window Window > Navigation

2. Select the Bake tab

3. Set Max Slope to 1

4. Set Step Height to 0.2

5. Click the Bake button

Phase 1/8

Slide 11/12


The Security Room

1. Select the Inspector window

2. Save the Scene

Phase 1/8

Slide 12/12

End of Phase 01

Phase 02 The Player

Slide 1/34


Phase 2/8The Player

Add the Player model to the Hierarchy


2. Expand the Models folder

3. Drag the Player model into the Hierarchy window

Slide 2/34


1. Select the Player GameObject in the Hierarchy

2. Set the Transform’s Position to (-0.7, 0, 3.5)

3. Set the Transform’s Rotation to (0, 180, 0)

Phase 2/8The Player

Slide 3/34


Phase 2/8The Player

Prep the Player for Navigation

1. Add a Nav Mesh Agent

2. Change the Speed to 2

3. Change Acceleration to 20

Slide 4/34


Phase 2/8The Player

Create a Prefab from the Player GameObject

1. Drag the Player GameObject from the Hierarchy and…

2. Drop it on the Prefabs folder in the Project window

Slide 5/34


Phase 2/8The Player

Scripting and Script Types

• Unity has several types of scripts that we can write

1. MonoBehaviours

2. ScriptableObjects

3. Ordinary Classes

Slide 6/34


The Security Room Phase 2/8

MonoBehaviour

Slide 7/34



ScriptableObject

Slide 8/34



Ordinary Class

Slide 9/34


Phase 2/8The Player


2. Select the Scripts folder

3. Add a new Folder to Scripts called Player

4. In the Player sub-folder create a new C# script

5. Name this script PlayerMovement

6. Open the script for editing

Slide 10/34


Phase 2/8The Player

1. Save the script

2. Return to Unity

Slide 11/34


Phase 2/8The Player

1. Select the Player GameObject in the Hierarchy

2. Drag the PlayerMovement script onto the Player

3. Drag the Nav Mesh Agent component on the Player onto the Agent field of PlayerMovement

Slide 12/34


Phase 2/8The Player

1. Select the SecurityRoom GameObject

2. Find the EventTrigger component

3. Find the Pointer Click Event List on the Event Trigger

4. Click the + button to add an Event to the list

5. Drag the Player from the Hierarchy and …

6. Drop it on the Object field on the Pointer Click event

Slide 13/34


Phase 2/8The Player

On the EventTrigger component’s Pointer Click list:

1. Click the Function drop-down This drop-down menu says “No Function”

2. Select PlayerMovement > OnGroundClick

Slide 14/34


Phase 2/8The Player

1. Save the Scene

2. Test by entering Play Mode

Slide 15/34

Exit Play Mode

Slide 16/34


Phase 2/8The Player

Create an Animator Controller for the Player


2. Select the Animators folder

3. Add a new Folder to Animators called Player

4. In the Player sub-folder create a new Animator Controller

5. Rename this animator controller ClickToMoveSlide 17/34


Phase 2/8The Player

Create states in the Animator state machine

1. Open the Animator window: Window > Animator

2. Select the ClickToMove animator controller in the Project window

Slide 18/34


Phase 2/8The Player

1. Click on the Parameters tab

2. Click the + button to add a new Parameter

3. Select Float

4. Rename this new parameter to Speed

Slide 19/34


Phase 2/8The Player

1. Right-click on the background of the layout area

2. Select Create State > From New Blend Tree

3. Select the new state

4. Rename this new state Walking

Slide 20/34


Phase 2/8The Player

1. Double-click the Walking state to edit the blend tree

2. Select the new blend tree

3. Rename this new blend tree WalkingBlendTree

4. Create 4 motion fields in the blend tree

A. Click the + button

B. Select Add Motion Field to create each field

Slide 21/34


Phase 2/8The Player

Populate the Motion Fields

1. Click the circle-select button to the right of the field

2. This will bring up an Asset Picker window

3. Select the appropriate assets, 1 for each field: PlayerIdleBlender, WalkSlow, WalkNormal, WalkFast

Slide 22/34


Phase 2/8The Player

1. Uncheck Automate Thresholds

2. Click Compute Thresholds

3. Select Speed

Slide 23/34


Phase 2/8The Player

Create the Idle Animation State

1. Return to the Base Layer


3. Expand the folders Animations > Player

4. Expand the Idle2 fbx asset

5. Drag the PlayerIdleLong animation into the Animator window

Slide 24/34


Phase 2/8The Player

Create a Transition between the two states

1. Select the Walking state This step is important - Walking must be selected

2. Right-click on the Walking state …

3. Select Make Transition

4. Left-click on the PlayerIdleLong state

Slide 25/34


Phase 2/8The Player

1. Set the details on the Transition

1. Select the Transition

2. Navigate to the Inspector window

3. Uncheck Has Exit Time

4. Find the Conditions list

5. Click the + to add a Condition

Slide 26/34


Phase 2/8The Player

Set the details of the new Condition

1. The parameter is automatically set to Speed

2. Click the comparison button drop down

3. Select Less

4. Set the value to 0.01

Slide 27/34


Phase 2/8The Player

Create a second Transition back between the states

1. Select the PlayerIdleLong state It’s Important that PlayerIdleLong is selected

2. Right-click on the PlayerIdleLong state


4. Left-click on the Walking state

Slide 28/34


Phase 2/8The Player

Set the details on the second Transition

1. Select the new Transition

2. Navigate to the Inspector window

3. Uncheck Has Exit Time


5. Click the + to add a Condition

Slide 29/34


Phase 2/8The Player

Set the details of the new Condition

1. The parameter is automatically set to Speed

2. The comparison is automatically set to Greater

3. Set the value to 0.01

Slide 30/34


Phase 2/8The Player

Apply the Animator Controller

1. Select the Player in the Hierarchy

2. Find the Animator component

3. Click the Controller field’s the circle-select button

4. Select the ClickToMove asset

5. Uncheck Apply Root Motion

Slide 31/34


Phase 2/8The Player

1. Open the PlayerMovement script for editing

Slide 32/34


Phase 2/8The Player

1. Save the script

2. Return to Unity

Slide 33/34


Phase 2/8The Player

1. Select the Player in the Hierarchy

2. Find the PlayerMovement component

3. Drag the Player’s Animator component and …

4. Drop it on the Animator field

5. Apply changes to the Player prefab

6. Save the Scene and Test

Slide 34/34

Exit Play Mode

End of Phase 02

Phase 03 The Interactable Prefab


Phase 3/8The Interactable Prefab

1. Make sure you are not in Play Mode and the Scene View is showing

Slide 1/27



1. Navigate to the Hierarchy Window

2. Create a new Empty GameObject Create > Create Empty

3. Rename this new GameObject Interactable

4. Reset the Transform

5. Add a Box Collider component

Slide 2/27


Interaction Phase 1/8

Interactable

Slide 3/27



Interactable

Default Reaction

Slide 4/27



Interactable

ReactionText, Audio, Etc.

Default Reaction

Slide 5/27



Interactable


Default Reaction

ConditionCondition

Condition

Slide 6/27



Interactable


Default Reaction

Condition

Condition

Condition

Slide 7/27



Interactable


Default Reaction

Condition

Condition

Condition

Reaction

Slide 8/27



Interactable


Default Reaction


Condition

Condition

Condition

Reaction

Slide 9/27



Interactable


Default Reaction



Condition

Condition

Slide 10/27



Condition Reaction

GameObject

Interactable

Carried

Equipped

Animation

Audio

GameObject

Scene

Item

Slide 11/27



Carried - DisguiseCarried - Coffee

GameObject - Laser Gate On

Animation - GuardAnimation - Player

GameObject - Laser Gate Off

Audio - Guard

Condition Reaction

Slide 12/27




2. Expand the Scripts folder

3. Expand the Interaction folder

4. Find the script Interactable

5. Open the Interactable script for editing

Slide 13/27



1. Save the script

2. Return to Unity

Slide 14/27






4. Find the script Condition

5. Open the Condition script for editing

Slide 15/27



1. Save the script

2. Return to Unity

Slide 16/27






4. Find the script Reaction

5. Open the Reaction script for editing

Slide 17/27



1. Save the script

2. Return to Unity

Slide 18/27






4. Find the script Interactable

5. Drag the Interactable script onto the Interactable GameObject

Slide 19/27



1. Navigate to the Hierarchy window

2. Right-click the Interactable GameObject

3. Select Create Empty

4. Select and Duplicate the new GameObject

5. Name the first GameObject InteractionLocation

6. Name the second GameObject DefaultReaction

Slide 20/27



1. Select the DefaultReaction GameObject

2. Add a Reaction component

Slide 21/27



1. Select the Interactable GameObject

2. Drag the InteractionLocation GameObject onto the InteractionLocation field

3. Drag the DefaultReaction GameObject onto the DefaultLocation field

Slide 22/27





3. Expand the Player folder

4. Find the script PlayerMoment


Slide 23/27



1. Save the script

2. Return to Unity

Slide 24/27




2. Select the Interactable GameObject

3. Add an EventTrigger component to the Interactable GameObject

Slide 25/27



On the EventTrigger component:

1. Click Add New Event Type

2. Select PointerClick

3. Click the + button to add an Event to the list

4. Note: We will not populate the Pointer Click event

Slide 26/27



1. Drag the Interactable GameObject into the Prefabs folder to create a new prefab

2. Save the Scene

Slide 27/27

End of Phase 03

Phase 04 An example Interactable


Phase 4/8An example Interactable

Creating Foundation Elements for Reactions

1. Set the Scene View to 2D mode

2. Set the Game View to 16:9

Slide 1/23



1. In the Hierarchy, create a new UI Text element Create > UI > Text

2. Rename the Text GameObject MessageText

3. Reset the MessageText’s RectTransform’s Position

Slide 2/23



1. Select the Canvas GameObject

2. With the Canvas selected, Frame Selected using the F key while the pointer is over the Scene View

3. Rename the Canvas GameObject MessageCanvas

4. Remove the Graphics Raycaster

Slide 3/23



1. Find the Canvas Scalar on the MessageCanvas

2. Set the UI Scale Mode to Scale With Screen Size

3. Set the Reference Resolution to 1920 x 1080

4. Add a Text Manager component to MessageCanvas

5. Drag the MessgeText GameObject onto the Text field of the Text Manager

Slide 4/23



1. Select the MessageText GameObject

2. Click the Anchors Presets button on the RectTransform

3. Hold the Alt-Key down and …

4. Alt-Click the preset Bottom / Stretch

5. Set the Pos Y to 50

6. Set the Height to 100Slide 5/23



1. Find the Text component on MessageText

2. Set the Color to White

3. Set the Font to Geo-Regular

4. Set the Font Size to 75

5. Set the Alignment to Center / Middle

6. Add an Outline component to MessageText

Slide 6/23



1. Drag the MessageCanvas from the hierarchy into the Prefabs folder

2. Disable 2D mode on the Scene View

3. Select the Player GameObject and Frame Selected

4. Save the Scene

Slide 7/23



1. In the Hierarchy, create a new Empty GameObject Create > Create Empty

2. Rename the new Empty GameObject AudioParent

3. Right-click AudioParent

4. Select Audio > Audio Source

Slide 8/23



With the new Audio Source child selected:

1. Duplicate the Audio Source GameObject twice Note: There should be 3 copies of Audio Source

2. Rename the Audio Source copies: A. FX B. VO C. Ambient

Slide 9/23



1. Multi-Select both the FX and VO GameObjects

2. On the Audio Source, disable Play On Awake

3. Select the Ambient GameObject

4. On the Audio Source, enable Loop

Slide 10/23



1. Drag the AudioParent GameObject into the Prefabs folder

2. Save the scene

3. In the Hierarchy, select the Ambient GameObject

4. Set the Audio Clip to SecurityRoomAmbient

Slide 11/23



Setting up the Interactable example

1. Select the Interactable GameObject in the Hierarchy

2. Rename this GameObject PictureInteractable

3. Set the Position to (4.6, 0.0, 0.15)

4. Set the Center of the Box Collider to (0, 2.35, 0)

5. Set the Size of the Box Collider to (0.25, 1.7, 2.7)

Slide 12/23



1. Find the Event Trigger component

2. Drag the Player from the Hierarchy and …

3. Drop it on the Object field on the Pointer Click event

Slide 13/23



On the EventTrigger component’s Pointer Click list:

1. Click the Function drop-down menu This drop-down menu says “No Function”

2. Select PlayerMovement > OnInteractableClick

3. Drag the Interactable component above and …

4. Drop it on the OnInteractableClick Parameter field

Slide 14/23



1. Select the InteractionLocation child GameObject in the Hierarchy

2. Set the Position to (-1.5, 0.0, 0.0)

3. Set the Rotation to (0, 90, 0)

Slide 15/23



1. Save the Scene and Test by entering Play Mode

2. Note: We move to the Interaction Location but nothing happens when we get there!

3. Note: There are no audio listeners in this scene. Ignore the warning. We won’t hear any audio yet.

Slide 16/23

Exit Play Mode

Slide 17/23



Adding Reactions to Interactable


2. Expand the PictureInteractable GameObject

3. Select the DefaultReaction child GameObject

Slide 18/23



1. Expand Audio Reactions

2. Set the Size to 1

3. Expand Element 0

4. Set the Audio Source to VO

5. Set the Audio Clip to PlayerThisGuyLooksTrustworthy

Slide 19/23



1. Expand Text Reaction

2. Set the Text Manager to the MessageCanvas

3. Set the Message to “This guy looks pretty trustworthy…”

Slide 20/23



1. Select the EventSystem GameObject

2. Add an Audio Listener component for testing

3. Save the scene


Slide 21/23

Exit Play Mode

Slide 22/23



1. Select Mute Audio in the Game View

2. Delete the EventSystem GameObject along with the Audio Listener component

3. Save the Scene

Slide 23/23

End of Phase 04

Phase 05 Changing Scenes



1. The architecture of changing scenes

Slide 1/58


Persistent Scene Phase 5/8

Game Start

Slide 2/58



Load

Slide 3/58



Persistent Scene

Load

Slide 4/58



Persistent Scene

Scene 1 Scene 2

Slide 5/58



Persistent Scene

Scene 1 Scene 2

Slide 6/58



Persistent Scene

Load Level Additive

Scene 1 Scene 2

Slide 7/58



Scene 1 Scene 2

Load Level Additive

Persistent Scene

Slide 8/58



Scene 2

Persistent Scene

Scene 1

Load Level Additive

Slide 9/58



Set Active Scene

Scene 2

Persistent Scene

Scene 1

Slide 10/58



Set Active Scene

Scene 1

Scene 2

Persistent Scene

Slide 11/58



Scene 1

Scene 2

Persistent Scene

Slide 12/58



Scene 1

Scene 2

Persistent Scene

Unload Scene

Slide 13/58



Scene 1 Scene 2

Unload Scene

Persistent Scene

Slide 14/58



Scene 1 Scene 2

Persistent Scene

Slide 15/58



Scene 1 Scene 2

Persistent Scene

Load Level Additive

Slide 16/58



Scene 1 Scene 2

Persistent Scene

Load Level Additive

Slide 17/58



Scene 1

Scene 2

Load Level Additive

Persistent Scene

Slide 18/58



Scene 1

Scene 2

Set Active Scene

Persistent Scene

Slide 19/58



Scene 1

Scene 2

Set Active Scene

Persistent Scene

Slide 20/58


Phase 5/8Changing Scenes



3. Open the Market scene


5. Drag the Player prefab into the scene

Slide 21/58




2. Reset the Transform on the Player GameObject

3. Expand the Market GameObject

4. Select the CameraRig GameObject

5. Find the Camera Control component

6. Set the Player Position to the Player GameObject

Slide 22/58



1. Save the Scene


3. The camera should now track the Player’s Position

4. The Player can’t move yet, however…

Slide 23/58

Exit Play Mode

Slide 24/58



1. Open the Navigation window This should still be docked under the Inspector

2. Note: The settings should have been saved with the scene

3. Click Bake

4. Return to the Inspector window

Slide 25/58



1. Set up event trigger

2. Select the Market GameObject


4. Drag the Player GameObject onto the Object field

5. Select the Function drop-down menu

6. Select Player Movement > OnGroundClick

Slide 26/58





3. Drag the MessageCanvas prefab into the Scene

4. Drag the AudioParent prefab into the Scene

Slide 27/58




2. Expand the AudioParent GameObject

3. Select the Ambient child GameObject

4. Find the Audio Source component

5. Set the Audio Clip to MarketAmbient

6. Save the Scene

Slide 28/58



1. Create a new Scene

2. Save this new Scene as “Persistent” Scenes > Persistent

3. Open the Build Settings window File > Build Settings

Slide 29/58



1. Add the Persistent Scene to Scenes In Build

2. Add both the SecurityRoom and Market Scenes to Scenes In Build

3. Make sure the Persistent Scene is at Index 0, or the top of the list

4. Close the Build Settings window

Slide 30/58




2. Delete all of the starting GameObjects in the Scene Note: The Game View will show a warning - ignore it

3. Create a new Audio Source GameObject Create > Audio > Audio Source

4. Rename the new GameObject BackgroundMusic

Slide 31/58



1. Select the BackgroundMusic GameObject

2. Reset the GameObject’s Transform

3. Find the Audio Source component

4. Set the Audio Clip to BackgroundMusic

5. Select Loop

Slide 32/58



1. Create a new Empty GameObject

2. Rename this new GameObject AudioListener

3. Reset the AudioListener’s Transform

4. Add an Audio Listener component

Slide 33/58



1. Enable 2D mode on the Scene View

2. Find Scene Effects button and Turn Off Skybox

3. Create a new UI Image element Create > UI > Image

4. Select the Image GameObject

5. Rename the Image FadeImage

6. Reset the new Image’s RectTransformSlide 34/58



1. Select the new Canvas and Frame Selected

2. Rename the new Canvas PersistentCanvas

3. Find the Canvas Scalar component

4. Set the UI Scale Mode to Scale With Screen Size

5. Set the Reference Resolution to 1920 x 1080

Slide 35/58



1. Select the FadeImage GameObject

2. Find the RectTransform component

3. Click the Anchors Presets button


5. Alt-Click the preset Stretch / Stretch

Slide 36/58



1. With the FadeImage GameObject selected

2. Find the Image component

3. Set the Color property to Black with Full Alpha (0, 0, 0, 255)

4. Add a Canvas Group component to FadeImage

5. Set the Alpha to 0

Slide 37/58



1. Create a new Empty GameObject

2. Rename this new GameObject SceneController


4. Expand the Scripts / SceneControl folders

5. Drag the SceneController script onto the SceneController GameObject

Slide 38/58

Coroutines

Slide 39/58


Coroutines

void MyFunction()

{

}

Phase 5/8

Slide 40/58


Coroutines Phase 5/8

IEnumerator MyCoroutine()

{

yield

}

Slide 41/58


Coroutines Phase 5/8

IEnumerator MyCoroutine(){

while(){

yield

}}

Slide 42/58



1. Open the SceneController script for editing

Slide 43/58



1. Save the script

2. Return to Unity

Slide 44/58




2. Select the SceneController GameObject

3. Find the SceneController component

4. Set the Fader Canvas Group to the FadeImage GameObject

Slide 45/58



1. Save the Scene


Slide 46/58

Exit Play Mode

Slide 47/58





3. Open the SecurityRoom Scene




Slide 48/58





3. Drag an Interactable prefab into the Scene


5. Rename the Interactable prefab to DoorToMarketInteractable

Slide 49/58



With DoorToMarketInteractable selected:

1. Set the Position to (-0.7, 0, 4.5)


3. Set the Size of the Box Collider to (2.4, 0.4, 3)

Slide 50/58



1. Find the EventTrigger component

2. Find the Pointer Click Event List on the Event Trigger

3. Set the Object field to the Player GameObject

4. Click the Function drop-down


6. Drag the Interactable component onto the Parameter field

Slide 51/58



Before we can set the Default Reaction, we need to update the Reaction script


2. Expand the Scripts / Interaction folders


Slide 52/58



1. Save the script

2. Return to Unity

Slide 53/58




2. Expand the DoorToMarketInteractable


4. Find the Reaction component

Slide 54/58



On the Reaction component:

1. Expand the Audio Reaction

2. Set the Size to 1

3. Set the Audio Source to FX

4. Set the Audio Clip to DoorSlide

Slide 55/58




1. Expand the Scene Reaction

2. Select Load A Scene

3. Set the Scene To Load as “Market”

4. Save the Scene

Slide 56/58





3. Open the Persistent scene


Slide 57/58

Exit Play Mode

Slide 58/58

End of Phase 05

Phase 06 The Inventory


Phase 6/8The Inventory

What an Inventory needs to do:

1. Add Items

2. Remove Items

3. Equip an Item

4. Persist between scenes

5. Use ScriptableObjects for Items

6. Display using the UI systemSlide 1/35


Draw Order Phase 1/8

Hierarchy

UI Canvas

UI Object 01

UI Object 02

Slide 2/35


Draw Order Phase 1/8

Hierarchy

UI Canvas

UI Object 01

UI Object 02

UI Object 03

Slide 3/35



1. Enable 2D mode on the Scene View

2. Select the PersistentCanvas and Frame Selected

3. Right-click on the PersistentCanvas

Slide 4/35




2. Find the ItemSlot prefab Prefabs > Item Slot

3. Drag In ItemSlot prefab and …

4. Drop it on the PersistentCanvas GameObject

5. Reset the RectTransform

6. Show ItemSlot GameObjectSlide 5/35



Recap Scripting and Script Types

• Unity has several types of scripts that we can write

1. MonoBehaviours

2. ScriptableObjects

3. Ordinary Classes

Slide 6/35




2. Expand the Scripts / Inventory folders

3. Open the Item script for editing

Slide 7/35



1. Save the script

2. Return to Unity

Slide 8/35




2. Create a new Folder at the Root level

3. Rename this new folder Items

4. Right-click on the Items folder

5. Select Create > Item

6. Name the new Item Coin

Slide 9/35



1. Select the Coin Asset

2. Duplicate the Coin Asset 3 times Note: There should be 4 copies of Coin

3. Keep 1 copy named Coin

4. Rename the other 3 Coin assets to: A. Coffee B. Glasses C. RedHerring

Slide 10/35



1. Select the Coffee Asset and set the Sprite to Coffee

2. Select the Coin Asset and set the Sprite to Coin

3. Select the Glasses Asset A. Set the Sprite to Glasses B. Select Is Equipable

4. Select the RedHerring Asset set the Sprite to RedHerring

Slide 11/35



1. Navigate to the Project view


3. Open the ItemSlot for editing

Slide 12/35



1. Save the script

2. Return to Unity

Slide 13/35




2. Select the PersistentCanvas GameObject

3. Add a new Inventory component

Slide 14/35



1. Open the Inventory script for explanation

Slide 15/35



1. DO NOT Save the script

2. Return to Unity

Slide 16/35




2. Select the ItemImage child GameObject of ItemSlot

3. Drag the PersistentCanvas GameObject onto the Object field in the Pointer Click event list

4. From the Function list select Inventory > CarriedItemClicked

5. Note: We will leave the Parameter field empty

Slide 17/35



1. Select the HighlightImage child GameObject

2. Drag the PersistentCanvas GameObject onto the Object field in the Pointer Click event list

3. From the Function list select Inventory > CarriedItemHighlightClicked


Slide 18/35



1. Select the EquipButton child GameObject

2. Drag the PersistentCanvas GameObject onto the Object field in the On Click event list

3. From the Function list select Inventory > CarriedItemEquipButtonClicked


Slide 19/35



In the Hierarchy…

1. Select the PersistentCanvas

2. Right-click on the PersistentCanvas


4. Rename this new GameObject CarriedItems

5. Reset the Transform

Slide 20/35



1. Select the ItemSlot child GameObject

2. Duplicate the ItemSlot GameObject

3. Move the duplicate into CarriedItems as a child

4. Duplicate this child ItemSlot 3 more times Note: There should be 4 copies of ItemSlot as children of CarriedItems

Slide 21/35



1. Rename the 4 child copies of ItemSlot:

A. ItemSlot0 B. ItemSlot1 C. ItemSlot2 D. ItemSlot3

Slide 22/35



1. For each ItemSlot child in CarriedItems:

A. Set the Index Parameter on ItemImage to match the child’s order

B. Set the Index Parameter on EquipButton to match the child’s order

2. This means: C. ItemSlot0 should have an index of 0 D. ItemSlot1 should have an index of 1, etc.

Slide 23/35



1. Select the CarriedItems GameObject



4. Alt-Click the preset Middle / Right

Slide 24/35



With the CarriedItems GameObject selected:

1. Set the Pos X to -87.5

2. Set the Width to 135

3. Set the Height to 600

4. Add a Vertical Layout Group

5. Set the Spacing to 20

Slide 25/35



1. Select the original ItemSlot that is not a child of Carried Items

2. Rename the ItemSlot GameObject EquippedItemSlot

3. Select and Delete the HighlightImage child GameObject

4. Select and Delete the EquipButton child GameObject

Slide 26/35



1. Select the ItemImage child GameObject

2. Remove the EventTrigger component

Slide 27/35



1. Select the EquippedItemSlot



4. Alt-Click the preset Top / Right

5. Set the Pos X and Pos Y to -120

6. Set the Width and Height to 200Slide 28/35



1. Select the PersistentCanvas GameObject

2. Find the Inventory component

3. Drag the EquippedItemSlot GameObject onto the Equipped Item Slot field

Slide 29/35



With the PersistentCanvas selected:

1. Lock the Inspector window

2. Multi-Select ItemSlot0 - ItemSlot3

3. Drag these multi-selected ItemSlots and …

4. Drop them onto the Carried Item Slots Note: The drop target is the name of the field Note: A + icon should appear on the pointer

Slide 30/35



1. Unlock the Inspector window

2. Alt-Collapse the PersistentCanvas GameObject

3. Expand the PersistentCanvas GameObject

4. Reorder the FadeImage GameObject to the bottom of the list of children in the PersistentCanvas family

5. Save the Scene

Slide 31/35





3. Open the Inventory script for editing

Slide 32/35



1. Save the script

2. Return to Unity

Slide 33/35



1. Save the Scene


Slide 34/35

Exit Play Mode

Slide 35/35

End of Phase 06

Phase 07 Interacting with the Inventory


Phase 7/8Interacting with the Inventory





The Inventory Phase 6/8

1. Save the script

2. Return to Unity





3. Open the Market scene








3. Select the Interactable prefab and…

4. Drag it into the Hierarchy

5. Rename the Interactable GameObject to CoinInteractable



With the CoinInteractable GameObject selected:

1. Set the Position to (0.45, 0, -1.75)


3. Set the Size of the Box Collider to (0.3, 0.3, 0.3)



With the CoinInteractable GameObject selected:



3. From the Function list select PlayerMovement > OnInteractableClick

4. Drag the Interactable component onto Parameter field



1. Expand CoinInteractable

2. Select the InteractionLocation GameObject

3. Set the Position to (0, 0, 0.8)






3. Set the Size of the Audio Reactions array to 2



On the Reaction component’s Audio Reaction array:

1. For Element 0 A. Set the Audio Source to VO B. Set the Audio Clip to PlayerPickupCoin

2. For Element 1 C. Set the Audio Source to FX D. Set the Audio Clip to Pickup




1. Set the Size of the Game Object Reactions array to 1


3. Find the Coin GameObject Market > Coin

4. Drag the Coin GameObject onto Game Object To Deactivate field




1. Set the Size of the Item Reactions to 1


3. Expand the Items folder

4. Drag the Coin asset onto Picked Up Item field



1. Note the different Coins:

1. Coin as GameObject in the Scene

2. Coin as ScriptableObject asset in the Project




1. Expand the Text Reaction

2. Set the Text Manager to the MessageCanvas

3. Set the Message to “Oh! A coin!”




1. Set the Size of the Used Interactable Reactions to 1

2. Set the Interactable to the CoinInteractable parent



1. Save the Scene



4. Open the Persistent scene




1. Note a few things here:

1. We move to the interactable, but the Player GameObject does not have an animation Reaction

2. We can select the coin several times




2. Expand the Animators > Player folders

3. Select the ClickToMove animator controller

4. Open the Animator window




2. Expand the Animations > Player folders

3. Expand the TakeItemAttempt fbx file

4. Drag the TakeItemAttempt animation into the Animator window



With the Animations > Player folders open:

1. Expand the TakeItemVarious fbx file

2. Select the following animations A. TakeItemHigh B. TakeItemMed C. TakeItemLow

3. Drag these into the Animator window



1. Position these TakeItem states between the Walking state and the Any State

2. Select the Any State

3. Right-click on the Any State & select Make Transition

4. Left-click on the TakeItemAttempt state

5. Repeat for each of the other TakeItem states



For each TakeItem state in the Animator window:

1. Select the TakeItem state

2. Right-click on the TakeItem state


4. Left-click on the Walking state to complete the transition



1. Find the Parameters tab

2. Add a new Trigger Parameter using the + button

3. Name the new Trigger Parameter AttemptTake

4. Repeat this step 3 more times creating: A. HighTake B. MedTake C. LowTake



For each Transition between Any State and Take Item:

1. Select the Transition


3. Add a new Condition

4. Change the Condition to match the Transition transition to TakeItemAttempt is AttemptTake transition to TakeItemHigh is HighTake - etc.



For each Transition between any Take Item state and Walking:

1. Do nothing - this is controlled by Has Exit Time



1. Save the Scene



4. Open the Market Scene



With the Market Scene open:

1. Make sure the Scene View is visible

2. Frame Selected on the Player GameObject

3. Expand the CoinInteractable GameObjects




With the DefaultReaction GameObject selected:

1. Set the Size of the Animation Reactions to 1

2. Set the Animator to Player

3. Set the Animator Trigger to MedTake




1. Expand Audio Reactions

2. Expand On Element 1 (Pickup)

3. Change the Delay to 1




1. Expand Game Object Reactions

2. Expand On Element 0





1. Expand Item Reactions

2. Expand On Element 0




1. Save the Scene



4. Open the Persistent Scene


Exit Play Mode




2. Expand the Animators folder

3. Open the ClickToMove controller in the Animator window



1. Select the PlayerIdleLong state

2. Set the Tag to Locomotion

3. Select the Walking state

4. Set the Tag to Locomotion




2. Expand the Scripts / Player folders




1. Save the script

2. Return to Unity






4. Frame Selected on the Player



1. Select the CoinInteractable

2. Right-click on the CoinInteractable

3. Select Create > Create Empty

4. Rename this new empty GameObject UsedReaction

5. Add a Reaction component



With the Reaction component selected

1. Set the Size of the Audio Reactions to 1

2. Expand Element 0


4. Set the Audio Clip to PlayerNoMoreCoins



With the Reaction component selected


2. Set the TextManager to MessageCanvas

3. Set the Message to “There are no more coins…”



1. Select the CoinInteractable GameObject

2. Find the Interactable component

3. Set the Size of Conditions to 1

4. Expand Element 0

5. Set the Description to Used



On the Interactable component, on the Used condition …

1. Set the Size of Interactable Conditions to 1

2. Expand Element 0

3. Set the Interactable to CoinInteractable

4. Set the Used State to True

5. Set the Reaction to UsedReaction



1. Save the Scene





Exit Play Mode






4. Make sure the Scene View is visible




2. Find the Interactable prefab

3. Drag the Interactable prefab into the Hierarchy window

4. Rename the new Interactable GameObject CoffeeBotInteractable



With the CoffeeBotInteractable GameObject selected:

1. Set the Position to (8.6, 0, -1)


3. Find the Box Collider component

4. Set the Center to (0, 1, 0)

5. Set the Size to (2, 2, 2)



With the CoffeeBotInteractable GameObject selected:



3. Click the Function drop-down


5. Set the Parameter to CoffeeBotInteractable



1. Expand the CoffeeBotInteractable

2. Select the InteractableLocation GameObject

3. Set the Position to (-0.45, 0, -2.7)





3. Set the Size of Audio Reactions to 1


5. Set the Audio Clip to CoffeBotCoffeeOnlyACoin



With the DefaultReaction GameObject selected, on the Reaction component


2. Set the Text Manager to Message Canvas

3. Set the Message to “Fresh Coffee! Just one coin!”

4. Set the Color to (145, 221, 164, 255) Save the color as a preset



1. Select the CoffeeBotInteractable

2. Right-click on the CoffeeBotInteractable


4. Rename this new GameObject HasCoinReaction



With the HasCoinReaction GameObject selected:

1. Add a new Reaction component

2. Set the Size of Animation Reactions to 2




1. Expand Element 0

2. Set the Animator to CoffeeBot

3. Set the Animator Trigger to MakeCoffee




1. Expand Element 1

2. Set the Animator to Player

3. Set the Animator Trigger to HighTake




1. Set the Size of Audio Reactions to 2

2. Expand Element 0


4. Set the Audio Clip to CoffeeBotHeresYourCoffee

5. Set the Delay to 1




1. Expand Element 1

2. Set the Audio Source to FX

3. Set the Audio Clip to Pickup





1. Set the Size of Item Reactions to 1

2. Expand Element 0

3. Set the Picked Up Item to Coffee

4. Set the Lost Item to Coin





1. Expand Text Reaction

2. Set Text Manager to MessageCanvas

3. Set the Message to “Enjoy your coffee! Bye!”

4. Set the Color to CoffeeBot-Green using the Preset




1. Set the Size of Used Interactable Reactions to 1

2. Expand Element 0

3. Set the Interactable to CoffeeBotInteractable

4. Save the Scene




2. Expand the Scripts / Inventory folder

3. Open the Inventory script for editing



1. Save the script

2. Return to Unity




2. Expand the Scripts / Interaction folder

3. Open the Condition script for editing



1. Save the script

2. Return to Unity




2. Expand the Scripts / Interaction folder

3. Open the Interactable script for editing



1. Save the script

2. Return to Unity




2. Find the Interactable component

3. Set the Size of Conditions to 1

4. Set the Description to HasCoinAndUnused



On the Interactable component in Conditions:

1. Set the Size of Carried Item Conditions to 1

2. Set the Carried Item to Coin

3. Set the Size of Interactable Conditions to 1

4. Set the Interactable to CoffeeBotInteractable



On the Interactable component in Conditions:

1. Set the Reaction to HasCoinReaction

2. Save the Scene




Exit Play Mode

End of Phase 07

Phase 08 Data Persistence


Phase 8/8Data Persistence


2. Expand the Scripts / DataPersistence folders

3. Open the PersistentDataObject script for editing



1. Save the script

2. Return to Unity








1. Save the script

2. Return to Unity




2. Expand the Scripts / Player folders




1. Save the script

2. Return to Unity




2. Make sure no items are selected

3. Create a new Folder in the Root level of the Project

4. Rename this folder PersistentDataObjects



1. Right-click on the PersistentDataObjects folder

2. Select Create > Folder

3. Rename this folder Player

4. Right-click on the Player folder

5. Select Create > PersistentDataObject

6. Rename this new asset PlayerLocationData



With the PlayerLocationData asset selected:

1. Set the Default Position to (-0.7, 0, 3.5)

2. Set the Default Rotation to (0, 180, 0)





3. Open the Security Room scene

4. Expand the DoorToMarketInteractable GameObject




With DoorToMarketInteractable selected:


2. Find the Scene Reaction property

3. Set the Player Location Persistent Data Object to PlayerLocationData

4. Set Player Pos In Loaded Scene to (-4.4, 0, -1.4)



1. Select the Player GameObject

2. Find the PlayerMovement script

3. Set the Persistent Location Data Object to PlayerLocationData asset

4. Apply changes to the prefab

5. Save the Scene







Exit Play Mode





3. Open the PersistentDataResetter script for Explanation



1. DO NOT Save the script

2. Return to Unity




2. Create a new empty GameObject on the Root of the Hierarchy using: Create > Create Empty

3. Rename this new GameObject PersistentDataResetter

4. Add a PersistentDataResetter component



With the PersistentDataResetter GameObject selected

1. Set the Size of Persistent Data Objects to 1

2. Set Element 0 to PlayerLocationData

3. Save the Scene


Exit Play Mode






4. We want to show you a special menu… but…

Warning! DO NOT USE!

Until instructed to do so…



1. Navigate to the top menu

2. Find the menu Adventure Game

Please don’t use this menu until instructed…




2. Expand the Prefabs / CompletedInteractables / Market folders

3. Drag the DoorToSecurityRoom prefab and…

4. Drop it into the Hierarchy



1. Navigate to the Top Menu

2. Select Adventure Game > Complete DoorToSecurityRoom

3. Select DoorToSecurityRoomInteractable


5. Verify that the component is complete



1. Save the Scene





Exit Play Mode





3. Open the PersistentDataController script for editing



1. Save the script

2. Return to Unity




2. Expand the Scripts / SceneControl folders

3. Open the SceneController script for editing



1. Save the script

2. Return to Unity




2. Right-click on the PersistentDataObjects folder

3. Select Create > Folder

4. Rename the new folder Market



1. Right-click on the Market folder

2. Select Create > Persistent Data Object

3. Rename they new asset CoinData

4. Set the Default Activity to true



1. Save the Scene







2. Create a new empty GameObject on the Root of the Hierarchy using: Create > Create Empty

3. Rename this new GameObject PersistentDataControllers

4. Add a PersistentDataController component



With the PersistentDataController selected:

1. Set the PersistentDataObject to CoinData


3. Find the child GameObject called Coin

4. Drag the Coin GameObject and…

5. Drop it on the Persistent Activity Game Object field



With the PersistentDataController selected:

1. Set the Persistent Used Interactable to CoinInteractable

2. Save the Scene






4. Select the PersistentDataResetter GameObject

5. Find PersistentDataResetter component



With the PersistentDataResetter GameObject selected:


2. Expand the PersistentDataObjects / Market folders

3. Add CoinData to PersistentDataObjects array



1. Save the Scene


Exit Play Mode

Congratulations! You’re all awesome.

You have completed Unite Training Day!



The remaining story elements: • Disturbing the Bird • Collecting the Red Herring • Collecting the Glasses • The Guard • The Laser Gate

Slide X/Y

Let’s Talk! Questions and Answers


Phase 8/8THANK YOU - We hope you enjoyed the day!

• GIVEAWAY TIME! Win a GeForce GTX 980Ti graphics card

• Connect to the internet

• Wifi: Unite Europe No Password

• Open the Training Day 16 Survey at http://bit.ly/UniteTraining

• Click the link and tell us what you think

• We’ll shortly pick a winner!

• If you can’t connect we can give you a paper copy, please write your name on it!

Slide X/Y

Date post:	14-Sep-2018
Category:	Documents
Upload:	phungthuy
View:	214 times
Download:	0 times

Unite Training Day 16 - Tech'N'Smile …Unite 2016 - Training Day Welcome to Unite Training Day 2016...

Documents