UI Setup

Loading...

From the course by Michigan State University

Introduction to Game Development

2831 оценки

Michigan State University

Introduction to Game Development

2831 оценки

Course 1 of 5 in the Specialization Game Design and Development

If you love games and want to learn how to make them, then this course will start you down that path. Making games is a creative and technical art form. In this course you will familiarize yourself with the tools and practices of game development. You will get started developing your own videogames using the industry standard game development tools, including the Unity3D game engine and C#. At the end of the course you will have completed three hands-on projects and will be able to leverage an array of game development techniques to create your own basic games. This course is for individuals interested in becoming a game designer, game artist, or game programmer.

From the lesson

Designing and Coding Gameplay Systems

Now, don't get scared, but games need code. Code is the canvas upon which game systems are painted. However, that doesn't mean you need to be a C# ninja. In this module, you will start to learn the ins-and-outs of programming C# in Unity. You will apply this knowledge to build a first person shooter game, called Box Shooter. By the end of the module, you will have the tools to begin to develop your own custom games!

Game Manager12:24

Particles and SFX5:30

Meet the Instructors

Brian Winn
Associate Professor
Media and Information

[MUSIC]

In this video, we'll create the user interface for the box shooter game.

Our objectives will be to create a targeting reticle, or

crosshair, which will help our player know what they're shooting at,

create a scoreboard to display the score and create a timer display.

Let's start by creating a UI canvas for our 2D game UI to be rendered upon.

So out on the hierarchy under create, let's go down to UI and create a canvas.

And I'm gonna rename this MainCanvas.

And for the last project, we changed the canvas scaler, the Scale Mode.

But for this project, I'm gonna leave it at Constant Pixel Size,

since we want the UI to be a fixed size, no matter what the size of the display.

So we want to represent a crosshair in the middle of the screen to help the player

know where they're shooting.

So, with the main canvas selected I'm gonna go to Create > UI > Image.

And, that will make it a child of that canvas.

And, we're still in 3D mode here in the scene view, so let's go ahead and

hit F to zoom to the image, and then let's switch to 2D mode.

So, we can really see and, of course, I can zoom out so I can see the canvas and

I can see the image that I just attached.

So I'm gonna go ahead and rename the image as Crosshair.

And let's go ahead and modify some of the properties.

So the first thing that I'm gonna do is change the Anchoring.

So I can click the anchor graphic here and holding down the Shift and

Alt key as it defines above.

I'm gonna go ahead and click the middle to anchor to the middle and

center of my canvas, and you could see the effect that that has.

Now I wanna change the source image.

Right now, it's just white, it's not defined.

Let me click the target.

And I've got a Crosshair image that's imported

as part of the assets that came with the project, so let me click on Crosshair.

And you can see that the crosshair up here is there and

you could also see it down in the game view.

It's a little bit small, so let me go ahead and modify the width and height.

I could do that visually over here or I could just type it.

It's actually a 256 by 256 image, but I think that's a little bit large.

If I click on accept native size, you can see that's the native size of 256 by 256.

So I'm gonna make it a little bit smaller.

I'm gonna make it 144 by 144.

So now when I play.

[SOUND] We've got a nice crosshair [SOUND] and

you can see my projectiles are shooting right out of the center.

Okay, we also want a Scoreboard in our user interface.

So let's place it just above the crosshair and have it visually defined by a box.

So once again, with the main canvas selected, I can go up under Create.

And I'm gonna start by creating another image,

which will be the background of my scoreboard.

So I'll go ahead and rename this Scoreboard.

I'm gonna set the anchoring for the scoreboard.

So the same sort of thing, I'll hold down Shift and Alt and

anchor to the center of the screen.

Of course my crosshair is right in the middle, so I wanna move this up.

So the Y position here, I could just visually drag it up or down,

I wanna set it to around 100 pixels up.

And right now it's just a box, once again,

I could visually drag out the size that I wanted.

I'm gonna go ahead and just type a number here.

I wanna make it 160 by 50 high, and I messed up my X positions,

let me set that back to zero, so it's centered.

And just like with cross hair, I need to pick a source image,

so let me click the target.

I'm gonna use one of the default images that come in the Input Field Background.

