From Prototype to Work of Art

We have a good working prototype working its now time to add the assets from our artist.

3D prototype to 2D game assets

When I started prototyping the game I had Unity set to use the 3D template. I could have used the 2D template and used the simple 2D assets that unity provides. I used the 3D to help show that the differences in coding 2D versus 3D in specific the differences between the physics.

Changing Project settings

To switch Unity to using the 2D template go to Edit->Project Settings

Opening Project Settings

In the Projects Settings window in The Left Pane Select Editor then change the Default Behavior mode from 2D to 3D.

Change Editor Default Behavior to 2D

In the project settings window on the left hand side you will notice “Physics” and “Physics 2D”. We have to make the same changes in the Physics 2D that we made in the Physics tab up to this point. The only change that I made was to the gravity scale, just in case I forgot to change the rigidbody Use Gravity option. Go ahead and change the Gravity scale to 0 on all axis.

Changing Gravity Scale

Converting the Scene

Make Prefabs for the Player, Spawn Manager And Laser Projectiles.

Spawn Manager, Laser Projectiles, Player as a prefabs

In the Scene view change from 3D to 2D view.

Changing the scene view to 2D

Select The Main Camera and change the Projection from perspective to orthographic.

Changing the Camera from Orthographic

Remove the Directional Light From the Scene.

Save the Scene.

Create a New Scene by going to File->Create New Scene. Depending on the version of Unity that you are using (I Am Using 2020.2.6f1) you may see the New Scene Window. If you get this Window Select Basic 2D it should already be selected. It does not matter if you save your old scene or not as we will be replacing it with our new scene.

Creating a new 2D scene

Add the Spawn Manager, Projectiles, And Player back to the scene.

Adding Spawn Manager, Laser Projectiles, and Player Back to the scene.

And Change the Camera’s Background Color to Black.

Save your scene as Game.

Saving the scene as Game

Add your art assets to the project

I Am using GameDevHQ File Base for my project.

Default way of adding external Assets.

After importing you may want to change a few of the import settings on the textures/sprites. The defaults used depends on if Unity is Set to default in 3D or 2D.

  • The first setting Is texture type (3D mode defaults to “Texture” 2D mode defaults to “Sprite (2D and UI)”).
  • Next is sprite mode. (Change this to multiple for sprite Sheets).
  • Next is the Pixels Per Unit (PPU) — This is how many pixels Make up one Unity unit (or 1 meter) Unity defaults to 100. Important if you are using pixel art or using the art for tile mapping.
  • Filter Mode. If using Pixel art should be set to Point (No Filter)
  • Compression. If you are using pixel art use none.
  • Max Size. (Change to a bigger size if the texture is actually bigger then what is here.) Unity defaults to 2048
Example of Max size distorting an image.

If you Make Changes to any of these make sure to click Apply.

If your sprites do not look right when using them in your game first check the max size, then check the PPU, Then try changing the Filter mode, lastly try changing the Compression setting. Sometimes you have to change all of these to get the art to look good. Typically you only have to make changes here if you did not get the Art from the asset store.

Purchase Assets from the Asset Store

In Unity Go to Window->Project Manager

Opening the Project Manager

Once the Project Manager Loads Go to My Assets, find the asset that you want to use and download and import it.

Finding the asset you purchased and down loaded
Importing the Asset From the Asset Store

When the Import Unity Package Appears select the Assets that you want in the package and Select Import. I recommend that before you import an asset from the asset store into your project that you first import it into a empty project and import everything so you get an understanding of how the assets in the asset package are used. Things that can have a negative affect on your project are scripts, and any asset that modifies your project settings.

Importing Assets from the asset store. Removing unwanted Assets.

Adding A Background

Drag the Background Image that you want to use from the project view to the Hierarchy.

Make the Back ground fit in your Game View by using the Rectangle Tool in the Scene View to change the size of your image. You can also adjust the size of the camera to better fit your image. I adjusted the size of my camera as I am using a screen resolution of 16:9 and my background happens to be 1920x1080 which is a resolution of 16:9. Use a combination that makes sense for the art work that you are using.

Changing the Player to be 2D.

Drag the sprite that you want to use from the Project into the Hierarchy.

