MastertheArtofUnreal

Engine4Blueprints

AselectionofBlueprintprojectscraftedwiththegoalofhelpingyoubecomeamasterof
UnrealEngine4sBlueprintssystem

MastertheArtofUnrealEngine4Blueprints

Copyright2014KitatusStudios

Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystemortransmittedin
anyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisherand/orthebookscreator
RyanShah.However,piecesofthebookmaybereproducedincaseofbriefquotationsembeddedincritical
articlesorreviews.

Everyefforthasbeenmadeinthepreparationofthisbooktoensuretheaccuracyoftheinformation
presented.However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressor
implied.Neithertheauthor,orpublisher,andtheirdealersanddistributorswillbeheldliableforany
damagescauseddirectlyorindirectlybythisthisbook.

FirstPublished:16/06/2014

ProductionReference:014180MM0

ISBN:9781291906103

www.kitatusstudios.co.uk
CoverimagebyRyanShah(contact@kitatusstudios.co.uk)

1
Credits
Author
RyanShah

SpecialThanks
ScarlettJuzzle
ThankYouScarlettforputtingupwithme,Ihavesomuchloveforyouits
UNREAL.
ScottHeyworth
ThankYouforbeingagreatpalandalsoallofthemusicforKitatus
Studios!
MattToyer
ThankYouforbeingmybestbuddythroughouttheyears.

Hourences
ThankYouforinspiringmetohelpothers!
xTomass
ThankYouforsupportingme,doingtheinterviewsandprovidingvoice
WorkforKitatusStudios!
WeiseGamer
ThankYouforthecoverageandbeingagreatguy!
DanielDunham
ThankYouforbeingthefirsttosupportKitatusStudios!

JohnRomero
ThankYoufortakingthetimeouttogivemesomepointersforSuper
Distroandforthekindwords!
EpicGames
ThankYouformakingsuchanawesometoolthathasrevolutionized
Gamedevelopment!
SquareEnixMontreal
ThankYouforthemoraleboostandkindwordsaboutSuperDistro!

2
AbouttheAuthor

RyanShahisProjectLead/LeadDeveloperatKitatusStudios.Boastingover10yearsof
experiencecreatingvideogames,Ryanhasworkedonanassortmentofdifferentprogramsto
createvideogameexperiences.

BeforeKitatusStudios,Ryanwasafreelancewriter,whoselfpublishedworksoffiction.Using
hisexperienceasawriter,Ryanturnedtovideogames,alifelongpassiontobringtheworldsof
hisideastolife.

Hecanbefoundonlineathttp://kitatusstudios.co.ukandcanbecontactedat
contact@kitatusstudios.co.uk

3
Acknowledgement

AhugethankyouandahalfhastogotomybeautifulgirlfriendScarlett,whonomatterwhathas
alwaysbelievedinmewhennobodyelsedid.Herpatienceisinspiring.

IdlikeEpicforcreatingsuchadiverseyeteasytousesystemwithUnrealEngine4.When
peoplesayitsagamechanger,theywerentwrong!

IdalsoliketothankmyparentsBecausewithoutthem,youwouldntbereadingthisrightnow!
Alsothrowingashoutouttomybrothers,KallumandJordan.Ihopethisbookinspiresthemto
followthecareerpathIchoseandtheyseejusthowfunitcanbetocreatevideogames!

Idalsoliketothankyou,thereader.Imightnotknowyoupersonally,butbyyoubuyingthisbook
Yourehelpingtosupportmeandhelpingtosupportthevideogameindustry.Whoknows
MaybethisbookwillhelpyouandbecomethesteppingstoneyouneedtomaketheBEST
GAMEOFALLTIME.Anythingispossible!

4
TableofContents
Chapter#1NowYoureThinkingWithPortals(ThirdPerson)
MissionBrief10
LetsBegin!11
CreatingaNewProject12
NonAnimatedPortalTexture18
AnimatedPortalTexture22
GlueIt26
MakingtheAnimatedMaterial28
OneSpritesheet29
MorethanOneSpritesheet34
ONEmoreSpritesheet40
MOREthanONESpritesheet41
CreatingourPortal!45
PiecingTogetherourPortalBlueprint49
FindingaHomeforourPortal53
TimetoMakethePortalaPortal!57
ThereisaBetterWaytoDoThings!60
MakingaLoadingScreen!61
SettingupourHUDforAwesome!65
Project#1WrapUp!75

Chapter#2FirstBloodII(SideScroller)
MissionBrief76
LetsBeginAgain!77
WereIn!78
HUDPrep!79
HUD...HUD...andaway!80
PreparingourHUDMaterials82
WhereAreWeNow?84
MultiHUD!84
CreatingourHUD86
IfRedPlayer,RedHUD.IfBluePlayer,BlueHUD!96
PlayerMeetHUD!103
LetsControltheHUDandPlayer!110
GivethePlayerDifferentPowers!113
ToKillaPlayer/Coins,Coins,Coins!115
Project#2WrapUp!120

EndofBook#1121
5
Preface

UnrealEngine4isthelatestversionofthepopularvideogamedevelopmentpackagetheUnreal
Engine.TheUnrealEngineneedsnointroductionBeingthepowerhousebehindtheprevious
consolegenerationfromthestart.TocalltheUnrealEngineapowerhousewouldbean
understatement,theUnrealEngineiseverythingadeveloper(IndieandCommercial)wouldever
needinavideogameenginetocreatetheiridealproject.Withitslatestiteration,UnrealEngine
4,EpichasimprovedUnrealEngineandpropelledtheengineintothenextgeneration,theyhave
broughtthefuturetothepresentwithUnrealEngine4andtheresliterallyneverbeenabetter
timetobeginusingUnrealEngine4foranyproject,bigorsmall,commercialorindependent.

MasteringtheArtofUnrealEngine4Blueprintstakesaconcise,clear,informativebutfun
approachtodevelopingUnrealEngine4,withouttouchingasinglelineofcode.Byusingthis
book,youllbecreatingvarioussmallprojectscompletelyinblueprint.Fromthisbook,youllbe
equippedwiththeknowhowyoullneedtocreatethegameofyourdreams.Ontopofmastering
theBlueprintssysteminUnrealEngine4,youllalsolearnthesecretsbehindgettingthemost
outofthebeastofanengine.
WhatthisBookCovers

Hereswhatyoulllearnthankstothisbookwithoutwritingasinglelineofcode!
HowtocreateanimatedtextureswithFlipbook
Howtocreateportalstotransitionbetweentwolevels
Howtocreatealoadingscreen!
HowtocreateaHUD!
WhatisthedifferencebetweenaBool,Int,Float,StringandArray?
HowtoKillaPlayer!
SwitchingPlayers!
AlteringMaterials!
KeepingScore!
Andmuch,muchmore!

6
WhatYoullNeedForThisBook
InordertotakefulladvantageofthisbookYoullneedaWindows,MacorLinuxcomputerthatis
capableofrunningUnrealEngine4.Itrequiresacomputerwiththefollowingsystem
configuration,whichdoublesupattheMinimumRequirementsforthisbook:

DesktopPCorMac
Windows764bitorMacOSX10.9.2orlater
QuadcoreIntelorAMDprocessor,2.5GHzorfaster
NVIDIAGeForce470GTXorAMDRadeon6870HDseriescardorhigher
8GBRAM

Note:Believeitornot,YoullalsoneedUnrealEngine4(Version4.2ornewer).

WhothisBookisFor

MasteringtheArtofUnrealEngine4Blueprintsisdesignedforanyonewhosedreamtof
creatingvideogames,butdidnthavetheknowhowto.Thisbookisalsodesignedforeveryone
whowanttoharnessthepowerofUnrealEngine4totaketheircreationstothenextleveland
beyondandthepeoplewhowanttocreategameswithoutwritingasinglelineofcode.

