Learn how to make Games: Unity (Part 12) - Adding Main Menu UI as well as Animating the UI

Learn how to make Games: Unity (Part 12) - Adding Main Menu UI as well as Animating the UI - Двуязычные субтитры

In this intro to game dev tutorial, what are we going to be doing?

Well, we're going to start to look at adding a main menu UI.

And in that main menu UI, we're going to go ahead and start to add some buttons and the title.

And then we're also going to start to take a look you look at the Unity animation system to animate that UI.

Hey, I'm Jerry from Blizzard Studio, creator of the Apple Featured Game, Trixel Rocket.

And if you're ready to learn more about game design, let's go.

So here we back in Unity.

Let's go ahead and play the game real quick just so we can see where we left off.

I hit play and so we've got our rocket moving.

We can fire and the ships are coming down.

The ships can hurt us and remove health from our character.

and then we have a game over.

Okay, so now we need to go ahead and create a main menu that's going to start this whole thing off, and then we'll have a play

button on there that's going to then initiate and start the game.

Alright, so let's go ahead and get working on this.

The first thing I'm going to do is to go ahead and create a new menu.

and it's going to be UI specifically for the main menu and I'm going to open up

my UI subfolder here or game object and then I need to create a new canvas.

So going to go ahead and create a new UI canvas.

And then I'm going to relabel this to be UI dash mean menu.

There we go.

Now I can go ahead and start to design what this is going to look like.

So I have my canvas.

The next thing I need to do is to add a title.

So whatever we're going to call this.

and I'm going to go ahead and just put a text mesh Pro object on the canvas and

then I'm going to go ahead and center this so with With that object selected and in the inspector,

let's go ahead and give this a name first.

So let's go ahead and title what this game is going to be called, space spectacular.

Okay, so let's go ahead and call it space spectacular.

And you can see that that text doesn't necessarily fit all that well.

I'm going to go ahead and just zoom in a little bit so we can see what we're working with.

and I need to do just drag out the box so that it fits the text a little bit better.

Now you can see where the center point of my UI is and I'm just kind of like keeping that centered within that space.

Now the other thing I'm going to do is to go ahead and in the inspector with that text selected I'm going to go ahead and

hit center in the alignment so that way it's centered horizontally.

The other thing I want to do is just go ahead and maybe bold it and then increase the size and I

can do that by just dragging to make it kind of zoom out just a little bit.

And yeah, that's okay.

All right, again, this isn't like super designed, but we'll kind of just go with this.

Okay, so I wanna go ahead and just, move this game object up a little bit.

So now I'm going to go ahead and just add a little bit of effect to the text.

So I can easily create an outline for the text here.

And of course it's black right now so you're not really seeing too much of that.

But let's go ahead and change the color of this.

and do something like this that's blue and then of course the thickness is zero so we're not going to see it so let's go ahead and bump up that and then let's go ahead and

change the interior color so the face of the color of the font will change that to be something a little bit different maybe a color.

We'll just do that.

And then we'll just we'll call that good.

And maybe I might even just go ahead and just break this down into two lines instead of one.

and call that good.

All right, so the other thing that we need to do is to add a mean menu button.

So let's just zoom out just a little bit.

And then the next thing we need to do is to add a start button or a play button.

So here we can go ahead.

And again,

right click on that UI main menu or control click and we're going to go UI and add a button and we'll just push that down a little bit.

And then we also need to go ahead and kind of stylize this button.

We'll just do this fairly quickly.

we can make the button color.

I'll go ahead and make that button color.

Let's maybe go with something.

and let's change the text color as well.

So going to open up that button and then click on the text and so I'm going to change the color of that text just by

clicking on color and we'll go ahead and change that to white and then I'm also

in the text area good I'm going to go ahead and change that text to be all

capped and we'll just say

Play and then I can go ahead and increase the size Let's go to 30 maybe and that's bigger than our button.

Let's go ahead and increase the size of our button And I might take that text and just make it

not italic but we'll make it bold.

Okay, so here we have kind of the basics of a main menu.

Now again it's not super spectacular but it's something to get us started.

The thing I'm going to do is go going to go ahead and add a panel

and again right click on that UI main menu or control click and UI and then we're going to also add a panel.

So this kind of goes behind everything and we'll go ahead and change the color of this.

So currently it's white and it has the transparency to it.

