MazeGame

BeforeyoustartpleasemakesureyoudownloadthenecessaryprojectfilesfromtheYammer
group(MazeGameBasic.zip)
1.OpenUnityandselectFile>OpenProject...thenSelectOpenOther...(bottomleft)and
selectthefolderMazeGameBasic.

2.Ifthesceneisempty,doubleclickGameSceneunderAssets>Scenes.Youwillseethat
someofthescenehasalreadybeensetupforyouthistime.Thisistosavetimesowecan
concentrateonnewfeatures.Currentlyitsjustbasicsprites,thewallspriteshaveBoxCollider
2Dsattachedtothem.
3.IfyoulookintheHierarchypanelyouwillnoticethattherearetwoobjects:Backgroundand
MainCamera.YouwillalsonoticethattheBackgroundobjecthasasmallarrowtotheleftofit.
Clickthesmallarrowtorevealalistofnestedspritesunderneathit.AnyGameObjectcanbe
nested/madeachildofanotherGameObjectbydraggingitontotheotherobject.Itisavery
usefulwaytoorganisetheobjectsinyourHierarchyintofolders.Withthebonusthatifyou
move/scale/rotatetheparentthenallofthenestedclipswilldothesame.

4.WewillstartbycreatinganewEmptyGameObjectthatwewilluseasaMidgroundfolder.
TodothisselectGameObjectfromtheMenuBarandthenCreateEmpty.Youwillwantto
renametheobjecttoMidgroundinthehierarchysoweknowwhatitis.

5.Nowwewilladdtheplayercharactertothescene.Todothis,select
Assets>Sprites>PlayerSpritesandintheInspectorpanelchangeSpriteModefromSingleto
MultipleandclicktheSpriteEditorbutton.IntheSpriteeditorclickSliceinthetopleftofthe
panelandthenclickSliceagaininthenewpopup.(9rectanglesshouldhaveappearedaround
thecharactersintheimage).ThenclickApplyintheSpriteEditorwindowtosaveyour
changes.YoucannowclosetheSpriteEditorwindow.


6.ClickthearrowtotheleftofPlayerSpritesintheAssetswindowandyoushouldsee12sub
spritesnow.Wewilljustcreate1animationfornow,soselectthetop3framesanddragthem
intothehierarchy.Apopupwindowwillappearaskingyoutonametheanimation,nameit
Downandclickok.YouwillalsowanttorenamethePlayerSprites_0objectinthehierarchyto
justPlayer.AndthendragthisplayerobjectontoMidgroundsoitbecomesnestedunderneath
it.Youwillseethatthespritewasaddedbutweareunabletoseeitinthesceneview....

7.InordertoviewthespriteweneedtomakeitusethenewlayeringSystemofUnity2D.With
thespriteselectedlookintheInspectorpanelandyouwillseeafieldnamedSortingLayerand
itssettodefault.IfyouclickthebuttonyouwillbepresentedwithBackground,Midground
andForeground.FornowletsselectMidgroundsothatwecanseetheplayerinourscene.
Itspossibletoaddasmanylayerstoyourgamesasyoulikeandifyouhavemorethan1sprite
inalayeryoucancontrolthisusingtheOrderInLayerfield.NotethatfortheOrderInLayer
highernumbersarerenderedinfrontoflowernumbers.Nowthatyoucanseetheplayeryouwill
wanttomovehersosheispositionedwherethecamerais,asshownhere:


8.Itstimetogettheplayermovingsofirstthingsfirst,letsaddaRigidBody2Dcomponentto
theplayer.SelecttheplayerspriteandclickAddComponentIntheInspector.Searchforand
addtheRigidbody2Dcomponent.YouwillwanttosetGravityScaleto0topreventtheplayer
frommoving.YouwillalsowanttochecktheFixedAnglebuttontopreventthecharacterrotating
whentheycollidewithotherobjects.
9.WhilewearehereaddaBoxCollider2DcomponenttothePlayerasthiswillbeusedto
detectwhenwecollidewiththosewallsinthescene.
10.FinallyyouwillwanttodragtheMovementScriptontotheplayer.Thescriptislocatedinthe
Assets>Scriptsfolder.Nowclickplayandyouwillseethatyoucanmovetheplayeraround
usingboththedirectionalkeysandtheA,W,S,Dkeys.


11.Ifyoutakealookatthescriptbydoubleclickingityouwillseethatthereisverylittlecode
here.ThemainpartsaregettingthevaluesofHorizontalandVerticalfromtheInputclass.
Thesevaluesrangefrom1to+1.ForHorizontal1representsLeftand+1Rightandfor
Vertical1representsDownand+1representsUp.Thesevaluesarethenmultipliedbyour
speedvariableandstoredinaVector2object.ThenweuseUnitysFixedUpdatefunctiontoset
thevelocityofourplayertothemovementVectorwejustcreated.Thereasonweuse
FixedUpdatehereisbecausewearedealingwithRigidBodysandPhysicsandFixedUpdateis
alwayscalledatthesameframeratecomparedtoUpdatewhoseframeratecanfluctuate
dependingonthecomplexityofwhatsgoingon.
12.YoucanconfigurecustomInputsettingsinUnity.WhichishowUnityknowstouseboththe
directionalkeysandA,W,S,DforHorizontal,andVerticalmovement.OntheMainMenu
selectEdit>ProjectSettings>InputYouwillseetheInputpanelappearinplaceofthe
Inspector.Hereyouwillseeallofthebuttonmappingsthatyoucanuse.Wewontgointotoo
muchdepthaboutthesesettingsherebutfeelfreetohaveaplaywiththem.