ThosewhoarefamiliarwithUnrealEngine4willhaveaneasiertime,buteverythinginthebook
isexplainedclearlyandwithreferencescreenshotstomaketheprocessofmasteringthe
blueprintssysteminUnrealEngine4abreeze.PeoplewithnopriorexperiencetousingUnreal
Engine4,orgameenginesingeneralshouldhavenoproblemwithfollowingthisbook,butifyou
needadditionalhelpwithanythinginthebook,feelfreetoaskontheUnrealEngineForums
(http://forums.unrealengine.com)oremailmedirectly:contact@kitatusstudios.co.uk.

7
ReaderFeedback

Ilovefeedback!Goodorbad,itsallwelcomeandIhighlyrecommendyoudoso!Ifyouloved
readingorhatedit,Iseriouslywouldlovetoknow.Feedbackisimportantinhelpinglettingme
knowhowIvedone,whatneedstobefixedandImjustgenerallyintriguedonhowwell/badIve
done.ImaperfectionistandIstriveforthebest,soiftheresanythingIcanimproveon,feelfree
toemail:contact@kitatusstudios.co.uk

CustomerSupport
Sinceyou'retheownerofthisbook,Youhavetheopportunitytogetbonuscontent,suchas
colourimagesandprojectcontent:Headtohttp://content.Kitatusstudios.co.uktoaccessto
thesefiles!
Piracy

ImnotgoingtopretenditdoesntexistPiracyispiracyandnothingisgoingtostopit.Ifyouve
piratedthisbookItsalright.Imnotgoingtocurseyouoranything.Itssadthatyourenotwilling
tospendmoneyonthisbook,butIknowtimesaretoughandinthedigitalworldIknowthat
everythingisfreetosomepeople.

DuetothefactIvegivenupthetimetowritethisbooktohelpteachotherstoharnessthepower
ofBlueprints,losingoutonworkhoursandtimeIcouldhavespentonSuperDistro(Myfirst
Commerciallytobereleasedproject),Iaskthatifyoupiratedthisbookandyouveenjoyedthis
book,PleaseconsiderpurchasingSuperDistrooryoucouldsendadonationthroughmy
website.Thismeansthatevenifyoudontspendthefullpriceonthisbook,Myeffortstobring
thesetutorialstoyouarent100%invein.

Ifyouvepurchasedthisbook,thenIcantthankyouenoughforsupportingmeandmyworkandI
seriouslyamgratefulyoureexperiencingthebookthroughlegitimatemeans.
Errata
Atthetimeofwriting,thebookhasnoerrors.However,astheengineisupdated,thingsmight
change.Intheunlikelyeventsomeofthecodenolongerworks,pleaseemailmeimmediately:
contact@kitatusstudios.co.ukBydoingthis,younotonlysecuretheintegrityofthebook,but
8
youalsohelpothersbynotcomingacrosserrorsandthisleadstoastressfreeexperiencewith
thisbook.Whoknows,youmightalsobecreditedinlaterbookrevisions!

DownloadingDLC(DownloadableContent)
Youcandownloadcolourvariationsoftheimagesinthisbook,aswellasUE4projectfilesfrom
http://content.kitatusstudios.co.uk.
Questions
Ifyouhaveanyquestions,emailmeatcontact@kitatusstudios.co.uk.Thelineisopen,soplease
don'tbeafraidtogetintouch.

9
Mission#1NowYoureThinkingWith
Portals
AnintroductioninUE4andBlueprints.

Template:
BlueprintThirdperson

WhatYoullLearn:
Transitionbetweentwolevels
HowtocreateaLoadingScreen
AnimatedTextures
(FlipbookAnimations)
CreateaHubworld
(Anareawhichconnectsallyourlevels)

WhatYoullNeed:
PortalTexture
IfAnimated:YoullNeedtheAnimation
andGlueIt,whichisavailablehere:
http://www.varcade.com/blog/glueitspritesheetmakerdownload/
LoadingScreen(.PNGor.TGA)
Dimensions:1920x1080

(Extras)WhatYoullNeedforExtras:
AnimatedPortalVideo(.Mov)/.GIFfile

10
LetsBegin!

Firstthingsfirst,letsfireupUnrealEngine4andcreateanewproject!

OpenupUnrealEngine4andyoullbegreetedwiththisscreen:

ThisisthelauncherWhereyoullspendthefirstfewmomentseverytimeyouopenUnreal
Engine.IseriouslyrecommendcheckingouttheMarketplacecontentEspeciallytheContent
Examples.TheseMarketplaceitemsareagoldmineofinformationofhowEpic(theUnreal
Enginedevelopers)usetheenginetoputtheircontenttogether.

EpichavealsostatedthatallthecontentontheMarketplaceisfreeforreuse(WithinUnreal
Engine4projects)whichisanabsolutebonusforbeingabletousetheirtextures,materials,
propsandmodelsforpersonallearning.

11
FormostofthecontentontheMarketplace,theresadocumentationpageoverontheUnreal
Wiki(https://docs.unrealengine.com/latest/INT/)Soyoullbeabletobreakapartthecontentand
learnfromeverylittledetail,whichIcantstressenoughissuchaninvaluableresourcefor
developersjuststartingoutwithUnrealEngine4.

CreatingaNewProject
Startingrightoffthebatonthelauncher,wellhittheLaunchbuttontobeginourUnrealEngine
4Adventures.

Itlltakeamomentortwo,butonceitsloaded,youllbegreetedwiththisscreen:

Pleasenotethatyourscreenmightlookatlittledifferenttomine,asitalldependsonwhat
projectsyouvecreated/installed.

12
Onthetopofthisscreen,theresaNewProjecttab.Seeingasthisexamplewillhaveus
creatingsomeportalsinthethirdpersonexample,wellgoaheadandpickthatone,makingsure
thatwerechoosingBlueprintThirdPersonNOTCodethirdPerson(Youmighthavetoscroll
downtofindBlueprintThirdPerson!).Also,besuretonameyourprojectonthebottomof
thescreenandmakesureIncludeStarterContentisticked!

Onceyourereadytobegin,pressCreateProjectandUnrealEngine4willsetupourprojectfor
thefirsttime(Thiswilltakelongerthanusualasitssettingupprojectfiles).

13
Oncetheprojecthasbeenloaded,youllbegreetedwiththisscreen:

ThismeanseverythinghasbeensetupcorrectlyandwecanbeginourworkonProject:Lets
MakeaFrigginPortal!

Ifyouwanttotrytheprojectasitis,onthebarjustabovethePlayArea,thereareanumberof
options.IfyoupressPlay,youllbethrownintothegame.Thisllgiveyoutheopportunitytorun
aroundandgetafeelfortheengine.Soifyouhaventalready,Ihighlyrecommenddoingthat.

Afteryouvehadalittlerunaround,itstimetobeginworkingonourPortalsystem!

Firstthingfirst,Wellneedanewmaptotransitionto,soletscreateanewmapnowbygoingto
File>NewLevel

YourepresentedanoptionofDefaultorEmptyLevelForthisexample,Defaultwilldonicely.

14

Oncethelevelhasloaded,wellneedtosaveitquicklysowedontloseanydata!HeaduptoFile
>SaveAs

ItshouldopenintoyourContent/Mapsfolder,ifitdoesntitshouldntbetoohardtofind.Once
youreinthefolder,typeinyourMapnameandclickSave.

RememberwhatyoucallthislevelasitllbeVITALlater!IvecalledmineArtOf_Example2,but
yourefreetocallyourswhatyoulike.

UNREALENGINE4ETIQUETTEFILENAMESWhennamingfiles,Thebestwayof
doingitisbyashortsummaryasaprefix,followedbyanunderscoreandthefilename.
ForexampleacharacterblueprintshouldbecalledChar_*Charactername*andamap
namePROJECTNAME_MAPNAME(Example:ArtOfBp_Example2),thishelpskeepyour
UnrealEngine4projectcleanandconciseandmakeiteasytofindanythingshouldyou
needtolocateit.
Nowourmaphasbeencreated,youcangoaheadandreturntotheexamplemap:File>Open
Level>Example_Map.

15
Oncebackintothemap,itstimetomessaroundwithportals!Inthecontentbrowser,Hitthe
shinyNewbuttonandclickonBlueprint.

16
ItllthenopenupadialogboxaskingwhatkindofBlueprintwewanttocreate.Fortheportal,wed
likeanActorblueprint,sogoaheadandclickActor:

NowcomesthetimetonameourBlueprint,soImgoingtobeusingBP_Portal.Again,youre
freetousewhateveryoulikeasaname.Ifbychance,youaccidentlyclickedawayandwould
liketorenameyourBlueprint,simplyRightClick(Ctrl+ClickonaMac)andselectrename(TIP:
YoucanalsoleftclicktheBlueprintandpressF2).

OnceyouvealteredthenameofyourBlueprint,PressNewontheContentBrowseragainand
pressFolder,thiswillcreateanewfolder.NamethisTutorialContent.

Whenyouvecreatedyourfolder,simplyclickanddragyourblueprintintothefolderandasmall
boxwillappearaskingwhetheryouwanttoCopyHereorMoveHere.Foroursituation,wed
liketomoveittothefolder,soclickMoveHereandtheBlueprintwillbetransportedtoitsnew
location.

17
NowdoubleclicktheFolderandyoushouldhaveaContentBrowserthatlookslikethis:

NowistimetoimportyourTextureforthePortal.Hereiswherewellbranchintotwodifferent
areas.Evenifyoureusinganonanimatedportaltexture,pleasedoreadthroughthetutorial
behindtheAnimatedPortalTexture,asthiswillteachyouthecoreideasbehindFlipbooksand
animationsinUnrealEngine4:

ForNonAnimatedPortalTexture:

IfthetextureyouwishtoimportforyourPortalisstatic(Doesntmove),thenallyoullneedtodo
isimportthetextureandconvertitintoamaterial.ThewaywedothisisbygoingtoImport,
whichisnexttotheNewbuttonintheContentBrowser.

ThenfindyourPortaltextureandimportit.ItshouldimportintoyourTutorialContentfolder.Ifan
errorcomesupsayingitsnotaPowerofTwotexture,thatsfine,justclickcontinue.Ifitisina
18
differentfolder,thenwithinthecontentbrowser,simplydraganddropitinsidethe
TutorialContentfolder.

Onceyourtexturehasbeenimported,RightclickthetextureandselecttheoptionCreate
Material

ThiswillcreateaMaterialButwestillhaveworktodo!

DoubleclickthecreatedMaterialtoloaduptheMaterialeditorThisiswherewecaneditthe
propertiesoftheMaterial.

19
WhenyoufirstloaduptheMaterialEditor,theBaseColournodemightbeinsidethemaintree
ofnodes.Thisisnotaproblem,justclickanddragtheMaterialawayfromitandyoushouldnow
belookingatsomethingthatlookslikethis:

Wedontneedtodomuchatthemoment,Wellbebackformoreinlaterprojects.Wefirstneed
toconnecttheTextureSampletotheEmissiveColorchannelintheMaterialeditor.

WhatisEmissiveColor?TosumupEmissiveColorintoasshortaspossible:EmissiveColor
isthepropertythatsetswhatcolourcomesOUTofthematerial.Thinkofsomethingyoudont
wanttobeaffectedbyanylightsaroundit,suchasaNeonsignorapointofinterest.

ByputtingthetextureintoBaseColourandEmissiveColour,itwillmakethematerialglowasifit
wereTelevision/Computerscreenoralightsourcesimilartothat.Ifyouwanttoreadmoreinto
whatthematerialpropertiesareandwhattheymean,Youcanfindallthisinformationonthe
UnrealEnginewebsiteintheOfficialDocumentation,whichcanaccessedbypressingF1in
theUnrealEngine.

20
Anyway,Fornow,leftclickwherethewhiteoutputisonTextureSampleanddraganddropthe
linesoitsitsinEmissiveColor.NowTextureSampleshouldbehookeduptoBaseColorand
EmissiveColor,likethis:

IMPORTANTTIP:WheneveryoumakeachangetoablueprintorMaterialwithinUnreal
Engine,makesuretoSave(WhichisalsoautomaticallyApplytoo,soyoudonthaveto
hitbothbuttonsoverandoveragain)whichwillmakesureyoudontloseanychangesif
youreditorcrashesatanypoint.

Tosave,hitthatjuicybigsavebuttononthetopofyourMaterialeditor:

Onceyouvesaved,youcanclosetheMaterialeditor.MakesuretoalsoSaveAllinthemain
UnrealEnginewindowThisensuresyoudontloseanydata.

21
ForAnimatedPortalTexture:

Thisiswhereitgetsalittletricky.Illexplainthisassimplyaspossible,butifyougetlostjust
retraceyourstepsandyoushouldbeokay.Areyouready?

IfyouwantyourPortaltexturetobeanimated,weregoingtoneedaFlipbook,whichisUnreal
Enginesanswerto2Danimation.TocreateaFlipbookandforittoworkproperly,weregoingto
needaSpritesheet.Todothis,weregoingtoemploythehelpofGlueItAfreeapplication
createdbyVacade(LinkisintheProjectOutlineatthestartofthisChapter).GlueItwillturnout
movies/GIFsintoSpritesheetsbutitcantdoitallitself.First,weneedtoconvertourvideo/GIF
intoasequenceofimagesforGlueIttoworkitsmagic.

ThereareafewwayswecanconvertourVideo/GIFtoanimagesequence,herearetwo
differentwayswecanachievethiswithtwodifferentsoftwarepackagesQuickTimePro(Not
FreeVideo&GIFsupported)andVLCMediaPlayer(FreeVideosupported,GIFisnot
supported).(NOTE:Thereareotherwaysofdoingthis,howeverifyoudlikeaguideon
alternativewaystoconvertVideo/GIFintoanimagesequence,Irecommendlookingon
yourfavouritesearchengine).
QuickTimePro:

Step#1OpenyourVideo/GIFFile

Step#2File>Export

22
Step#3CreateaNewFolder(TIP:Rememberwhereitis!)Callitsomethingalongthelines
ofPortalAnim(Thenameisnttooimportant).

Step#4OpentheFolder,readytoExportthere.SetExporttoImageSequenceusingBMP,
25fps.

Step#5Export!
VLCMediaPlayer:

Step#1CreateaNewFolderonyourPC/Mac/Linux(TIP:Rememberwhereitis!)Callit
somethingalongthelinesofPortalAnim(Thenameisnttooimportant).MakesuretoCopy(Ctrl
+X/Ctrl+C)thefolderslocation<VERYIMPORTANT

Step#2DONOTyourVideoFileYET(InVLC)

23
Step#3GotoTools>Preferences

Step#4WhereitsaysShowSettingsatthebottomoftheSimplePreferencesWindow,
youregivenachoiceofSimpleorAll.SetittoAll.

Step#5Youllnowbegivenalistviewofallthesettings.ScrolldowntoVideoandselect
Filters.Ontheright,selectSceneVideoFilter.Oncethishasbeenchecked,Expandfilterson
theleftandlookforSceneFilter.Clickit.

24
Step#6Ontherighthandside,thereisanoptionthatsaysDirectoryPathPrefix.Inthisbox,
pastethepathtothefolderyoucreatedinStep#1.

Step#7JustunderneathDirectoryPathPrefix,thereisaboxcalledRecordingRatio.Thisis
theamountofframesyoudliketoexport,forexampleIhave3framesandifIputin50,itwould
recordevery50thframe.24shouldbethatlimit,inmyopinion.Setthisaccordingly.

Step#8PressSaveatthebottomwhenyouredone.

Step#9GotoFile>OpenFileandopenyourvideo.

Step#10Letthevideoplaytotheend.Itshouldonlybeacouplesecondslong.
25
Step#11AfteryourvideohasfinishedplayinggobackintopreferencesandbacktoVideo>
FiltersanddeselectSceneVideoFilter(ThisstopsVLCrecordingtheframesofeveryvideo
youopen.

Nowwerereadyforthenextstep

GlueIt

OnceyouvedownloadedGlueIt,itstimetoopentheapplicationandbeginstitchingtogetherour
ImageSequence.

WhenGlueIthasopened,itstimetoimportourimages.AtthebottomofGlueIt,wehavethree
buttonsunderStep#1:Add,DeleteandClear.WewanttoAddourimages,sogoaheadand
addthem,butbeforeyoudo,wehaveabranchingpathwaycomingupsoitsbesttoaddressit
here:

Dependingontheamountofframesyouvegot,wehavetotakesomethingimportantinto
account:UnrealEngineonlysupportstexturesupto8,192x8,192.Normallythiswontbea
problemasyourportaltextureshouldntbemorethanapproximately512x512isheachframe.
Butifforexampleyouhavea1920x1080moviethatspans4050frames,itsnotgoingtofitinto
UnrealEngine,soyoullneedtobreaktheGlueItsintomultiplefilessotheUnrealEnginewill
acceptthefiles.

Thiswilltakealittletinkering,butsometimesitsbesttoimportFrame1>10(Forexample)
intoGlueItandafteritssaved,importingFrame11>20.etc.Makesurethatnomatterhow
manycolumnsyousetup,youdothisforalltheGlueItsinthesequence,thishelpskeepyour
Materialblueprintcleanandeasytomanage.

Nowwevegotthatoutoftheway,itstimetoaddourimages.Forthesakeofthisproject,Im
goingtobeusinganAnimatedportalthatwouldfitnicelyonasinglespritesheet.Butfurther
alonginthistutorial,Iwillbeaccommodatingforifyouhavemultiplespritesheets.

Step#1IntheStep#1SectionofGlueIt,Addyourimages(OrselectionofImagestothatare
forthisSpritesheet)

26
Step#2OnceyourImageshavebeenadded,movetoStep#2intheGlueItWindow.Itsnow
timetosethowmanycolumnsweneed.Inordertomakesuretheresnowhite/blackboxesat
theendofouranimation,letsmakesureouramountofframesfitperfectlyonthespritesheet.

Forexample,ifIhave20framesandtwocolumns,theres10framesoneachcolumn.BUTifwe
have3columns,thiswouldbesplitamongstthreecolumnsLeavingalotofemptyspaceatthe
endofourspritesheet,Wedontwantthisasitllcomplicatethingslater.

Aspreviouslystated,asIhave20frames,twocolumnswouldbeperfect.Importanttip:
REMEMBERhowmanycolumnsyouveusedandrememberhowmanyrowsthiswill
createtoo,wellneedthislater!

Onceyouvesetthecolumns,pressGlueITandgiveitamomenttoglueyourimagestogether!

27
Step#3OnceGlued,PressSave(Makesureyourememberwhereyousaveitto!)

NowthatwehaveourSpritesheet,weneedtogetitintoUnrealEnginetobeginanimatingour
Portal!
MakingtheAnimatedMaterial

SonowthatwehaveourSpritesheet,weneedtoimportitintoUnrealEngine.Justimportitlike
anynormaltexture(Likewevedonealready!)Foraquickrefreshertohelpdrillinjusthow
simplethatis:

Step#1IntheContentBrowser(Theboxwhereallofyourfilesare),atthetopofthiswindow,
NexttoNewisabuttoncalledImport.Clickit.

Step#2FindyourSpritesheetthatGlueItcreatedandImportIfanerrorcomesupsayingits
notaPowerofTwotexture,thatsfine,justclickcontinue.

Step#3RightclickyourtextureandCreateMaterial

NowthatthetextureisintheengineandturnedintoaMaterial,Thisiswhereitsgoingtogeta
littlecomplicatedifyouhavemorethanonespritesheetButIlltrymybesttomaketheprocess
assimpleaspossible:

28
IfyouhaveOneSpriteSheet:

Step#1OpenuptheMaterialEditorbydoubleclickyourMaterial.

Step#2InsidetheMaterialEditor,LeftClickTextureSample(ConnectedtoBaseColour)and
pressDeleteonyourkeyboardorRightClick(Ctrl+Click)andpressDelete.YourMaterialEditor
shouldnowlooklikethis:

Step#3FromtheBaseColourpin,clickthepinanddragtotheleftintoemptyspace.When
thepromptboxcomesup,writeinFlipbook.ClicktheoptionthatcomesupandaFlipbookwill
becreatedinyourBlueprint,preconnectedintoyourBaseColourpin.

29
Step#4WheretheFlipbookconnectstotheBaseColour,Dragthefilledinpinanddragover
totheEmissiveColourChannel.ThiswillcreatealinktoEmissiveColourtotheFlipbook,while
keepingthelinktoBaseColour.YoushouldnowhaveaMaterialthatlookslikethis:

Step#4TotheleftofyourFlipbooknode,Pressthenumber1onyourkeyboard(Theone
underyourF1,F2,F3.etc),thiswillcreateaConstant(Alternatively,youcantypeConstant
intothesearchboxabovethelibraryontherightanditllfinditforyou).

30
Step#5ClickthenewlycreatedConstantandontheleft,youllfindtheproperties.Inthis
propertiesbox,theresafieldcalled:Value:with0.0alreadyinputted.Forourexample,typein
thenumberofrowsyourFlipbookhas.Forme,thenumberis5(AsIhavetenimagesintwo
columns):

Step#6DragtheopenpinofyourConstanttotheNumberofRowsnodeinyourFlipBook.

Step#7Press1onyourkeyboardagain(OrsearchintheLibraryforConstant)tocreate
anotherconstant.ThisoneisourColumnnumber.Formytexture,thisis2(AsIhave20images
splitintotwocolumns,5rows).ChangethevalueandputinyouramountofColumns.Once
inputted,dragtheopenpinofyourConstantintotheNumberofColumnsofyourflipbook.

HELPFULTIP:OnthetoprightofyourConstantnodes,thereisalittlegreyarrow.
Pressingthiswilltogglethecolourboxtoappearanddisappear.Forthesakeof
keepingyourBlueprintsneatandtidy,youcangoaheadandtogglethecolourup,sowe
onlyseethenumbervalue.
Step#8YourMaterialshouldnowlookalittlelikethis:

31

Now,underneathyourConstantsandtheFlipbooks,Rightclick(Ctrl+Click)andthiswillbring
upacompatversionoftheBlueprintLibrary.InthesearchfieldatthetoptypeTextureObject,
thiswillrevealafewoptions.TheonewerelookingforisTextureObject,soclickitanditwill
createaTextureSamplenode.

ClickyournewlycreatedTextureObjectandontheleftinyourPropertiesbox,thereisabox
namedTexture.Justtotherightofthisbox,thereisadarkgrayboxwithNonewritteninit.
ClickthisboxandinthesearchboxthatappearstypeinthenameofyourSpritesheet.My
SpritesheetsnameisTEX_PortalAnimsoIlltypethatinandselectit.ThiswillsettheTexture
ObjectnodetobecometheSpokespersonsotospeakforourTexture:

Step#8HookupyourTextureObjectswhitepintotheTexture(T2d)nodeofyourFlipbook.

32
Step#9IntheUVspinofyourFlipbook,Clickthepinanddragtotheleft.Thiswillloadupthe
CompactBlueprintlibraryagain.Inthesearchbox,thistimetype:TextureCoordinateand
PressEnteronyourkeyboard.

ThiswillcreateaTextureCoordinate,whichtheUnrealEnginedocumentationdescribesas:The
TextureCoordinateexpressionoutputsUVtexturecoordinatesintheformofatwochannel
vectorvalueallowingmaterialstousedifferentUVchannels,specifytiling,andotherwiseoperate
ontheUVsofamesh.

Step#10RemembertoSavebypressingthefloppydiscwidgetatthetopoftheMaterial
Editor!YoucannowexittheMaterialeditor.
IfyouhaveMorethanOneSpritesheet:

Thisisnotadvisedforbeginners.Weregoingtobesteppingintosomeprettycomplicated
territory.

Togetaglimpseonhowcomplicatedthisstepcanget:

Step#1OpenuptheMaterialEditorbydoubleclickyourMaterial.

33
Step#2InsidetheMaterialEditor,LeftClickTextureSample(ConnectedtoBaseColour)and
pressDeleteonyourkeyboardorRightClick(Ctrl+Click)andpressDelete.

Step#3FromtheBaseColourpin,clickthepinanddragtotheleftintoemptyspace.When
thepromptboxcomesup,writeinIf.ClicktheoptionIfthatcomesupandanIfnodewillbe
createdinyourBlueprint,preconnectedintoyourBaseColourpin.

Step#4OntheIfNode,PinsA,A>=BandA<BallNEEDtobefilledinfortheBlueprintto
compile.SoinordertomakeourBlueprintwork,weregoingtouseatimesystemSoour
MaterialknowswhichSpritesheettoplayatanygiventime.

FromPinAoftheIfnode,DragtotheleftandtheCompactBlueprintLibraryloadsuponce
more.Fromthis,selectMultiply.

WeneedaMultiplynodeasweregoingtobegoingbetakingthedecimalnumberofTime
(Afteritsbeendivided)andmultiplyingitwithanumber(Inourcase,Iurgeyoumessaround
withthenumberweregoingtocreateasitllletyoualterthespeedofyourFlipbooks).

YourMaterialshouldnowlooklikethis:

Step#5FromtheApinofourMultiplynode,Dragtotheleftagainandinthesearchbox,type
inFrac,thiswillgetthedecimalfromTimeandmultiplyitwithanumbertodefinethespeedof
ourFlipbooks.

34
Step#6FromtheemptyleftsidepinofFracdragtotheleftandinCompactBlueprintLibrary,
typeinDivideandpressenter.ThiswillgiveusaDividenode,whichwellneedtodividethe
timewithournumberwesetforthespeedofourFlipbookanimation.

Step#7FromtheemptyApinofourDivide,dragtotheleftandinthesearchboxthat
appears,typeinTimeandselecttheConstantTimethatappears,thisisourkeyTime
componentthatthiswholeMaterialrelieson.

Step#8BelowourTimenode,Press1onyourKeyboard(OrsearchintheBlueprintlibrary
forConstant)tocreateaConstant.Intheproperties(Inthelowerleftofyourscreen)setthe
valueoftheConstantto5.