Let's go ahead and just make it black and we'll also we'll also make it fully opaque.

Okay so currently the panel is on top of so You know in the layering it's text the button and then the panel

The way unity sees this it's reading whatever is first

The camera sees that and then on top of each other

So what we need to do is reverse the order of this to make the panel and on top of or behind everything else.

And there we go.

Okay, so the other thing that I'm going to do is to take my UI main menu and you can see that currently the

in-game UI is on top.

the main menu UI.

And that's part of the sort order.

So it's sorting how these UIs, which one's gonna be drawn first, which one's drawn second.

And so what we need to do is to draw this canvas on top of all the others.

So we're gonna change the sort order of this UI, and we're gonna go in maybe make that five.

So then it's on top of everything else.

Okay, so we have the look of our UI down.

Now what we need to do is to go ahead and start to take a look at animating the the main

menu So we're maybe at animates in and then we'll have

Be able to hook up the button and when the button clicks animates off and then you're playing

So here we're going to go and add a couple new windows.

So first we're going to add an animation window and that pops up.

I'm going to go ahead and just dock it down here with the playmaker window.

And so it gives us a new set.

The other thing that we're going to add is also the anime tour window and I'm going to drag that down here as well.

So I've got the animation.

and the animator, okay?

So we can animate pretty much anything in Unity.

And the way I'm going to do this is with the main menu selected, I'm going to go ahead and create an animator.

And when we create an animation, it's saying, hey, you need to save this thing.

So we're going to create a new folder, and going to call this animations.

And then I need to label what this animation is, and we'll call this main menu, we'll go ahead and save.

And then along with that main menu,

if we look in our animations folder, you'll see that there's both a main menu animation and then there's a UI main menu animator, okay?

So the animator is the state machine that allows you to switch from animation to animation.

So if you have more than one animation for the UI, then there's the switching between which animation you're playing at a given time.

Okay, so let's go back to our main menu animation.

So in the animation window, let me just take a tour real quick.

You'll see that we've got some buttons for play, pause, rewind, so on so forth.

And then we also have a record button and then And the bottom underneath of that, we also have samples, which is the frame rate.

So we're going to change this down to 12 frames a second.

And then main menu, this is the title of this particular animation.

And then we also have the timeline.

Okay, so the timeline is where we're going to apply different keyframes.

And what happens in this window is once I hit record,

the record button,

anything I do to this menu and the objects that are within it,

the If I move those,

if I change the opacity,

change color,

do any of that kind of stuff,

it's going to record those as keyframes and I can change when those objects are going to change over time.

What we're going to do is to go ahead and animate space spectacular moving down.

So currently I have So at frame 12, that is one second.

If I want to animate something down over time, then I need to, you know, change that object.

So what I'm going to do is I'm going to go ahead and select the space spectacular text.

the text right there.

I'm going to go ahead and hit record.

So now I'm recording anything I do it's going to remember that as a keyframe.

So I want to move this object up because I want it to start high and then come low.

So I'm going to start So,

you can see that on my timeline,

it's put a little diamond shape, and that's saying, hey, I remember this is the position of this object.

And in the inspector, you see that I've got my Y position turned red.

That lets me know that that is the thing that it's remembering at that time.

Okay.

Okay, so I have my title in the position that I want it to be and I want it to start out as transparent.

So the place I'm going to do that is up here in the vertex color of the text method.

So here we're setting what the overall color of that game object is,

and the only thing that we really need to manipulate is the opacity, which is the alpha channel.

So we're going to take that from one, which is 100% down to zero.

And you can see our text is faded out.

Okay, so we're starting up with a text high, and then as we animate it down, we'll fade it in.

So I'm going to go maybe to frame six or seven.

Let's go frame six.

I'm to go ahead and move it down just to touch maybe a little past where we would want it to normally.

And I'm gonna go ahead and fade that in.

So here in our vertex color again,

I'm gonna change from alpha of zero to alpha of 100%, which means that it's going to be completely opaque.

And you can see here it's faded in.

And then I'm gonna bring the text, go a couple more frames, and bring it back up into place.

So the effect is that it's going to kind of like do this little bounce.

it fades in.

Boom, that works pretty good.

Okay, so the other thing that we need to do is then do something with the button.

And I think what I'll do is I'll just have it move the opposite direction.

So as the title is moving up,

we're gonna go ahead and move the

the play button up from starting it down so I'm gonna go ahead and just move

