79
By Shahed Chowdhuri Senior Technical Evangelist Unity 5: Rollerball (Step by Step) Based on Roll-a-ball video tutorial from Unity Technologies Part 2 @shahedC WakeUpAndCode.com

Rollerball: 2 of 2

Embed Size (px)

Citation preview

Page 1: Rollerball: 2 of 2

By Shahed ChowdhuriSenior Technical Evangelist

Unity 5: Rollerball (Step by Step)Based on Roll-a-ball video tutorial from Unity Technologies Part 2

@shahedC

WakeUpAndCode.com

Page 2: Rollerball: 2 of 2

Adding Borders

Page 3: Rollerball: 2 of 2

Create Empty Object for BordersIn Hierarchy panel, click Create Create Empty

Rename empty “GameObject” to “Borders”

Page 4: Rollerball: 2 of 2

Reset to OriginWith “Border” selected in Hierarchy…

… Reset to origin in Inspector panel.

Page 5: Rollerball: 2 of 2

Create 3D CubeIn Hierarchy panel, click Create 3D Object Cube

Page 6: Rollerball: 2 of 2

Rename Cube and FocusRename Cube to “LeftBorder” in the Hierarchy Panel

With the cube selected in Hierarchy, mouse over the Scene, press F key to focus on it

Page 7: Rollerball: 2 of 2

Set LeftBorder’s Position/Rotation/Scale

Transform• Position = -10, 0, 0• Rotation = 0, 0, 0• Scale = 0.5, 2, 20.5

Page 8: Rollerball: 2 of 2

Duplicate and Rename to “RightBorder”With “LeftBorder” selected in Hierarchy, press Ctrl-D to duplicate it

Rename the duplicate to “RightBorder”

Page 9: Rollerball: 2 of 2

Set RightBorder’s Position/Rotation/Scale

Transform• Position = 10, 0, 0• Rotation = 0, 0, 0• Scale = 0.5, 2, 20.5

Page 10: Rollerball: 2 of 2

Duplicate and Rename to “FarBorder”With “RightBorder” selected in Hierarchy, press Ctrl-D to duplicate it

Rename the duplicate to “FarBorder”

Page 11: Rollerball: 2 of 2

Set FarBorder’s Position/Rotation/Scale

Transform• Position = 0, 0, 10• Rotation = 0, 0, 0• Scale = 20.5, 2, 0.5

Page 12: Rollerball: 2 of 2

Duplicate and Rename to “NearBorder”With “FarBorder” selected in Hierarchy, press Ctrl-D to duplicate it

Rename the duplicate to “NearBorder”

Page 13: Rollerball: 2 of 2

Set NearBorder’s Position/Rotation/Scale

Transform• Position = 0, 0, -10• Rotation = 0, 0, 0• Scale = 20.5, 2, 0.5

Page 14: Rollerball: 2 of 2

Run the Game!Click Play button, move around with arrow keys!

Page 15: Rollerball: 2 of 2

Adding PowerUps

Page 16: Rollerball: 2 of 2

Create 3D CubeClick GameObject 3D Object Cube

Hierarchy panel:

Create 3D Object Cube

* OR *

Page 17: Rollerball: 2 of 2

Rename Cube to “PowerUp”

Right-click Cubein Hierarchy panel

Rename “Cube” to “PowerUp”

Page 18: Rollerball: 2 of 2

Center & FocusEnsure PowerUp cube is at (0,0,0)

Mouse over Scene, then press “F” on keyboard to focus on selected PowerUp

Page 19: Rollerball: 2 of 2

Deactivate Player Ball (temporarily)Select Ball in Hierarchy, deselect active checkbox in Inspector panel

… the ball disappears from the Scene!

Page 20: Rollerball: 2 of 2

Reposition the PowerUp Cube

Position:X = 0, 0.5, 0Rotation = 45, 45, 45Scale = 1, 1, 1

i.e. Lift up by 0.5, then rotate by (45, 45, 45)

Page 21: Rollerball: 2 of 2

