Stepping it up a notch from Prototype to Production!
Objective: Transform our 3D prototype project built with primitive objects into a 2D game with imported sprites.
Up until now, I’ve used primitive objects to quickly prototype the main elements and develop the proof of concept and basics scripts necessary to move my player, spawn the adversaries, and fire my laser. Using the assets provided with this 2D Game course by GameDevHQ, I will replace these primitives with some really cool sprites.
I’m relatively happy with the way things are going, so I want to move from the prototyping stage to the production stage. Time has come to import some high-fidelity graphics to make our gameplay more visually pleasing.
We have these 3D primitive objects provided in Unity such as the cube, sphere, cylinder, planes, and capsule to which we attach materials to spruce them up. There are also 2D objects which are called sprites.
There are a few ways to replace one with the other, but before we begin, let’s put ourselves into 2D view. The 2D mode gives you a perspective view and allows you to view all the objects as flat surfaces, even though they retain their 3D components in the Inspector view.
Let’s start by setting up our background. This is done by simply dragging the provided sprite (in this case the one called SpaceBG_Overlay) into the Hierarchy. We can then use the Rect Tool in order to resize the sprite to ensure the background fits nicely into the Game view. Finally, rename the sprite.
You then want to set the sorting layer for the background. There are two ways you could do it.
First (not shown), simply change the Order in Layer. The higher the number, the further in front of the stack the sprite will be (it will appear closer to you).
The second method (shown on the left) is to set up new Sorting Layers.
By default, the higher the layer is on the list, it will be drawn first, therefore the further toward the back it will be on the Game view.
And as a bonus, within the individual layers, you can adjust the Order in Layer if you have multiple sprites occupying the same layer.
Next, let’s convert our Player. At the moment, it’s a 3D object with a Mesh Filter, a Mesh Renderer, and a Box Collider. All these components are 3D, and need to be converted to 2D. Since the only common component so far in our prototype is the Player Script component, it’s much easier to rebuild our game object, beginning with the desired 2D sprite.
Drag the desired sprite into your Hierarchy and rename it Player. Drag the PlayerScript from the Scripts folder into the new Player inspector tab. Select the original Player and copy/paste the PlayerScript component values into the new Player.
Set the Tag of the Player to Player, its Sorting Layer to Foreground, and finally resize its Scale to (0.5, 0.5, 0.5).
The last step is to delete the original Player 3D game object.
Then we need to rebuild our Enemy game object. In this case, we’ll open the Prefab, remove all the unnecessary components related to the 3D primitive object, and add a Sprite Renderer component. We then drag and drop the desired sprite image into the Sprite field, set the Sorting Layer to Foreground to ensure the 2D game object remains above the background space scene layer, and finally Save your changes to the Prefab.
At this point, if we run the game, we should be able to move the Player, fire off some cheesy looking capsules (since we have yet to modify our laser 3D game object into a 2D sprite image), and a menacing Enemy ship which gets spawned from the top of our screen. One problem though: no collisions are being detected. We still need to add 2D Box Collider and 2D Rigidbody components to our objects. All objects will need a 2D Box Collider, but only one will need a 2D Rigidbody which we’ll assign to our Enemy. Let’s do this next…
Open your Enemy Prefab and add a Rigidbody 2D, set its Gravity Scale to 0, then add a Box Collider 2D, making sure Is Trigger is set to TRUE. Finally, in the Box Collider 2D component, select Edit Collider and bring in the edges of the box nice and snug against your game object by manipulating the small green anchor points.
Then do the same to the Player game object, adding a Box Collider 2D, set Is Trigger and Edit Collider as required.
The last step is to modify our Enemy script and change the private void OnTriggerEnter(Collider other) method in order to detect 2D objects. This is simply done by adding “2D” to detect 2D sprite collisions and change the parameter to hold a 2D image as depicted below:
The final piece of the puzzle is to convert our prototype laser projectile into a 2D sprite. For this, let’s build it from scratch. Start by deleting the old Laser Prefab. Now drag the desired sprite into the Hierarchy, rename the game object, set its Tag to LaserPlayer, and adjust the scale if required, then set the Sorting Layer to Foreground. Then add the Box Collider 2D, set Is Trigger, and Edit Collider to adjust the box around the sprite image. Add the Rigidbody 2D and set the Gravity Scale to 0. Last but not least, add the Laser script component and save the whole game object as a Prefab.
Once this is done, remove the Laser Prefab from the Hierarchy (or else you will start the game with a laser shot expended from the Player). The final step is to inform the Player to use the newly created Laser Prefab by dragging the Prefab into the Player (Script).
When you test the game play, you may notice that the laser’s offset position when it gets instantiated seems somewhat off. This makes sense. After all, we’ve swapped from a 3D primitive to a 2D sprite. In order to correct this slight error, set the Transform position of both your Player and the Laser Prefab to (0, 0, 0). Select the Laser, and move its position along the Y-axis until you get the desired visual effect (in my case, I like to set the Y to 1.0, making it look like the Laser is originating right at the tip of the Player).
You then go into your PlayerScript and adjust the new Vector3 position of the instantiated Laser Prefab to reflect the new offset.
This concludes the process I followed to move my project from the prototype stage into the production stage. We’ve converted all the 3D primitive game objects into 2D sprites, and made the required adjustments to our scripts to ensure 2D objects are detected.
