Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Unity Basics!
You have completed Unity Basics!
Preview
Now that the functionality is in place, it’s finally time to make this game look better. We’ll learn how to replace the built-in sprite shapes with some art and get things sized correctly.
Unity 6 Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Okay, now that all
of our functionality is in place,
0:00
I'd say it's time to get this project
looking better.
0:03
So first things first,
be sure to download the project files
0:06
beneath the video in the Downloads section
if you haven't already.
0:09
Once you have it
downloaded and unzipped or extracted,
0:12
you'll see a Flying Mike's Asset folder.
0:16
Simply click and drag
the Art and Audio folders
0:18
from your computer's File
Explorer or Finder and drop it
0:21
right into the Assets
folder in your project window.
0:24
In the art folder is
all the absolutely mind-blowing
0:28
and groundbreaking
art that I've created for this project.
0:31
... Kidding of course,
it's pretty basic,
0:35
but it's better than looking at a circle
and some squares.
0:37
There's a background image here
that just has a subtle color gradient.
0:41
Let's click and drag
this straight into our hierarchy.
0:44
This isn't
going to be a child of the canvas,
0:48
so if you're still focused on that,
you can double click your camera game
0:50
object to zoom back in and focus on that.
0:53
You'll see it automatically created
a game object for us,
0:57
added a sprite renderer component,
and assigned our image as the sprite.
1:00
Awesome!
1:04
In the 0,0,0 position and the size
camera we have, it looks great as is.
1:05
Nice!
1:10
Let's rename it to background.
1:11
Hi there, Travis from the future here.
1:17
Real quick, things may appear
slightly different for you momentarily.
1:20
For example, some of your objects might be
hiding behind this background image now.
1:23
Don't worry,
1:28
that's something we're going to take care
of in just a moment here, hang in there.
1:29
I just didn't think about it until
it happened to me while I was recording.
1:33
Okay, back to old timey Travis.
1:36
Okay let's do the pipe next.
1:39
We could double click our pipe's prefab
to open its editor before,
1:41
but I'd like to show you another way
of updating a prefab.
1:45
Let's click and drag
one into our hierarchy and make changes
1:48
like we normally would with any
other game object.
1:51
Let's select the bottom pipe
1:54
and drag our pipe image
1:59
into the sprite property
2:00
Wow, it's humongous!
2:09
Well, that's because of a few things
I created these art files large
2:11
so that we can scale them down
if necessary.
2:15
If I were to make them too small
and we scaled them up,
2:18
the images will get pixelated
and not look very good.
2:20
It's also because the
Y of this object is scaled up.
2:24
So let's bring our
bring our Y scale back to a value of 1.
2:27
Next, let's click on the art asset itself
2:36
and we'll see a bunch of options
in the inspector.
2:39
What we want to work with
is this pixels per unit property.
2:43
This stands for how many pixels of this
image will fit inside of one Unity unit.
2:47
So the higher the number, the smaller
it renders.
2:52
The lower
the number, the larger it renders.
2:55
Let's change this to 200 and click Apply
2:57
here at the bottom.
3:00
That's much better.
3:05
But it's being covered by the background.
3:07
This is due to all of our objects
that have sprite renderers
3:09
being on the same sorting layer
and having the same order in layer.
3:12
In larger games, it's
worth it to create a new sorting layer
3:17
and assign objects together,
but for something this small,
3:20
we can just provide a new value
to our order in layer.
3:23
Smaller numbers will appear farther
away, larger numbers
3:27
will appear closer to the camera,
so we'll leave the background
3:30
at a value of 0 and move up from there.
3:33
Let's give these pipes a value of 1.
3:36
There we go.
3:41
Now we need to
3:43
adjust our colliders again
since we adjusted the scale of the object.
3:43
It's going to be hard to see the collider
with this bright background,
3:47
so we can actually hide an object's
visibility in the scene window,
3:50
in the hierarchy, just to the left of
its name and clicking this eyeball icon.
3:54
It'll still render in play mode,
but it gets it out of our way
3:59
while we're working in the scene window.
4:02
Let's enable the edit
button and stretch it out a bit.
4:08
I'm going to leave a small amount of space
near our gap to give the player
4:11
a bit more of an advantage
and make the game feel a bit more smooth.
4:14
Let's do the same for the top pipe.
4:22
Assign the sprite,
4:31
and reset its Y scale to 1.
4:35
Now we're going to need to rotate this as
well, so let's rotate this on its Z axis
4:38
180 degrees.
4:43
Nice.
4:48
I'll give the order and layer
a value of 1, like the other,
4:49
and let's edit the collider
4:54
the same as before too.
4:56
My score box looks it'll still work
good here,
5:14
but make sure you double check yours.
5:17
Now, I'm not sure if you noticed, it's
a little hard to see, but as we've
5:20
been changing values, the property names
have been appearing bold.
5:23
This lets us know that they've been
altered from how the prefab is saved.
5:27
So to apply all these changes
we've done to our instance
5:30
to the prefab itself, let's click
on the pipe's parent object.
5:33
Below this
5:38
prefab field is a dropdown
named overrides.
5:39
If we expand this, we'll see
all the changes we've made to this prefab.
5:42
Let's select Apply All.
5:46
Now every prefab will instantiate
with these changes.
5:48
We can safely delete this instance now.
5:51
Next let's click on our ground object.
5:58
I'm just going to change the color
to a green color
6:01
to represent grass,
6:03
and change its order and layer to 2
6:11
so that it appears in front of the bottom
pipes.
6:13
Finally, let's change the circle
to Mike the Frog.
6:17
Let's select the player object
and drag this
6:20
FlyingMike1 image into its sprite property.
6:23
He's looking quite large as well.
6:30
Let's hold shift and click
on all three of these frog art assets
6:32
and change all of their pixels
per unit to 400 and click apply
6:36
If these little gizmos
are ever getting in your way,
6:46
you can come up to the top toolbar here
and select the dropdown
6:49
next to this sphere icon.
6:52
If we adjust this
6:56
3D Icons slider,
you'll see their sizes change.
6:57
That's better.
7:00
I'm going to zoom in closer.
7:02
Let's give the player
an order in layer of 3
7:08
and adjust its circle collider
to better fit its head.
7:10
I'll just use the offset
7:18
and radius values here this time.
7:19
I think adjusting the X offset to 0.28
7:25
and the Y to 0.1
7:29
with a radius of 0.32 looks great to me.
7:32
I'm also going to move the player
to the left
7:39
to give them a bit
more of a heads up to the incoming pipes.
7:41
Negative 5.5 feels perfect.
7:51
Let's make sure everything
works in play mode.
7:54
Okay, things are feeling good.
7:58
Remember, you can always adjust the sizes
of these assets per pixel unit values,
8:00
the gaps in between the pipes,
and their colliders to your liking.
8:05
The score text is a bit hard to read,
so I'm going to copy
8:12
the hexadecimal value
in the color of our ground object
8:14
and paste it into the color of our score
text.
8:18
Much better.
8:41
In the next video, we'll add a simple
animation to our flying frog.
8:43
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up