Oooh! Pretty!
From Prototype to Work of Art
We’ve now built our prototype, and we’re pretty happy with how it functions. Time to make it look like the 2d space shooting game we have planned! There are just a few steps we need to perform to make our 3D prototype into a 2D production quality game.
Import the assets
We’ve been provided with a number of assets for this project so adding them to the project is as simple as dragging them into our project window and making sure that they are organized into the folders that we want. In this case, I was lucky in that the assets were already in the folder structure I wanted them in. It is also important to make sure that our image assets are imported in the format we are looking for. In this case we want them as Sprite 2D files.
Make it 2D
We can adjust our Scene view to show us our game as a 2D scene. To do this we click the 2D button at the top of our Scene view.
Add the background
First we’ll add the background to our play space. In the future this back ground will be upgraded to something more dynamic but the asset that was provided will do for now. We can drag our back ground sprite from our project window to our hierarchy window and adjust it’s size to match our game window. This sizing could be done dynamically but this static placement is fine for now, as I plan to replace it with something more dynamic later.
Convert the player
There are a few ways we can convert our player from our 3D prototype into our 2D sprite. One method would be to drag a copy of our player sprite image into the hierarchy, rename it to Player, and re-add our Player script, a box collider 2D component, our Player Input object (because we are using the new Input System), and reset all of our values to what our original prototype object had them at. It is important to make sure that we apply the Player Tag and make sure that the Box collider 2D component has the Is Trigger flag set.
I am going to choose an alternative method. I am going to replace the Box collider component with a Box collider 2D component, and the Mesh Renderer and Cube (Mesh Filter) components with a Sprite Renderer component. Then I’ll drop our player sprite into the sprite renderer. We also need to make sure that the Box collider 2D component has the Is Trigger flag set. Either way you end up with the same result. Our Player tag and the settings of our Player Input and Player Script components are preserved in this method.
Convert the enemy
We still have some code changes to make but before we do that, lets finish converting the other visuals. We can use the same steps to convert our Enemy object but, because this is a prefabbed object, we want to make the changes to the prefab instead of an object in the hierarchy. We also need to replace the RigidBody component with a RigidBody2D and set the Gravity Scale to 0 (which does the same thing as unchecking the “Use Gravity” option on its 3D counterpart).
Convert the laser
The conversion of our laser prefab is identical to that of our enemy prefab. You can choose a Box Collider 2D or a Capsule Collider 2D, I chose capsule despite the graphic provided being a rectangle because I intend to swap out that graphic with something that looks a bit more like a fireball with a tail.
Code Changes!
We’re almost there. We swapped out all of our colliders and rigid bodies with their 2D counterparts. Now we need to adjust all the Unity Event Handlers in our classes to handle the 2D version of those collisions as well.
In our Enemy class we change
to
Adjust Colliders
I adjusted our colliders to match the size and shape of the new graphics. I noticed that the enemies were dying, what seemed like, long before the lasers were actually hitting them. This was because the collider on my Player was very small, the collider on my laser was very short, and the collider on my enemy was 3 times the size of the graphic. I adjusted this by going into each collider in the editor, clicking edit collider and adjusting the collider in the Scene window.
Next Time!
And now we’ve converted our prototype to a production ready project! Tomorrow we’ll talk about why we started with the prototype and the benefits of prototyping without assets! If you enjoyed this article, or want to come along with me as I progress on my journey, follow me at gamedevchris.medium.com.