ThisisthespeedofyourMaterialsanimationandmightneedtobechangedlater.

35
Step#8FromtheemptyBpinofourDividenode,dragtoemptyrightpinofyourConstant
toconnectthemtogether.

Yourblueprintshouldnowlookalittlelikethis:

Step#9FromthefilledinWhitepinofourConstant(WhichisalreadyconnectedtoDivide),
clickanddragtotheBofMultiply,whichshouldcurrentlybeempty.Thiswillestablishalinkfrom
theConstanttonotonlyDividebuttoMultiply.

Currently,thismeansthattheMaterialiscurrently:
Checkingthetimeitsbeenrunningfor>Dividingby5(Orwhicheverthenumberyouveset)to
determinethespeedofouranimation.Thenitsgettingthedecimaloftheequationandthen
multiplytheanswerby5(Orwhichevernumberyouveset).

Forexample:
Timeis32.231seconds.
32.231/5=6.4462
Nowitstaking0.4462andtimesthisby5.Thisisnow2.231.

ThiswillthenasktheFlipbooksintheMaterial:Hey,whichoneofyouishigherthan2butlower
than3?Inwhichmetaphoricallyspeaking,thecorrectFlipbookwouldraiseitshand.

36
Sonow,yourMaterialshouldlooklikethis:

Step#10Let'sgobacktoourIfstatement.We'vefilledthe"A"pin,buttherestofthepins
remainempty.Nowit'stimeforustochangethat.CreateaConstant(Press"1"onyour
keyboardorsearchintheLibraryontherightfor"Constant")andinthepropertiesontheright,
setthevalueto"1".

ForourIfstatement,ArepresentsTimeandBrepresents"WhatFlipbookisthis?".Sincethisis
thefirstFlipbookinthechain,we'regoingtosetBtooneandwedothisbyconnectingthe
Constant(Withavalueof1)toB.

37
Step#11Grabtheemptypin"A<B"(AtthebottomoftheIfstatement)andtypeinthesearch
box"Flipbook".ThiswillbethebasisofourfirststageofourAnimation.

Step#12CreatetwoconstantsforourFlipbook,onerepresentingtheamountofrowsofour
SpritesheetandtheotherrepresentingourColumns(Press"1"onthekeyboardorsearchforit
fromthelibrary.ThepropertiestoalterthevaluesareonthebottomleftofyourMaterial
Blueprint).

Step#13DragtheemptypinoftheFlipbooknode("TextureT2d")andinthesearchboxtype:
"TextureObject".InthepropertiesofthisTextureObject,setthefirstSpritesheet.

Step#14Dragtheemptypin"Uvs"fromourFlipbooknodeandsearchfor
"Texturecoordinate".

Step#15OurfirstFlipbookissetup,buthereiswherewellbranchonceagain:

38
IfyouhaveONEmoreSpritesheet:
Step#1CopyyourFlipbookandthechildrennodes(Ctrl+Clickthenodesonebyoneand
thenpressCtrl+Conyourkeyboard(Alternatively,RightClick[Ctrl+Click]andselectCopy).

Step#2PressCtrl+V(RightClick[Ctrl+Click]theemptyspaceunderneathyourFlipbookto
createacopyofourFlipbook.

Step#3ClicktheTextureObjectandinthePropertiesfield,changetheTexturetoyour
SecondSpritesheet.(AlsoaltertheConstantsforRowandColumnsifneedbe!)

Step#4FromtheemptyResultpinofoursecondFlipbook,DragandconnectittoA>=Bof
theIfnode..Oncethisisdone,gotothenewlyfilledwhiteResultpinofoursecondFlipbookand
alsodragittoA==Bofourifnode.AlloftheIfpinsshouldnowbefilled.

Whatdidwejustdo?LetstakealookatourIfnode.Hereiswhatitsnowdoing:
IfAThisisthecurrenttimeoftheMaterial.
39
IfBThisiswhatFlipbooktoplay.
IfA>=BIfthetimeismorethanorthesamenumberaswhatflipbooktoplay,
WeplaytheSECONDFlipbook.
IfA==BIftimeisthesamenumberaswhatFlipbooktoplay,Weplaythe
SECONDFlipbook.
IfA<BIftimeisLESSthanthenumberofwhatFlipbooktoplay,weplaythe
FIRSTFlipbook.

YourMaterialshouldlikethisandifitdoes,youvejustcreatedyouranimatedMaterial!

IfyouhaveMOREthantwospritesheets,weregoingtohavetodoaslightlydifferentmethod!
LetsrewindtimetowhenwedjustcompletedourfirstFlipbook.

40
IfyouhaveMOREthanONEmoreSpritesheet:

Step#1CopyyourFlipbookandthechildrennodes(Ctrl+Clickthenodesonebyoneand
thenpressCtrl+Conyourkeyboard(Alternatively,RightClick[Ctrl+Click]andselectCopy).

Step#2PressCtrl+V(RightClick[Ctrl+Click]theemptyspaceunderneathyourFlipbookto
createacopyofourFlipbook.

Step#3ClicktheTextureObjectandinthePropertiesfield,changetheTexturetoyour
SecondSpritesheet.RemembertoalsoaltertheConstantsforRowandColumnsifneedbe!

Step#4HeadbacktoourIfnode.WeneedtocopythisIfnode,aswellastheconstantthats
connectedtoB.SoCtrl+ClickboththeIfnodeandthenumber1whichwevepluggedinto
B.Ctrl+C(OrRightClick[Ctrl+Click]>Copy)tocopythemandCtrl+V(RightClick[Ctrl+
Click]>PasteHere)tocreatetheduplicates.NowmovethesetobelowourfirstIfstatement.

Step#5ConnectourSECONDFlipbooksResulttothesecondIfnodesA<B.Oncethis
isconnected,ConnecttherighthandpinoftheSECONDIfnodetotheA>=BofthefirstIf
nodeandoncemoretotheA==B.Oncethisisdone,ontheSECONDIfnodesconstant
(ThatspluggedintoB),changethepropertyvalueto2.(Lookatthisscreenshotfor
reference!)

41
Step#6OursecondIfnodeismissinganAconnection,butourfirstIfnodehasoneIts
connectedtomultiply.GrabtheemptyApinfromourSecondIfnodeanddragitintothe
MultiplywesetupfortimeThismakessurethatalltheFlipbooksrunonthesametime.

Step#7IfyouneedmorethanonemoreFlipbookforyourSpritesheet,repeatStep#1Step
#6untilyoureleftwithanIfthathasA,BandA<BconnectedupandafinalFlipbookthat
needsconnectingup,then:

Step#8WeveconnectedSpritesheet1and2together,butwestillneedtoconnect
Spritesheet3(Orifyoureusingmorethen3,youllhave1,2and3connectedandnot4.etc).If
wecreatedanotherIfstatement,wedhavetoomanyopenpinsontheIfstatementtowork.

ImeanhowcanyouIfA<BandA>==Bifwereusingonevalue?Itwouldjustconfusethings.

HereshowwellhandthefinalSpritesheet!

Step#9CopyapreviousFlipbookanditschildren(Therowsconstant,thecolumnsconstant,
thetextureandtheTextureCoordinate)andpasteitunderourlastFlipbook.

Step#10AltertheTexturetobeyourfinalSpritesheet.(Changetherowsandcolumnsifneed
betoo!)

Step#11AssigntheresultsofourlastFlipbookasA>=BandA==Bbydraggingtheresults
pintotheemptypinsonourIfstatement.

42

AndthatsthebasicsofFlipbooksandanimations!Ifyoureusingthreetextures,yourBlueprint
shouldnowlooklikethis:

43

Noticehowcomplicateditlooksyethowsimpleitwastoimplement.Thatsthethingabout
BlueprintsItsveryeasytolookcomplicated,butwhenyoutracethelinealongtofollowwhats
goingon,youbegintorealizejusthowsimpletheBlueprintssystemis!

Sometimeshowever,theyllgetsocomplicatedthatitbecomeshardtofindyourwayamongst
thespaghettilines,butwellgettohowtodealwiththatabitlateron!

Quicknote!Beforecarryingon,itmightbeagoodtimetorementiontheEmissive
Colour.Ifyouranimatedportalistoodarkandyouwantittoglow,hookthefirstIf
statementintoEmissiveaswellasbasecolour!

44
CreatingourPortal!

SowevegotourmaterialreadyforourPortal,butnowweneedthePortal!Theresafewways
wecangoaboutthis,butImgoingtogowiththecleanestandmostorganisedway!

First,weregoingtohavetobeabletoseetheEnginecontentfolderinourContentBrowser.

Step#1HeadovertoyourContentBrowser

Step#2ClicktheViewOptionswiththeeyejustbeforethetext.

Step#3Therewillbesmallmenuthatpopsup,ShowEngineContentshouldbeunticked.
Wewanttoseethiscontent,sotickitandinthefolderstructureontheleft,youshouldnowsee
EngineaboveGame.

45
Step#4ClickthenicebigEnginebuttononthetopleftoftheFolderviewinthecontent
browser.

Step#5WithEngineselected,typeinthesearchboxontherightEditorPlane.

Step#7ClicktheEditorPlanetohighlightit.OnceHighlight,RightClick[Ctrl+Click]andselect
MakeCopywhichwillduplicatetheEditorPlane.InputanynameofyourchoosingIvegone
forMesh_Portal.

NOTE:Oncenamingyourduplicatedcopy,theContentBrowsermightkickyououtback
intotheEnginefolder.Ifthishappens,simplysearchinthetopbarwiththenameyou
gaveourcopy!

Step#8ClickandDragyourPortalmeshintothefolderwecreatedearlierinthetutorial(Or
anywhereyouregoingtorememberwhereitis!)

Step#9Oncemoved,DoubleclickthemeshtoopenitupintheStaticMeshEditor!

46
SoyoumightbewonderingWhytheheckdidwejustdothat?

WellForourPortal,weneedthemostinexpensivemeshwecangetandyoucantgetasless
taxingofameshthananEditorPlane.Butlookingaheadintothefuture,EditorPlanescanthave
materialsassignedtothemoncewereinourPortalblueprint.

SowevecreatedanEditorPlanethatwecanaltertheMaterialtosothatwhenitcomesto
importingitintoourBlueprint!NowisthetimetoalterthematerialofourEditorPlane(Whichis
nowcalledMesh_Portalorwhateveryouhavecalledyours!)

Step#10IntheStaticMeshEditor,ontherightyoushouldseeElement0underLOD1,with
WorldGridMaterialassignedtoit.

Step#11WhereitsaysWorldGridMaterial,clickthelittlelightgrayarrowandinthesearch
boxthatappears,typeinthenameoftheMaterialyouhavecreated.

47
NOTE:IfyourMaterialhasntappliedverywell(Fallingoffthescreen,tiledtwiceor
similarproblems),thenyoullhavetogobackintoyourMaterialandaltertheproperties
ofTexCoord.Usually,enablingUnmirrorVshouldsolvetheproblem,butitmay
requireyoutotinkeraroundwiththesettingsinsideTextureCoordinateuntilitfitsyour
EditorPlaneproperly.RemembertoApplyeverytimeyoumakeachangebefore
checkingtheEdtiorPlaneoritwontupdatewiththelatestMaterialproperties!

