 Well those last two videos I did on installing and setting up Godot. We're pretty boring. Let's get some fun stuff We're gonna make a clock app just like this tells you date and time runs on your phone Cable it desktop all that good stuff. Let's dive right in shouldn't take very long code is very short Let's get started as always you can get the source code and the assets in this whole project Up on git lab git lab comm forward slash melex one thousand four slash clock dash app Check out link in the description for that. Let's go ahead and get started we have a new project here and This new project is going to start off with a user interface, which is a control node So we're gonna click that I'm gonna change this and just call it mains main window We can also call it clock. Let's call it clock. It doesn't really matter And we're gonna add in a vertical box So as a vertical box to it allows you to line things vertically So we're just gonna type in vbox here and add that container and then within that we're going to add in another Child, which is going to be a label. This label is going to be our time label. We're gonna say 10 Pm just to have something in there now. It's really small and not the greatest Fonts in the world. Let's go ahead. I'm gonna pull Some assets real quick from my git lab page. You can create your own or find your own But in there I have a fonts folder, which I'll pull over here Which just has a font in it and then we also have in images. So I'm gonna pull that over as well and And Put that don't want that in the fonts. We want it There we go in there, there's a folder called backgrounds and there's Three but really only reason to one of them. We can actually delete this sky gray dot jpeg And that should be it for that So that will be our background and our load screen when it comes time But let's go ahead and start working on this now that we have our font loaded We can choose our label. We can go over here and scroll down to custom fonts empty choose dynamic font Click on where you just created the dynamic font go down to font and say load We're going to go into our fonts folder and choose that font or of course pick whatever font you want And then what I'm also going to do is I'm going to add an outline Usually makes it easier to read if there's a background since we have White text if there's any white in the background, which I'm going to throw a cloud background It might be a little bit easier to read if there's a black border black board looks kind of thick here But we're going to increase the size of this But real quick what I'm going to do is I'm going to select that label And I'm going to hit control d to duplicate it and that one will be our time or our date So we're going to click here and we're going to rename this Date or rename this one time and we're also just to be sure I'm going to click on the date and say Make Sub resources unique that way I can change them independently I'm going to now choose my time and I'm going to up this to 120 in size And I'm going to choose my date and I'm going to change that So we're going to go to custom fonts Not color not font colors, but custom fonts click where it says dynamic and change its size to I think 64 probably be pretty good and we're going to put in a date format. I'm going to just use numeric. So I'm going to say three 10 2021 how about that? I'm going to now choose our vertical container and I'm going to say layout full rectangle And then for time I'm going to choose that I am going to tell it that I wanted to center To center up align center and then we're going to also align it at the bottom And we're going to go to its size flag and say expand and expand there we go I think that's all we need to do for that one. We're going to choose date We're going to tell it to align center and we're going to say we want to vertical align at the top And we're also going to tell it to at least vertically expand. Oh and fill Did I say bottom? I meant to say top here and for time we also want it Under Where are we we want it to fill vertically as well? So now they're lined up. They're both centered and the date will always be below the time That's it for our setup besides adding a background later on, but let's go ahead and write our script. I'm going to click here I'm going to say attach a script I'll just call it clock.gd It's a dose script I'm going to erase all of this and I'm just going to copy and paste the code. I've already written but then explain it to you So control extends control because this is a control node You'll always have that on a control node and then we're going to say on ready So we're going to wait till it loads because we're going to grab The time and date label. Okay, so we need to wait for it to load. That's why it says on ready We're going to take our date label and we're going to say Well, we're going to call that date and the time on call time that way We can just call them easily by using those names for example here and here Um, so we do that. I'm not doing anything. I'm going to leave this ready function That's something that will run the first time it loads up There's nothing I need it for for it to do but you might want to add something in there I'll just leave that there for now and just add a pass so that it just goes past it Next thing we're going to do is we're going to say use an os command and get the date and time So this should be a universal from operating system to operating system I mean we could use shell commands to get a properly formatted date and time like for example on a linux or some sort of unix System we should use a little type in date and it should give us the date and we could use that but Then if you went to another machine that doesn't have that date command or date command works different It wouldn't be compatible. So we're just going to get the current date and time using this built-in function here from the os And then what we're going to do is we're going to set the time label text and the date label text To the outputs of these functions. So we're going to grab the date time. We're going to pass it to both those functions Let's look at the get time functions. So we're passing at the time So now we're going to say we want to know whether it's 8 a.m. Or 8 a.m. Whether it's a.m. Or p.m by default it's going to give us a 24 hour hour and so there might be a built-in function I didn't see it in the documentation to get a 12 hour Output for the hours. I didn't see it. So I just created my own here. Basically. I'm saying here From that time that we passed it our current time get the hours put in a variable called hours And then I'm going to say okay if it's greater than 12 Change the meridian to p.m. Because it's already set to a.m. So if it's more than 12, it's where you set it to p.m And then we're going to say also if it's more than 12 subtract 12 And that should get us our time our hour anyway Next we're going to get the minutes. So we're saying okay create a variable called minutes It's from the current time And it's minutes, but we want it to always be to character see if it's anywhere from you know Let's say it's one o'clock one o'clock to 110 anywhere from there One o'clock to 109. It's not going to be 109. She's going to say nine So we want to make sure that our minutes are always Two digits in length. So this is what that's doing It's saying make sure it's always two digits and if it's a one digit number for example five put a zero before it That's it. Then we just get our format. So we're going to return this time We're going to convert all these integers. We just got The hours and minutes and we're going to convert them to strings. That's what this str does We're going to put a colon in the middle and then we're going to add our ampm And then we're going to return that so that's basically saying okay This function is now returning whatever where we called it which was up here We're putting that output into that label. We're going to do the same thing for the date text So here's the date text. We're going to run our function Get dates. We're going to pass it that current time and Whatever the output of this function is we'll go into that label. So we're saying here take that date get the month day and year And then of course it depends on what country you're in here in the u.s. We're going to go month and now we're getting Integers here numbers here. So we're going to be converting them to strings basically just characters Rather than numeric values So we're going to get the month put a forward slash get the day put a forward slash and get the year And then we're going to return that and it goes into that label and that is it this process is running over and over and over again um And uh, so it's just constantly checking the date and time And uh, so now we can hit control s to save our project Yeah, I'll I'll save this scene as clock and then we'll hit f5 and the first thing I'll ask you what do you want your default scene to be? We'll choose that clock And there we go. We have our clock and you can see oh just as I opened up this application I switched over to the next minute. So there's the time and date Go ahead and close that and of course that's nice But let's go ahead and add a background to add backgrounds to this. Uh, there's a few different ways to do it But we're going to add a child node and it's going to be a texture rectangle. So texture rectangle And then here where it has its texture, we're going to put this sky one or whatever image you want This is is a tiling image I made so it should tile seamlessly theoretically So I'm going to set this tile, but we also want it to expand And uh, I'm just going to be cheap about this Whoop and go like that it's not It's not tiling properly. Oh, you know, I created it, but I created it wrong if this was a seamless tiling Um image you wouldn't see that scene there. Unfortunately, it's you know, let's go ahead and fix that real quick So I'm going to open up gimp And then I'm going to take this image that I've already created which I tried tiling. I don't know At what point I messed it up But I'll drag that image over to here here And uh, it was originally just a picture I took with my phone of the sky and then Set to be seamless, but somewhere I did something wrong. So we're going to come in here and we're just going to go down to map Tile seamless and basically this doesn't work with all types Like you're not going to get a brick wallet tile seamlessly But this should look a little funky, but should tile seamlessly now I will control e to export that and just override that file And once I export it, I should be able to go back into gadoe and there we go there We don't have that scene anymore. You can definitely see the repeating pattern, but that scene is gone Obviously could be done a lot better, but uh, we really shouldn't see uh the tiling too much Um, and I just kind of I'm doing this kind of cheap. I kind of drug this out There's different ways you can get for this to cover the entire screen. I don't want any uh black Letterboxing going on on my application. So I I drug this out. I also want to drag it up here so that it's behind our time and date And if I hit f5 now You can see that image and it shouldn't matter whether it's portrait or landscape. We should see what we see um Other things you might want to look at if you go into projects here. We're going to change the boot splash screen That's one thing. Uh, so instead of showing if I Exit this I hit f5. You'll see it says gadoe game engine You don't necessarily want that to show up on your application unless you're promoting gadoe, which isn't a bad idea Uh, but you probably want to do your own So I'm just going to put this gray copy of the sky image now If I start my application it shows while it's loading it will show that gray Sky image and there's a few options in there for that You'll see full size use filter or background color You saw one start up there were gray sides to it You can change the look of that but the other things you might want to play with and this is just I'm going to show you where this is But I'm going to leave it up to you on on how you set it up for your application But we come down here to display window and we scroll down Uh right now by default gadoe is going to say landscape But you may want this to force portrait or in most cases with the phone You're going to want to say or at least with this application Sensors that way if you rotate the phone your application will rotate as well Nothing can do is you can say Stretching you can say 2d viewport so I can say Let's go viewport and not ignore aspect, but let's just say keep aspect And this will help keep sizing it's again you got to play around with it So here I have those black borders. I don't want So but it keeps everything the right size if I went back into here and I was a change that to ignore Now if I run the application you can see it squished everything Which most likely you do not want that option But you want to play around again based on your application I'm going to say keep and I'm just going to say disable stretch And our words will always be in the same screen, but as the resolution of the screen gets larger It will the words might look a little bit smaller So if you have a extremely high resolution screen in this particular case the fonts might get Be smaller on the screen, but since I pulled this out we should not get any gray outline We should just see that image. Let's go ahead and look at that again There we go That is the result. I want let me go ahead and plug my phone in through usb here And before I push it to the phone. I want to go in and set up an android export Again when we go to export we can choose all these different formats And if you follow my tutorial we also did the set for android devices I can choose that and really the only thing I need to do in here is I probably want to change this unique name to Fit my Company or project my website is films by chris. So I'm doing calm that films by chris You don't have to name it that but that seems to be a fairly standard way of doing this And as I always say it's kind of weird that it's like that But that's what it is and then here it says gen name That's just so the application on the phone is going to it's got that package is going to be calm That films by chris and in this case clock app or whatever I named the application It's going to use that name. I could manually type in a name there But it's using a variable in case I changed the name of The app the only other thing is if you don't have global Debug keys you can put your debug key in here or release key if you're generating your release If you do pull my code off git lab, I did put in a db bug key there So you don't have to generate one yourself But I feel free to it's just a debug key when you actually release you want to generate your own I have a global one set up on my system that I showed in a previous video So now I should be able to click this android icon It should package us up as an apk and push it over to the phone And and and tries to open it sometimes it doesn't open properly But then I can just click on the icon which oh one other thing I should do right now It's going to have the godot icon which I don't necessarily want So let me pull over my project from online again and just from there you can grab any icon you want Let's see Clock app I'm going to go source and I have this icon that I found online And I'm going to pull that over to resources and it put it in the wrong folder Let me just go ahead and drag that up to here and I would think that If I yep override the godot icon now I'm not going to re-package it, but Now when I package it it should show that clock icon instead of the godot icon. Here we go unplug from usp It's now installed on my phone There we go. I guess my battery is low So there we go may not be the best icon background. It makes it a little difficult to read, but It's just an example and you can see we set it up so it should rotate whatever way We have our phone And that's it a very basic clock application, you know Doesn't do anything but to show you the the date and time That's on your phone Thank you for watching. I hope you enjoyed this just looking at using godot for more than just games It can be very useful for creating basic little applications and yes every phone already has a clock application There's many out there to choose from why create one more because you can and you can make it how you like it And you know exactly how it works so you can change wherever aspects you want And you know, it's not you know tracking you or anything like that if you're paranoid about that sort of thing Which if you are good for you. Thanks for watching films by chris.com. That's chris the k There's a link in the description also a link to my patreon page if you like these videos check that out I would love your support if you can't support me financially Think about liking sharing subscribing and I hope that you have a great day again Check out the links in the description for the project code. Have a great day Thanks for watching