Prototype to Work of Art

Top-down shooter prototype

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

Steps:

• 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

Background Art

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.

Resize background sprite to fill the Game view

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.

Add Sorting Layers to organize sprite order

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.

Inspector view for the player sprite added to the scene

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

Create 2D Player object and update name, scale and sorting layer

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.

Find new screen boundaries for the 2D Player

Other than correcting the collisions, which we’ll do in a future step, this 2D Player should be working as designed.

Play-testing 2D Player object

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.

Inspector view of 3D Enemy Prefab

To turn this prefab into a 2D Enemy, we can remove the following components:

• Mesh Renderer
• Cube (Mesh Filter)
• Box Collider
• Rigidbody

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.

Play-testing 2D Enemy prefab

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.

Find the new position offset for instantiating the projectile

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.

Play-testing the 2D projectile object

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.

Add Box Collider 2D and Rigidbody 2D to the Enemy prefab

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.

Resize the collider to better fit the sprite for the Enemy prefab

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.

Update the trigger collision method to OnTriggerEnter2D

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.

Play-testing fully updated project

Now, you have a fully-functional game that looks appealing, too!

*All assets displayed from GameDevHQ’s Filebase