[MUSIC]
In this video, we're gonna take our requirements and
turn it into the actual elements we need within our game.
So creating the background, the title, the buttons, and the guess text.
So let's jump in and get our game screen all ready for action.
We need our game screen functionality, this is what we want to have it look like.
And here is us tagging the different components of this,
the different elements.
We need the text,
we need our background, we need to have our dialogue before the guess.
We need to have the guess itself, as well as a background for the text.
We need our three buttons.
So listing this app is a challenge to you if you wanna jump in and
take this on as a challenge.
Here is what we need.
Here is what I'd like you to do.
Prepare your games screen.
We need the heading which I've tagged as number one.
The main background tagged as two.
The three buttons three, four, five.
Where is six?
Six is the dialogue text.
Just a little bit a flavor leading into the guess, so
you know without this thing right here is the guess, underneath the guess,
I have got this is item seven here, I have got a little background, and
then the guess text is on top of the background.
Make sure you take note of where you need parent and child relationship.
So the guess text should be a child to this text box.
So the background that we've got that the text is underneath here.
So that if you move around this box, it'll move around the text as well.
So that is the requirements, that's the challenge, jump in take that on now.
And when you come back,
I'll go through a quick flow of me adding my elements to my game.
Okay, welcome back.
Let's see when we do this fast and furious or at least efficiently.
That's what we wanna do.
I'm gonna start off with the buttons actually.
So if I click on my success button here, where are we in terms of our canvas here?
Canvas and duplicate that, and drag it up a little bit.
We will call this this one needs to be our higher button.
Higher makes sense that higher is on the top.
Higher great, you can hear me bashing away on my keyboard.
It's a little bit loud today, I think on my keyboard.
And we need to, we'll leave this for now.
Actually, I'll turn this off.
We're doing no function.
We don't wanna accidentally click on that and do something.
We'll be clicking out that functionality in the next video or two.
We need to change the text on our higher button.
Instead of being called success, it should be called higher and
the text itself should be higher.
And then from here, that's pretty good with that.
We're gonna duplicate the higher button and create ourselves a lower button.
Lower button, doink doink doink.
Wonderful, and looking at the text as well.
It currently says higher text.
We need this to be called lower text.
And we will type the word lower.
Finally, click on my Move tool, might it right down below.
Whoops, we need to grab the entire button, not just the text.
Drag it down, there we go Higher, Success and Lower.
Success might not be the right word there.
We can change that later on, probably, you got it, or what do we say now, specs,
that's it.
So we'll change that later on, but for now we just want to get in our functionality.
Okay next, what I wanted to do, my list here was to create a heading.
So into the canvas, right click.
UI Textmespro, I'll move my text mesh pro element up to the top and
create something in here that is something along the lines of,
"I shall attempt to read your mind".
And these things, I was saying before about challenge and solution.
So much easier when we've already just mapped out, and
I do this in actual the Google Slides that I've got here.
I map this out in here, you can do this in PowerPoint, you can do it in Excel,
on Word or in a piece of paper.
But mapping out your wire frame, that is what are the elements you need and
roughly where do they go?
Makes this process in Unity so much easier and
more efficient when you've already mapped out a little diagram like that.
So what we need to do next is just make our text box a little bit bigger.
Click on my T tool here, so I can give ourselves a bit more space.
Drag it that way, drag it that way,
I'm gonna push the game screen over there a little bit for now.
I leave the font as it is, I'll change the font later on.
Perhaps make it 80, so it's nice and big.
This exercise is gonna be less about making it look pretty and
more about just getting it in the place we want it.
I'll do center alignment, "I shall attempt to read your mind".
Okay, it looks similar to what we're going for.
Next up, Canvas right-click, UI.
We will put in a image.
That will be an image, if I was to speak proper English.
We will use this to just create a little bit of a different color to show this is
where the action is taking place.
Now, it's gone and plonked over the top.
So what we need to do is drag it all the way up to the top, so
now it'll sit down the very bottom.
Did I not drag that to the right spot?
Undo, this time I will actually will drag it all the way up to the top, there we go.
This is our image, change our color of the image to similar to what I had before.
Some sort of bluish type color.
There we go again, not furnishing the colors just yet.
Functionality first, functionality over form as a first step.
Now, where do we want this anchored?
We should be thinking about that,
I'll leave my anchor points in the middle for now.
I think I want that, I don't think I want it stretching to the outside.
We can play around with our anchor points later on.
For now, we're getting in the functionality sort of background there.
What is next on our list?
We need the, we've got the heading, we've got our background.
We've come dialogue text comes next, so right click canvas,
UI, another Textmeshpro.
Just gonna use text mesh pro all the time at the moment.
Drag it over a little bit, no.
Drag over the entire element.
Get in a little bit closer, there we go.
And for this one, again I will center a line.
What are we typing in here?
We are typing in [SOUND] "My guess is...".
Okay make the font a little bit bigger, say 60.
That looks decent, and white is fine for now.
White is fine,
just something that I should be paying attention to as I go along.
What have we called this text mesh text pro text, that's no good.
Need to call it heading text.
Make sure you're always updating your name so you know exactly what's going on.
The one we just added here should be called for me dialog text.
Okay cool this is making progress.
What else did I not name background.
I didn't name.
Background, okay, success button is named, higher button is named, lower button is
named, heading text, dialogue text, and background are all named.
Okay, next aspect is, right click on Canvas,
UI, and we need another image.
This image I'll move down into the middle, roughly around here,
make this one a yellow color.
I think I'll change my buttons pretty soon from yellow to something else.
We'll make the guess nice and yellow under the image here.
Change the name of this to guess background.
Okay, going pretty fast here but you could always slow the video down,
to say half speed, if you wanted got out text books.
There we go, it's cold guess background.
Next up, I want to child underneath my little background here
right click on guess background, UI and Textmeshpro text.
Again, it's all in white, that's not very good, made a change to color.
Come down to color vertex, make this a darkish kind of color,
I think works and then I will put in here three question marks.
One, two, three to signify that our number's probably gonna be,
well it could be up to four, couldn't it?
So we'll have four in there, so make sure four can fit.
And then the size, I'll pump up to 80, yeah, that looks pretty good.
And then, move the positioning of that a little bit more.
Now with this, I do want to anchor the guess.
We need to name this first before I do the anchors.
Name this as Guess, Guess text is what we're gonna call it.
Guess text I think is good, yeah.
And then, I will anchor these to stretch.
And that should stretch to the parent that it's sitting within, that's great.
So if we were to move around the guest background, then the guest goes with it.
Or if we were to stretch it then it should stay in the middle.
What have we not done in here,
we should move the boxes of our actual Textmeshpro element to the outside.
Just to be thorough with that, and then to center align that
as well as just expand my inspector middle of the box here.
So all of these elements on the guest should be all lined up.
A little bit finicky here, some of these, there we go.
All of them should be lined up around where the actual guess background is.
So then now, if I move the guess background, you can see that it
stays centered within that both on the horizontal and the vertical, wonderful.
So let's do a little checklist here.
What have we got?
I shall tend to read your mind, that's our heading, we've got Higher,
Success and Lower.
But my guess is we've got the date guessed text in there,
we've named everything as it should be, so we can easily find it.
And that's important that we can find it, so that we know what to assign when we're
saying where the text should go, when doing a guess.
So that is our game screen, all created ready to go, all prepared, great work.
Hopefully, yours looks as nifty as mine.
Hopefully, looks even niftier, I'd love to see some screenshots.
If you'd like to share what you've come up with, share your color approach and
share what you've done.
And I'll see you in the next lecture where we will start to get our code that
we've previously created in Number Wizard Console.
We'll get it all ready, so that we can start feeding into our actual game.
Great work, see you soon.