UnrealEngine4Blueprints (6)
.pdf
Step #2 Once we’ve created the Folder, it’s time to open it up in the Content Browser and import all of our four HUD textures into our game!
We do this by pressing “Import” at the top of the Content Browser, then select the four textures while in our “Tut_FirstBlood” folder.
Now that our textures are into our Game, we’ll need to make them into Materials for this Tutorial. BUT (And that’s a big but!) we don’t need to make Materials for all the textures we’ve just imported as two of them are actually “Opacity Masks” and not HUD elements themselves!
Step #3 Right Click (Ctrl + Click) “TEX_Coin” (Or whatever your coin Texture is called) and select “Create Material” and do the same for “TEX_HUD”. After this, rename them to “MAT_Coin” and “MAT_HUD”.
Step #4 Double Click “MAT_HUD” to open up the Material Editor for our HUD material.
We need to set a few options to make sure our HUD is in primeshape for when we feed it into our HUD!
81
Preparing our HUD Materials
Now that we’re in the Material editor for our “MAT_HUD”, we need to set a few parameters to make sure the Material is ready for HUD usage:
Step #1 Drag the Texture Sample that is stuck inside the “Material Inputs” node.
Step #2 Copy the Texture Sample (Click it and Ctrl C + Ctrl V or Right Click (Ctrl + Click) and “Copy” and Right Click (Ctrl + Click) again to Paste.
Step #3 In our newly copied “Texture Sample”, Click it so we can see the Properties on the left. In the properties, where it says “Texture” with the image of our HUD texture, click the grey box and find our “Opacity_Hud”.
82
We’ll be coming back to this “Texture Sample” in a little while, but we need to fix some things before the Material will accept our Opacity Mask.
Step #4 From the filled in pin of our original “Texture Sample” (Which is connected to Base Colour), grab and connect it ALSO to Emissive. This is so the Material “Lights” itself and will still be able to be seen even in dark places.
Step #5 Unclick all of the nodes in our Material by click some empty space within the Material Editor and you’ll see some properties in the lefthand side pane.
Under the “Material” section of the properties, there’s a box called “Blend Mode”. As this is for something that will mainly be seethrough, we need the “Opacity” node, so click the Dropdown box and select “Translucent”.
Step #6 Connect the empty pin of our “Opacity Mask” Texture Sample to the “Opacity” of our “Material Input” node.
Thats all we have to do for our “MAT_HUD”, it is now HUD ready! But… Before we forget…
83
Step #7 Repeat Steps #1#7 for “MAT_Coin” (REMEMBER to save!)
Where Are We Now?
So we now have two materials, MAT_HUD and MAT_Coin. Both have been correctly setup so they have their opacity masked out and they are ready to be placed onto our HUD.
What we’ll need to do now is set up a HUD, tell the game that it’s this HUD we want and put these materials into the HUD.
But we’re going to do something first…
MultiHUD!
For this example, we’re going to give the player the illusion of taking control of multiple characters in order to get through obstacles.
So what we’ll need to do is create some more textures and Materials to be used in our HUD to simulate the change.
I have created a Red Variant and Green Variant of the original HUD included in our “Assets” folder at http://content.kitatusstudios.co.uk If you’re using your own HUD asset, then simply use Photoshop or any other Image editing software to create a Red variant and a Green varient, so you’re ending up with three HUD images: One blue variant, one red and one green.
NOTE: You don’t need Opacity Masks for these variants as we’ll be using the Opacity Mask from the original HUD.
84
Step #1 Once created, import these into your project. From our MAT_HUD, you can clone it by Right Clicking (Ctrl + Click) and selecting “Create Copy” (Name the copies MAT_HUD2 and MAT_HUD3 in respective to the Texture names).
Step #2 Then simply open up MAT_HUD2 and MAT_HUD3 and within the Material Editor for these two Materials, and select the “Texture Sample” which is connected into Base Colour / Emissive.
Within the properties of these Texture Samples (In the bottom left), change the “Texture” to the relevant texture “MAT_HUD2” should be using “TEX_HUD2” and “MAT_HUD3” should be using “TEX_HUD3”.
You should now have a Material list that looks like this:
We now need to create the HUD and place these Materials inside, but before we do we need to tell the game that the HUD we create is the one we’d like to use for our Game.
85
Creating our HUD!
Step #1 Go to the Content Browser and into our TutorialContent folder (Or whatever you’ve called your folder) and use the buttons on the top of the Content Browser to create a new Blueprint.
Step #2 At the bottom of the “Pick Parent Class” window, there’s a section called “Custom Classes”. If we click the hollow grey button to the left of this, we’ll see all the Classes we can use as a basis for this blueprint.
86
Step #3 If you search for “HUD” a number of options will be revealed. The one we want is the child of “Actor” but the parent of everything else:
Select this “HUD” by highlighting it (Left Click) and then pressing Select at the bottom of the screen.
Step #4 Once the blueprint is created, name it something along the lines of “HUD_FirstBlood”. This will be our HUD for this whole level.
Now that the HUD has been created, we need to tell Unreal Engine “Yo Adrien! Hey, Unreal Engine, this is our HUD we want to use for this Level / Game!”. We can do this by setting it in “World Properties” (Which, even though makes it sound like it’ll set this for every level, only sets it to the current level).
Step #5 In the bar above the Scene View, you have a number of options. Next to “Quick Settings” and before “Blueprints”, there’s a section called “World Settings”. Click this.
87
Step #6 This has added a tab next to the details pane on the bottom right. If it isn’t already open for you, click the tab “World Settings” and it’ll appear for you on the righthand side of the screen.
Step #7 Scroll down “World Settings” until you get to the section called “GameMode”.
Step #8 Where it says “GameMode Override”, click the None button and select “MyGame”.
Step #9 Press the little button that sits before “Selected GameMode” to show all the properties of our “MyGame” GameMode.
Step #10 Next to HUDClass, click the dropdown menu and set it to the HUD we just set up (“HUD_FirstBlood”)!
You can now close the World Settings tab (Which I highly recommend doing so, it’s so easy to get confused when trying to alter the details of objects otherwise!)
Now it’s time to head into our HUD_FirstBlood to begin setting up our HUD for our game!
Step #1 Double Click your “HUD_FirstBlood” to open up the Blueprint view, if you are not in Graph view when it first opens up, use the navigation ribbon on the top right to switch from “Components” to “Graph”.
Step #2 Just like in the last project, Right Click (Ctrl + Click) the empty space within the Blueprint area and search for “Event Receive Draw HUD”.
Step #3 From the “Size X” empty pin, click and drag to the right. This opens up the “Compact Blueprint Library”. At the very top (Just underneath the search box) of the Library, there’s a selection called “Promote to Variable”. Select that option. This will now create a Variable on the lefthand side “Variable Library”.
Step #4 Click the “NewVar” which was created the Variable Library and in the properties of this new “NewVar” change Variable Name to “sizeX”.
TIP: When using Blueprints, when you start your name with a lowercase character and use an Uppercase character down the line, this will tell the engine that there is a space between the words. This sounds a tad complicated, so let’s simplify it a little: If you call a
88
Variable “Johnrainbowlikesfood” then that’s how the engine will see it, as one word. But if you called your Variable “johnRainbowLikesFood”, this will tell the Engine, “Hey, this variable is called “John Rainbow Likes Food”.
Step #5 Repeat Step #3 and #4 for Size Y of the “Event Receive Draw HUD”.
Step #6 From “Event Receive Draw HUD”, drag the open white pin to the left hand side pin of “SET Size X” and then set the righthand side open pin of the “SET Size X” to the lefthand side open pin of “SET Size Y”.
Step #7 We’re now going to have to draw our Coin material, but we want this to be ontop of our other HUD elements (Which we’ll get to in a moment or two… or three).
From the empty righthand side pin of the “SET Size Y” node, drag to the right. When the “Compact Blueprint Library” appears, search for “Sequence”.
What did we just do? We created a Sequence, which when we think about it simply is a node that says: “Hey, do this (What is connected to “Then 0”) and then afterwards do this (What is connect to “Then 1”). This can be used for a lot of things, for example as you’re only allowed one “Event Tick” in a Blueprint, this will let you do multiple things from the Tick, or for our Example it allows us to set the HUD material “Then 0” and THEN the coin “Then 1”. Again, it sounds a little complicated, it’s better to show you when it comes to things like Sequence, so we’ll do just that.
Step #8 From the “Then 1” pin of the “Sequence” node (NOT “Then 0”), drag to the right. When the CBL (“Compact Blueprint Library” pops open, search for “Draw Material Simple”. This will create a “Draw Material Simple” node, which is what we’ll be using to put our Coin material onto our HUD.
89
As you can see in the Screenshot just above, I’ve already set the properties for my Draw Material Simple, so we’re going to that now!
Step #9 If you can’t make out the image for whatever reason, here are the options we need to set:
Target: Leave as it is (Self).
Material: Select your “MAT_Coin” Material.
Screen X: Leave this for now (0.0).
Screen Y: Set this to 100.
Screen W: Set this to 100.
Screen H: Set this to 100.
Scale: Leave this as 1.
Scale Position: Leave this unchecked.
We need to get the right coordinates for Screen X, so we’ll use the “Size X” we set earlier and minus 250 to get the correct screen placement:
Step #10 From the Variable Library on the left hand side of the screen, Click and drag “SizeX” into the Blueprint (Underneath the Sequence preferably). The Blueprint will then give you two options: “Get” or “Set”. Since we want to get the value, select Get.
Step #11 From the newly created “Size X”, drag the empty pin to the right and in the CBL, search for “Float Int” and select “To Float (Int)”.
You can now see that the turquoise “Size X” is now technically outputting a green “Float”, which would fit in perfectly to our “Screen X” pin of our Draw Material Simple BUT we first need to subtract 250 otherwise it’ll put our Material in a weird place.
90