NowthatourEditorPlanehasourMaterialonit,wearenowreadytobeginpiecingtogetherour
PortalBlueprint!

48
PiecingTogetherourPortalBlueprint

Step#1GobacktotheContentBrowserandopenupyourPortalBP(Ivecalledmine
BP_Portal)

ThiswillopenupintoourComponentstaboftheBlueprinteditor.IfyourBlueprinthasntopened
intheComponentstab,youcannavigatethroughthedifferenttabsonthetoprightofthe
Blueprinteditor.

Step#2UndertheCompileandSavebuttonsisadropdownmenucalledAdd
Component.Forgoodpractice,ClickthisandaddaScene.Thismeansthatifwedoanything
toaltertheposition/rotationofthisBlueprint,itllalterthe0.0.0locationofinside,whichwillsave
yourbuttmoretimesthenyoullrealize.

NotethatitdoesntmatterwhatyoucallthisSceneasitsonlytheretoholdtheactors/items/
meshesthatweputintotheBlueprint.
49
Step#3OnceScenehasbeencreated,clicktheAddComponentdropdownmenuagain.
ThistimetypeinStaticMeshandclickit.ThiswillbeourPortal.

HelpfulTip:YoushouldnowseeinthehierarchyviewthatitsaysScene1andthe
StaticMeshwevecreatedhasbecomeachildofScene1.Ifthisisntthecaseforyou
andScene1hasbecomethechildoftheStaticMesh,justclickanddragtheScene1
uptowheretheParentisanditllmakesureScene1becomestheDaddy/Mommyof
everythingintheBlueprint.

Step#4ClicktheStaticMeshthathasbeencreated(UndertheAddComponentmenu).If
youscrolldowntheintheDetailspane,youllgettoasectioncalledStaticMeshwithabig
whiteboxsayingStaticMeshwithathingrayboxalsosayingStaticMesh.

Step#5ClickthelightgrayboxandsearchforwhateveryoucalledyourEditorPlane.Icalled
mineMesh_Portal.

NowtheEditorPlaneisintheblueprint,someofyoucantseeit!Wellitsthere!Trustme.
Theresjustonelittlethingweneedtodoifyoucantseeit:
50

AsEditorPlanesareonesided,werecurrentlylookingatitsbutt.Wewantittofacethecorrect
way!SinceUnrealEngineworkswithYAxisasthefront...

Inthedetailspane,underRotation,changetheYRotationto180.0.Thisshouldfliparoundyour
Portalsoitsfacingtherightway.

(IfIwereanannoyingpaperclip,Idbenowremindingyou:Nowisagreattimetosaveso
youdontloseanything!Justhitthefloppydisc!YoucouldalsohittheGeartoCompile
ofyouwanttoaswell!)

YourPortalnowexistsandstandsstronginyourBlueprint.Werealmostthere!

OncethingweregoingtoneedisatriggerboxThatmeanswhensomethingtouchesthebox,
itlldoanaction.ThereasonwewantthisisbecausewewanttheplayertowalkintothePortal
andforthemtobeteleportedtothenextlevel.

Step#6ClicktheAddComponentdropdownboxagainandthistimesearchforBoxand
clickit.

Step#7IntheBoxproperties,youllseethreewidgetswithred,greenandbluecolourings
calledLocation,RotationandScale.PutthesevaluesintoX,Y,ZofScale:

ScaleX:0.5
ScaleY:3.5
ScaleZ:3.5

ThisensuresthattheboxcoversenoughofourPortaltoactasagreattriggerbox,without
bleedingtoomuchoversothePlayerwouldaccidentallywalkintowhentheydontwantto
transition.

Step#8InthepropertiesboxaboveTransform,theresasectioncalledVariablewhicha
valuecalledVariableName.LetssetthistoTrigger_Portal.

51
YoushouldnowhaveaBlueprintthislookslikethis:

WedontwantanythingelsetotriggerourPortaltotelltheleveltoloadthenextlevel(Thatwould
bedisastrous!),sowellneedtoalterthecollisionpropertiesofourTrigger_Portal.Totherightof
ourVariableandTransformsettings,theresalittlescrollbarthatwecanusetoseemore
properties.

UsethisscrollbarandscrolldownuntilyouseethesectionnamedCollision.

Step#9UnderCollision,theresasectioncalledCollisionPresetswithOverlapAllDynamic
preselected.ClickOverlapAllDynamicandreplaceitwithOverlapOnlyPawn.Thiswillstop
anynastybugshappeningdownthelinewhichwillmessupourgame!

Ourportalisnowalmostready!Butwevegotafewthingsmoretodobeforeits100%
functional.WhatwehavetodonowisgobackintoourLevelandaddaplaceinthewallwhere
thePortalcansitsnugandtight.

52
FindingaHomeforourPortal

AbovetheContentBrowser,theresasectionofUnrealEngine4calledModes.Thisallowsus
toaddgeometry,lights,triggers,thelot!ThispartofUnrealEngine4isessentialforanythingin
UnrealEngine4andweregoingtouseitrightnowtocreateaholeinthewalltoplaceour
Portal.

UndertheBoxwithaLightinfrontofit,theresanumberofoptionsthatlooklikethis:
RecentlyPlaced
Geometry
Lights
Visual
Basic
Volumes

Whatweregoingtocreaterightnowisaboxtotakeachunkofthepreexistingwallout.Wedo
thisbycreatingaGeometryBoxandsubtractingitfromeverything.

Step#1IntheModespane,SelectGeometryandClick+DragtheBoxintotheSceneView.
ThiswillcreateaboxintoourGame.

Step#2ClickthenewlycreatedboxinsidetheSceneViewandontheright,youllseeX200,
Y200andZ200underbrushsettingsontheright.Forourtutorial,wellneedtochangeZ
200intoZ240,thiscoversthecorrectpartofourPortal.
Step#3ClicktheboxonceagainandusetheXYZGizmotomovetheboxINTOawallofyour
choosing,leavingalittlebitpokingoutofthewall(Soitlookslikeadoor).

53
TIP:(IfyoucantseetheXYZGizmo,youcanusetheWkeyonyourkeyboardtotoggleit
on!)

MakesureyoualsoalignyourBoxsoitstouchingthefloor(Wecanalterthislater).Yourbox
shouldnowlooklikethis:

Step#4BackontheBrushSettingsontheright,justabovetheXYZvalues(Whichweedited
theZfromearlier),theresavaluecalledBrushTypewhichiscurrentlysettoAdditive.Click
AdditiveandchangethistoSubtractive.Youllimmediatelynoticethedifferencetoyourbox!

IfitlookslikeyourBoxhaseatensomeoftheflooraway,simplyselecttheboxagainandusethe
XYZGizmo(WontheKeyboard)toraiseitjustabovethefloor.

TIP:Youmightneedtodisablethegridsandsnappingfeaturestogetitalignwiththe
floorperfectly.ThesecanbefoundonthetopbarjustaboveourSceneView.Theylook
likethis:

54

Inthescreenshot,theGrid,AngleandScaletoolsareallsnappingto10,10degreesand0.25
respectively.

Ifyourboxismovingtoomuchortoolittleandyoucantgetitjustright,ifyouclicktheOrange
buttonsfortheGrid,AngleandScaleitwilldisablesnappingcompletely,soyoucangetthebox
aspreciseasyouneedit.

UnrealEngineEtiquetteTip:Onceyouvegotyourboxintheperfectposition,
remembertoreclicktheGrid,AngleandScaletoturnthembackon!

Youshouldnowhavethisorsomethingsimilar:

Step#5BackintheContentBrowser,justlikewhatwedidforourBox,Clickanddragthe
BP_Portal(OrwhateveryouvecalledyourPortalBlueprint)anddragitintotheScene.

YoushouldnowseeyourPortalinthegame.Ifyoucant,thePortalisthewrongwayround!
55

Tofixthis:WiththePortalBlueprintselectedinthelevel(NottheContentBrowserone!)Press
Eonyourkeyboard(Ortherotatortoolonthetopofthesceneview!)toturnontheRotationtool
andtheclickanddragtheblueAxisofthePortal180degreestotheleft/right.Youshouldnow
seeyourPortal!

Step#6NowusetheXYZGizmo(UseWonyourKeyboardorthebuttononthetopofthe
SceneView)andslotyourBlueprintINTOthenewdoorwaywevecreatedwiththebox.

NowourBlueprintisintheGame,ourPortalexists!Youcanhavealookyourselfingameby
hittingthenicejustplaybuttononthetopoftheeditor.Butitsnothookedupyet,nowisthetime
wetakeourventureinBlueprintCoding!

TimetoMakethePortal...aPortal!

56
Forthisnextstep,weregoingtohavetoalterourCharacterblueprint.Thedefaultforthe
TemplateweusediscalledMyCharacter,howeverifyouvealreadyalteredthis,wellbeediting
theCharacterblueprint(Wellgettohowtocreateoneourselveswhenwedelvedeeperinto
Blueprintsinthisbook!)

Step#1InthecontentBrowser,makesureyoureintheGamefolderbypressingthegiant
Gamefolderbuttoninthefolderview.

Step#2Inthesearchbox,SearchforMyCharacter(OrthenameofyourCharacter
Blueprint!)

Step#3DoubleclicktheMyCharactertoopenuptheCharacterblueprint.

ThisshouldopenuptheGraphofourMyCharacter,butifyouveloadedintotheDefaultsor
Componentstab,simplyusetheribbononthetopwhereitsaysDefaults,Components,
GraphtonavigatetoGraph.

57

Step#4InanemptyspaceofthisBlueprint(ZoominwithyourMouseWheelifyouhaveto!)
Rightclick(Ctrl+Click)andinthesearchboxthatcomesup,type:OverlapandselectOn
ActorBeginOverlapwhichisundertheCollisionclass.

WhatweneedtodonowistellthePortalblueprint:Hey,thisdudeistotallytouchingyou!so
weregoingtodosomethingcalledaCast.

WhatisaCast?Inthiscase,becausetheCastisconnectedtoanEventcalledActorBegin
Overlap,thecastwilltellwhateverisconnectedtoitthatthePlayeristouchingthem(Whenever
58
thePlayertouchesthemofcourse!).Ifweweretocastthistoasetofstairsforexample,it
wouldtellthestairswhentheplayeristouching.etc

Step#5WeneedtoestablishtheconnectionfromourPortaltoourPlayer,sofromtheblue
pinofActorBeginOverlap,clicktheemptypinanddragtotheright.Inthemenuthatappears,
typeinthesearchboxCasttoBP_PortalorCastto(YourBPName)andyoushouldsee
CasttoBP_Portal(OryourBlueprintName)appear.Clickthatandwehavebegunthe
connectiontothePortalblueprint!Therenowabletotalktoeachother!

Step#6NowweretalkingtotheBP_Portal,weneedtotellittoopenthenextlevel.Soclickthe
emptypinaboveCastFailedanddragtotheright.WhentheCompactBlueprintLibraryopens
up,wewanttosearchforOpenLevel.

Step#7WithintheOpenLevelnode,youllnoticethatLevelNamehasNonewritteninit.If
weclickthattextboxandenterourLevelname,ourPortalwillwork!

Note:Becausewevedoneallofthisthroughanevent(ActorBeginOverlap),wedont
needtohookanythingelsetoourBlueprint.Normally,Ifyourenotdoingwhatyouwant
todothroughanevent,itdhavetobeconnectedtosomewhereelseintheBlueprint!

NowisagreattimetoCompileandSave!Somakesureyoupressthegearandfloppydiscat
thetopofyourBlueprintandtryoutyourcreationbypressingthePlaybuttonabovetheScene
ViewintheMainUnrealEnginewindow!
59

ThereisaBetterWaytoDoThings!

Theportalworkssoatthismomentitsacauseforcelebration!Youvedoneyourfirstlineof
code!ButhangonamomentWhatifwehadaBP_Portalinanotherlevel,wouldntthatmean
thatbecausewecantchangetheLevelNameingamethatitwouldforeverloadthesecond
level?

ThiswillmakeyourMyCharacterblueprintmessyVERYquickly.Theresasimplerwayof
doingthings!

Step#1DeleteOnActorBeginOverlapandeverythingelsewecreateafteritinthe
MyCharacterblueprint.

IbetyourethinkingtoyourselfWhattheheck?!Why?!Buttrustmeonthisone.

Step#2IntheContentBrowser,findyourBP_Portal(Orwhateveryouvecalledyours!)and
doubleclickittoopentheBlueprint.

Step#3HeadovertheGraphoftheBlueprint(Usethetoprightribbontonavigate!)andaddan
OnActorBeginOverlap,JUSTlikewhatwedidintheMyCharacterblueprint.

Step#4Grabtheemptybluenodeanddragittothewrite.IntheCompactBlueprintLibrary,
searchforCasttoMyCharacter(OrthenameofyourCharacterblueprint!)

Step#5Now,JustlikewedidbackintheMyCharacterblueprint,Clicktheemptypinabove
CastFailedintheCastnodeanddragtotherightandsearchforOpenLevel.

Step#6IntheLevelname:None,remembertochangeittothenameofourSecondlevel!

NowwehaveacleanerversionofexactlywhatwedidfortheMyCharacterblueprint!Butthis
makesMyCharacteralotmorecleanerandifwewantedtochangethelevelname,wecould
duplicatethewholeblueprintandalterthenameoftheOpenLeveltoadifferentlevel!

60
But*DramaticPause*...YoumighthavenoticedsomethingwhentryingoutthePortal

Whenthelevelchanges,thegamehangsforamomentortwowhileitsloadingthenextlevel.
Tosome,thatmightnotbotherthem.Butformost,wellwanttohidethatasmuchaspossible.
Howdowedothat?...

...Wellwithaloadingscreenofcourse!

MakingaLoadingScreen!

TocreateaLoadingscreenbetweenthelevels,weregoingtoneedafewthingsfirst!

Step#1ImportthetextureyouwanttouseforyourLoadingScreen!(IntheContentBrowser>
Import)

Step#2RightclickyourimportedTextureandclickCreateMaterial

Step#3OpenuptheMaterialandplugtheTextureSampleintotheemptyEmissivepinsoit
isconnectedtoBaseColourANDEmissiveColour(RemembertoSave!)

WeregoingtoneedaHUDforthenextfewsteps.ForthosewhodontknowaHUDiswhatthe
playerseesonthescreen,forexampleamenu,thetime,howmanycoinsyouvecurrentlygot
.etc

AHUDisbasicallyanythingonthescreenthatisntpartofthegameworlditselfbutsomething
thatshouldbedisplayedonthescreen.

Step#4GototheContentBrowserandintoourTutorialContentfolder(Orwhateveryouve
calledyourfolder)andusethebuttonsonthetopoftheContentBrowsertocreateanew
Blueprint.

61