13.Nowyouwillhavenoticedthecameraviewisverysmallcomparedtothesizeofthemapin
oursceneview.Wearegoingtomakethecamerafollowtheplayerastheymovearoundthe
maze.Thisisincrediblysimple.SelecttheMainCameraanddragitontotheplayerspriteso
thatitbecomesnestedunderit.ThenhitPlayandwatchthecameratrackyourcharacteras
youmove.

14.Great!Nowitstimetogettherestoftheanimationsworking!Gobacktothe
PlayerCharacterspriteswecreatedearlierandmultiselect3spritesatatimeanddragthem
ontotheHierarchyandcallthemasfollows(3,4,5NameUp),(6,7,8NameLeft)and
(9,10,11NameRight).ThendeletethethreeyoujustaddedfromtheHierarchyviewaswe
arenotgoingtousetheminthisway.(Yourhierarchyviewshouldlookthesameasabovewhen
youredone,buttheanimationswillstillexistinyourassetsfolder).
15.Youwillnoticeintheassetsfolderyounowhave8animationfiles.Down,Up,LeftandRight
aretheanimations,representedwithaPlayicon.PlayerSprites_0~PlayerSprites_9are
AnimationControllers,representedbyalittleflowcharticon.Wedontneed4animation
controllerssodeletePlayerSprites_3,PlayerSprites_6andPlayerSprites_9.Yourassetfolder
shouldnowlooklikethis:


16.Doubleclicktheremaininganimationcontroller(PlayerSprites_0)toopenuptheAnimator
view.IntheAnimatorviewyouwillseetwoblocksoneshouldsayAnystateandtheother
Down.Dragtheremaining3animationsintothisviewandspacethemoutsotheyarenot
overlapping.

17.TheAnimatorisusedtospecifyconditionsthatmakecertainanimationsplay.Todothis
weregoingtolinkuptheHorizontalandVerticalvaluesweusedtomovetheplayerearlier.
AtthebottomoftheAnimatorwindowyoucanseeanelementcalledParameterwitha+
symbolnexttoit.Clickthe+andselectFloatfromthedropdownmenu.NametheNewFloat
HorizontalandthencreateasecondparametercalledVertical.

18.NowweregoingtocreatetransitionstotheanimationswedothisbyRightclickingoneof
theblocks,selectingMakeTransitionandthenclickingtheanimationyouwanttomakea
transitionto.Wearegoingtowanttocreate4transitionsfromAnyStatetoeachofthefour
animationblocks.

19.Wenowwanttosettheindividualconditionsforwheneachanimationshouldplay.Toset
conditionsclickonthewhitearrowofthetransitionyouwishtoeditandintheInspectoryouwill
seeasmallblockcalledConditionswithonevalueExitTime(Dontdeletethisoryour
animationswillnotplay).Clickthe+buttontoaddanotherCondition.Setupeachofthefour
transitionsasfollows:
Upcondition:

Downcondition:

LeftCondition:

RightCondition:


20.NowletsgobacktoourMovementScript.Itstimetouncommentthecodeinthe
MovementScriptfilesothatthevaluesforInputarepassedtoouranimator.Nowhitplayand
watchthemagic!

21.ThelastthingweregoingtodoisgettheIdleanimationsworkingsothatwhentheplayer
stopsmovingtheystopanimatingandtaketheIdleposeofthedirectiontheywerefacing.
22.WearegoingtocreatetheIdleAnimationsfromscratchwithinunity.IntheAssetwindow

doRightClick>Create>Animationandcreate4newanimationseachnamed
Up_Idle,Down_Idle,Left_IdleandRight_Idle.DragtheseintotheAnimationControllerand
connectthemtotheircorrespondinganimationssoforexamplemakeatransitionbetween
DownandDown_Idle.Youranimationcontrollershouldlooksimilartobelow:

ForthenewtransitionswearegoingtocreateanewParametercalledIdleandseteachofthe
fournewtransitionconditionstobeIdle=trueasshownhere:

23.Wenowneedtolinkthisnewparameteruptoourscript!SogobacktotheMovementScript
andaddthefollowingcodetotheupdatefunctiontosettheIdlevaluetotruewhennoinputis
present:

23.Thenewanimationsarecurrentlyemptyrightnowsoweneedtoeditthem.Toedit
animationsfirstmakesurethattheAnimationwindowisvisible.(SelectWindow>Animation
fromthemainmenu).ThenselectthePlayerwithintheHierarchyandyoushouldseesome
valuesappearintheAnimationwindow.

24.JustundertheRecordandPlaybuttonsinthetopleftyouwillseethenameofoneofyour
animations,clickthistoseeadropdownlistofalltheanimationscurrentlyattachedtoour
AnimationController.

25.ChooseoneoftheIdleanimationstoviewitstimeline.Nowtoaddanimationframestothis
timelineyoucansimplyselecttherelevantSpritefromtheAssetsfolderandjustdragitontothe
timeline.DothisforthefourIdles.Itshouldlooksimilartothis:

26.NowclickplayandwatchhowyouranimationschangefromWalkingtoIdlesasyoumove.
ThelastthingyouwillwanttodoistorightclickoneoftheIdleanimationsandchooseSetas
Defaulttoensurethatwhenthegamestartstheplayerisntanimating.
27.Thisconcludesthetutorial,Ihopeyoufounditamazeing)