Create “ItemRotator” ScriptIn the Project panel,click Create dropdown Then select “C# Script”, name it

ItemRotator

… with Scripts folderselected

Page 22: Rollerball: 2 of 2

Launch “ItemRotator” Script

Page 23: Rollerball: 2 of 2

Edit Update() Method for Rotation

Page 24: Rollerball: 2 of 2

Assign ItemRotator Script to PowerUp

Verify Script in Inspector panel

Drag to PowerUp

Page 25: Rollerball: 2 of 2

Run the Game!Click Play button, see the rotation?

Page 26: Rollerball: 2 of 2

Create “Prefabs” FolderIn the Project panel,click Create dropdown

Click “Folder”, then Rename it “Prefabs"

Page 27: Rollerball: 2 of 2

Drag PowerUp Into Prefabs Folder

Verify thatPowerUpis blueIn Hierarchy

Drag to Prefabs

Page 28: Rollerball: 2 of 2

Create Empty GameObject for PowerUpsIn the Hierarchy panel, click Create Create Empty

Rename GameObject to PowerUps (plural)

Page 29: Rollerball: 2 of 2

Reset to OriginWith “PowerUps” selected in Hierarchy…

… Reset to origin in Inspector panel.

Page 30: Rollerball: 2 of 2

Drag PowerUp into PowerUps

Page 31: Rollerball: 2 of 2

Switch to Top ViewIn the Scene panel, click the Y axis in the XYZ gizmo…

… top view!

Page 32: Rollerball: 2 of 2

Switch from Local to GlobalBelow the top menu, click the “Local” icon…

… it should switch to “Global”

Page 33: Rollerball: 2 of 2

Move PowerUp Cube to Near WallSelect the Move tool, then drag the PowerUp down to the Near Wall

Page 34: Rollerball: 2 of 2

Duplicate PowerUp and RearrangePress Ctrl-D to duplicate PowerUp, drag it to a new position…

… repeat this 11 times to create 12 PowerUps

Page 35: Rollerball: 2 of 2

Create New Material for PowerUpIn the Project panel,click Create dropdown…

Click “Material”, then Rename it “PowerUpMaterial"

… with Materials Folder selected

Page 36: Rollerball: 2 of 2

Change Color of PowerUpMaterial

Make sure color is different from balland ground colors

Page 37: Rollerball: 2 of 2

Apply PowerUp Material to Prefab

Drag to Prefab

Verify Material

Page 38: Rollerball: 2 of 2

Clean Up: Borders

Dragall 4bordersinto “Borders”

VerifyBorders:• NearBorder• FarBorder• RightBorder• LeftBorder

Page 39: Rollerball: 2 of 2

Collision Detection

Page 40: Rollerball: 2 of 2

Re-Activate Player BallActivate “Ball”by enablingits checkboxin Inspector panel

Page 41: Rollerball: 2 of 2

Run the Game!Click Play button, does the ball hit objects?

Page 42: Rollerball: 2 of 2

Launch “PlayerController” Script

Page 43: Rollerball: 2 of 2

Add OnTriggerEnter() Method

Add new methodOnTriggerEnter()

… just before class ends

Page 44: Rollerball: 2 of 2

Add Tag for PowerUp Prefab

SelectPowerUpPrefabinProjectwindow

In Inspectorwindow, click Tagdropdown then click“Add Tag…”

Page 45: Rollerball: 2 of 2

Create New “PowerUp” Tag

Click + symbol

Rename New Tag“PowerUp”

Page 46: Rollerball: 2 of 2

Assign Tag to PowerUp Prefab

SelectPowerUpPrefabinProjectwindow

In Inspectorwindow, click Tagdropdown then select“PowerUp” tag

Page 47: Rollerball: 2 of 2

Run the Game!Click Play button, ball still bounces back!

Page 48: Rollerball: 2 of 2

Enable Box Collider Trigger

SelectPowerUpPrefabinProjectwindow

Enable“Is Trigger”Checkbox

Page 49: Rollerball: 2 of 2

