From Prototype to Work of Art

Now it’s time to go from the prototype to using real art assets. If you have already been using 2D sprites for your prototyping all you need to do is change out your sprites and make sure the size of your sprite and box collider match. If you have been working in 3D for your prototyping it will take a couple more steps to get everything lined up and working again. This tutorial will show two methods of converting from 3D shapes to 2D sprites. The first half of these steps are different and the second half match up again.

Before converting to sprites let’s go over adding a background. First, make sure you click the 2D button at the top of the scene window. This will set your perspective for a 2D view.

Next, you can drag your background image into the hierarchy and name it Background. Adjust the image so that it covers the entire game view. Last, In the Inspector, under Sprite Renderer, Additional Setting, then Sorting Layer add a Background Layer. Now when we add our sprites we will add them to the Foreground Layer so that they will always be on top of the background.

Reworking Existing Objects

The first method for changing 3D objects to 2D sprites by most of the components from it. The components to remove are: Mesh Filter, Mesh Renderer, Box Collider, and Rigidbody. Make sure you leave the Transform and the Script. Now you need to add a Sprite Renderer component. Last set the Sprite to the image that you want.

Starting with New Objects

Another method is to just start your new 2D sprites from scratch. To do this drag you image into the hierarchy window, this will create your sprite. Now you need to add in any scripts that you had previously created. Make sure you adjust any variables as needed, especially dropping in any connections to prefabs like the Laser Prefab.

Re-Adding Components

Now if you used either method above you should be at the same point in converting to 2D sprites with your object only containing a Transform, Sprite Renderer, and Scripts. First make sure that you set the Sorting Layer to Foreground by adding it as a layer and moving it below background in the Layer list.

Next you will need to add in the components that you need. The first one to add is a Box Collider 2D. Make sure to check the Is Trigger box if you want it to interact with other objects. Next, if the object had a Rigidbody before add a Rigidbody 2D. In it change the Gravity Scale to 0, otherwise it will fall off the bottom of the screen when you start the game. Lastly, adjust the scale of the sprite to your desired size and then collider box to match.

With that transformation done hopefully your game is starting to look more like what you have envisioned.

Good Luck Adventurer.

-Chris