Step#5AtthebottomofthePickParentClasswindow,theresasectioncalledCustom
Classes.Ifweclickthehollowgreybuttontotheleftofthis,wellseealltheClasseswecanuse
asabasisforthisblueprint.

62
Step#6IfyousearchforHUDanumberofoptionswillberevealed.Theonewewantisthe
childofActorbuttheparentofeverythingelse:

SelectthisHUDbyhighlightingit(LeftClick)andthenpressingSelectatthebottomofthe
screen.

Step#7Oncetheblueprintiscreated,nameitsomethingalongthelinesofHUD_Portal.This
willbeourHUDforthiswholelevel.

Whatdidwejustdo?Wecreatedablueprint.ButwhydidweselectHUD?Wedidthis
becausethisgivesussomespecificnodeswhicharentavailabletouseusually!

Weregoingtohavetodosomethingrightnowbeforeweforget!

63
Step#8InthebarabovetheSceneView,youhaveanumberofoptions.NexttoQuick
SettingsandbeforeBlueprints,theresasectioncalledWorldSettings.Clickthis.

Step#9Thishasaddedatabnexttothedetailspaneonthebottomright.Ifitisntalreadyopen
foryou,clickthetabWorldSettingsanditllappearforyou.

Step#10ScrolldownWorldSettingsuntilyougettothesectioncalledGameMode.

Step#11WhereitsaysGameModeOverride,clicktheNonebuttonandselectMyGame.
64
Step#12PressthelittlebuttonthatsitsbeforeSelectedGameModetoshowallthe
propertiesofourMyGameGameMode.

Step#13NexttoHUDClass,clickthedropdownmenuandsetittotheHUDwejustsetup!

YoucannowclosetheWorldSettingstab(WhichIhighlyrecommenddoingso,itssoeasyto
getconfusedwhentryingtoalterthedetailsofobjectsotherwise!)

NowitstimetoheadintoourHUDblueprintandgetitreadyfortheawesomeinwhichwere
abouttoaccomplish.

Step#14OpenupyourHUD_Portal(Orwhateveryouvecalledit)fromtheContentBrowser.

SettingupourHUDforAwesome!

Step#1WhenyouveopenedyourHUD_Portal(Orwhateveryouvecalledit),itmightopenup
intotheComponentstab,sousetheribbononthetoprighttogetintotheGraphtab!

Step#2AnywhereintheBlueprintScriptarea,RightclickandsearchforEventDrawHUD.

Didyouseewhatwejustdidthere?Thatssomethingwecouldnthavedoneinaregular
blueprintItsthankstothefactthatthisBlueprintisoftheHUDclassthatwecanaccess
someoftheseimportantandawesomenodes!

65
Step#3Rightclick(Ctrl+Click)totherightofourEventDrawHUDandtypein:Make
Vector2D,thisisgoingtocreatesomethingthatwellbeneedinglater!

Step#4DragfromyourEmptySizeXpinfromDrawHUDandconnectittotheXofMake
Vector2D.

Eventhoughyoucanseethepinsaredifferentcolours(Differentproperties),asyouconnect
them,UnrealEngineautomaticallyconvertsthevaluesforyousoyoudonthavetotouchathing.

Step#5DothesamethingfromtheEmptySizeYpintotheEmptyYpinofMakeVector
2D

Step#6FromtheEmptyReturnValuepinfromMakeVector2Ddragtotherightandselect
PromotetoVariable.

66
Whatdidwejustdo?WecreatedourfirstVariable!Butwhatdoesthatmean?Well,its
somethingthatwecanuseagainandagainandwecanalsochangeitsvalueswheneverwe
want.

Thisisbasicallytheessenceofvariables:
BoolYesorNosthatcanbestoredandreused
FloatNumbervalue(Thatcanhasdecimals)thatcanbestoredandreused
IntNumbervalue(Thatcanthavedecimals)butcanbeusedtofindthingsin
Arrays
StringTextthatcanbestoredandreusedlater
ArrayCollectionofitems/Intsthatcanbestoredandreusedlater

Step#7ClickthenewlycreatedNewVarandonthelefthandsideofthescreen,intheNew
Varproperties,changetheVariableNametoScreenXY(OrScreenDimensions).

TIP:WhenusingVariables,ifyouaddaCapitallettermidsentence,thistellthevariable
toputaspace!

Step#8ConnecttheemptylefthandsidepinofournewlycreatedSizeXYvariabletothe
righthandsidepinofourDrawHUD.

ImportantTIP:EverythingthatisinaBlueprinthastoconnecttoaneventinsomeway.It
canconnecttootherNodesaslongastheystemfromanEventinsomeway.Events
areinred,sotheyreeasytolocate!

Whenyourefollowingalongwiththesetutorials,youllunderstandwhatImeanbetter.

Step#9WevesetupThisisthesizeofthescreenbutnowweneedtogoonalittle
adventuretogettheplayertotelltheHUDtodrawtheloadingscreen.Headoveryour
MyCharacterblueprintviatheContentBrowser.
67
BecauseweverecreatedthePortalsOnTriggerintotheportalitself,theresnotalotwehave
todotothePlayercontroller.ButwhilediggingaroundBlueprintsandUnrealEngine4,Ihavenot
currentlyfoundawayforanobjectblueprinttodrawontheHUD.SoIvecomeupwiththisnifty
littleworkaround:

Step#10InsidetheMyCharacterBlueprint(MakesureyoureinGraphview!),ontheleftthere
areafewoptions:

Atthetopofthisoptionspanel,wehaveVariable,Function,Macro.etcWeneedavariable
forwhatwereabouttodo,soclickthe+V,whichwillcreateourVariable.

Step#11AVariablegetscreatedautomaticallyasaBool(ItletsyoualterwhattypeofVariable
itis,butaBoolispreselected).Asabool(YesorNo)iswhatweneedrightnow,allwehaveto
doischangethenameoftheVariable.

Forthesakeofthistutorial,setVariableNametoPortalLoader.

68
Step#12CompiletheMyCharacterblueprint.Thispartisessential.Ifyoudontcompile,we
wontbeabletocallPortalLoaderanywhereelseapartfromthisblueprint.

OuradventureintoMyCharacterisnowcomplete,itsnowtimetoventureintoourBP_Portal
(Orwhateveryoucalledyours).

Step#13CloseMyCharacter(Aftercompiling!)andopenupBP_Portal(Orwhateveryou
calledyours).

Step#14GotheGraphtabofourBP_Portal.

Step#15RightClick(Ctrl+Click)andinthesearchboxtypeinOverlapandselect:On
ActorBeginOverlaptocreatetheOverlapnode.

Step#16FromtheBlueemptypinofOverlap,dragtotherightandinthesearchboxtype:
CasttoMyCharacter(OryournameofyourCharacterBlueprint).

69
SoyoucanguesswerecallingtoMyCharacter,butnowyouregoingtolearnsomethingcool
aboutcasting!

Step#17FromtheAsMyCharacterCpin/ThebluepinofCasttoMyCharacter,dragto
therightandtypePortalLoader.SelectSetPortalLoader.

Didyounoticewhatwejustdid?!Wecannoweditavariablefromanotherblueprint.Whatdoes
thismean?ThatmeanswecantellthingsYesorNowhilebeingsomewhereelse!

Wecanalsoalternumbers,oranyothervariableswecanthinkof!Aslongascancasttoit,we
canchangevariables!ThisisoneofthekeyelementstoscriptingandBlueprints!

Step#18IntheSetPortalLoadernode,thereisanuntickedboxintheboxnexttoPortal
Loader.Tickit.

Whatdidwejustdo?Wejustdidthis:Overlap>Cast>PortalLoaded(Tick).Totranslatethis
toplainEnglish:Iftheplayerisstandingonmeortouchingme,tellthemPotalLoadedis
TRUE.

Thatisanimportantlesson,somakesureyoutookitonboard!

SowehavethePortaltellingthePlayerthatHey,youretouchingme,PortalLoaderisnow
true!butweneedtheHUDtofindoutaboutthiseventhappening.Howdowedothis?Simple!
MakesureyouCompiletheBP_Portalblueprintandthen...

Step#19GobacktoHUD_Portal/OpenitupagainthroughtheContentBrowser.

YoumighthavenoticedbynowthatitseemslikewecanonlyCastfromEvents,more
specificallyEventBeginOverlapnodes.Butthisisntthecase!

Wecandolotsoflittletrickstobeabletocast,liketheonewereabouttodo!

70
Step#20InemptyspacenearSetScreenXY,rightclickandsearchtheCompactBlueprint
LibraryforGetPlayerCharacter.MakesureyouselectCharacterasthereareafewtochoose
from!

Step#21FromtheblueemptynodeofGetPlayerCharacter,dragtotherightandinthe
searchbox,typeinCasttoMyCharacter(OrthenameofyourCharacterblueprint!)

WerenowspeakingdirectlytoyourMyCharacterBlueprint!

Step#22Beforewegetaheadofourselves,asImentionedbefore:Youcannottriggernodesin
aBlueprintwithoutconnectingthemtoeitheranEventorthemaintimelineofBlueprintnodes
(WhichareconnecteddownthelinetoanEvent).

SodragtheleftpinofourCasttotherightpinofSetScreenXY.

71
Step#23FromtheblueAsMyCharacterCpinofourCast.DragtotherightandtypeinGet
PortalLoader.

Wellneedthisintwoseconds(Notliterally),hencewhywevecalledforitnow.

SonowwehaveadirectconnectionbetweentheHUD,thePlayerandthePortal!Butwhatcan
wedowiththispower?

Step#24FromtheCasttoMyCharacter,dragthetopemptypintotherightandtypein
Branch.

Whatdidwejustdo?AbranchisoneofthemostimportantBlueprintfunctions!Itsbasically
Isthisthinghappening?YesorNo?.Anotherwaytoputitwouldbe:This.TrueorFalse?

Step#25ConnecttheredemptypinofPortalLoadertotheConditionslotoftheBranch.

Wevejustdonesomethingseriouslyawesome!WereaskingthePlayerIsPortalLoader
true?.PlayeristhenaskingthePortal:Isittrue?andwhentheanswerisyes,thePortalwilltell
theplayertotelltheHUDthatitstrue.

Andyoumadethathappen!Goyou!

WenowneedtotelltheHUDwhatwewanttodoifthisistrue

Step#26FromtheTruepinofBranch,dragtotherightandtypeinDrawMaterialand
selectDrawMaterialSimple.

Step#27OnthefarleftoftheWindow,whereallourVariablesarestores,Draganddrop
ScreenXYunderneathBranch.WhenitasksifyouwanttoSetorGet,wewanttogetit.

72

Step#28FromthedarkbluepinofScreenXY,dragalittletotherightandsearchforBreak
Vector2D.

Whatdidwejustdo?ScreenXYisourScreenDimensions,whichwesetearlier.Thiswill
determinethehowbigtheMaterialhastobetofillthewholescreen.AswemadeitintoaVector
2Dearlier(Tomakeiteasiertostore),itisnowtimetobreaktheVector2D,sowecanuseit
withourMaterial.

Step#29DragtheXpinofBreakVector2DandslotitintoScreenWandtheYpinand
slotitintoScreenH.

Step#30InourDrawMaterialSimplenode,whereitsaysMaterial:None,clickthegray
arrowthatispointingdownandsearchforyourLoadingScreenmaterial.

Step#31OntheDrawMaterialSimplenode,GrabtherightfacingemptyPinanddragtothe
right.IntheCompactBlueprintLibrarythatcomesup,SearchforOpenLevelandjustwedid
earlier,typeinthelevelnameofLevel#2(Forme,thatsArtOf_Example2).

73

Youvedoneit!NowonlydidyoucreateaPortal,butnowitllshowaLoadingScreenwhileits
loadingthenextlevel!Yourock!

Compileitandtestitoutifyouwant!

IfyouwereusinganAnimatedMaterial,IdputaDelaynodeaftertheDrawMaterialSimple
andbeforetheOpenLevelandsettheDelayto2seconds.

YoudiditChamp!Yourock!YouvemademultipleBlueprints,madethemtalkandaboveallelse
MadeyourfirstfewstepsintonotonlyBlueprints,butinmyopinionthebestgameengineout
there!Welldone!

UseyourknowledgenowtocreateanotherPortalcomingbacktoLevel#1andthenLevel#3
.etc!YoureonestepclosertoMasteringBlueprints!GoYou!

74
Project#1WrapUp!

SowenotonlycreatedaworkingPortalfromLevel#1toLevel#2,butwealsoaddedaLoading
ScreenandlearnedthesecretsbehindtheBlueprintssystemaswellasscriptingingeneral!

WevelearntaboutBools,aboutUnrealEngineingeneralandwevelearnthowtomake
Blueprintstalktoeachother!

Werefarfromoverinthisbook,theresonemoreProjectlefttouncover,butIhopeyoure
feelingmoreconfidentinusingBlueprintsnow.

WereabouttoenterevenmoreexcitingterritorywiththenextProjectsohangtight!

75
Mission#2FirstBloodII
CreatingaSideScrolling,MultipleCharacterbasedAdventure

Template:
BlueprintSideScroller

WhatYoullLearn:
HowtokillaPlayer
CreatingandswitchingbetweenMultipleCharacters.
HUD
CoinCollecting
Cutscenes
BasicsofApplyingaPostProcess
TimerSystem

WhatYoullNeed:
Photoshop/ImageEditingProgram(ForcreatingHUDelements)

(Extras)WhatYoullNeedforExtras:
Microphone
BackgroundMusic

76
LetsBeginAgain!

Firstthingsfirst,letsfireupUnrealEngine4andcreateanewproject!

Ifyouveforgottenhowtodothis,whenyouopenUnrealEngine4,youllbegreetedwiththe
Launcher.SimplyclicklaunchandyoullbegreetedwiththeProjectBrowser.

OnthetopoftheProjectBrowser,theresaHUGENewProjecttab.Clickthatandscroll
throughthelistuntilyoufindBlueprintSideScroller(DontpickCodeSideScroller!).

.
BesuretonameyourProjectandhitCreateProjecttobeginournewadventure!

77
WereIn!

GiveUnrealEngineamomenttocreatetheprojectforfirsttimeuse.Onceitsloadedour
project,youllnoticethegamelooksquiteabitdifferenttotheThirdPersonBlueprintexample
weusedinthelastTutorial.

BesuretohitthePlaybuttonjustabovetheEditorandtryoutwhatwevealreadygotIts
prettysweet!

Theadventurewereabouttoembarkonisgoingtoturnthisawesomeprojectintosomething
withevenmoreawesome!

TakeafewmomentstogetfamiliarwithhowthegamelooksandfeelsYoullnoticethingssuch
asthefactthateverythinglookslikea3Dversionofa2Dgame.Youllalsoquicklynoticethatthe
playerisstuckmovingalongtheXandYaxis,togivetheillusionthatthis3Dgameis2D.We
callthis2.5D.

Soonceyouvehadafiddlearoundingame,itstimetomakesomemajormodifications!

