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.