From Prototype to Pretty

Alright, so we’ve got our player character set up. We’ve got our enemies set up. And we’ve got our lives set up. Now it’s time to start making our game actually look like a game. We do this by adding assets. There are a ton of places you can find assets online, but for the sake of time I’ll just recommend either the Unity Asset store or GameDevHQ’s Filebase.

As you can see below I’ve already imported my assets into Unity and am ready to get started.

For prototyping purposes, we’ve been working in 3D mode, so the first thing we’re going to do is click on the 2D button at the top of our scene window. This changes our perspective from 3D to 2D.

You’ll notice that our player character is still a 3D object, despite being flat. That’s because we haven’t replaced our 3D objects with 2D sprites. We’ll get to that in a moment, though. The first thing we’re going to do is simply add our background.

As you can see above, I simply just have to drag my background into my hierarchy. You may notice, however, that it isn’t quite centered. This is an easy fix. All you have to do is zoom out and adjust the size of the background by dragging on its four corners.

I’m also going to go ahead and rename the background to simply “Background”.

If you look in the Inspector, you’ll notice that the background is using a Sprite Renderer. There are a number of components here that are noteworthy, but the ones we’re going to focus on are sorting layer and order in layer.

The easiest way to explain layers is that the higher the number in the order, then the closer to the camera or the user the object is. For example, if I take my spaceship sprite and put it in the hierarchy it’ll automatically be at 0 in the order.

And by dragging it around, you can see that it is actually behind the background.

To fix this, we’re going to make a slight adjustment to our layers. First, we’re going to create two new sorting layers: background and foreground.

Next, we simply assign the foreground layer to our player sprite and the background layer to our background.

Now we’re going to begin rebuilding our 3D player object as a 2D sprite. If you think about it, the most important thing about our player object is the script, so we’re going to simply drag our player script onto our new player sprite.

Now you’ll notice that the sprite has the same characteristics that we had set up for our previous 3D object. Because of this we no longer need our 3D object so we can delete it.

Next, we want to make sure to change the tag of our sprite to “Player” because our scripts are going to be looking for that. Now let’s run our game and see how everything is looking.

In the above image, you’ll notice a few things. First, our player is a little big. we can fix this by adjusting its size in a similar fashion to how we adjusted our background size. Or we can simply adjust the scale of the transform. I’m going to do the latter and change it to 0.5.

Next, the player character is behind the background again, so let’s change the sorting layer back to foreground.

And finally, you’ll notice that our enemies aren’t colliding with our player. This is because our player is now a 2D object and doesn’t have a collider. To fix this, we’re actually going to deconstruct our enemy prefab and reconstruct it into a 2D sprite.

We’ll start by clicking on our enemy prefab and opening it.

Most of the things you see above you’re not going to need. So go ahead and remove the mesh filter, the mesh renderer, the box collider, and the rigid body. The only things you should have left by now are the transform and the script.

Now, to begin rebuilding this into a 2D sprite, the first thing we’ll need to do is add a sprite renderer.

As you can now see, the Sprite Renderer is looking for a sprite to display. So now I’m going to drag my enemy sprite into this field.

Now assign the enemy to a sorting layer — I chose foreground — and let’s go back to our scene. If you run the game now, you’ll see that nothing is colliding. That’s because neither the player nor the enemy has a collider. To fix this, you’ll first want to add a 2D RigidBody to your enemy sprite and make sure the gravity scale is set to 0 so we don’t apply gravity in Unity.

Next we need to add a collider, so let’s add a 2D Box Collider and make sure to check “Is Trigger”.

While we’re at it, let’s add a 2D box collider to our player as well.

Notice how adding the collider gives you these four anchor points. These can be used to adjust the size of the collider. As you can see, the box collider is a bit big for our player so we’re going to go ahead and click on the “Edit Collider” button in our inspector and adjust the size.

Now let’s do the same for our enemy. Simply open the prefab back up and repeat the steps that you used to adjust the player box collider.

With our box colliders now adjusted, we now need to go back into our enemy script and adjust a small amount of scripting. All we need to do is change our OnTriggerEnter to “OnTriggerEnter2D” and our Collider to “Collider2D”.

Now, the only thing left to adjust is the laser. To do this, I’m actually going to delete the laser prefab and rebuild it by dragging my laser asset into the hierarchy, then adjust the sorting layer to the foreground.

Now, because the laser appears to be way too big, I’m going to adjust the size of it. Next, I just need to rebuild the behavior of the laser.

So, the laser already has a sprite renderer. That means that the next thing I need to add is a box collider. Remember to add a 2D box collider as opposed to a 3D one.

Next, I’m going to adjust the collider to make it better fit the laser asset.

Now, I’m going to add a 2D Rigidbody and set the gravity scale to 0.

Finally, the last thing I need to do is add the laser behavior script.

After that, I simply have to make my laser a prefab again by dragging it from the hierarchy into the Prefabs folder and add the laser back to my Player script like below.

And there you have it! Our game actually looks like a game!