What's up guys, Omar here from magic coding, and I'm back with another video. So the time has come for us to create the UI for the fish master. I'm kind of not a fan of creating UI, because it's all it's all about the numbers where you should put the where you should put the button, and so on and so forth. But we cannot pass this through a mess like this. Or if a guy's download the whole project, you can even skip this video, just copy and paste the numbers on it, or you can put them how you would like. So as before, we have created our start fishing button.

And I'm going to explain later on what are these four, but first, I'm going to start out with Canvas. So Canvas is Canvas is a parent of every child in in UI. So every UI has to be A child of candidates so you cannot create your eyes per se by create UI text to be right in the canvas. And Canvas comes up with the system elements. So like this not managed with any system, which helps out with button. So right like right now we can start fishing.

But if I were to put our system to not be working or set x to be false, we will see that no matter how much time I click on here, no button will start. But as soon as I click it, we will start fishing. So this is what added system is for. For our cameras. We're going to call this screens. Basically we're going to have every screen for itself.

So we can we can actually change between scenes depending on what we need. So we're going to have our main scenes me in C dot scene but screen my bed in Worried like this, then I'm going to hold down authority for LLP of keyboard to bring it up and duplicate this college game screen. Then duplicate that and screen and duplicate that up third screen. And to duplicate just click on Ctrl plus v from the windows and probably on the Mac, its command plus v. So inside of our main screen, we're going to have an image so UI image like this, but almost forgot that for our canvas, we will have different render modes. For this one, we're going to use screen space overlay so it will be on top of everything. And we can put it to be screen based camera only with in our camera and worldspace we're not going to touch because this is only for 3d games that are more base like maybe For example, to see if it's for further preview you will see differently but in 2d game there is no such thing as that.

I mean in this 2d game, don't get me wrong for us. For Canvas scalar we're going to scale with screen size and it will be 112 by buy one ad I think it was Duncan wrong. Nope, it was vice versa. It's 180 by 112. And we're gonna put one on the height. Make sure you do that.

So moving on with our main screen we're going to have here image as I said, and that image will be our fishermen. So Fisher men, right that when we add this fisherman Come on, fish fisherman like this. They are when we added this fisherman we will not need the one in our main camera, but it Hold down to which one you more like it? I mean, I'm just gonna delete that now because as I said, it's not needed. As for here, we're gonna put up, put him Where is it one image a bit more below somewhere on the lake as in for. And we're going to scale it up on width and height versus 650 by 650.

And it's too low. Let's go back up maybe to let's say like negative 44 as the position x, it will be at 100. So it's kind of in the middle of like where it's fishing. Maybe we can match it with the hook. So hip hook goes up. It's like there but okay, it's not I think that important, so I'm gonna leave it just as it is.

So yeah, and I'm going to change the name for our image to the earth fisherman like this next I will have our wallet text so you I text, wallet text. So for our wallet text we are given he'll show how much money we have. So let's say we have like 1000 right now for the anchors we are going to put to be taught but stretch. So do that top and stretch with 00000 for now as for the font we're going to use these BBs how you call it or you pronounce it that really does not really matter. 130 on the farm and then middle middle for for a lightweight. Right now our text is kind of out of the way so I'm going to bring it down.

Where is it? Text Hello? This my text? Oh yeah, I forgot to put height to be 200 Yeah. So that that was the problem. I'm going to put my text like here, so Some top and middle.

That was the effect hour that I was searching for. There, we'll have here our start button. So start fishing or start button called that we're like, and we'll have already put our on click function. And I showed you how to do that. You can even do it from script but when it's not necessary, it is your like this. And yeah, from here on, we're going to have another empty game object.

And this will be for our eyes and buttons. So if you remember from the gameplay, we're going to have three buttons, the rules will see for upgrades. We can obligate length, strength and offline earnings. For the idle buttons, I'm going to stretch it out as I did for the screens. And then I'm going to put on top to be like negative 1000s. So it's actually somewhere around here we were where we will put our buttons.

As for the buttons, we're going to create And then duplicate it. So first we're going to start off by adding UI button not empty game object directly you our user button and call this length button like this length button. Delete the text. As per the language bottom, we're going to have our length button, what's called sprite that we're going to put it to be on middle left. As for the width, it will be 400 by 400. And in width and height.

