From Prototype to Work of Art

A quick guide on turning your prototype into a work of art.

Once you have a working prototype and all the technical stuff is worked out, it’s time to start adding some enticing art to make your game attractive to your audience. I’m going to show you how you can make your game really start to look like a game that you can start to advertise and market.

I already have some assets for my 2D shooter, including a space themed background, as well as 2D sprites for my Player, enemies and even the lasers that my starfighter can use to annihilate the spawning enemies. 2D sprites and nebula background; Courtesy of GameDevHQ.

Using these we can go from simple to professional fairly easily.

From this simple prototype: Basic materials and primitive shapes.

Using two cubes, one for the player and one for the enemy, and a capsule for the laser, and assigning a basic material for color we have everything we need to build a functioning game.

To this professional looking piece of art, using 2D sprites.

2D sprites attached to your game objects turn this prototype into a full ready to ship title, almost.

Now this is a huge difference! Just by adding a few sprites, my game is starting to look like a professional title. Now, by making a few minor adjustments inside Unity and a few to your code, this piece of art functions exactly the same as our primitive prototype.

2D Sprite with Box Collider2D.

How is This Done?

Let me walk you through it.

Step 1

Import your sprites for each element or drag and drop the assets right into your project window.

Keep everything in folders for organization and it makes them easy to find if you need to attach them to another game object later.

Step 2

Let’s start with the background, this is the easy part. Inside Unity, to the upper left of the Scene Window, there is a toggle button for 2D view. We want this is on for this part.

OFF — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — ON

Find the Background Image in your Project Window and simply drag and drop into your Scene Window. Using the nodes in the corners you can resize to fit your camera, which can also be seen in your Game Window.

Looks better already.

Step 3

Now, there is a couple ways to do the next part. We’ll do the player first. Since the only thing that defines the player is actually the PlayerBehavior script, what we will do is just delete the cube named player. In the hierarchy window, right-click the PlayerCube and select delete. Find your player sprite, click and drag this into the scene window.

Resize the sprite appropriately.

To avoid any issues, we will put the LaserCapsule and the PlayerSprite in a prefab folder in the project window. Click and drag your PlayerBehavior script onto your player sprite in the project window.

You can do this in either the scene window or the hierarchy window also, but by using the project window we can be sure that this updates everywhere.

You can put the enemy in the prefab folder as well.

Check the inspector window with the player selected. Make sure the LaserCapsule is attached. If it is not there, drag the LaserCapsule to the appropriate component.

If the prefab is not connected, we will get an error message when we try to fire.

And since the SpawnManager script does a NULL check on the player, we want to drag the PlayerSprite into the appropriate component there as well.

If the player is not connected, we will get an error message when we press play.

This error will also show if the player is not present in the hierarchy window when play is pressed.

Your PlayerSprite should now behave like the PlayerCube we were previously using. You should be able to move and fire just like before. There are a few things we need to do yet. We need to fix the collision, since we switched from a 3D object to a 2D sprite, but we’ll come back to that.

You can see that our enemies and our player no longer affect each other when they come in contact.

This time, for the enemies, select the EnemyCube in your project window. Then in the inspector window, let’s look at what we have and what needs to be changed.

We have a bunch of 3D components here so let’s get rid of what we don’t need.

We can remove the Mesh Filter and the Mesh Renderer because our enemy is no longer going to be a 3D cube. Instead, we will be using a 2D sprite. We are going to need a Collider and a Rigidbody, but these here are for a 3D object, so we can remove those as well. The material is also irrelevant to our new 2D sprite so can we delete it also. Right-click on each of the components and select “Remove Component”.

,We are left with just our transform and our Enemy Behavior script.

We can rename our enemy, give it the enemy tag and attach our Player to the appropriate component if it is not already there. Then we can add the following components:

• Add a Sprite Renderer component, we will attach our sprite to this.
• Add a 2D Box Collider component, check the is trigger box.
• Add a Rigidbody 2D, (we only need this on the enemy at this point) set the gravity to 0 so our object is not affected by gravity.
• Drag and drop your enemy object into the scene window.
• To adjust the box collider, select the symbol on the edit collider line, in the inspector window. In the scene window, adjust the borders to fit our sprite.
• We also want to adjust the box collider on our player.

And now we can use either method to do the same process to our lasePrefab. We can press play to make sure we have done everything right. Why doesn’t this work? Your player and enemy collision should register once again. But we have one more step to return our functions to normal. This is inside the script attached to your enemy game object. We must open our scripts and change our code involving our colliders from OnCollisionEnter and collider to OnColissionEnter2D and collider2D and now after saving we can return to unity and press play. Our player and enemy collision should work properly, destroying the player after 3 collisions. And your lasers should also destroy the enemies (and themselves) when they make contact.

Summary

Your shooter should now be working just as it did before and looks 1000% better already. You can see how adding a few art assets can change the value of your project. Make your title stand out, capture the audience with stunning assets and visual effects. Check out my next article, where I’ll talk about the Benefits of Prototyping Without Assets.