Advanced Blueprint Concepts 521
a box volume compone nt to our ball so that walking near the ball is enough to
destroy the acto r.
16. Open the Ball blue print and find the components section.
17. Add a Box compo nent and name it Interse ct Volume.
18. You will need to increa se its size using the Scale Too l. Bring up the scale tool by
pressing the R key on your keyboard.
19. Increase the size of the b ox so that it is about three times the width and h eight of
the ball. Alternatively, you can man ually type the scale valu es if you prefer. The
magic number used in the image is 4×4×4.
20. Open the Ball blueprint and find the components section. Add a box component
and name it Intersect Volume. You will need to increase its size using the Scale
Tool. Bring up the scale tool by pressing R on your keyboard and increase the size
of the box so that it is about three tim es the width and height of the ball. You can
also manually type the scale values if you prefer. The magic number used in the
image is 4×4×4.
21. Keep in min d that this box is invisible to the player. If we wanted to make it visible
in game for debugging purposes, we could simply enable it in the Detail window.
22. Compile and save the bluep rint.
23. Return to the main level editor an d play the game. When a ball spawns, walk up
to it to destroy it.
What Happened in TUTORIAL 8.4. . .
We successfully added the destroy functionality to the existing blueprints. We
used a delegate to pass an event into a blueprint. This event con ta ined function-
ality that we implemented in a completely different blu eprint.
We had to do it this way bec ause the Ball blueprint does not exist when the
game starts. We created our own event and assigned it to an existing event in the
ball blue print. Even though we did not implement any events ourselves in the
Ball blueprint, there are still events that are a part of the paren t class (Actor in
this case) th at are inherited by our custom blueprint.
The OverlapBall event we created is bound to the On Actor Begin
Overlap event inside the Ball blueprint. When On Actor Be gin Overlap
is fired from the Ball blueprint, all events that are bound to it will also fire.
Now that we can spawn balls and our pla yer can pick them up, we will pass data
between blueprints and cre ate a custom HUD from scratch using the existing HUD
as reference.
522 Game Development and Simulation with Unreal Technology
8.4 CREATING THE HUD
In the previous section, we set up a system to spawn balls on a timer and destroy
them as the play er approaches. For th is section , we will be expandin g up on that
functionality. The first perso n template provides us with a HUD blueprint or Heads
Up Display that, a t this time, only contains a crosshair in the middle of the screen.
We will be creating a custom HUD to display the remaining time, high-score, and
current score. Almost all video games these days have some sort of persistent HUD
to display score, time, kills, enemies, maps, items, and many other things. Using
blueprints to create a HUD is a fairly simple pro cess while still being quite powerful.
Just like in the case with other blueprint classes, H U D s can be made entirely using
blueprints.
FIND ON THE WEBSITE
To find updates to this tutorial and upda te d instructions about its implementa-
tion on othe r UE4 versions, p le ase visit the book’s companion Website at:
http://www.RVRLAB.com/UE4Book/
TUTORIAL 8.5 Creating the MyHUD Blueprint
The first person template gives us a HUD by default; however, if we needed to
create one from scratch it would be beneficial to learn how.
CREATING TH E HUD
First we will h ave to create the HUD blueprint. To do this:
1. Navigate to the Blueprints folder in the Con tent Browser.
2. Create a new blueprint.
3. When you pick a parent class, you will need to sear ch for HUD at the bottom a s
the HUD class contains specific functions just for drawing the HUD on the screen.
4. Once you have found the parent class, name your blueprint MyNewHUD and save
the project.
5. Open the new b lueprint and go to the blank event graph.
6. The main event that we will be using is called Event Receive Draw HUD,
which will constantly u pdate th e HUD and draw the infor mation we want.
7. In th is case, we are just going to p la ce th e crosshair back on the scree n.
8. Using th e exec (white) pin, attach a function called Draw Texture. As you can
see from this function, we are given quite a lot of options.
9. To position the crosshair in the center of the screen, we need to get the halfway
point for the width and height of the scr een. We ca n do this by taking the Size X
and Size Y pin s and dividing them in half with a math function.
10. Drag a wire from Size X and place a div ide function.
Advanced Blueprint Concepts 523
FIGURE 8.18: Calculating the Crosshair HUD Location.
11. Make the func tion divide by 2.
12. Drag a wire from Size Y and place a divide function.
13. Make the func tion divide by 2.
14. These two variables are exact integers bec ause they match the r esolution of the
play window. However, the position of our texture on the screen can be placed
with a higher level of precision.
15. If drag from the divide fun ctions over to the Screen X and Screen Y tabs of the
Draw Texture node, an extra function is automatically placed in-between to con-
vert the Integer into Float values (see Figure 8.18).
16. Next, go to the Texture pin and Left-click on the drop-down menu.
17. Find the Crosshair texture and select it. T his is a texture that has been designed
specifically for use with the HUD.
18. At this point, the HUD should be set up to draw the texture in the middle of the
screen.
19. But, let us first add a Tint Color just as they have done in the default MyHUD
blueprint. To do this, perform the following tasks:
a. Click the colored squa re to the right of Tint Color.
b. Select the c olor you want or you can drag off from the pin and add a Make
LinearColor node to accomplish the same thing.
c. In the original MyHUD blueprint, a value of “1” is used for the RGB values
as well as the alpha channel for a completely opaque texture that is not
colored in any way.
d. Play with these values by changing them from zero to on e as you see fit.
e. Make sure you give the alpha a value of 1 so that it is not tra nsparent.
20. Next, we need to give the texture a Width and Height in pixels, just as it is done
in the MyHUD blueprint. If you increase this value, it will inc rease the size of the
crosshair.
a. In our case, give the Screen W and Screen H pins the value 32.
b. This will draw the c rosshair twice the size of the original.
c. The last values we need to change are the Texture UWidth and the
Texture VHeight.
d. If we give both the value of 1, it w ill fill the allotted space with the texture
only one time in the X and Y directions.
21. The result sho uld look like Figure 8.19.
524 Game Development and Simulation with Unreal Technology
FIGURE 8.19: Crosshair in the HUD Completed.
22. Compile and Save the blueprint.
ESTABLISHING TH E NEW HUD
When you compile a nd save, the new HUD we created still will not be shown
on th e screen. The HUD to be drawn on the screen is actually a variable inside
the main Gam eMode blueprint. In this case, it is called MyGame. This blueprint
was generated automatically w hen we used the First Person Template.
23. Open the MyGame bluep rint from the Content Browser.
24. Alternatively, you can edit its settings by going to the project settings:
a. Left-click on Maps a nd Modes.
b. Look under the Defaul t Modes tab.
25. For now, simply open the MyGame blueprint and change the HUD Clas s value to
MyNewHUD.
26. Compile and save the blueprint before closing it.
27. Now at this point, w hen you play the ga me, you will be seeing your own cu s-
tom crosshair from th e HUD blueprint we just created. You should notice it is a
different color and is twice as large as it was before (see Figure 8.20).
What Happened in TUTORIAL 8.5. . .
In the previous tutorial, we learned how to build a HUD from scratch and have it
appear in o ur game. Drawing a texture on the screen is simple but it could take
some time to get it position ed exactly where you want it. It is a good idea to plan
Advanced Blueprint Concepts 525
FIGURE 8.20: Your New HUD in Game.
out how you want the HUD to look before you start trying to work it out in the
engine. In the next tutorial, w e will continue building on this HUD by adding a
timer to the scree n.
FIND ON THE WEBSITE
To find updates to this tutorial and u pdated instructions about its implementa-
tion on other UE 4 versions, please visit the book’s companion Website at:
http://www.RVRLAB.com/UE4Book/
TUTORIAL 8.6 Adding t he Score
Our HUD so far only uses a texture to draw out a crosshair in the middle of
the screen. We want the HUD to also show some vital statistics to the player as
well, such as a timer, n umber of pickups, etc.
IMPORTING FONTS
The first thing we will be doing is migrating a font into our game’s folder from
the Content folder in the engine itself. We will use the Unreal Engine’s Engine
Fonts.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.