1
00:00:00,000 --> 00:00:00,000
Hello there.

2
00:00:00,000 --> 00:00:03,000
Our next goal is to layout in-game menu.

3
00:00:03,000 --> 00:00:06,000
That's going to be pretty simple with the setup we already have.

4
00:00:06,000 --> 00:00:09,000
What we're going to do here is to duplicate main menu.

5
00:00:10,000 --> 00:00:18,000
Let's just press control D to duplicate and rename this to just basically in game UI.

6
00:00:19,000 --> 00:00:21,000
Let's open this.

7
00:00:21,000 --> 00:00:25,000
We do need shop inside of in-game UI, but we need a mute button.

8
00:00:25,000 --> 00:00:30,000
I guess we could keep it and we could use settings button, but we need to change it by a bit.

9
00:00:30,000 --> 00:00:34,000
Let's rename these to pause button.

10
00:00:35,000 --> 00:00:40,000
Let's go to dark UI free and find something that fits the pose icon.

11
00:00:42,000 --> 00:00:43,000
Let's see.

12
00:00:45,000 --> 00:00:45,000
Hmm.

13
00:00:46,000 --> 00:00:47,000
Maybe Lockett would do.

14
00:00:47,000 --> 00:00:48,000
Why not?

15
00:00:48,000 --> 00:00:50,000
Kinda like lock the game.

16
00:00:50,000 --> 00:00:51,000
I think that's the good logic.

17
00:00:51,000 --> 00:00:53,000
So let's put it here.

18
00:00:53,000 --> 00:00:57,000
Now, to make it more clear for us, let's switch off Main menu UI.

19
00:00:57,000 --> 00:00:57,000
Yeah.

20
00:00:57,000 --> 00:01:00,000
This is what we're going to see in the in-game UI.

21
00:01:00,000 --> 00:01:03,000
We need this top to start button.

22
00:01:03,000 --> 00:01:04,000
Let's delete it.

23
00:01:04,000 --> 00:01:09,000
And honestly, I don't understand why it doesn't have a name on it, so let's fix it now.

24
00:01:09,000 --> 00:01:13,000
Button top to start button.

25
00:01:14,000 --> 00:01:15,000
Switch off main menu.

26
00:01:15,000 --> 00:01:22,000
Now in game we have balls, we have mute and we have info general info or when it gets better.

27
00:01:22,000 --> 00:01:23,000
Name would be info bar.

28
00:01:23,000 --> 00:01:24,000
I don't know.

29
00:01:24,000 --> 00:01:26,000
I like this name a lot info bar.

30
00:01:26,000 --> 00:01:26,000
Okay.

31
00:01:26,000 --> 00:01:29,000
So what information do we have when we run in in the game?

32
00:01:29,000 --> 00:01:33,000
I think we should have a meter's like how far we run.

33
00:01:33,000 --> 00:01:38,000
We have the amount of coins that we collected and also I want to put a small icon there that says if

34
00:01:38,000 --> 00:01:43,000
at the moment you can get extra life on hidden, something like you won't die if you hit something.

35
00:01:43,000 --> 00:01:47,000
So basically a heart I prepared a heart icon.

36
00:01:47,000 --> 00:01:50,000
You have it attached to this lecture so you can download it.

37
00:01:52,000 --> 00:01:52,000
For me.

38
00:01:52,000 --> 00:01:55,000
It's over here, so I'm just going to drag it to this folder.

39
00:01:55,000 --> 00:01:56,000
Okay.

40
00:01:57,000 --> 00:01:58,000
Heart icon.

41
00:01:58,000 --> 00:01:58,000
Cool.

42
00:01:58,000 --> 00:02:00,000
Now let's go to info bar.

43
00:02:00,000 --> 00:02:01,000
Take this.

44
00:02:01,000 --> 00:02:02,000
Coins we can delete.

45
00:02:03,000 --> 00:02:04,000
Give me a second to think.

46
00:02:05,000 --> 00:02:06,000
So we can take this coins.

47
00:02:06,000 --> 00:02:08,000
Move it a bit to the left.

48
00:02:08,000 --> 00:02:09,000
Forget about coins for now.

49
00:02:09,000 --> 00:02:11,000
Let's stop the heart icon I was talking about.

50
00:02:11,000 --> 00:02:14,000
So I want to create new UI image.

51
00:02:14,000 --> 00:02:17,000
It's going to say extra life is play.

52
00:02:17,000 --> 00:02:19,000
Let's keep this name.