So let me select that.

And I wanna change the color, I don't want it to be white,

I want it to be a very dark color.

So I'm gonna basically make it black but I'm gonna make it semi-transparent so

rather than 255 alpha, I'll make it 100 so it's a transparent box.

Okay, we've got our scoreboard background.

Let's go ahead and create our Score Text.

So I'm gonna go to Create > UI > Text, and

the I'm gonna go ahead and name this, Score Text.

Now I want this Score Text to work in relationship to the scoreboard background.

And this is where parent-child relationships work very well just like

we've seen before.

So I can actually move the score text into the scoreboard and

it becomes a child of the scoreboard.

Once I do that,

all of its anchoring properties are in relationship to its parent and, of course,

the parent's relationships are in relationship to the canvas.

So I'm gonna go ahead and anchor the Score Text to the center.

So holding down Shift and Alt once again,

let's anchor it right there to the center and middle of the background.

I'm gonna change the text just to be zero, because this is gonna hold my score.

Let's go ahead and change some of the font properties.

I'll leave it as Arial.

I'll make it bold.

I'll make it much bigger, 40.

I wanna center it and put it in the middle of the area.

And if it gets too big, I don't want it to disappear, so I'm gonna change

the horizontal overflow to overflow and the vertical overflow to overflow.

And I wanna go ahead and change the color as well, so

let me bring up the color picker and I'll go ahead and choose that aqua color.

And there we go, we've got our Score Text.

Now the last UI element I wanna create is, I wanna create a border that will

appear around my scoreboard when the game is over.

So it's sort of visually represents that the score is locked in.

So let me go ahead under Create > UI and

I'm gonna create a border much like we created our scoreboard itself.

So I'm gonna pick Image.

And I'll go ahead and rename this

Game Over Outline or maybe Game Over Score Outline.

And just like the Score Text I want it to be a child of the scoreboard.

So let's go ahead and drag it into the scoreboard.

And go ahead and anchor it just like we did before, so

I'll anchor it using the Shift and the Alt in middle center.

Then I wanna change the image to be the same as the scoreboard.

So let me pick the target.

And remember that was the Input Field Background.

Set that, go ahead and change the color and make it that aqua color that we've set

as a preset and I want to turn off fill center cuz I want it to be an outline.

Now, of course I want it to outline precisely.

Let me tap F to zoom in a little bit.

I want to outline the Scoreboard background.

So this is where maybe the visual tools are nice and there is a little bit

of snapping, so we can go ahead and do that to create that outline effect.

Of course we can numerically enter the width and

height if we knew what that width and height was.

So this outline will turn off and

on so using the little check at the top of the inspector

to basically it'll be off during play and once the game is over it'll turn that on.

So for now, I'll go ahead and leave it off.

Okay, we're gonna create one last UI element to represent

the timer in our game.

So we've got the Crosshair, we've got the Scoreboard with its various components.

Now let's go ahead and create a Timer.

So the timer is just going to be text, so Create > UI > Text.

And I'll rename it Timer Text.

And it's gonna be just within the main canvas,

it's not gonna be part of the scoreboard.

So the parent is the main canvas.

And once again I'm gonna anchor it holding down Shift and Alt to the center middle.

And you can see us right down there on the crosshair but I wanna move it up of course

just like we moved up score board, so go into the Y position.

Once again I could visually sort of move it up here or

I can just set a number here.

So I'm gonna set it to

160 pixels above center which happens to be just above my scoreboard.

And let's go ahead and modify some of the text properties.

So, this is gonna be a time.

It's gonna look like something like 15.0 for like 15.0 seconds.

So I'll put that in as sort of an initial default for visual purposes.

I'm gonna pick the font information.

So we'll leave it at Arial, set it to bold, make it bigger.

I'll set it to 20.

[COUGH] I want to center it and I want it in the middle of that text area.

I want to change the color to white.

And for safety purposes, it does actually display here but

I'm gonna go ahead and do the Overflow mode on.

So, if it does get too large,

it'll continue to display if it overflowed the area that I've defined here.

In the next video we'll get our user interface working by setting up the game

manager.

[MUSIC]

Ознакомьтесь с нашим каталогом

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

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play