‫Hey, welcome back.
‫In this video, we're going to work on showing text on the screen to let us know that the game is starting.
‫And this is the first step to showing the countdown timer to let the player know that the game has not
‫quite started yet, but it will start soon.
‫Now, this is going to involve blueprint implementable events.
‫A Blueprint Implementable Event is a C++ function that we can call from C++, but we actually implement
‫the functionality on the blueprint side.
‫So we may have our C++ class such as the game mode, and we can have a function marked as a blueprint,
‫implementable event, and then we can implement that behavior in blueprints.
‫So when we call the C++ function marked as a blueprint implementable event, then the event in the blueprint
‫will be fired off.
‫And any blueprint logic that we connect to that event in the blueprint will be called.
‫So I'm going to create a blueprint implementable event function here in tune tanks, game modes and
‫blueprint implementable events cannot be private.
‫So I'm going to add this to the protected section.
‫Now I'm going to make this a void function and I'm simply going to call this start game.
‫Now, in order to make this a blueprint implementable event, I have to give it a U function macro with
‫the U function.
‫Specify the blueprint implementable event.
‫Now, once we mark this blueprint implementable event, we don't even need to give it a function body
‫here in C++.
‫Unreal Engine will expect us to implement the functionality for this in blueprints, but we can call
‫it from C++ and that's exactly what we're going to do here in Handle Game Start.
‫So just after we've set the tank and the player controller variables, I'm going to call start game
‫and now we can compile this.
‫And hopping back here in the editor, I'm going to open BP tune tanks game mode and here is where we
‫can implement the function.
‫So if we right click and type start game, then here is the event start game that was created as soon
‫as we declared the function and gave it the function macro with blueprint implementable event.
‫So on the C++ side, we're calling this and in blueprints, this event is responding to it.
‫We can test this out with a simple print string node and for the string we can say Start game.
‫Now if we hit play, I'll see start game at the top left.
‫So we know that our blueprint implementable event is working.
‫Now, what we'd like this event to do is to show a widget which contains text informing the player that
‫the game is about to start, which means we need to create a widget to show.
‫So I'm going to create a new folder in the blueprints folder and I'm going to call this widgets and
‫I'm going to double click widgets.
‫And here is where I'm going to create a new widget blueprint.
‫Now if I right click and go to user interface, here is Widget Blueprint.
‫Now if I click this, I'll create a new widget blueprint and I'm going to call this W BP for Widget
‫Blueprint, underscore start game widget.
‫And if I double click this, then I'll open the Widget Blueprint editor and you'll see that it looks
‫quite a bit different than the Blueprint editor we're used to seeing.
‫And that's because this is for a widget.
‫Widgets are good for displaying things on the screen like text.
‫Now there's a lot here and we're only going to make a very basic widget that shows text.
‫There are a number of different types of elements we can add to a widget blueprint such as borders,
‫buttons, checkboxes, images and so on.
‫But what we're interested in is this one right here which says Text.
‫Now look down here in the hierarchy panel, you'll see that we have the overall WB start game widget
‫at the top.
‫And if we click on that, we can change properties for this widget.
‫Now we can drag in widget elements onto this hierarchy.
‫So I'm going to search the palette for canvas panel and drag that down into my hierarchy.
‫Now a canvas panel allows us to place widget elements and set them at a desired location on the screen
‫so we can drag a text element straight onto the graph.
‫And you'll see in the hierarchy this new item under canvas panel.
‫And it says, Text.
‫Text block.
‫Now, this text block in quotes is the text that's automatically set for this text widget.
‫And here in the details panel, with this text widget selected under content, we see a text property
‫and it's set to text block.
‫But we can set this to any text we want, such as get ready.
‫Now, after setting this to get ready, you'll see that the text here on the screen says, Get ready.
‫So the Widget Blueprint editor allows us to customize our widgets notice at the top left of the screen,
‫this medallion thing here, this is called an anchor.
‫Our text widget is placed on the screen relative to the anchor.
‫So if the screen size changes, the distance from that anchor will remain constant.
‫And we can change the anchor if we want to.
‫For instance, we can set our text widget relative to an anchor in the middle of the screen by going
‫over to the details panel and under slot we see anchors.
‫And if I click the dropdown, I can select this icon which has a square in the middle.
‫If I select that now, the anchor is in the center of the screen, and if I want my widget completely
‫centered, I can change its position X and Y here under the slot category so I can set this to zero
‫for position X and zero for position Y and scrolling with my mouse wheel to zoom in, you'll see that
‫it's upper left corner as in the middle of the screen.
‫Now this alignment field here can let us center this perfectly by choosing values of 0.54 X and 0.54
‫Y, and now it's completely centered in the middle of the screen.
‫Now for a start game widget, it's probably going to be appropriate to put this text a little bit higher
‫up.
‫So for Position Y, I can click and drag this to the left, which will make that position Y value negative
‫in the widget blueprint editor the y axis points downward.
‫So if we want to raise our text widget up, we're going to make that position y a lower value.
‫I'm going to place it up here at about -300.
‫Now down in the appearance category, I can change a number of properties for this text.
‫If I click the dropdown for font, I can change the font size to say something like 42.
‫Now for typeface instead of bold.
‫I like the regular typeface.
‫I think it looks a bit better now.
‫Notice that our text widget text is larger than the green rectangle here, but we can resize this green
‫rectangle.
‫And as I'm changing the rectangle, you'll see here in the details panel that size X and size y are
‫changing.
‫Now, notice position X has moved a bit since I've changed it.
‫I can put it back to zero and since alignment for the x is 0.5, it's perfectly centered.
‫So now I have a widget that says Get ready.
‫The only thing left to do is to add this to the viewport so we can see it on the screen.
‫You'll notice that if I hit play and start playing the game that I did not see that widget on the screen.
‫That's because we have to actively add this to the screen, and that's why we created this blueprint
‫implementable event in the game mode so that we can add this widget to the screen here.
‫So let's talk about how to do that.
‫Now.
‫The way to create a widget from blueprints is by the use of a create widget node.
‫You can right click in the event graph for any blueprint and start typing the name of a node and then
‫select that particular node.
‫The node we need is create widget.
‫Now you'll see that it says Create Coolness Widget.
‫And that's because as soon as I added the Create Widget node, I selected the Widget Blueprint class
‫here in the class dropdown.
‫This is necessary so that Unreal Engine knows which widget class to create.
‫Now, after using a create widget node, we use an add to viewport node to actually add this widget
‫to the viewport and then we can see it on the screen in the game.
‫Notice that the execution wires are connected and also that the create widget node returns this blue
‫output and this should be connected to the target input in add to viewport since add to viewport needs
‫to know which widget to add to the viewport and the create widget node returns the value of that widget.
‫So now that you know how to create a widget in blueprints, you're going to go into the BP tune tanks
‫game mode class and use a create widget node.
‫You're going to hook this up from our blueprint implementable event execution wire the.
‫We called Start Game.
‫Now in the Create Widget node, we need to select the widget class to create so select WB start game
‫widget, that new widget blueprint that we just created and then use an add to viewport node to actually
‫add this new widget to the viewport and hook up the execution wires.
‫And don't forget to hook up the return value from create widget to the target input in add to viewport.
‫So pause the video and add these nodes to the tune tank's game mode blueprint now.
‫So I'm here in the tune Tanks Game Mode Blueprint and I'm going to right click and type create widget
‫and choose the Create Widget Node.
‫Now notice it says Construct None.
‫And that's because it's going to say that until we select the appropriate widget class in the class
‫dropdown.
‫But before I do that, I'm going to hook up the execution wire from events start game.
‫So we actually get this functionality executed as soon as our blueprint implementable event start game
‫is called from C++.
‫Now for the class dropdown, I'm going to select WP Start Game Widget and now the Node's title changes
‫to say Create WP Start Game Widget Widget.
‫So now we can see that this is a create widget node.
‫Now I'm going to click the execution wire and drag out and then type add to viewport.
‫And then if I select add to viewport, then the execution wires are automatically connected for me,
‫but it doesn't connect the return value from create widget to the target input for add to viewport.
‫So I need to click and drag that myself.
‫So now when Start Game gets called from C++ and the game mode class, we will execute this blueprint
‫logic which will result in creating a new widget based on WP Start Game widget and then we will add
‫it to the viewport.
‫So I'm going to click play and there's the Get Ready widget.
‫Now we mentioned that this is going to show a countdown timer, but we haven't implemented that functionality
‫just yet, so that's coming soon.
‫So in summary, we created the Start Game Widget Blueprint and for now it just has text on it that says
‫Get ready.
‫We also used a create widget node and an add to viewport node to add this widget to the viewport so
‫we can see it as soon as the game starts.
‫And we initiated this functionality using our blueprint implementable event that we created in the game
‫mode C++ class called Start Game in the videos to come, we're going to change the text in this widget
‫at runtime so that it shows how much time is left on that start game timer so the player knows how much
‫time to wait before they can start actually playing the game.
‫I'll see you soon.