WellstartoffbyaddingaHUD,whichwellusetocountthetimeaswellasdisplayhowmany
coinstheplayerhascollected!

78
HUDPrep!

WellneedtocreatesomethingthatwillbecometheHUDinanimageeditingprogramIfyou
cant/dontwanttodothis,IveincludedtheHUDfileswellbeusingintheseexamplesinthe
Projectsamples(Availableathttp://content.kitatusstudios.co.uk).

WellneedtheHUDitselfaswellasablackandwhiteimage(BlackbeingwhatISNTshownand
whiteISwhatshouldbeshown.)

Hereisanexampleofwhatyoushouldendupwith:

OntheLeftisourHUD(.PNG)andontherightistheOpacityMask.

ThereasontheblackintheOpacityMaskcoverswhatwedontwanttheHUDtodraw.The
White/GreyiswhatweiswhatwewanttheHUDtodraw.WehavetodothisbecauseIhavent
foundawayforUnrealEngine4totakethetransparencyfromthe.PNGandsocreatinga
dedicatedOpacityMaskignoresthisfactandmanuallysetswhatwewanttosee.

ThereasonintheexampleimagesIhaveusedGreyinsteadofWhitefortheexampleOpacity
MaskissothattheHUDisslightlytransparent(Butnottoomuch!)whichmeansthatthePlayer
canthroughtheHUDandnotmissanyimportantthingsinthelevel.

Whilewerehere,weregoingtodothesamethingwithourCoinimage(Alsoincludedinthe
projectfiles).

Youshouldnowhowfourfiles:AHUD,acoin,andthetwoOpacityMaskimages(Oneforthe
HUDandonefortheCoin).

NowitstimetobringthemintoUnrealEngine4!

79
HUDHUDAndAway!

Step#1Justlikelasttime,createafolderintheyourContentBrowserLibrary,sowecanstore
allourwork!

IntheContentBrowser,withGAMEselected,ClickNewonthetopoftheContentBrowser
andselectFolder.

WellcallthisfolderTut_FirstBlood(Nameyourswhatyouwish!)

80

Step#2OncewevecreatedtheFolder,itstimetoopenitupintheContentBrowserand
importallofourfourHUDtexturesintoourgame!

WedothisbypressingImportatthetopoftheContentBrowser,thenselectthefourtextures
whileinourTut_FirstBloodfolder.

NowthatourtexturesareintoourGame,wellneedtomakethemintoMaterialsforthisTutorial.
BUT(Andthatsabigbut!)wedontneedtomakeMaterialsforallthetextureswevejust
importedastwoofthemareactuallyOpacityMasksandnotHUDelementsthemselves!

Step#3RightClick(Ctrl+Click)TEX_Coin(OrwhateveryourcoinTextureiscalled)and
selectCreateMaterialanddothesameforTEX_HUD.Afterthis,renamethemtoMAT_Coin
andMAT_HUD.

Step#4DoubleClickMAT_HUDtoopenuptheMaterialEditorforourHUDmaterial.

WeneedtosetafewoptionstomakesureourHUDisinprimeshapeforwhenwefeeditinto
ourHUD!

81
PreparingourHUDMaterials

NowthatwereintheMaterialeditorforourMAT_HUD,weneedtosetafewparametersto
makesuretheMaterialisreadyforHUDusage:

Step#1DragtheTextureSamplethatisstuckinsidetheMaterialInputsnode.

Step#2CopytheTextureSample(ClickitandCtrlC+CtrlVorRightClick(Ctrl+Click)and
CopyandRightClick(Ctrl+Click)againtoPaste.

Step#3InournewlycopiedTextureSample,ClickitsowecanseethePropertiesontheleft.
Intheproperties,whereitsaysTexturewiththeimageofourHUDtexture,clickthegreybox
andfindourOpacity_Hud.

82
WellbecomingbacktothisTextureSampleinalittlewhile,butweneedtofixsomethings
beforetheMaterialwillacceptourOpacityMask.

Step#4FromthefilledinpinofouroriginalTextureSample(WhichisconnectedtoBase
Colour),grabandconnectitALSOtoEmissive.ThisissotheMaterialLightsitselfandwillstill
beabletobeseenevenindarkplaces.

Step#5UnclickallofthenodesinourMaterialbyclicksomeemptyspacewithintheMaterial
Editorandyoullseesomepropertiesinthelefthandsidepane.

UndertheMaterialsectionoftheproperties,theresaboxcalledBlendMode.Asthisisfor
somethingthatwillmainlybeseethrough,weneedtheOpacitynode,soclicktheDropdown
boxandselectTranslucent.

Step#6ConnecttheemptypinofourOpacityMaskTextureSampletotheOpacityofour
MaterialInputnode.

ThatsallwehavetodoforourMAT_HUD,itisnowHUDready!ButBeforeweforget
83

Step#7RepeatSteps#1#7forMAT_Coin(REMEMBERtosave!)

WhereAreWeNow?

Sowenowhavetwomaterials,MAT_HUDandMAT_Coin.Bothhavebeencorrectlysetupso
theyhavetheiropacitymaskedoutandtheyarereadytobeplacedontoourHUD.

WhatwellneedtodonowissetupaHUD,tellthegamethatitsthisHUDwewantandput
thesematerialsintotheHUD.

Butweregoingtodosomethingfirst

MultiHUD!

Forthisexample,weregoingtogivetheplayertheillusionoftakingcontrolofmultiple
charactersinordertogetthroughobstacles.

SowhatwellneedtodoiscreatesomemoretexturesandMaterialstobeusedinourHUDto
simulatethechange.

IhavecreatedaRedVariantandGreenVariantoftheoriginalHUDincludedinourAssets
folderathttp://content.kitatusstudios.co.ukIfyoureusingyourownHUDasset,thensimplyuse
PhotoshoporanyotherImageeditingsoftwaretocreateaRedvariantandaGreenvarient,so
youreendingupwiththreeHUDimages:Onebluevariant,oneredandonegreen.

NOTE:YoudontneedOpacityMasksforthesevariantsaswellbeusingtheOpacity
MaskfromtheoriginalHUD.
84

Step#1Oncecreated,importtheseintoyourproject.FromourMAT_HUD,youcancloneitby
RightClicking(Ctrl+Click)andselectingCreateCopy(NamethecopiesMAT_HUD2and
MAT_HUD3inrespectivetotheTexturenames).

Step#2ThensimplyopenupMAT_HUD2andMAT_HUD3andwithintheMaterialEditorfor
thesetwoMaterials,andselecttheTextureSamplewhichisconnectedintoBaseColour/
Emissive.

WithinthepropertiesoftheseTextureSamples(Inthebottomleft),changetheTexturetothe
relevanttextureMAT_HUD2shouldbeusingTEX_HUD2andMAT_HUD3shouldbeusing
TEX_HUD3.

YoushouldnowhaveaMateriallistthatlookslikethis:

WenowneedtocreatetheHUDandplacetheseMaterialsinside,butbeforewedoweneedto
tellthegamethattheHUDwecreateistheonewedliketouseforourGame.

85
CreatingourHUD!

Step#1GototheContentBrowserandintoourTutorialContentfolder(Orwhateveryouve
calledyourfolder)andusethebuttonsonthetopoftheContentBrowsertocreateanew
Blueprint.

Step#2AtthebottomofthePickParentClasswindow,theresasectioncalledCustom
Classes.Ifweclickthehollowgreybuttontotheleftofthis,wellseealltheClasseswecanuse
asabasisforthisblueprint.

86
Step#3IfyousearchforHUDanumberofoptionswillberevealed.Theonewewantisthe
childofActorbuttheparentofeverythingelse:

SelectthisHUDbyhighlightingit(LeftClick)andthenpressingSelectatthebottomofthe
screen.

Step#4Oncetheblueprintiscreated,nameitsomethingalongthelinesofHUD_FirstBlood.
ThiswillbeourHUDforthiswholelevel.

NowthattheHUDhasbeencreated,weneedtotellUnrealEngineYoAdrien!Hey,Unreal
Engine,thisisourHUDwewanttouseforthisLevel/Game!.Wecandothisbysettingitin
WorldProperties(Which,eventhoughmakesitsoundlikeitllsetthisforeverylevel,onlysets
ittothecurrentlevel).

Step#5InthebarabovetheSceneView,youhaveanumberofoptions.NexttoQuick
SettingsandbeforeBlueprints,theresasectioncalledWorldSettings.Clickthis.

87

Step#6Thishasaddedatabnexttothedetailspaneonthebottomright.Ifitisntalreadyopen
foryou,clickthetabWorldSettingsanditllappearforyouontherighthandsideofthescreen.

Step#7ScrolldownWorldSettingsuntilyougettothesectioncalledGameMode.

Step#8WhereitsaysGameModeOverride,clicktheNonebuttonandselectMyGame.

Step#9PressthelittlebuttonthatsitsbeforeSelectedGameModetoshowalltheproperties
ofourMyGameGameMode.

Step#10NexttoHUDClass,clickthedropdownmenuandsetittotheHUDwejustsetup
(HUD_FirstBlood)!

YoucannowclosetheWorldSettingstab(WhichIhighlyrecommenddoingso,itssoeasyto
getconfusedwhentryingtoalterthedetailsofobjectsotherwise!)

NowitstimetoheadintoourHUD_FirstBloodtobeginsettingupourHUDforourgame!

Step#1DoubleClickyourHUD_FirstBloodtoopenuptheBlueprintview,ifyouarenotin
Graphviewwhenitfirstopensup,usethenavigationribbononthetoprighttoswitchfrom
ComponentstoGraph.

Step#2Justlikeinthelastproject,RightClick(Ctrl+Click)theemptyspacewithinthe
BlueprintareaandsearchforEventReceiveDrawHUD.

Step#3FromtheSizeXemptypin,clickanddragtotheright.ThisopensuptheCompact
BlueprintLibrary.Attheverytop(Justunderneaththesearchbox)oftheLibrary,theresa
selectioncalledPromotetoVariable.Selectthatoption.ThiswillnowcreateaVariableonthe
lefthandsideVariableLibrary.

Step#4ClicktheNewVarwhichwascreatedtheVariableLibraryandinthepropertiesofthis
newNewVarchangeVariableNametosizeX.

TIP:WhenusingBlueprints,whenyoustartyournamewithalowercasecharacterand
useanUppercasecharacterdowntheline,thiswilltelltheenginethatthereisaspace
betweenthewords.Thissoundsatadcomplicated,soletssimplifyitalittle:Ifyoucalla
88
VariableJohnrainbowlikesfoodthenthatshowtheenginewillseeit,asoneword.But
ifyoucalledyourVariablejohnRainbowLikesFood,thiswilltelltheEngine,Hey,this
variableiscalledJohnRainbowLikesFood.

Step#5RepeatStep#3and#4forSizeYoftheEventReceiveDrawHUD.

Step#6FromEventReceiveDrawHUD,dragtheopenwhitepintothelefthandsidepinof
SETSizeXandthensettherighthandsideopenpinoftheSETSizeXtothelefthandside
openpinofSETSizeY.

Step#7WerenowgoingtohavetodrawourCoinmaterial,butwewantthistobeontopof
ourotherHUDelements(Whichwellgettoinamomentortwoorthree).

FromtheemptyrighthandsidepinoftheSETSizeYnode,dragtotheright.Whenthe
CompactBlueprintLibraryappears,searchforSequence.

Whatdidwejustdo?WecreatedaSequence,whichwhenwethinkaboutitsimplyisanode
thatsays:Hey,dothis(WhatisconnectedtoThen0)andthenafterwardsdothis(Whatis
connecttoThen1).Thiscanbeusedforalotofthings,forexampleasyoureonlyallowedone
EventTickinaBlueprint,thiswillletyoudomultiplethingsfromtheTick,orforourExampleit
allowsustosettheHUDmaterialThen0andTHENthecoinThen1.Again,itsoundsalittle
complicated,itsbettertoshowyouwhenitcomestothingslikeSequence,sowelldojustthat.

Step#8FromtheThen1pinoftheSequencenode(NOTThen0),dragtotheright.When
theCBL(CompactBlueprintLibrarypopsopen,searchforDrawMaterialSimple.Thiswill
createaDrawMaterialSimplenode,whichiswhatwellbeusingtoputourCoinmaterialonto
ourHUD.

89

AsyoucanseeintheScreenshotjustabove,IvealreadysetthepropertiesformyDrawMaterial
Simple,soweregoingtothatnow!

Step#9Ifyoucantmakeouttheimageforwhateverreason,herearetheoptionsweneedto
set:
Target:Leaveasitis(Self).
Material:SelectyourMAT_CoinMaterial.
ScreenX:Leavethisfornow(0.0).
ScreenY:Setthisto100.
ScreenW:Setthisto100.
ScreenH:Setthisto100.
Scale:Leavethisas1.
ScalePosition:Leavethisunchecked.

WeneedtogettherightcoordinatesforScreenX,sowellusetheSizeXwesetearlierand
minus250togetthecorrectscreenplacement:

Step#10FromtheVariableLibraryonthelefthandsideofthescreen,ClickanddragSizeX
intotheBlueprint(UnderneaththeSequencepreferably).TheBlueprintwillthengiveyoutwo
options:GetorSet.Sincewewanttogetthevalue,selectGet.

Step#11FromthenewlycreatedSizeX,dragtheemptypintotherightandintheCBL,
searchforFloatIntandselectToFloat(Int).

YoucannowseethattheturquoiseSizeXisnowtechnicallyoutputtingagreenFloat,which
wouldfitinperfectlytoourScreenXpinofourDrawMaterialSimpleBUTwefirstneedto
subtract250otherwiseitllputourMaterialinaweirdplace.

90
Step#12Fromtheconversion(InttoFloat)thatwevecreated,dragfromtheemptyfloatpin
(ontheright)anddragtotherighttoopenuptheCBL.Onceopen,typeinSubtractandselect
FloatFloat.

Step#13InourSubtractnode,noticethatourSizeXisconnectedtothetoppinoftheleft
sideandthebottompinoftherightsidehas0initThisbasicallymeansSubtract0fromSize
X.Sowhereitsays0,typein250andconnecttherighthandsideemptypinintoourScreen
XofourDrawMaterialSimple.

Whatdidwejustdo?Asexplained,theweminused250fromourSizeX.Thisisthewayall
equationnodeslikeSubtractwork.Itsthebottomnumberthen(Whatkindofnodeitis)tothe
topnumber.Soifweput50,itwouldsubtract50fromourSizeX.

Ourcoinnowsitsnicelyonourscreen,butweneedtoaddsometexttoourscreen.Sobesure
toCompileandSaveourBlueprint(Sowedontloseanywork!)andthengobacktoourDraw
MaterialSimplenode.

91
Step#14FromtheemptyrighthandsidepinofourDrawMaterialSimplenode,dragtothe
rightandwhentheCompactBlueprintLibrarypopsup,simplytypeinDrawText.Butbefore
wecontinue,theresonequickthingwehavetodo.

Ifyouhaventalready,gobackintoyourContentBrowserandatthebottom,theresanicon
calledViewOptionswithaneyejustbeforeit.ClickitandsetShowEngineContent.Onceits
settoshowtheEnginecontent,headbackintoyourHUD_FirstBlood.

Step#15WhereitsaysFont,setthefonttoRobotoDistanceField(Ifyourenotshowing
Enginecontent,youwontseeit!)

