From prototype to a work of Art!

addam davis
6 min readMay 16, 2021

Everything we’ve done up to this point has been building our prototype of a game. The bones are all set, and the meat of the game is plain to see with not an asset in site. If you wanted to show off this game to someone you knew they would be impressed with the work you have done. You made a video game. As satisfying of a feeling that is, we both know we can do more. We can import assets and beautify this game with a nice level of polish.

You may be wondering, “what’s an asset?” Well assets are an item that you can use in your game. An asset may come from a file created outside of Unity, such as a 3D model, an audio file, an image, or any of the other types of file that Unity supports. There are also some asset types that you can create within Unity, such as an Animator Controller, an Audio Mixer or a Render Texture.

Now shopping for assets you’ll find no shortage of assets for sale. If you are in the market to buy assets you will be able to find almost anything that you could imagine for your game. You can always count on a bundle of assets depending on what you are wanting and when. Humble Bundle seems to always have an amazing collection for a prize that you can choose. There is also the Unity store itself, they have all sorts of assets. They also have a selection of assets at a delicious price of free. So far, we have been working on a 2.5D project in a 3D setting. If you are looking for assets for this project, then you will be looking for 2D assets.

To add any assets you acquire to your game all you need to do is download the assets. Then go the root file and drag your assets into the project view in Unity. To get a better look at your game in 2D, at the top of the scene view, make sure the view is set to 2D.

The easiest and fastest way to add beautification to our project we’ve been working on together would be to add an outer space background image. All we need to do is drop this into the hierarchy and you will instantly see the difference in your game. You may need to use the rect took to stretch the image to fit the whole background.

Look how amazing that looks! All it took was a free asset and BOOM, you have a rich setting. Inside the inspector we see the sprite renderer. We need to add two layers under the sorting layers, a background, and a foreground layer. Set this to background and the order of layers is fine at 0.

The background layer goes in the back and the foreground is for things that go on top. If you have two objects in the background you can sort them further with the order of layers. The higher number will go on top, and the lower number is on the bottom.

Let’s take this a step further and add an asset to your player. To do this we need to get a 2D asset that we like. Feel free to use which ever asset you have, you don’t have to use the same as me. For me, I’m using this.

As of now our player has been a 3d cube, to make a 2d sprite attach properly we are going to need to convert the player to a 2d object. Take you asset and drag and drop it into the hierarchy. Rename it as Player and attach the player script to this new player. Here, you can either fill in the variables as they were, or you can click the options button on the component under the original player and copy. Then, under the same component on the new player you can select the options button again and paste component values.

It is now safe to delete the original player. Now don’t forget to set the tag on the new player, so we can reuse the formula on our collision. We will always want the player to be on top, so we need to set it to the foreground. Make sure you scale the sprite to an appropriate size.

We have a few more setting to settle but first we need to convert the enemy to a 2d object as well. Let’s take this one step at a time. To begin open the enemy prefab in the prefab view at the top of the inspector view. With this open you now need to remove the following component, Mesh Renderer, Mesh Filter, Box Collider, and the Rigidbody.

I know it seems intimidating but rest assured, our code will be fine. With all of those components removed we can now click add at the bottom of the inspector. We want to add sprite Renderer. Under the sprite renderer you will see a section called sprite, this is where you will drag your sprite into so the enemy prefab has it for a reference.

Set the prefab to the foreground. Now we need to add the component Rigidbody 2D. Set the gravity from 1 to 0, we don’t want gravity affecting our objects. The next component we need is Box Collider 2D, and make sure to select trigger. That reminds me, we will need to add the Box Collider 2D to the player as well, and check the, is trigger option.

This is the time to set the collider around out object. Select the Edit Collider button on the component and you can change the size of the collider area on the object, this way the hitbox is better represented on your objects.

Now we need to adjust our code. The OnTriggerEnter we have used is for 3D objects, we need to adjust that method slightly. Open the enemy script adjust the method to

That is all the adjustments we needed for the code to work. However, there is one more object we need to convert to 2D, and that would be our laser.

Delete the prefab, just get rid of it. Use the sprite you want to represent your laser in your game. Take that Sprite and drop it into the hierarchy. Set this to the Foreground and set the scale appropriately. Add the Box Collider 2D component and adjust the collider to better fit the laser.

Add a RigidBody and set the gravity to zero. Add the laser script, and re-prefab the laser. If you don’t remember drag the laser from the hierarchy and drop it into the prefab folder on the project view. Now, attach the new prefab to the play script, and depending on the size of the laser you’ve chosen you may need to adjust your offset. To do this go into your code you have already set and enter the new coordinates. Make sure you tag the laser as such and you’re done. You have successfully added assets to your game and now it looks like an absolute masterpiece!

Remember to always experiment with your code, and I’ll see you in the next tutorial!

--

--