I'm just going to move it a bit so we can see it. Then here we're going to have an empty game object which is going to be our text area. And inside of it, we're going to put to be stretch in the middle like this. Or not stretch at the bottom, my bad stretch and bottom. And here we're going to have our vertical layout group which is going to be controls width and height at upper center not upper left but upper center you got in mind. And here I was gonna say like 30 by 150 that worth last time I checked.

So yeah, that will be for the left and right 00 and 3150. Now inside of the text area, we're going to add our text and one of it will be our value text. And one will be for our price. So for our value text will be like 30 meters like this. We're going to have it bold and we're going to have our BBs I'm going to call the DI D bass, anchors alignment, middle middle font size 40 and we're going to put it to be white so white, like this. So yeah, now we can duplicate that and have here are four rice texts text.

And we have a say here for example. Didn't know, let's say some random number like 112, but dollars and he will just stay everything the same, this this is going to be on top and some font size will be 60. So it's gonna be kinda bigger. And it might be bald, but normal like this will be normal. And as you can see, our text kinda is a bit off so I'm going to put up here so I can find where it actually fits. Yeah, like here It fits fine.

Now from our landing button, we're just going to duplicate it, call this ranked button, put it to the middle and just change the source image to our strength. Now duplicate this prank call this offline button off my button and then go to the right side and just put it Be offline offline button, buy this offline earnings, whatever. Yeah, that will be it for our main screen. As you can see, so right now for our game screen a we're going to leave it as it is. And just last but not least, we're going to change our end and return screen. So for end screen, it's going to be pretty simple.

Here we're going to have our total money that we collected for like total money to go money text, this, for example, it will be like 1000 I mean, I'm putting 1000 because it's probably the easiest, some of it right? The best for the font of course 150 on font, middle, middle, and then we're going to put middle and stretch like this meal and stretch for The height I'm going to say 300 m position wise somewhere around the top. So around there should be fine. And then we're going to have an empty game object, which are collect, I mean, not object, the image, which are you our image. And this will be our collect, collect button image like this. And we're going to call this collect.

And now for the collect, we're gonna put our width and height to be like 700 by 700. It's kind of big enough. And right now we have this image of it. And to create a button, we actually gonna create a transparent one. So right click on it, create UI button, and we'll just delete the text. Put our button to be like, let's see him to collect, transform it to where chairs form like this.

So this is the area that we will click for our button like this and then we're just going to put it to be on off. So even we did not see it but it it really is there and it's really usable. And we're going to call this Kollek button, the duplicate that call it collect to equal button. So it means bubble times and just transform it bit down. Like here. Make sure they do not collide with each other.

And that will be it. That will be our end screen. And last but not least, our return screen. It will only have the collective button and it will have what was that it will have the what's call it let's say in the Middle East. 00 or not 100 by 100, maybe our return screen. So you I text to the money, text.

So here we're going to say something like one time thousand dollars or $100,000. gained, gained, gained while wait waiting. So middle middle font size will be 150 and for the anchors we're going to put mil and then stretch and let's say here maybe 800 by 400 left be negative 60 maybe and here maybe 60 I say maybe 65 maybe 700 by negative So 100 yeah this looks better actually I'm gonna move it a bit more down so yeah somewhere around here should be looking fine font size not 150 we actually going to put 140 so it's not like on the edge but a bit more inside the money and we'll have our button which our collect button so actually actually we can just duplicate that in our return screen and put out like this put out our sprite image Kollek because we have that just we're gonna change the width and height to be like 500 by 500 00.

Yeah, that that is looking fine. Very nice. Very nice. And this is actually going to call collect buttons because it is collecting our money. So yeah, guys, that will be it for our For our main so here we have our main screen. Once we start fishing we're going to remove our main screen and only games team will be activated once we're finished with our game screen we're going to go back to end screen, collect money go back to mainstream once we shut down the game and then come back we are gonna be welcome welcome to which return screen and once we click click collect, we are going back to our main screen.

So this is what our screens are used for. I mean what are we going to use them for? And this is the all of all of the UI this we will have in our the fish master. So yeah, guys, that will be it for this video, Amar and I will see you in the next video.