1 00:00:00,000 --> 00:00:05,840 In this lesson, we'll create the slideshow scene to display text and a button. 2 00:00:06,329 --> 00:00:08,420 We're going to start with an empty scene. 3 00:00:08,450 --> 00:00:10,280 If you don't have an empty tab, 4 00:00:10,310 --> 00:00:15,200 you can click the plus button, to add a new scene at the top of the interface. 5 00:00:15,230 --> 00:00:18,840 Then you want to click the user interface 6 00:00:18,870 --> 00:00:22,920 to create a new control node that takes the entire game window. 7 00:00:22,950 --> 00:00:26,540 We're going to rename this one, The Slideshow. 8 00:00:26,570 --> 00:00:32,460 We will add text and a button that we want to align vertically. 9 00:00:32,490 --> 00:00:35,440 We can use a VBoxContainer to achieve that. 10 00:00:35,460 --> 00:00:41,080 So select the slideshow node, press Ctrl + A to add a new VBoxContainer. 11 00:00:41,110 --> 00:00:44,620 You can type Vbox to find it and press enter. 12 00:00:44,650 --> 00:00:47,160 The VBoxContainer is a bit small. 13 00:00:47,180 --> 00:00:50,520 Now we want it to fit the parent node. 14 00:00:50,550 --> 00:00:56,520 So we're going to select the VBoxContainer and go to Layout -> Full Rect. 15 00:00:56,550 --> 00:01:00,940 That makes it anchor and resize to fit the parent. 16 00:01:01,829 --> 00:01:07,486 With that, we can add our label and button as children of the VBoxContainer. 17 00:01:07,510 --> 00:01:10,640 So press Ctrl + A, add a new label, 18 00:01:11,429 --> 00:01:16,320 and then select the VBoxContainer again, Ctrl + A to add a button. 19 00:01:16,350 --> 00:01:18,520 All right, we have a problem. 20 00:01:18,550 --> 00:01:23,000 The label and button are tucked at the top of the interface. 21 00:01:23,010 --> 00:01:23,960 We don't want that. 22 00:01:23,990 --> 00:01:27,190 We'd rather want them to be centered. 23 00:01:27,390 --> 00:01:29,143 Select the VBoxContainer. 24 00:01:29,144 --> 00:01:31,400 And we're going to change the alignment property. 25 00:01:31,430 --> 00:01:33,960 It's a property of the box containers 26 00:01:33,990 --> 00:01:38,400 that allows you to center them in the available space. 27 00:01:38,430 --> 00:01:40,400 Because it's a VBoxContainer, 28 00:01:40,430 --> 00:01:45,300 changing the alignment center Centers the children vertically. 29 00:01:45,520 --> 00:01:50,520 Now another problem is how wide our nodes are. 30 00:01:50,550 --> 00:01:53,840 So we want to make them a bit smaller. 31 00:01:53,870 --> 00:01:56,857 We're going to select the slideshow node, 32 00:01:57,050 --> 00:02:00,714 ensure that we have the select mode active in the toolbar 33 00:02:00,914 --> 00:02:05,486 and alt click and drag on one of the resize handles 34 00:02:05,755 --> 00:02:08,929 to make the slideshow centered on the screen. 35 00:02:10,520 --> 00:02:13,744 We can add a bit of text to both the label and button 36 00:02:13,745 --> 00:02:15,960 to better see what's happening in there. 37 00:02:15,990 --> 00:02:21,560 So we're going to add sample text to the label and for the button, 38 00:02:21,590 --> 00:02:26,720 and we're going to write "Next" because this button will take us to the next slide. 39 00:02:26,750 --> 00:02:32,729 In both cases, you have a text property in the Inspector where you can set the text. 40 00:02:34,680 --> 00:02:38,760 Now the label has an issue at the moment. 41 00:02:38,790 --> 00:02:43,920 If we add more text, if we add longer lines of text, it's going to resize. 42 00:02:43,950 --> 00:02:47,240 It's going to push the interface to the right. 43 00:02:47,270 --> 00:02:50,200 To avoid that, we turn on Autowrap, 44 00:02:50,230 --> 00:02:55,640 which will make the text wrap and retain the width of the label node. 45 00:02:55,670 --> 00:02:59,966 Then we're going to give it a bigger default size, 46 00:03:00,166 --> 00:03:04,720 just so that there's enough space to whatever text we put in there 47 00:03:04,750 --> 00:03:10,980 with the label node selected, expand the Rect category in the Inspector. 48 00:03:11,010 --> 00:03:14,360 And if you go down, you can see there's a Min size in there. 49 00:03:14,390 --> 00:03:18,800 This is the minimum size of a Control node. 50 00:03:18,830 --> 00:03:23,240 We can change the vertical size the y axis 51 00:03:23,270 --> 00:03:28,600 to something like 140 pixels to make the box a bit tall. 52 00:03:28,630 --> 00:03:31,760 That way the text will always start at the same position. 53 00:03:31,790 --> 00:03:36,160 And even if it wraps, it will always be contained in the same box. 54 00:03:36,571 --> 00:03:38,960 The next thing is the button. 55 00:03:38,990 --> 00:03:43,400 The button shouldn't be that wide. It looks a bit off at the moment. 56 00:03:43,430 --> 00:03:46,371 So we're going to change its properties. 57 00:03:47,160 --> 00:03:49,600 What happens in there is that, by default, 58 00:03:49,630 --> 00:03:55,800 our label and button are set to fill the space the container gives them. 59 00:03:55,830 --> 00:04:01,440 The VBoxContainer takes control of the node's vertical size. 60 00:04:01,800 --> 00:04:05,529 You can see, it limits it to the minimum size of the node, 61 00:04:05,930 --> 00:04:11,600 but it allows them to expand horizontally, which is what they are doing here. 62 00:04:11,630 --> 00:04:15,040 So want to select the button and change that property. 63 00:04:15,070 --> 00:04:17,200 This is called a size flag. 64 00:04:17,220 --> 00:04:18,720 So with the button selected, 65 00:04:18,750 --> 00:04:24,920 go to the Inspector, go down to the Size Flags and uncheck Fill. 66 00:04:24,950 --> 00:04:30,240 This will make the button align to the left of its parent container. 67 00:04:30,270 --> 00:04:34,960 We can center it horizontally by turning on Shrink Center. 68 00:04:34,980 --> 00:04:38,843 You want to be careful to change your horizontal size flags, 69 00:04:38,886 --> 00:04:41,564 because you can see there are vertical ones as well, 70 00:04:41,565 --> 00:04:45,460 which control and how the button resizes vertically. 71 00:04:46,029 --> 00:04:47,720 Okay, we're almost done. 72 00:04:47,750 --> 00:04:50,440 The button is just a bit small to my taste. 73 00:04:50,470 --> 00:04:56,760 So we're going to expand the Rect category again and change the Min size. 74 00:04:56,780 --> 00:04:59,760 This time with the X and y axis. 75 00:04:59,780 --> 00:05:01,400 You can pick whatever you like. 76 00:05:01,420 --> 00:05:04,280 Something like 80,40 pixels. 77 00:05:04,300 --> 00:05:05,560 Seems good to me. 78 00:05:05,590 --> 00:05:09,143 That makes the button a bit bigger and a bit easier to click. 79 00:05:10,543 --> 00:05:13,360 With that, we have one last step to do. 80 00:05:13,390 --> 00:05:18,620 We have prepared a script for you to attach to the slideshow. 81 00:05:18,640 --> 00:05:20,400 It's just to save you a bit of typing. 82 00:05:20,420 --> 00:05:24,520 So in the FileSystem dock in the bottom left, in the search bar, 83 00:05:24,540 --> 00:05:29,440 you want to type slideshow, you'll find a Slideshow.gd file, 84 00:05:29,470 --> 00:05:34,014 and you're going to click and drag it onto the slideshow node. 85 00:05:34,829 --> 00:05:41,356 Then you can click the script icon to open the script. In the script editor, 86 00:05:42,057 --> 00:05:45,234 you can see it contains a variable named slides 87 00:05:45,235 --> 00:05:51,060 that variable is an array, and that array contains dictionaries. 88 00:05:51,090 --> 00:05:54,820 Each of these dictionaries represents one slide. 89 00:05:54,850 --> 00:05:57,000 Currently it only has text, 90 00:05:57,030 --> 00:06:01,120 which we'll use in the next lesson to display some text. 91 00:06:01,150 --> 00:06:02,800 But while using dictionaries, 92 00:06:02,830 --> 00:06:07,320 because we'll later add pictures that can change depending on the slide. 93 00:06:07,350 --> 00:06:09,040 So in each dictionary, 94 00:06:09,070 --> 00:06:16,386 we'll add a texture that we use in the last lesson in the series. 95 00:06:16,686 --> 00:06:21,840 With that we're ready to add code and display the text in our slides variable. 96 00:06:21,860 --> 00:06:23,600 See you in the next lesson.