this down again we're still recording and I'm not gonna move it down as far as the

bottom of the screen or even off the screen.

there.

I'm also going to change the image color of this to be zero, so it fades that out.

Now I also need to do that with the text as well.

So we're going to take that color of that text, change the alpha of that.

So it's completely faded out.

And then the next thing I want to do is I want this to have a key frame.

right here because I don't want it to move up at the same time as the the

space spectacular title I want to animate starting later so what I can do is I

can grab the keyframes for the button so it's button anchor position and button So I'm going to grab those three keyframes.

I'm just going to move them over.

We'll have this be the final position for that button.

So here we're going to go ahead and then fade everything back in.

So alpha of one.

And we'll do that for the button as well.

So the color of one.

And then we're also going to change the position And we'll do the same thing where it kind of like bounces a little bit,

so we'll move it past a little bit further than what we want to, and then we'll move it back down.

And then we can play to see what that looks like.

And I might move that position just a little bit further down, so it doesn't, yeah, and that doesn't look too bad.

So again, it's just a start for the animation system.

Now the key things,

I need to turn this recording off, because anything I would do with the button, or the title, or the UI itself.

it's going to record the position changes whatever if record is on.

So now that I've turned recording off, you can see that my timeline bar has now turned to blue.

So that's me though.

No, that I'm not recording.

So now we have a UI that's animated.

Now we need to go ahead and like hook this whole thing up.

So I'm gonna go ahead and go back to my game managers and open that up.

Let's go ahead and create an empty game object.

So we're going to create an empty.

And we'll have this dash be main menu.

UI.

Then I need to go ahead and attach a Playmaker FSM to that game object.

So gonna go to Playmaker and right click to add an FSM.

Okay, so we have a start state.

Now we need to figure out exactly what it is we want to accomplish.

So, first we want the game to be paused, right, so we can have our spawner turned off, game

object turned off, we can have our player game object turned off.

We don't necessarily need the health and score turned off because that can just be sitting

there because we have our main menu on top of it,

and then what we need to do is just listen for the button to be pushed to then turn everything back on.

We we of of of of of it, have that partially set up in the reset game.

So we can actually call to that from our main menu FSM.

So the thing that we need to do is we need to first start the game where everything's turned off.

So let's go ahead and do that real quick.

I have part of that in the reset So my enemy spawner, we're going to select that in our game reset.

We have our rocket, so I have those two selected and what else do we need to have turned off the heart, heart two.

heart three and our health.

Let's go ahead and set all those.

We'll just set those all from the very, very beginning.

So I'm going to copy those and then over in my main menu UI, let's go ahead and then paste those down.

And we'll call this start game.

Okay, so we have that set up.

So we're doing is we're initially having our main menu on,

our rocket is off, our enemy is off, and we're going to have all the hearts be off.

So we currently, by selecting the activate game object from our reset, it's turning all that stuff on.

So we just need to deactivate all of these from the very beginning.

So let's go ahead and turn all those off.

And then our initial health value, let's set that to three, which is perfectly fine.

Okay, so now it's time to hook up this button.

So what we're gonna do is to go ahead and we need to drag the button over into our state.

So drag that button over and then we want to select button, UI.

on button click event.

Okay, so we have that set up and we have our start button and then we want to send an event.

So I want to go ahead and choose a new event and we'll call that event play game.

And then it's saying, hey, we don't have that transition created.

So we can go ahead and click that red box.

And then we now have a transition added to our state.

Now we need to go ahead and then we also see that there's an error saying, hey, this transition doesn't go to anything.

So we need to create another state.

so we're gonna add state and I'll call this play game and now we can just

transition over to play game okay so what's happening is when we click on the

button so we've got our on click click event for our button When we click the button,

we're going to send to the play game transition.

The game transition has taken us over to this other state.

And then we need to determine what's going to happen.

Well, we need to go ahead and call over to our reset game FSM because we have that game reset.

It turns everything back on for us.

And the only other thing we need to do is to just then turn off our main menu UI.

So let's go ahead and do that.

And what we're gonna do is to do a, send event by name.

So I'll drag that in.

So when we go over to play game, we're going to send them by name.

The event, we're going to target first the game objects FSM.

And we're going to specify what that game object is.

And the reset game.

So we're going to drag And then I need to determine what event it is that I'm calling.

