1 00:00:04,470 --> 00:00:05,770 ‫Hey, welcome back. 2 00:00:05,790 --> 00:00:12,240 ‫In this video, we're going to work on showing text on the screen to let us know that the game is starting. 3 00:00:12,240 --> 00:00:18,240 ‫And this is the first step to showing the countdown timer to let the player know that the game has not 4 00:00:18,240 --> 00:00:21,140 ‫quite started yet, but it will start soon. 5 00:00:21,150 --> 00:00:24,900 ‫Now, this is going to involve blueprint implementable events. 6 00:00:24,930 --> 00:00:32,280 ‫A Blueprint Implementable Event is a C++ function that we can call from C++, but we actually implement 7 00:00:32,280 --> 00:00:35,070 ‫the functionality on the blueprint side. 8 00:00:35,070 --> 00:00:41,910 ‫So we may have our C++ class such as the game mode, and we can have a function marked as a blueprint, 9 00:00:41,910 --> 00:00:47,310 ‫implementable event, and then we can implement that behavior in blueprints. 10 00:00:47,310 --> 00:00:54,570 ‫So when we call the C++ function marked as a blueprint implementable event, then the event in the blueprint 11 00:00:54,570 --> 00:00:55,920 ‫will be fired off. 12 00:00:55,920 --> 00:01:01,890 ‫And any blueprint logic that we connect to that event in the blueprint will be called. 13 00:01:02,160 --> 00:01:08,640 ‫So I'm going to create a blueprint implementable event function here in tune tanks, game modes and 14 00:01:08,640 --> 00:01:11,310 ‫blueprint implementable events cannot be private. 15 00:01:11,310 --> 00:01:14,220 ‫So I'm going to add this to the protected section. 16 00:01:14,220 --> 00:01:19,080 ‫Now I'm going to make this a void function and I'm simply going to call this start game. 17 00:01:19,080 --> 00:01:25,380 ‫Now, in order to make this a blueprint implementable event, I have to give it a U function macro with 18 00:01:25,380 --> 00:01:26,160 ‫the U function. 19 00:01:26,160 --> 00:01:30,570 ‫Specify the blueprint implementable event. 20 00:01:30,690 --> 00:01:36,390 ‫Now, once we mark this blueprint implementable event, we don't even need to give it a function body 21 00:01:36,390 --> 00:01:37,800 ‫here in C++. 22 00:01:37,800 --> 00:01:43,680 ‫Unreal Engine will expect us to implement the functionality for this in blueprints, but we can call 23 00:01:43,680 --> 00:01:49,110 ‫it from C++ and that's exactly what we're going to do here in Handle Game Start. 24 00:01:49,110 --> 00:01:55,260 ‫So just after we've set the tank and the player controller variables, I'm going to call start game 25 00:01:56,070 --> 00:01:57,840 ‫and now we can compile this. 26 00:01:57,840 --> 00:02:04,170 ‫And hopping back here in the editor, I'm going to open BP tune tanks game mode and here is where we 27 00:02:04,170 --> 00:02:05,700 ‫can implement the function. 28 00:02:05,700 --> 00:02:13,380 ‫So if we right click and type start game, then here is the event start game that was created as soon 29 00:02:13,380 --> 00:02:19,980 ‫as we declared the function and gave it the function macro with blueprint implementable event. 30 00:02:19,980 --> 00:02:26,580 ‫So on the C++ side, we're calling this and in blueprints, this event is responding to it. 31 00:02:26,610 --> 00:02:33,390 ‫We can test this out with a simple print string node and for the string we can say Start game. 32 00:02:33,600 --> 00:02:37,650 ‫Now if we hit play, I'll see start game at the top left. 33 00:02:37,650 --> 00:02:41,370 ‫So we know that our blueprint implementable event is working. 34 00:02:41,370 --> 00:02:49,530 ‫Now, what we'd like this event to do is to show a widget which contains text informing the player that 35 00:02:49,530 --> 00:02:53,880 ‫the game is about to start, which means we need to create a widget to show. 36 00:02:53,880 --> 00:03:00,960 ‫So I'm going to create a new folder in the blueprints folder and I'm going to call this widgets and 37 00:03:00,960 --> 00:03:02,370 ‫I'm going to double click widgets. 38 00:03:02,370 --> 00:03:05,730 ‫And here is where I'm going to create a new widget blueprint. 39 00:03:05,940 --> 00:03:11,010 ‫Now if I right click and go to user interface, here is Widget Blueprint. 40 00:03:11,040 --> 00:03:17,520 ‫Now if I click this, I'll create a new widget blueprint and I'm going to call this W BP for Widget 41 00:03:17,520 --> 00:03:21,540 ‫Blueprint, underscore start game widget. 42 00:03:21,960 --> 00:03:27,240 ‫And if I double click this, then I'll open the Widget Blueprint editor and you'll see that it looks 43 00:03:27,240 --> 00:03:31,560 ‫quite a bit different than the Blueprint editor we're used to seeing. 44 00:03:31,560 --> 00:03:33,840 ‫And that's because this is for a widget. 45 00:03:33,840 --> 00:03:37,860 ‫Widgets are good for displaying things on the screen like text. 46 00:03:37,890 --> 00:03:43,590 ‫Now there's a lot here and we're only going to make a very basic widget that shows text. 47 00:03:43,620 --> 00:03:50,310 ‫There are a number of different types of elements we can add to a widget blueprint such as borders, 48 00:03:50,310 --> 00:03:53,580 ‫buttons, checkboxes, images and so on. 49 00:03:53,580 --> 00:03:58,140 ‫But what we're interested in is this one right here which says Text. 50 00:03:58,140 --> 00:04:05,280 ‫Now look down here in the hierarchy panel, you'll see that we have the overall WB start game widget 51 00:04:05,280 --> 00:04:06,180 ‫at the top. 52 00:04:06,180 --> 00:04:10,500 ‫And if we click on that, we can change properties for this widget. 53 00:04:10,530 --> 00:04:14,040 ‫Now we can drag in widget elements onto this hierarchy. 54 00:04:14,040 --> 00:04:20,070 ‫So I'm going to search the palette for canvas panel and drag that down into my hierarchy. 55 00:04:21,590 --> 00:04:28,880 ‫Now a canvas panel allows us to place widget elements and set them at a desired location on the screen 56 00:04:28,880 --> 00:04:33,020 ‫so we can drag a text element straight onto the graph. 57 00:04:33,020 --> 00:04:37,910 ‫And you'll see in the hierarchy this new item under canvas panel. 58 00:04:37,910 --> 00:04:39,360 ‫And it says, Text. 59 00:04:39,360 --> 00:04:40,310 ‫Text block. 60 00:04:40,310 --> 00:04:47,450 ‫Now, this text block in quotes is the text that's automatically set for this text widget. 61 00:04:47,450 --> 00:04:54,740 ‫And here in the details panel, with this text widget selected under content, we see a text property 62 00:04:54,740 --> 00:04:57,170 ‫and it's set to text block. 63 00:04:57,170 --> 00:05:00,860 ‫But we can set this to any text we want, such as get ready. 64 00:05:01,250 --> 00:05:06,620 ‫Now, after setting this to get ready, you'll see that the text here on the screen says, Get ready. 65 00:05:06,710 --> 00:05:13,940 ‫So the Widget Blueprint editor allows us to customize our widgets notice at the top left of the screen, 66 00:05:13,940 --> 00:05:17,810 ‫this medallion thing here, this is called an anchor. 67 00:05:17,840 --> 00:05:22,100 ‫Our text widget is placed on the screen relative to the anchor. 68 00:05:22,100 --> 00:05:27,560 ‫So if the screen size changes, the distance from that anchor will remain constant. 69 00:05:27,560 --> 00:05:29,990 ‫And we can change the anchor if we want to. 70 00:05:30,020 --> 00:05:35,690 ‫For instance, we can set our text widget relative to an anchor in the middle of the screen by going 71 00:05:35,690 --> 00:05:39,470 ‫over to the details panel and under slot we see anchors. 72 00:05:39,470 --> 00:05:45,500 ‫And if I click the dropdown, I can select this icon which has a square in the middle. 73 00:05:45,500 --> 00:05:51,080 ‫If I select that now, the anchor is in the center of the screen, and if I want my widget completely 74 00:05:51,080 --> 00:05:58,430 ‫centered, I can change its position X and Y here under the slot category so I can set this to zero 75 00:05:58,430 --> 00:06:05,540 ‫for position X and zero for position Y and scrolling with my mouse wheel to zoom in, you'll see that 76 00:06:05,540 --> 00:06:08,510 ‫it's upper left corner as in the middle of the screen. 77 00:06:08,510 --> 00:06:17,180 ‫Now this alignment field here can let us center this perfectly by choosing values of 0.54 X and 0.54 78 00:06:17,180 --> 00:06:21,350 ‫Y, and now it's completely centered in the middle of the screen. 79 00:06:21,440 --> 00:06:27,770 ‫Now for a start game widget, it's probably going to be appropriate to put this text a little bit higher 80 00:06:27,770 --> 00:06:28,250 ‫up. 81 00:06:28,250 --> 00:06:35,840 ‫So for Position Y, I can click and drag this to the left, which will make that position Y value negative 82 00:06:35,840 --> 00:06:40,250 ‫in the widget blueprint editor the y axis points downward. 83 00:06:40,250 --> 00:06:46,250 ‫So if we want to raise our text widget up, we're going to make that position y a lower value. 84 00:06:46,250 --> 00:06:49,130 ‫I'm going to place it up here at about -300. 85 00:06:49,130 --> 00:06:55,460 ‫Now down in the appearance category, I can change a number of properties for this text. 86 00:06:55,460 --> 00:07:01,730 ‫If I click the dropdown for font, I can change the font size to say something like 42. 87 00:07:01,730 --> 00:07:04,070 ‫Now for typeface instead of bold. 88 00:07:04,070 --> 00:07:06,140 ‫I like the regular typeface. 89 00:07:06,140 --> 00:07:07,970 ‫I think it looks a bit better now. 90 00:07:07,970 --> 00:07:14,300 ‫Notice that our text widget text is larger than the green rectangle here, but we can resize this green 91 00:07:14,300 --> 00:07:15,230 ‫rectangle. 92 00:07:15,230 --> 00:07:22,010 ‫And as I'm changing the rectangle, you'll see here in the details panel that size X and size y are 93 00:07:22,010 --> 00:07:22,880 ‫changing. 94 00:07:22,880 --> 00:07:26,270 ‫Now, notice position X has moved a bit since I've changed it. 95 00:07:26,270 --> 00:07:32,180 ‫I can put it back to zero and since alignment for the x is 0.5, it's perfectly centered. 96 00:07:32,180 --> 00:07:35,540 ‫So now I have a widget that says Get ready. 97 00:07:35,570 --> 00:07:40,400 ‫The only thing left to do is to add this to the viewport so we can see it on the screen. 98 00:07:40,400 --> 00:07:46,370 ‫You'll notice that if I hit play and start playing the game that I did not see that widget on the screen. 99 00:07:46,370 --> 00:07:51,530 ‫That's because we have to actively add this to the screen, and that's why we created this blueprint 100 00:07:51,530 --> 00:07:56,960 ‫implementable event in the game mode so that we can add this widget to the screen here. 101 00:07:56,960 --> 00:07:59,090 ‫So let's talk about how to do that. 102 00:07:59,420 --> 00:07:59,840 ‫Now. 103 00:07:59,840 --> 00:08:05,930 ‫The way to create a widget from blueprints is by the use of a create widget node. 104 00:08:05,960 --> 00:08:11,870 ‫You can right click in the event graph for any blueprint and start typing the name of a node and then 105 00:08:11,870 --> 00:08:13,760 ‫select that particular node. 106 00:08:13,790 --> 00:08:16,040 ‫The node we need is create widget. 107 00:08:16,040 --> 00:08:20,990 ‫Now you'll see that it says Create Coolness Widget. 108 00:08:20,990 --> 00:08:27,020 ‫And that's because as soon as I added the Create Widget node, I selected the Widget Blueprint class 109 00:08:27,020 --> 00:08:29,150 ‫here in the class dropdown. 110 00:08:29,150 --> 00:08:34,340 ‫This is necessary so that Unreal Engine knows which widget class to create. 111 00:08:34,370 --> 00:08:40,880 ‫Now, after using a create widget node, we use an add to viewport node to actually add this widget 112 00:08:40,880 --> 00:08:45,290 ‫to the viewport and then we can see it on the screen in the game. 113 00:08:45,320 --> 00:08:52,700 ‫Notice that the execution wires are connected and also that the create widget node returns this blue 114 00:08:52,700 --> 00:08:59,300 ‫output and this should be connected to the target input in add to viewport since add to viewport needs 115 00:08:59,300 --> 00:09:06,290 ‫to know which widget to add to the viewport and the create widget node returns the value of that widget. 116 00:09:06,290 --> 00:09:11,570 ‫So now that you know how to create a widget in blueprints, you're going to go into the BP tune tanks 117 00:09:11,570 --> 00:09:14,960 ‫game mode class and use a create widget node. 118 00:09:14,990 --> 00:09:20,390 ‫You're going to hook this up from our blueprint implementable event execution wire the. 119 00:09:20,500 --> 00:09:21,910 ‫We called Start Game. 120 00:09:21,910 --> 00:09:29,800 ‫Now in the Create Widget node, we need to select the widget class to create so select WB start game 121 00:09:29,800 --> 00:09:36,700 ‫widget, that new widget blueprint that we just created and then use an add to viewport node to actually 122 00:09:36,700 --> 00:09:40,960 ‫add this new widget to the viewport and hook up the execution wires. 123 00:09:40,960 --> 00:09:47,560 ‫And don't forget to hook up the return value from create widget to the target input in add to viewport. 124 00:09:47,560 --> 00:09:52,900 ‫So pause the video and add these nodes to the tune tank's game mode blueprint now. 125 00:09:56,670 --> 00:10:03,090 ‫So I'm here in the tune Tanks Game Mode Blueprint and I'm going to right click and type create widget 126 00:10:03,090 --> 00:10:05,700 ‫and choose the Create Widget Node. 127 00:10:05,730 --> 00:10:07,830 ‫Now notice it says Construct None. 128 00:10:07,830 --> 00:10:12,930 ‫And that's because it's going to say that until we select the appropriate widget class in the class 129 00:10:12,930 --> 00:10:13,600 ‫dropdown. 130 00:10:13,620 --> 00:10:18,210 ‫But before I do that, I'm going to hook up the execution wire from events start game. 131 00:10:18,210 --> 00:10:24,720 ‫So we actually get this functionality executed as soon as our blueprint implementable event start game 132 00:10:24,720 --> 00:10:26,700 ‫is called from C++. 133 00:10:26,970 --> 00:10:34,830 ‫Now for the class dropdown, I'm going to select WP Start Game Widget and now the Node's title changes 134 00:10:34,830 --> 00:10:38,700 ‫to say Create WP Start Game Widget Widget. 135 00:10:38,820 --> 00:10:41,880 ‫So now we can see that this is a create widget node. 136 00:10:41,910 --> 00:10:48,660 ‫Now I'm going to click the execution wire and drag out and then type add to viewport. 137 00:10:48,660 --> 00:10:54,720 ‫And then if I select add to viewport, then the execution wires are automatically connected for me, 138 00:10:54,720 --> 00:11:01,410 ‫but it doesn't connect the return value from create widget to the target input for add to viewport. 139 00:11:01,410 --> 00:11:04,070 ‫So I need to click and drag that myself. 140 00:11:04,080 --> 00:11:10,920 ‫So now when Start Game gets called from C++ and the game mode class, we will execute this blueprint 141 00:11:10,920 --> 00:11:18,330 ‫logic which will result in creating a new widget based on WP Start Game widget and then we will add 142 00:11:18,330 --> 00:11:19,500 ‫it to the viewport. 143 00:11:19,500 --> 00:11:23,220 ‫So I'm going to click play and there's the Get Ready widget. 144 00:11:23,400 --> 00:11:29,550 ‫Now we mentioned that this is going to show a countdown timer, but we haven't implemented that functionality 145 00:11:29,550 --> 00:11:32,220 ‫just yet, so that's coming soon. 146 00:11:32,490 --> 00:11:39,090 ‫So in summary, we created the Start Game Widget Blueprint and for now it just has text on it that says 147 00:11:39,090 --> 00:11:39,930 ‫Get ready. 148 00:11:40,260 --> 00:11:46,740 ‫We also used a create widget node and an add to viewport node to add this widget to the viewport so 149 00:11:46,740 --> 00:11:48,990 ‫we can see it as soon as the game starts. 150 00:11:48,990 --> 00:11:55,620 ‫And we initiated this functionality using our blueprint implementable event that we created in the game 151 00:11:55,620 --> 00:12:02,460 ‫mode C++ class called Start Game in the videos to come, we're going to change the text in this widget 152 00:12:02,460 --> 00:12:09,270 ‫at runtime so that it shows how much time is left on that start game timer so the player knows how much 153 00:12:09,270 --> 00:12:13,140 ‫time to wait before they can start actually playing the game. 154 00:12:13,860 --> 00:12:14,850 ‫I'll see you soon.