My journey becoming a Unity game developer: From Prototype to Work of Art. Changing the background, Player, Enemy, and Laser from 3D prototype to 2D game assets for Galaxy Invaders
Objective: Add a background to the main game. Add a Player, Enemy, and Laser as 2D game objects replacing the 3D prototypes being used. Plus, change their components and script’s code from 3D to 2D in order for the game to work properly.
Let’s add a background image to our game by selecting the SpaceBG_Overlay image and dragging it into the Hierarchy. We will see the image in the game now, but the image isn’t filling the screen properly. We see a black background surrounding the image which is something we don’t want to see. With the image still selected, select the Scale tool and drag the boundaries of the image to each side of the screen to have the image fill in the black areas. Scale the Game window from small to large to see if the image fills in the screen correctly.
Another thing we must deal with when using 2D assets is the Sorting Layer. We added a Player image to the game for demonstration purposes to show as the player moves around the screen, the Player will get lost behind the moon and stars at the corners of the screen. To have the Player be front and center on the screen, we want the background image to be furthest away from the game view.
Inside the Sprite Renderer under Additional Settings, we have 2 settings to work with which are the Sorting Layer and Order in Layer. For the Sorting Layer we have the Default given which has all game objects on the same layer. But, we’re going to create 2 new layers with the 1st name Background and the 2nd name Foreground. The layers are sorted according to the 1st layer created being the furthest away, and the most recent layer created being on top of the other layers. With the Order in Layer, if game objects are on the same Sorting Layer, we can use this layer to place objects over each other by setting the higher numbers to game objects. For objects we want underneath, set them to lower numbers.
Set the Background image’s Sorting Layer to Background as this will keep this image behind all of the game objects we add to this game on the Foreground layer. We can keep the Order in Layer to zero as this will be the only background image using the Background Sorting Layer. Also, change the background image’s name to something like Background or in our case we use Background_SpaceBG.
Now let’s add the Player 2D object by dragging a Player sprite image from our Sprites folder under GameDevHQ’s folder. Change the name to Player and Tag to Player. Scale down the size of the Player to around 0.5 on the 3 axes to start and adjust as you see fit. Then, add a Box Collider 2D and the PlayerBehavior script. With the Box Collider 2D turn on Is Trigger and adjust the collider around the Player using the Edit Collider setting. Also, with the PlayerBehavior script we can go to the Player prototype, select the script’s component and Copy the Component Values. Go back to the Player 2D object and Paste the Component Values to the script’s component to use the exact values used on the Player prototype.
The Player 2D object is moving around like the prototype and shooting lasers destroying enemies as well.
However, we have a problem in that the Player isn’t colliding with the enemies. Instead, we’re going through the enemies even though there are colliders on each objects. The reason for this is that the Player is a 2D object with a 2D collider, while the Enemy prototype is still a 3D object with a 3D collider. The differences in the 2 game objects will prevent them from working properly in the game. We either create the game as a 3D game or a 2D game with all components using one or the other.
We need to change from the 3D Enemy prototype to a 2D Enemy game object. We’re going to do this a different way by selecting the Enemy prefab from the Prefabs folder. Next, we need to Open the prefab and Remove all of the Components from this prefab except for the Transform and EnemyBehavior script. Add a Sprite Renderer, Box Collider 2D, and Rigidbody 2D components to this Enemy prefab. Make sure to turn on Is Trigger and adjust the box collider around the Enemy for the Box Collider 2D. For the Rigidbody 2D, set the Gravity Scale to zero. Last, drag in the Enemy sprite image from the Sprites folder into the Sprite slot inside of the Sprite Renderer component. Scale down the size of the Enemy image to a size of your preference which to start was 0.5 along all 3 axes.
Inside the EnemyBehavior script, change the OnTriggerEnter and Collider Type to OnTriggerEnter2D and Collider2D. This will now make the Enemy collisions a part of Unity’s 2D system.
Enemies are now colliding with the Player as both of them are 2D objects with 2D components attached to them.
The last object we need to convert is the Laser prototype to a Laser 2D object. Use either of the 2 methods we used to convert the Player and Enemy. Just make sure that the Laser 2D name is set to Laser with its Tag assigned, has a Sprite Renderer with a laser image from the Sprites folder, Box Collider 2D with an adjusted collider around the laser, Rigidbody 2D with Gravity Scale set to zero, and the EnemyBehavior script all attached to the new Enemy game object.
Player is now destroying enemies with its lasers and the Player’s ship itself making this 2D setup complete.