So let's go over to reset game and we have game reset.

So the easiest thing is just a copy and paste to make sure we don't have any errors when we do this.

We're going to just paste that into send event.

And then what it's doing is it's going to,

once it hits the state, it's going to go over to reset game and say, hey, turn everything back on.

Turn the...

Let's go over here real quick.

It's turning off the game over UI, which we don't need anyway.

We're turning on the spawner, we're turning on the rocket, we're turning all the hearts back on, we're doing everything that we need to.

Okay.

So let's go back to our main menu UI and game play.

The other thing that we need to do here is we need to turn off the main menu UI.

So what I'm going to do is to do an activate game object.

So activate game object and the object that we want to activate or in this case deactivate is our main menu.

So we're going to turn that.

object off.

So activate we just uncheck and what that does then turns off the UI.

Okay, so let's give this a test and see how it works.

So hopefully if I start the animation should play for the main then what we'll do is if we click on the button,

then it will then hopefully go to the reset game,

reset the game, and then in our play game, we're also turning off the main menu UI.

So let's give this a test to see how this works.

And so our animation is looping.

So let's uncheck that real quick and go to our animation.

So in our project folder we've got our main menu animation.

in the inspector, you can see that there's loop time.

So what it's doing is just playing that animation over and over again.

We only want it to play once, so I'm gonna uncheck that.

So that should fix that.

So let's go ahead and back and play again.

And there we go.

That plays in once, I see my button is not playing.

So let's go into our animation for the UI.

So go into my animation.

And...

And my button is showing up as yellow in the animation.

The reason for that is I changed the name of the button.

So the animation is not seeing the button.

That's an easy fix because we titled our button start button.

So I'm going to go ahead and just copy that text rule.

And then in our animation, you can see that there is some yellow text.

We can double click on that text.

There we go.

I've double clicked on the text and I can now change the name of that to start button.

Then now you can see that that is black.

So that's letting me know that that button is now found again So what it's doing is when it's turned yellow,

it's hey,

I don't know where this object is I've got animation keyframes for it,

but it's not working So I'm just gonna change that text as well

So here I need to change this button as

well So you can see button slash text that's saying hey find the text that's inside of the button.

Of course, we need to change that button to start button.

And then there we go.

So that should fix that.

So let's go ahead and play real quick.

And Okay, so that works.

And then if we have to play real The UI goes away, and we are now...

BOOM!

There we go!

So you can see that everything is working exactly the way we wanted it to.

So in this tutorial we learned a lot.

We a main menu UI and then we animated that UI.

So we learned a little bit about the Unity animation system.

Then we hooked up our play button with a new FSM and we can start everything in the game.

And if you're enjoying this tutorial series,

don't forget to hit the like, subscribe, and that little bell icon down there so you know when the next video is available.

Until next time, keep creating.

oh Whoa

Язык перевода

Выбрать

Сводка Экспорт Устная практика

Разблокируйте больше функций

Установите расширение Trancy, чтобы разблокировать больше функций, включая AI-субтитры, AI-определение слов, AI-анализ грамматики, AI-речь и т. д.

Совместимость с основными видеоплатформами

Trancy не только обеспечивает поддержку двуязычных субтитров для платформ, таких как YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, но также предлагает AI-перевод слов/предложений, полноэкранный погружной перевод и другие функции для обычных веб-страниц. Это настоящий всесторонний помощник в изучении языков.

Все платформы браузеров

Trancy поддерживает все платформы браузеров, включая расширение для браузера iOS Safari.

Несколько режимов просмотра

Поддерживает театральный, чтение, смешанный и другие режимы просмотра для всестороннего двуязычного опыта.

Несколько режимов практики

Поддерживает режимы диктовки предложений, устного оценивания, множественного выбора, диктовки и другие режимы практики.

AI-сводка видео

Используйте OpenAI для сводки видео и быстрого понимания ключевого контента.

AI-субтитры

Создавайте точные и быстрые AI-субтитры YouTube всего за 3-5 минут.

AI-определение слов

Нажмите на слова в субтитрах, чтобы найти определения с помощью AI.

AI-анализ грамматики

Анализируйте грамматику предложений, чтобы быстро понять их значение и освоить сложные грамматические моменты.

Дополнительные веб-функции

Помимо двуязычных видео субтитров, Trancy также предоставляет перевод слов и полноэкранный перевод для веб-страниц.