Prototype to Work of Art
So far, you’ve been living in a primitive world of colors and shapes, building a prototype of a top-down shooter. Prototyping allows you to focus on programming functionality without complicating the process with assets. The functionality built here, from player movement and instantiating projectiles to spawning an endless stream of enemies and destroying on collision, can be applied to any kind of environment and artwork. Whether these are robots, humanoids, planes, zombies — this framework functionality stays the same.
Now that you’ve built the prototype and imported your game assets, let’s walk through transitioning the prototype to full-fledge game with assets.
Objective: Apply assets for the background as well as the player, enemy and projectile to the prototype while transitioning from 3D to 2D
- Add Background Art
- Transition Player from 3D to 2D
- Transition Enemy from 3D to 2D
- Transition Projectile from 3D to 2D
- Adjust for 2D collisions
Once you’ve imported your assets into your project (which you can do by dragging and dropping the files from your device to the Project view in the Unity Editor), drag the background image asset to the Hierarchy to create a backdrop.
Set the Position to (0, 0, 0) and then adjust the size of the image to fill the screen in the Game view either using the blue circles of the Rect Tool in the Scene view or the Scale values in the Inspector. Then, rename the object to Background.
2D games use multiple layers of sprites (image files) to create environments and features. Unity allows us to control which objects appear in which layers by using the Sorting Layers and the Order in Layer values (the higher the number, the higher the layer is towards the user). Using the dropdown from the Sprite Renderer component, you can add a Background layer and a Ground layer to your project. Return to the Background object in the Hierarchy to assign the Background layer from the dropdown.
Transition Player from 3D to 2D
When transitioning existing objects from 3D prototypes to 2D sprites, you can either re-create each object using the asset or you can edit the existing object to incorporate the asset.
For the player, let’s re-create the object using the asset. To do this, you’ll grab the sprite for your player and drag it into the Hierarchy.
Rename the object to Player and adjust the following details in the Inspector:
- Tag: Set to Player
- Scale: Adjust to fit game as desired
- Sorting Layer: Assign the Ground layer created above
Drag the Player script into the 2D Player and update the script variables to match the 3D Player object. Then, move the 2D Player to each edge of the screen to find and update the X and Y boundary values in the Player script as needed, since the sprite is a different shape and size than the 3D Player.
Other than correcting the collisions, which we’ll do in a future step, this 2D Player should be working as designed.
Transition Enemy from 3D to 2D
Since the Enemy object is a prefab, let’s edit the existing Enemy prefab to set up the 2D Enemy.
To turn this prefab into a 2D Enemy, we can remove the following components:
- Mesh Renderer
- Cube (Mesh Filter)
- Box Collider
Then, drag the Enemy asset to the Enemy prefab to create a Sprite Renderer component and set the Sorting Layer to Ground. Drag the Enemy prefab into the Hierarchy to check the size and screen boundary values, like you did with the 2D Player. Be sure to apply all overrides so that the prefab is updated with the script component and variable values as well.
Transition Projectile from 3D to 2D
Much like you did above, you can edit the projectile (Laser) prefab by the removing the following components:
- Mesh Renderer
- Capsule (Mesh Filter)
- Box Collider
Next, drag the projectile asset to the prefab to add the Sprite Renderer component and set the Sorting Layer to Ground. Then, pull the projectile prefab into the Scene view to check and adjust the Scale and the screen boundary values.
Since the Player script is responsible for instantiating the projectile, move the projectile to the desired position above the Player and use the Transform values on the projectile to update the position offset variable for the Player script.
Adjust for 2D collisions
Now that the assets are assigned and they are moving around the screen as they were before, let’s set up the 2D collisions for these objects.
Since both the Player and the projectile are colliding with the Enemy, we’ll assign both a Rigidbody 2D component and a Box Collider 2D to the Enemy prefab. Be sure to check Is Trigger in the Box Collider 2D and enter a zero value for the Gravity Scale in the Rigidbody 2D. For both the Player and the projectile prefab, just add a Box Collider 2D and check Is Trigger.
In each object or prefab, go to the Box Collider 2D and click the Edit Collider button to edit the size of the collider to better fit the sprite. The bright green line is the outline of the collider. Click and drag the edges to change the size and shape.
Lastly, to transition to 2D collisions, access the Enemy script and update the OnTriggerEnter method to the OnTriggerEnter2D. You will also need to change the type of value passed into OnTriggerEnter2D to be a Collider2D object.
Now, you have a fully-functional game that looks appealing, too!
*All assets displayed from GameDevHQ’s Filebase