From Prototype to Work of Art

Out with the prototypes in with the sprites

Transformation

From cubes and capsules to professional looking sprites.

We have been working on our 2D project in a 3D environment. In order to start replacing our primitive objects with sprites, we need to convert over to a 2D environment.

The first step is to select or activate the 2D button at the top of the Scene.

This takes our scene and “flattens” it into 2D.

3D to 2D

After importing our sprite package into the Project window.

Sprite package

we can now start to convert our resent game to 2D with the new sprite graphics.

Lets give our game a background fitting for a space shooter. In the sprites, there is a background overlay sprite file. Lets drag this into the Hierarchy window. Once there, let’s rename it to Background, set the sorting layer to background and resize it to fit the Game view.

If we look at our current GameObjects, they are all 3D objects and they have Box Colliders and some have Rigid Bodies and a cube mesh filter. These are all 3D components.

2D objects start out with Sprite Renderer. So, we need to add a BoxColliders 2D and if needed a RigidBody2D. To do this, just select the object and in the Inspector, at the bottom select Add Component. Search for box collider 2D.

Adding components for 2D

Make sure to select the is Trigger. This will prevent weird things from happening to certain objects during game play. For those objects with a RigidBody2D, like Laser and Enemy, don’t forget to set Gravity Scale to 0 as we are using scripts to move these objects.

For both the enemy and Laser objects, we need to change the 3D components for 2D components like we described above.

Once we have done this, the game’s collider system won’t work the way we have it scripted in our enemy script.

Trigger for 3D objects

This trigger is made for 3D objects. Since we are now using 2D sprites, we need to change it to

Trigger for 2D objects

One last thing. Since we changed our Player from a cube to a sprite, the laser offset isn’t going to be accurate any more. In our Player script, lets change the offset to 1.05f. If you created a variable for this, just change it at the variable if not, go down to the FireLaser() function and change it in the Instantiate code.

Changin the offset for the laser

Now it should look a lot better when we fire our laser.

So, lets take a look at our transformed game.

Final Transformed 2D game

--

--

--

Poultry Scientist by profession, Computer Scientist at heart. After many years in the poultry business, I have decided to give my passion for technology a shot.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Secrets of the Flex

How to Create a Static file Server :) (Node.js + Express)

Running a NodeJS Application on an Apache Production Server

Multilingual Jekyll on GitHub Pages

Rotate andriod view with device orientation

How to create artificial intelligence-enabled trading bot — part 1

New simpler effective way of sliding images

HTML code our structure for the web page

Meet zx: A Better Way to Write Scripts with Node.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marc Frappier

Marc Frappier

Poultry Scientist by profession, Computer Scientist at heart. After many years in the poultry business, I have decided to give my passion for technology a shot.

More from Medium

Made With Unity | 2D Space Shooter Part 10: User Interface (UI)

Ammo Limit and Ammo Count UI Unity

Unity Dev Blog: Animating Sprites in Unity

UI in VR