Quality matters— From Prototype to Unity Assets!

In previous articles, we basically covered most of the core mechanics of StarShooter 2D Game. But, we really have cubes and capsules, don’t we? It’s time to upgrade our game objects and background into those high-quality amazing looking assets!

3D to 2D

So far, I have been using 3d objects (cubes and capsules) and 3d components (Box Collider 3d and Rigidbody 3d). But, I will convert them into 2d with Sprite.

What is Sprite?

• Sprite is a simple 2d object that is essentially a graphic image(texture). You can turn any png or jpeg image into Sprite, but usually, we would want to use png as png can have transparency — meaning we won’t see the square edges.

Difference between png (left) and jpeg (right) — image source: vectorstock.com

How to convert png image into sprite in Unity?

1. drag and drop in the png file that you want to use into the Unity project folder window.
2. Go to Inspector window → change the texture type from ‘Default’ to ‘Sprite(2D and UI)’
3. Unity will ask you to confirm — click ‘Apply’.

Now, we have a sprite! You can drag this into either Scene or Hierarchy.

When replacing a gameobject, just remember to add the scripts, tags, and other components that you originally had in player, laser, and enemy.

• You will also need to add Box Collider and Rigidbody to these gameobjects, HOWEVER, since we are converting from 3d to 2d, we need to make sure that we are adding Box Collider 2D and Rigidbody 2D.
• In Enemy script, we will also need to convert OnTriggerEnter Method to 2D type as shown below.

Make sure that you are not missing anything such as variable value or tag from the previous gameobject.

Sprite Layers

I’ve also added this amazing-looking background sprite in the game scene but noticed one thing — the player goes under this background when they overlap. Why is this happening? It’s because we didn’t set the Sprite Layer correctly.

So, where can we set this Sprite Layer? If you click on one of the gameobjects (for example, player), You will notice that there are ‘sorting layer’ and ‘order in layer’ under Sprite Renderer Component.

In default (if we did nothing), it will be at Default (Sorting layer) and 0 (Order in layer). Default with 0 value is the lowest layer level it can get.

In ‘order In layer’, the higher number is the closer is to the Top layer.

1. To create a new sorting layer, you can click on ‘Default’ → Add sorting layer…

2. Press + sign to add and — sign to remove the layer.

3. Name the layer that you’ve added (I added 2 layers with names of ‘Background and Foreground’).

• Please note that, in this ‘sorting layers’ window, the lowest row represents the highest sprite layer, so name them accordingly.

4. Once you’ve named them, go back to the inspector window, then change the sorting layer to

• Player, Enemy, and laser = Foreground
• Background sprite = background

*Since we do not have that many gameobjects at this point, I will keep it simple and have all of the gameobjects’ order in layer to be 0.

Now let’s see how it looks.

Awesome! Now it’s really starting to shape!

Thank you so much for reading!