Adding the Player Ship Image to the Scene

In my case the players ship is to big for my scene so I am going to change the scale of the ship to 0.5 to get it looking the way I want.

Now notice how the ship disappears behind the background. This is because of the way Unity sorts Sprites when it renders them.

To fix this you can Change the order in layer. Larger Numbers draw on top of Smaller Numbers.

Changing the order in layer.

I am going to use sorting layers. I created 2 sorting layers, Background and Foreground. Then made the Foreground Draw on top of the Default layer and the Background draw bellow the Default layer. The Order in the list is the order that your sprites will draw.

I am putting the Background image on the Background Layer and the player ship on the Default layer with a sorting order of 1. I want the player to draw on top of everything else on the layer.

Changing the sorting layers.

Now its time to add the player script, get the values from the old player, rename our sprite to Player, and make any adjustments that are needed to make the Player function right in our scene.

Adding the Components And Copying their Values
Setting the screen bounds for the player.

Make sure the player can be damaged we need to add the rigidbody and box collider components. Since this is 2D we need to make sure that we use the Rigidbody 2D and Box Collider 2D. Make sure to make the Box Collider 2D a Trigger. The Ridgidbody 2D does not have a Property Use Gravity like the Rigidbody 3D but it does have a Grivity Scale Property. This property is how much the Gravity from the Physics 2D system affects this Rigidbody. Lets set this to 0.

The Rigidbody 2D also does not have a Is Kinematic Property instead it has a Body Type. Don’t forget to change the Body Type.

Now the Box Collider is a little big for the Player so I have to Edit it. After Editing the Collider I manually change the offset back to 0 and the size to 2 decimal places.

The Player is all set up now I delete the old player from the scene and also remove the player prefab as it is not needed now. Don’t forget to rename the player ship object to Player and save the scene.

The Player Moves and fires lasers and destroys the enemy. The Enemy no longer collides with the player. That is because the player is using 2D physics while the laser and enemy are using 3D physics.

Changing the Laser to be 2D

Open the prefab to edit it.

Remove all the 3D components (Mesh Render, Capsuale Collider, Capsule Mesh Filter)

Add the required 2D components (Sprite Render and Capsule Collider 2D)

Make the Sprite Render’s sprite to be the laser.

Adjust the size of the capsule collider to fit the laser image. I found that a size of (0.5, 3) looks good.

Exit the prefab Editor. Add the Player Laser to the scene, change it’s Y position to 0.8, this is the offset that we have it instantiating in the player script. It looks to be a little off. Adjust the position on the Y plane to a good spot. I am using 1.05. Change the Laser offset of the player component to 1.05. Delete the laser from the scene.

Looking good. All that’s left is the Enemy.

Player and Laser with assets.

Changing the Laser to be 2D

Going to change the enemy the same way I did the Player.

Add the Enemy Prefab and Sprite to the Scene

I am happy with the way the enemy looks in the scene so no adjustment needed.

Add the required Components to the Enemy Sprite (Enemy, Box Colider 2D, and Rigidbody 2D).

Copy the Damageable and Enemy values from the enemy prefab to the new Enemy.

Make the box collider fit the sprite and make sure it is set to Is Trigger.

Change the Rigidbody 2D body type to Kinematic. Notice that the gravity scale option disappeared.

Delete the enemy prefab from the scene and from the project folder. Rename the Enemy sprite to Enemy and make it a prefab. Delete the new enemy prefab from the scene.

Something went wrong I got an error. When I deleted the prefab from the project the spawn manager lost the reference to it. I have to add the new enemy prefab to the spawn manager.

What happened to the collisions

The Game looks great but now the collisions aren’t working. I converted the game over to 2D which also means that the game is using the Physics 2D System now, my behavior scripts are using the 3D Trigger Events. All that is left is to change the Damageable behavior from OnTriggerEnter(Collider other) to OnTriggerEnter2D(Collider2D other)

The laser kills the enemy but the enemy does not destroy the laser and the player never collides with the enemy. To fix this just change the Player’s tag to Player and the Enemy’s tag to Enemy.

Excited about changing my hobby into a new carer with GameDevHQ course.