Step#16Justlikebefore,setyourpropertiestothesameasIhaveit.Ifyoucantsee:
Target:Leaveasself
Text:Putalowercasex
TextColour:SettoWhite
ScreenX:Youcanleavethisaswellsetitthesamewaywediditbefore.
ScreenY:Setto120
Font:YoushouldhavealreadychangedthistoRobotoDistanceField
Scale:2.5
ScalePosition:Leaveunchecked

92
Step#17SelectourSizeX,theInttoFloatconverterandourSubtractnodesbydragging
aboxoverthem(Orusing[Hold]Ctrl+[Press]Click).Oncetheyreallselected,CopyandPaste
thembypressingCtrl+W.DragthenewlycreatedNodesovertoourDrawTextnodeand
hookuptheSubtractnodetoourDrawTextsScreenX.

Beforewedoanythingelse,besuretochangeyournewlycopiedsubtractto150,soit
doesntoverlapourCoin.

SowevegotourCoinandthenanxjustaftertoseparateitfromwhatwillbeourscorenumber.
BeforeweactuallyputintheScore,weregoingtohavetosetafewVariablesfirst.

WellalsosetsomeVariablesthatwellneedinthefuture,justtosavesometime.

Step#18IntheVariableLibraryontheleft,CreatefournewVariables.Thisiswhatweregoing
tocreate:

Andhereshowwecreatethem!

93
Onceyouvecreatedfourvariables,clicktheNewVarsandonebyone,intheirproperties
whereitsaysVariableNameSetthemto:

#1BlueMode
#2RedMode
#3GreenMode
#4Score

SonowwehavethefourVariablesnamedcorrectly,theyneedtobeSETcorrectlytoo,
otherwisetheywontworklikewewantthemto.

GobacktoBlueModesproperties(ByclickitintheVariableLibrary),JustunderVariable
Name,theresapartcalledVariableType.Clickthedropdownbox(WhichshouldsayIntat
themoment)andsetittoBool(Red).

RepeatthisforRedModeandGreenMode.

Whatdidwejustdo?WesetRedMode,BlueModeandGreenModetoaBoolwhichmeans
wevechangedthemtoYesorNovariables(MeaningtheycanbeeitherYesorNo.Weset
ScreenXandYearlierbothtoIntwhichisshorttoInteger,whichisanumber,Soitcanbe0,1,
2,1.5,2.25.etc.

Iwroteadescriptiononthevariabletypesearlier,butincaseyoumissedit:

BoolYesorNosthatcanbestoredandreused
FloatNumbervalue(Thatcanhasdecimals)thatcanbestoredandreused
IntNumbervalue(Thatcanthavedecimals)butcanbeusedtofindthingsin
Arrays
StringTextthatcanbestoredandreusedlater
ArrayCollectionofitems/Intsthatcanbestoredandreusedlater

AllwehavetodonowismakesureScoreisanIntbysettingitsVariableTypeso.Oncedone,
allthatisleftistoclicktheclosedeyenexttoeachVariable(Seethepicturejustabovethisstep)
toOpentheEyeoneachfourofourvariables.

ThismeansthatotherBlueprintscanseetheseVariablesandeditthem.Whyhavewedone
this?Illexplainwhenwegettherebutfornow,headbackovertoourBlueprintand

94
Step#19SelectyourDrawTextnodebyclickingitandCtrl+Clickthenodesconnectedto
theScreenXofourDrawText.OncetheDrawText,Subtract,InttoFloatandSizeX
variableareallselected,pressCtrl+WonyourKeyboardtoduplicatetheNodes.

Onceduplicated,dragthemovertojustpassedouroriginalDrawTextnodes.Youshouldnow
havesomethingthatlookslike:

Ivemadeonealteration(Whichyoushouldtoo),whichis:IvechangedtheSubtractto110
insteadof150(SotheXisntoverlayingthenumber[Score]!)

Step#20DragyourScorevariableyourecentlycreatedintotheBlueprintandwhengiventhe
optionGetit(NotSetit!).

Step#21FromtheemptypintotherightofourScorevariable,dragtotherightandtypein
StringintheCBL.SelectToString(Int).

95
Step#22HooktheemptypinkpinofourToStringtotheTextpinofoursecondDrawText.

Whatdidwejustdo?YoujustsetupafullyfunctioningScorecounter!Whenwecollecta
coin,itwillshowuponourHUDsoweknowhowmanycoinswehave!Westillneedtocodethe
coinsinwhichwelldoinalittlewhilebutfornowpatyourselfontheback!Wevedonesome
awesomethings!Ifyouzoomout,lookhowcomplicatedtheBlueprintlooksyethowsimpleit
wastocreate!

IfRedPlayer,RedHUD.IfBluePlayer,BlueHUD!

NowthatwehaveourCoinandScoreintheHUD,weneedtosetthebackgroundoftheHUD.
WecreatedtheMaterialsearlier,andnowweregoingtoteachourHUDwhichHUDmaterialto
useandwhen!

96
Step#1InyourHUD_FirstBloodblueprint,headbacktotheSequencenearthestartofour
Blueprint.

Step#2FromtheThen0pinofourSequencenode,Clickanddragtotheright.Whenthe
CompactBlueprintLibrarypopsopen,typeinBranch.

Step#3FromtheConditionpinofourBranchnode,Clickthepinanddragtotheleft,when
theCBLopensup,typeinGetBlueandselectGetBlueMode(Thevariablewecreated
earlier).

Whatdidwejustdo?AsImentionedbefore,aBranchisaWhatif?node.Becauseour
BlueModeisaYesorNovariable(Bool),thistranslatedto:IfBlueModeisTrueorFalse?So
weneedtosetwhathappensforeachrightnow!

97
Step#4IfBlueModeistrue,wewanttosettheHUDtobetheBluehudwecreated.Sofrom
theTruepinofourBranch,clickanddragtheemptypintotherightandwhentheCompact
BlueprintLibraryopensup,typeinDrawMaterialSimple.ThiswillbecomeourBlueHUD.

Asyoucanseeintheimage,whereitsaysMaterialinourDrawMaterialSimple,Ivesetitto
ourBlueHUD(Mat_HUD).DothesametoyourDrawMaterialSimplenode.

WealsoneedtogettheMaterialtostretchtothescreennomatterwhatthesizeoftheScreen
is.Todothis,weregoingtousetheSizeXandSizeYvariableswhichwecreatedearliertotell
ourHUDtodrawtheMaterialthatsize.ThiswillalsoautomaticallyrescaleourHUDiftheour
GamesWindowsizeischangedatanypoint.

Step#5FromourVariableLibraryonthelefthandside,ClickanddragSizeXintoour
Blueprint(BeforeourDrawMaterialSimple)andwhenitasksifyoudliketoGetorSet,select
Get.DothesameforSizeY.

98
Step#6GrabtheopenpinofourSizeXandhookitintotheDrawMaterialSimplesScreen
W(WidthoftheScreen.GrabtheopenpinofourSizeYandhookthatoneintotheDraw
MaterialSimplesScreenHScreenHeight.

Asyouconnectthemup,theEnginewillautoconverttheIntstoFloatsforus(Howniceofit,
ThanksEpic!)

ThatsallweneedtodoforourBlueMode.Itwontshowupingameyetthough(Wellsetthatin
alittlebit!)butwenowneedtosetupourGreenModeandRedMode!

Step#7Ctrl+ClickallofthenodeswejustcreatedaftertheSequence(Branch,Draw
MaterialSimple,SizeX,SizeYandtheirconverters)butleavetheBlueModenode.Onceall
havebeenselected(ApartfromBlueMode),PressCtrl+WonyourKeyboardtoduplicate
them.Dragthemabovewhatwevejustcreated.

99
Step#8FromtheFalsebranchofouroriginalBranch,dragitintoourlefthandsideinput
pinofthesecondBranch.

Step#9WhereweoriginallysettheMaterialtoMat_HUD,weneedtosettheDuplicated
versiontotheSecondHUDimage,sowhereitisMaterialinourSecondDrawMaterial
Simple,clickthedropdownboxandsearchforMat_HUD2.

Step#10OursecondBranchdoesnthaveaconditionyet.Soweneedtosetone
(Otherwise,theBlueprintisaskingWhatifandnotthinkingofanythingelse!)Fromthe
VariableLibraryonthelefthandside,ClickandDragRedModeintotheBlueprint,nexttoour
SecondBranchandwhenasked,selectGetinsteadofSet.OnceitsintheBlueprint,simply
hookitupintotheConditionofourSecondBranch.

100
Step#11ThatsallwevegottodoforRedMode,nowallwehavetodoisduplicateour
Branchandeverythingafteragainforonelasttime.

SoselectyourBranch,DrawMaterialSimple,SizeX,SizeYandtheirconverters)byCtrl+
Clicking.

Onceallareselected,PressCtrl+WonyourKeyboardtoduplicate.

OnceDuplicated,dragabovewhatwevejustcreatedandwellmakesomefinaladjustmentsto
compensateforourGreenmaterial.

Step#12Justlikebefore,DragtheFalsepinfromourSecondBranchtoournewlycreated
LeftpinofourthirdBranch.

(Note:Intheimage,IforgottocopyoverSizeYandthisleftanincompleteInttoFloat.CopyinganyoftheSizeYwevealready
placeddownandconnectingittotheopenIntpinwithazeroafterwillfixtheissue!)

Step#13Justlikebefore,InourthirdDrawMaterialSimpleweneedtochangetheMaterialto
Mat_HUD3(InsteadofMat_HUD2).WealsoneedtoaddintheGreenModecondition.

Seeifyoucandothatwithoutanexplanationhow.

Itsreallysimple,anditllhelpyoubeginyouradventureinBlueprintswithoutTutorials.Ifyouget
reallystuck,justbacktracktohowwealreadydiditafewstepsago.
101

Step#14ForthesakeofkeepingaHUDonourscreennomatterwhat,WhereitsaysFalse
onourthirdBranch,dragtotherightandwhentheCompactBlueprintLibraryopensup,type
inSetBlueandselectSetBlueMode.

Step#15ClickonthelittleboxinourSetBlueModenodewhichisnttickedtotickit,which
makesSetBlueModetrue.

ThismeansthatifthescreenisntBlue,itisntRedanditisntGreen,itshouldsetBluetotrue
soitlldisplaytheBluescreen.

NowletstakealookatourBlueprint:

Lookathowcomplicateditlooksbuthoweasyitistofollownowweunderstandwhatitdoes.
OurHUDisnowcompleteandnowallweneedtodoissetupsomegameplayspecificevents
tomaketheHUDchangeabout!

Youvedoneagreatjob,welldone!REMEMBERTOSAVEANDCOMPILE.

102
PlayermeetHUD!

NowthatwehaveourHUDsetup,weneedtobeabletocontrolourHUDfromtheMyCharacter
blueprint(DefaultCharacterblueprintfromtheProjectTemplate).

Ifyourenotusingtheprojecttemplate,thenwhenImentionMyCharacter,Imtalkingaboutyour
Characterblueprint.

WhatweregoingtodobeforeanythingissetuptheCharacterblueprinttogiveofftheillusionof
usingMultiplecharacters,wheninrealitywerejustusingone.Dontworry,eachcharacterwill
havetheirownuniqueproperties.

WellbeusingthedefaultUnrealEngine4characterforthis!

Firstthingsfirst:

Step#1OpenuptheMyCharacterblueprint.YoucandothisbyclickingGamefolderinthe
ContentBrowserandsearchingforMyCharacter.

IfitdoesntautomaticallyloadintotheBlueprintsection,(Asalways)usethetoprightribbonto
navigatetotheGraphtab.IfyoureintheComponenttaborDefaultsyourenotintheright
place!

WereabouttoaddthistoourMyCharacterBlueprint:

Itlooksabitdauntingbutasweveseentimeandtimeagain,looksareverymisleadingwith
Blueprints,itsactuallyratherstraightforwardwhenyouunderstandwhatyouhavetodo.

103
ThefirstthingweneedtodoistellourMyCharacterblueprintthattheMaterialthatisappliedto
theMesh(Theplayercharacter)caneasilybechangedandaltered.Todothisweneedto
ventureintounexploredterritory(Orratherterritorywehaventtouchedoninthisbooksofar)!

Step#2WhilelookingatourEventgraph(Blueprint)ofourMyCharacterBlueprint,justabove
theBlueprintarea,youshouldseeatabthatisntcurrentlyopencalledConstructionScript.

Ifyoucantseeit,itislocatedhere:

OnceyouvefoundtheConstructionScripttab,clickittoopenupourConstructionScript
Blueprint.

JustwhatisaConstructionScript?EveryClassBlueprinthasaContructionScript,tosumit
upinaslittlewordsaspossible,aConstructionScriptiswhereyoucansetupanythingbefore
everythingelsehappensinthegame.Youcanalsousethemforeditortasks(Procedural
creation.etc)Butwellgomoreintodetailsomeothertime!

Forourexample,wellbetellingthegamethattheMaterialontheplayercanbechanged,and
thatneedstobedoneassoonaspossible,hencewhywereusingtheConstructionScript.

Step#3OnceintheConstructionScript,youllseeapurplenodecalledConstructionScript,
thisisourbasenodeandeverythinghastocomefromhere.

FromtheemptypinoftheConstructionScriptnode,dragtotherightandintheCBLthatpops
up,typeinDynamicandselectCreateDynamicMaterialInstance.

104
Step#4IntheCreateDynamicMaterialInstancenode,ontheleftsidethereisanempty
Targetpinthatiscolouredlightblue.WeneedtousethistotelltheBlueprintthatitstheplayer
MeshthatweneedtoaltertheMaterialfor.

SoclicktheemptypinnexttoTargetanddragtotheleft.WhentheCompactBlueprintLibrary
opensup,typeinMeshandselectGetMeshwhenitcomesup.

Whatdidwejustdo?WehavetoldtheConstructionScripttotelltheBlueprintthattheMesh
(Playercharacter)sMaterial0(ElementIndex)[ThisiswherealloftheMaterialinformationis
storedintheDefaultcharacter]canbechangedingame.

WhatweneedtodonowissetthisasaVariable,sothatwecanreferencethisactioninour
mainBlueprint.Wedothisby

Step#5FromtheReturnValueemptyinofourCreateDynamicMaterialInstance,dragto
theright.WhentheCBLshowsup,clicktheoptionPromotetoVariable.WithintheVariable
Libraryonthelefthandside,clickourNewVarandchangetheVariableNameto
characterMat.