Run the Game!Click Play button, pick up PowerUps!

Page 50: Rollerball: 2 of 2

Add RigidBody to PowerUp Prefab

Select PowerUpprefab in ProjectPanel…

Then, Click Component Physics RigidBody

Page 51: Rollerball: 2 of 2

Enable IsKinematic

SelectPowerUpPrefabinProjectwindow

Under RigidBody,enable“Is Kinematic”checkbox

Page 52: Rollerball: 2 of 2

Scoring with Canvas

Page 53: Rollerball: 2 of 2

Launch “PlayerController” Script

Page 54: Rollerball: 2 of 2

Add and Increment Count Variable

Define a private integernamed “count”

Increment count by 1inside OnTriggerEnter()when player collideswith PowerUp

Page 55: Rollerball: 2 of 2

Add UI Text Element In the Hierarchy panel, click Create UI Text

Page 56: Rollerball: 2 of 2

Verify New Objects in Hierachy

New Items in Hierarchy• Canvas

• Text (child of Canvas)• Event System

Page 57: Rollerball: 2 of 2

Rename “Text” Object to “CountText”In Hierarchy panel, right-click “Text” (below Canvas), rename to “CountText”

Page 58: Rollerball: 2 of 2

Update CountText Color and Text Value

Text: “count text”

Color: any light color

Page 59: Rollerball: 2 of 2

Update Rect Transform for CountTextUnder “Rect Transform”, click on the square icon to see all Anchor Presets

Page 60: Rollerball: 2 of 2

Select an Anchor Preset

Hold down both Shift + Alt on keyboard

then click top-left square icon

Page 61: Rollerball: 2 of 2

Update Pox X and Y Offset

Pos X = 10Pos Y = -10

Page 62: Rollerball: 2 of 2

Verify Count Text Position

Top Left!

Page 63: Rollerball: 2 of 2

Launch “PlayerController” Script

Page 64: Rollerball: 2 of 2

Set Count Text in CodeFirst, add “using”statement forUnityEngine.UI

Add new publicvariable forcountText object

In Start() method,initialize countand callSetCountText()

Page 65: Rollerball: 2 of 2

Define SetCountText() Method

Add new methodSetCountText()just before class ends

Page 66: Rollerball: 2 of 2

Update OnTriggerEnter() Method

Inside OnTriggerEnter()call SetCountText()

on PowerUp collision

Page 67: Rollerball: 2 of 2

Assign CountText to Ball via Script Object

Verify CountText

… drag to CountText

WithBallselected...

Page 68: Rollerball: 2 of 2

Run the Game!Click Play button, pick up PowerUps!

Count!

Page 69: Rollerball: 2 of 2

Add Another UI Text ElementIn the Hierarchy panel, click Create UI Text

Page 70: Rollerball: 2 of 2

Rename New “Text” Object to “WinText”In Hierarchy panel, right-click “Text” (below CountText), rename to “WinText”

Page 71: Rollerball: 2 of 2

Update Rect Transform for WinTextUnder “Rect Transform”, click on the square icon to see all Anchor Presets

Page 72: Rollerball: 2 of 2

Select an Anchor Preset

Hold down both Shift + Alt on keyboard

then click middle-center square icon

Page 73: Rollerball: 2 of 2

Update Pox X and Y Offset

Pos X = 0Pos Y = 75

Page 74: Rollerball: 2 of 2

Launch “PlayerController” Script

Page 75: Rollerball: 2 of 2

Set Win Text in Code

Add new publicvariable forwinText object

In Start() method,initialize winText.Text

Page 76: Rollerball: 2 of 2

Update Win Text in SetCountText()

… then, update winText.text

If all 12 PowerUps are collected…

Page 77: Rollerball: 2 of 2

Assign WinText to Ball via Script Object

Verify WinText

… drag to WinText

WithBallselected...

Page 78: Rollerball: 2 of 2

Run the Game!Click Play, collect all PowerUps!

Page 79: Rollerball: 2 of 2

End of Part 2