Godot - Mobile App Tutorial Part 3 - Useless Main Menu

hey everyone thank you so much for joining my name is Eric and this video is part three in a mobile app tutorial series for Godot in the last video we were just setting up the project but in this video we're actually going to implement the main menu it's not going to do much but will at least be able to see it and it'll provide a good starting point for future videos so the first thing I'm gonna do is go to UI this UI no 2d that we added last time and I'm going to add a child node we're gonna add a label this is actually gonna be the title for the game so we can actually change this to title and then change the text to I'm gonna call that simplify that's kind of what I called this project when I first got started with it you can call it whatever you want we're gonna change a couple things with the settings for this label for a line we're gonna set it to Center and then v-line is also going to be centered so basically the text is centered on this node we're going to change its size to match the size of the amp so 576 is our width that's basically letting us Center it on the amp without having to move this position around or change anything about that so we can change the the wise size too I'm not actually sure what it should be so let's let's just do 84 now and we might change that in a little bit so we've added text to this label but it's very difficult to see just because we haven't customized anything about the node or the font for the node so I'm gonna show you briefly this website fonts google.com I did another video earlier on the channel about adding fonts and saving dynamic fonts to use across your projects basically I just go here I find a fun I like I select it I download it and then I add it to the project so I welcome you to do that the font that I'm actually using is this Guji - regular TTFN basically that's the file format that you're looking for regardless of the font that you download and we're going to use that to create now our UI so I'm gonna scroll down in this inspector for the label to custom fonts when I click it it says I have a couple different options I'm gonna hit new dynamic font when I click it again I get these additional options settings we're gonna increase the size to 80 that basically made our font larger and then we're going to add our font data under this font drop-down so instead of new dynamic font dad we're gonna hit load go to our fonts folder and then find whatever TTF file you want to use open that and then our title has the font it has the size the last thing that changes the color which isn't under custom font it's under custom colors select font color and then for the font color you can make it whatever you want if you slide this around you'll see it changing color I'm just gonna make it a darker basically a grey that's that's as simple as I want to make it for right now we can play with that later so we've got the title and then well I guess the last thing we can do is move it wherever we want it but we're gonna leave it we're gonna leave it where it is for right now because we're gonna use we're gonna move this entire UI node down once we have well actually you know what I think I think we can move it let's just move the title so position we're not gonna we're not gonna move the X so we're not gonna add anything to the x value because we're relying on the width of the label being the same size as the amp to keep everything centered so we're just gonna move it down let's say Y value to 300 I think that might have a little too much well that is a little too bad it's not quite in the center and we've got enough room here for the start settings and quit button so speaking of them we're gonna add another node to D to the UI node so this is going to be our menu buttons yes so menu buttons later maybe in the next video we're gonna add difficulty buttons that the menu will take us to when we hit start but for now we can just add we're gonna add three button nodes just basic button so you can either add them like this or you can add one and then do command D to duplicate so this one's going to be start this one's going to be settings and this one's going to be quit so those are our three functionalities you can see them they kind of popped up up here they're not doing anything too exciting just yet we're basically going to add a font to these just like we did the title we're gonna do one more additional thing with the dynamic font we're gonna save it so that we can use it on other buttons mainly these buttons so I'm gonna set the ticks for the start to start I'm gonna click flat so that it removes that background color it's aligned to center which is good there's a couple other things I'm trying to remember enabled focus mode so I'm gonna set enabled focus mode to none for this button and if I scroll down a little bit more we're gonna do the same thing we did with the title we're gonna set the size to 576 we're gonna change the height I'm just gonna do I think 67 in the past worked out pretty well for this part then under custom fonts we're gonna do new dynamic font just like last time it's gonna be the exact same font data so we can go to font data and then load Guji - regular if that's when you got but four settings instead of making it I think it was eighty that we did for the other one we're gonna do 60 and we'll be able to see it once we add a font color now i'm gonna i'm gonna use this color picker i'm going to click the black bar to choose the color hit color picker and then i'm just going to grab the color of the title so i think that will look pretty good so now that we've added this we're gonna save it as Gucci - sixty and I'm just including the size in case we have other fonts that have kind of the same name we'll be able to distinguish some by font size but now instead of doing all of that for these settings and quit nodes I'm just gonna actually delete these I probably should have done this to begin with I'm gonna delete these and then I'm just gonna duplicate the start button so it has all the same properties that I just set up I'm just gonna rename these settings quit and then go in and change the text for those buttons so start the settings and you can see it changing they're all overlapping right now but we're about to fix that and quit so I've got these three buttons they're the same size we want them to be aligned in a column there's actually a really easy way to do that we're gonna add another child node two menu buttons and it is called the box container so this is just going to align whatever its children are into a column so if we add this and I think we should be able to add each child note if we just drag it in that's not right oh okay I think I messed up so I'm gonna I put that in there and that didn't work right so I'm gonna come back into the button and a change its size back to 576 because I kind of messed that up so under the V box container let's change its size to 536 as well and now I think it will work if I had dragged these in so I dragged in start I dragged in settings and then I dragged in quit and that worked perfectly so we've got this V box container set up and the buttons are inside and they're just aligned vertically that's basically all it does I had to make sure that I had the V box container set to the size of the app and as long as the sizes were right on these buttons I think they aligned pretty much perfectly I'm very satisfied that we can actually run this and just make sure that we can hover or click over these buttons I'm not a huge fan of changing color on hover or click if you are you can you can do that under that custom color we'll look at that if I go into the button and I come back down to custom color there are these colors for font hover disabled and pressed I don't really I'm not I'm just not a fan of that so I'm gonna change them all to this color of the normal text that way nothing changes pressed we're gonna change that also to this so I'll show you the difference in what that looks like so I've only changed it for the start button so nothing happens it's still being clicked it's still working I'm just I just made sure that the color doesn't change because that's my personal preference if you like it the way this looks you can definitely do that the last thing we're going to do for the UI is we're gonna move this underneath this title so that's just kind of honestly a little bit of guesswork if you go to the menu buttons node go to transform and then position we're gonna adjust the Y position so we're just gonna move it down 350 so that's not low enough let's do 400 I think that might actually work pretty well I think that's everything we want to do in this video in the next video we're gonna make these buttons actually do something by adding some difficulty buttons off the screen and then basically when we hit start or hit quit things will happen you know the amp Y actually start working if we run this again just so you can see kind of in front of where we're at we've added the title and we've added these three buttons I encourage you to do whatever you want with the colors of these after the video I'm gonna go in and I'm gonna change these colors to the same way I have it set up for the start button I hope it's been helpful if you learn something new or just enjoy the video remember to hit the subscribe button leave me a comment letting me know what you think about this series I want to make sure that it's actually helpful when I'm just putting out videos for the sake of putting out videos if you are watching I want to thank you so much I really appreciate it I'm having a ton of fun making these videos and I want to make a lot more next time we'll actually make the game do something which will be pretty exciting but for now that's all I got thanks for watching [Music]

Channel: TheBuffED

Views: 10,033

Keywords: Godot, Godot Tutorials, Beginner, Programming, Gamedev, Game Development, Indie, Mobile, Android, iOS, Mobile Game, App, App development, Tutorial

Id: yM8eGBcsTAs

Length: 11min 7sec (667 seconds)

Published: Fri May 17 2019