105
ThatsallwehavetodofortheConstructionScript.NowthatittellsourBlueprinttoletusmodify
theMaterialandgivenustheVariabletodoso,weneedtoheadbackintoourEventGraphand
addsomethingstoourBlueprint!

Step#1InourEventGraph,inanemptyspaceRightClick(Ctrl+Click)andtypein:Custom
Event.Whengiventheoption,selectCustomEventandnameourCustomEvent:Red.

Step#2RepeatStep#1foraCustomEventcalledGreen.Oncecreated,RepeatStep#1
againforaCustomEventcalledBlue.

ThiswillbehowwetelltheHUDtoactivate.

Step#3WeneedtocasttoourHUDandthewayweregoingtobeabletodothatisbyRight
Clicking(Ctrl+Click)andwhentheCBLopensup,typeinPlayerControllerandselectGet
PlayerController.

106
Step#4FromtheemptyReturnValuepinfromGetPlayerController,clickanddragtothe
right.WhentheCompactBlueprintLibrarypopsopen,typeinGetHUDandselecttheGet
HUDoption.

Step#5FromtheemptyReturnValuepinofourGetHUDwhichhasbeencreated,Click
anddragtotheright.WhentheCBLopens,typeinCastandselectCasttoHUD_FirstBlood.

WerenowspeakingtoourHUD!Rememberhowwegaveitspecificvariables(YesorNos)and
variousIfthisvariableistruedothisbranches?Weregoingtoputthemtousenow!

Step#7NowthatweretakingtoourHUD,weneedtotellitthatwewantRedModetobetrue
buteverythingelsetobefalse.

SofromtheAsHUDFirstBloodCbluepinofourCast.Clickanddragtotheright.Whenthe
CBLopensup,typeinGreenModeandselectSetGreenMode.

ThiswillcreateaSetGreenModewhichisalreadysettoNo.ThismeansifGreenModeis
alreadysettoTrue,thiswilltelltheHUDthatGreenModeisnowfalse.

Step#8FromtheAsHUDFirstBloodCbluepin(Whichisnowfilledin,butignorethatfact),
clickanddragtotherightagainandthistimetypeinBlueMode.SelectSetBlueMode.

107
Step#9Whencreated,dragtheSetBlueModenodetojustaftertheSetGreenModeand
connecttheirwhitepinstogether,leavingtherighthandsidepinofSetBlueModereadytobe
connectedintoourSetRedModewhenwecreateit.

Step#10Bynow,youshouldbeabletoguesswhattodonext.Ifnot,thatsnotaproblem.
DragfromAsHUDFirstBloodCandwhentheCBLopensup,thistimetypeinRedModeand
selectSetRedMode.

DragthenewlycreatednodetotheendoftheSetchain(AfterSetGreenModeandSet
BlueMode)andconnectittotheChain.

Thistime,RedModeneedstobesettotrue,sointheSetRedModenode,whereithasthered
pinthenRedModeandanemptybox,clicktheemptyboxtosetSetRedModetotrue.

Whatdidwejustdo?WhenyoulookatourChainwhichwevecreated(FromCast)itgoes:
SetGreenFalse>SetBlueFalse>SetRedTrue.ThishastoldtheHUDtoturnoffthe
GreenHUDandBlueHUDbutturnontheRedHUD.

108
Step#11WhatweneedtodonowisrepeatStep#3Step#10withGreenModeinmindand
onceagainwithBlueModeinmind.Youshouldeventuallyhavesomethingthatlookslikethis:

HereisanupcloseversionoftheSetNodes,justincaseyouneedahand:

SowehavesetuptheHUD,butwehaventsetuphowtotriggerthiseventtohappen.Wehave
aCustomeventconnectedtoeachone(RedCustomEventsetsRedtotrue,GreenCustom
EventsetsGreentotrue.etc)butwedonthaveanythingtotriggerthecustomevents.Sonowis
thetimewereactuallygoingtocreatetheeventthatsparkstheseeventsoff.

109
LetsControltheHUDandPlayer!

WehaveaHUDandasystemwithinthePlayertoswitchtheHUDwhenwewantitto,butwe
needtoactivatethischangenow.WealsoneedtochangethePlayercolour(Whichwesetup
earlier).

Thisisthepartwhereitallfallstogether.

Step#1Imgoingtobebindingthedifferentcolourstodifferentkeys(Num1,Num2,Num3).If
youwanttouseaController,whenImentionthekeys,simplyusewhateverbuttonsyouplease
(SuchasGamepadFaceButtonTop.etc).

Soonceyouknowthekeysyoudliketouse,Rightclick(Ctrl+Click)anywhereinyour
MyCharacterblueprint.WhentheCompactBlueprintLibraryopensup,TypeintheKeyofyour
choice,Forexamplemineisthenumber1,soIlltypein1.Youllseethekeyyouwantcomeup
underKeyEventsintheCBL.Soselectthekeyyouwantanditllcreateaneventwiththename
ofthekeyaswellasPressedandReleasednodes.

Step#2Weneedtofiretheeventswecreated.As1isgoingtobemyRedevent,allIhaveto
doisdragfromtheemptyPressedpinofmy1nodeandwhentheCBLopensup,typein:
RedandselecttheRedthatcomesuplikethis:

110
Step#3FromtheRedcallingeventwhichhasbeencreated,thetoprightwhitepincanbe
usedtosetthecolourofthecharacter(SoitwillchangethecolourastheHUDischanging).

ButeventhoughdraggingfromthewhitepinandtypinginSetVectorintheCBLwouldcreatea
SetVectorParameterValue,itwouldntactuallycreatethecorrectNodeinwhichweneed.
EventhoughitsharesthenamewiththeNodewewant,itsactuallyverydifferent.

Sohowdowegettherightnode?

Simple!

Onthelefthandsideofyourscreen,youllhaveyourVariableLibrary(Whichweveusedafew
timesnow).InsidetheVariableLibrary,theresavariablecalledcharacterMat(Inwhichwe
createdintheConstructionScript.

SimplydragtheVariableintoourBlueprintspaceandwhenitasksifyoudliketoGetorSet,
selectGet.

Step#4FromthebluepinofourminicharacterMatnode,clickanddragtotheright.When
theCompactBlueprintLibraryopensup,typeinSetVectorandselectSetVectorParameter
Value.

OncetheSetVectorParameterValuenodehasbeencreated,connectittotheRedevent
whichwecreatedastepago.

111
Onceitsconnected,Withinthenode,youllnoticeaValuepropertywhichiscurrentlysetto
Black.BecausethisisourRedevent,wewantourcharactertobeRed.

SoclicktheBlackcolouranditllopenacolourwheel.Fromthiswheel,selectaRedcolour
(Makesureitsred(CheckallthesettingsoftheColourWheel!)

Step#5RepeatSteps#1#4butforyourotherKeyandColour(SearchforeventGreen
insteadofRedandsetthecolourGreen.Oncerepeated,doitoncemoreforourBluecolour.
Youshouldnowhavesomethingalongthelinesof:

WhatyoumightnoticeisthatinmySetVectorParameterValuenodes,myParameterNameis
DiffuseColorThatsbecauseitisthedefaultParameternameforthedefaultUE4characters
colour.

112
TheparameterweneedtochangeisinfactcalledDiffuseColorSobesuretosetyour
Parameternames(InSetVectorParameterValuetothisoritwontwork!

Sonow,compileandsave.Ifyoutryoutyourgame,YourcharacterandHUDwillchange
colourswhenyoupressthebuttonsinwhichyouveset!

Greatwork!

Werealmostdonebuttheresstillafewthingslefttodobeforewecancallitaday!

GivethePlayerDifferentPowers!

NowthatwehavesetupthePlayerscoloursandtheHUD,wewanttogiveeachplayera
differentpower,soPlayerswillwanttochangebetweenthem!

WhatweregoingtodoissetupONEofthePlayercolours(Theredone)tobeabletojump
higherthantherest.Theothertwoplayerpowers?Imgoingtoleavethatforyoutouseyour
powerofBlueprintsandyourimaginationtocomeupwith.

HeresishowwegivetheRedplayerthehigherjumpbutkeepittotheRedplayer.

Step#1WithintheMyCharacterblueprint,FindthechaininwhichweusetheKeytosetoff
theRedevent.Inthischain,afterSetVectorParameterValue,Clicktheemptywhitepinand
dragtotheright.

WhentheCompactBlueprintLibraryopensup,typeinJumpandselectSetJumpMaxHold
Time.

Step#2NowcopythisSetJumpMaxHoldTime,andpasteittwice.Connectthesetwo
copiedonestotheendsoftheGreenandBluekeychainsthatwemade.

113
Step#3KeeptheBlueandGreensSetMaxJumpHoldTimeat0butchangetheReds
to0.5.

Thatsallweneededtodo.AslongasweresetthevaluesintheotherEvents,itwillseemasif
theselectedCharacterhasthepowerwhentheothersdont!

Step#4UsewhatyouvelearnedtocreatespecialPowersfortheGreenCharacterandBlue
character.

Andnow,onceyouvedonethat.Iwillgiveyouthetaskofmodifyingyourlevelandcreatingyour
ownlevel.Useyourimaginationtomodifythelevelinawaywhichwillneedeachpower
individually.

Also,whenyoucreateyourlevel,besuretoaddpitsinwhichyourPlayercanfallintoadie.

Oncecreated,youmayproceedtothenextChapter!

114
ToKillaPlayer/Coins,Coins,Coins!

Nowthatyouhavemodifiedthelevelandmadeityourown,itstimetoprograminhowtokillthe
Player.

Todothis,weneedtoopenupourMyCharacterblueprintonceagain,andthistime,were
goingtocreateanewvariable.

Step#1OpenupMyCharacteronceagainandintheVariableLibrary,createanew
Variable.SetittoaBool(Red)andcallitAllowInput.Makesuretoclicktheeyenexttoits
nameintheVariableLibraryasthisisaVariablethatotherBlueprintswillneedtosee!

Step#2SaveandCompiletheBlueprint.OnceCompiled,ClickAllowInput(IntheVariable
Libraryandintheproperties(Wherewesetthevariablename),Scrolldownuntilyoufind
DefaultValueandmakesureitsaysAllowInputandthenhasatickattheend.Thismeans
Startthegamewiththistrue!

Step#3InyourMyCharacterblueprint,FindALLtheeventswithinyourBlueprint,apartfromthe
CustomEventswecreated(Butdocountthekeypresses!).

115
Nowforeveryevery,youregoingtoRightClick(Ctrl+Click)andselectBranch(Youcancopy
andpasteittosavetime)andhooktheEventintothisBranchandthentheTruetowhatever
theEventwasoriginallyconnectedto.TheconditionfortheseBranches,shouldbeAllowInput
(YoushouldhavefiguredouthowtogetaVariableintoyourBlueprintbynow).

Example:

Inshort:Everytimethereisabuttonpressed,wewanttomakesurewehavepermissionto
continue.Naturally,ifyouredead,youshouldntbeallowedtomovearound,soweregoingto
takeawayinput.

(MakesuretoaddittoyourkeypressNum1,Num2,Num3aswell!)

Step#4NowthatwehaveaddedthisCantheplayermove?conditiontoeveryinputof
MyCharacter,itsnowtimetoaddatriggerboxintoourlevel.Findsomewherewheretheplayer
shoulddieiftheygetto.Beitapitorsomespikes.

116
Onceyouvefoundaplace,rememberhowwecreatedaBoxintheveryfirstexample?Ifwego
backintotheModespanelatthetopleftofourUnrealEngine,andweselecttheVolumestab,
ifwescrolldownwecanfindaboxcalledTriggerVolume.Selectthisandmoveit/Scaleitinto
positioninyourpit/Overyourspikes.

117
Step#5OnceyouveplacedtheTriggerVolume(AndsetitintothecorrectPosition/Scale,
Makesureitsselectedandinitsproperties,scrolldownuntilyougettoAddLevelEventsfor
Trigger....ClickthisandthenselectOnActorBeginOverlap.

ThiswillopenuptheLevelBlueprint.

Step#6FromtheActorBeingOverlapnode,grabtheemptybluepinnexttoOtherActor
andclick+dragtotheright.WhentheCBLopens,typeinMyCharacterandselectCastto
MyCharacter.

Step#7IntheMyCharacternode,GrabthebluepinforAsMyCharacterCandClick+Drag
totheright.WhentheCompactBlueprintLibraryopens,typeinAllowInputandselectSet
AllowInput.Makesurethereisnotickinthisnode.

Step#8FromtheemptyrighthandsidewhitepinofSetAllowInput,Clickanddragtothe
right.WhentheCBLappears,typeinDelayandselectDelay.

118
Step#9FromtheDelaynodesrighthandsideWhitepin,Click&Dragtotherightandinthe
CBL,typeinOpenLevel.

Whatdidwejustdo?Lookingatthechain:IfPlayertouchestheTriggerBox,Hecanno
longermoveandafter0.2secondloadlevelNone.Becausewehaventsetalevel,itwillreload
thecurrentlevel.

Sonotonlydidwecreatemultiplecharacterswithmultipledifferentabilities,butwecreateda
Deathtrap.AllweneednowistheCoins.AndIllletyoudothat,withoutanyhelpfromme.

Yup,thatsright.ImtakingthetrainingwheelsoffandlettingyouexploreUnrealEngineonyour
own.

IfyoudontmanagetocreatetheCoin,IveincludeditwithintheContentpackat
http://content.kitatusstudios.co.ukbutifyouvefollowedthistutorialcloseenough,youshouldbe
abletofigureoutonyourownwhattodo.

119
Project#2WrapUp!

Youdidit,Champ!NotonlydidyoucreateaworkingPortalsysteminExample#1,butyou
rockedtheWorldofblueprintsinExample#2bymodifyingMaterialsandHUDsallwithin
Blueprint!

Welldone!

Asyoumighthavenoticed,towardstheendofProject#2,Iwasshowingyoulessimagesand
gettingyoutodoalotmorewithoutmyhelp.

WhydidIdothisIhearyouask?TohelpyougetstartedonBlueprintswithoutanyhelp!Ihopeit
paidoff,butifitdidntShootmeanemailandIcanhelpanywayIcan!

Ifyouveforgotten,heresmyemail:contact@kitatusstudios.co.uk

Ihopeyouenjoyedthisexampleandpleaseemailmewithhowyourfinalprojectlooks,Idliketo
seewhatpowersyoucameupwithandlevellayouts!

120
EndofBook#1

Wedidit!Wereallydidit!Wecreatedsometrulyawesomethingsandhopefullyyoulearned
somereallycoolstuff,soyoucanbeginyouradventuresintoBlueprintswithoutme.

IhopeyouvelearntthankstothisbookandasIvementionedbefore,ifyouhaveanyquestions,
problemsoryouwanttoshowmewhatyouvedonethankstothisbook,shipmeanemailat:
contact@kitatusstudios.co.uk

ThankyouforreadingandsupportingthisbookandbeonthelookoutforBook#2inthefuture,
whichwillcoverAI&Multiplayer!

RyanShah,ProjectLead@KitatusStudios

121