53
00:02:20,000 --> 00:02:22,000
Now let's find an image for this one.

54
00:02:22,000 --> 00:02:23,000
And I want to have some border.

55
00:02:23,000 --> 00:02:25,000
So maybe this one is okay.

56
00:02:25,000 --> 00:02:27,000
Let's move it to the right over here.

57
00:02:27,000 --> 00:02:30,000
And I want to make it smaller just by a bit.

58
00:02:30,000 --> 00:02:32,000
Let's try 80 by 80.

59
00:02:33,000 --> 00:02:34,000
Well, I think it's okay.

60
00:02:34,000 --> 00:02:35,000
Let's keep this one.

61
00:02:35,000 --> 00:02:40,000
What we need to do next is to create UI image under this one.

62
00:02:41,000 --> 00:02:42,000
It's going to be hard.

63
00:02:46,000 --> 00:02:46,000
Empty.

64
00:02:47,000 --> 00:02:49,000
Let's find our heart icon.

65
00:02:50,000 --> 00:02:53,000
Drag it here and we're going to make it smaller.

66
00:02:53,000 --> 00:02:56,000
Just going to click, set native size and then adjust the size.

67
00:02:57,000 --> 00:02:59,000
So 64 by 64.

68
00:03:00,000 --> 00:03:03,000
Smaller, I think 50 by 50.

69
00:03:04,000 --> 00:03:05,000
And that's okay.

70
00:03:05,000 --> 00:03:09,000
Now let's duplicate this one and rename this to Heart full.

71
00:03:10,000 --> 00:03:12,000
And drag this icon over here.

72
00:03:13,000 --> 00:03:15,000
Then when I prepared the colored heart.

73
00:03:16,000 --> 00:03:17,000
This is better.

74
00:03:17,000 --> 00:03:20,000
Now let's adjust info on the left.

75
00:03:21,000 --> 00:03:24,000
So I think we can put coins somewhere here.

76
00:03:25,000 --> 00:03:27,000
And I want to make image smaller this time.

77
00:03:27,000 --> 00:03:30,000
So maybe 40 by 40 will do a good.

78
00:03:31,000 --> 00:03:31,000
So we'd be.

79
00:03:36,000 --> 00:03:37,000
Let's just text as well.

80
00:03:37,000 --> 00:03:40,000
Let's say we collected 127 coins.

81
00:03:40,000 --> 00:03:41,000
Let's see how it looks.

82
00:03:41,000 --> 00:03:43,000
We can put it a bit.

83
00:03:47,000 --> 00:03:52,000
We can click alignment to the center to make it look better and just font size.

84
00:03:53,000 --> 00:03:55,000
Oh 32, I think.

85
00:03:57,000 --> 00:03:58,000
That's adjusted just by a bit.

86
00:03:58,000 --> 00:04:02,000
And this is my preference if you want to see it in a different way.

87
00:04:02,000 --> 00:04:04,000
Feel free to put it in a different way.

88
00:04:04,000 --> 00:04:10,000
Right now, this best score, I think we don't need it, but we can use this last score.

89
00:04:10,000 --> 00:04:14,000
Let's do alignment to the right and in the center, then move it below.

90
00:04:15,000 --> 00:04:17,000
Set font size 32 as well.

91
00:04:18,000 --> 00:04:20,000
Moving to the right.

92
00:04:20,000 --> 00:04:29,000
I'm going to do letter M here, which will represent meters or miles if you are in state, I guess,

93
00:04:29,000 --> 00:04:30,000
but it doesn't matter.

94
00:04:30,000 --> 00:04:31,000
Letter M will do.

95
00:04:31,000 --> 00:04:37,000
So let's do let's say we run 156.

96
00:04:38,000 --> 00:04:40,000
Yeah, this looks good.

97
00:04:40,000 --> 00:04:42,000
So we have kind of two spaces here.

98
00:04:42,000 --> 00:04:46,000
This what we can do later when we set up the info, the text info.

99
00:04:46,000 --> 00:04:48,000
For now, let's just keep this example.

100
00:04:49,000 --> 00:04:52,000
And we done with the laying out ingame menu.

101
00:04:52,000 --> 00:04:53,000
That's it.

102
00:04:53,000 --> 00:04:57,000
I guess that was very fast for a video, but I think it's okay.

103
00:04:57,000 --> 00:05:01,000
Let's go and do layout for pause menu.

104
00:05:01,000 --> 00:05:01,000
All right.