Unity 2D VVVVVV Style Platformer Tutorial

Unity 2D VVVVVV Style Platformer


This Tutorial will show how to make a simple and addicting Platformer game, inspired by Terry Cavanagh's VVVVVV game. The concept is simple, the user has to control a little guy through some kind of weird maze by either walking horizontally or reversing the gravity.

Our game will be really easy to make. All it takes are about 35 lines of code, a level image, a spike image, a checkpoint image and a player image.

As usual, everything will be explained as easy as possible so everyone can understand it.

Here is a preview of the final game:
Unity VVVVVV Style Platformer

Note: while we want to make the game similar to VVVVVV, we still won't use exactly the same Sprites to avoid copyright issues.



This Tutorial won't use many complicated Unity features. All we need are GameObjects, Transforms, some basic 2D Physics (Colliders and Rigidbodies) and the Mecanim animation system.

Everything will be explained as easy as possible. If you aren't that familiar with the above features yet, feel free to try it out anyway. You can also read one of our easier Unity Tutorials like Unity 2D Pong Game if you want to get used to the engine first.

Unity Version

Our Unity VVVVVV Style Platformer Tutorial will use Unity 5.0.0f4. Newer versions should work fine as well, older versions may or may not work. The free version of Unity 5 now comes with all the engine features, which makes it the recommended version.

Project Setup

Alright, let's make a game. We will start Unity and select New Project:
Unity New Project

We will name it vvvvvv_platformer, select any location like C:\, select 2D and click Create Project:
Unity Create new 2D Project

If we select the Main Camera in the Hierarchy then we can set the Background Color to black and adjust the Size like shown in the following image:
Camera Properties

The Level

Drawing the Level

Let's grab our drawing tool of choice and create a level. We will keep it simple and create one big image, add some background pattern and then cut out some areas for the player to walk around in:
blue level
Note: right click on the image, select Save As..., navigate to the project's Assets folder and save it in a new Sprites folder.

Importing the Level

Now we can select the image in our Project Area:
blue level selected in Project Area

And then modify the Import Settings in the Inspector:
blue level Import Settings
Note: a Pixels Per Unit value of 16 means that 16 x 16 pixels will fit into one unit in the game world. We will use this value for all our textures, because the little V spikes will be 16 x 16 pixels, which should be one unit in the game world.

Afterwards we can drag the level image from the Project Area into the Hierarchy in order to add it to the game world:
blue level added to Hierarchy

Level Physics

At the moment, our image is really just an image in the game world. We can see it, but it doesn't do anything and the player won't be able to walk on it. We will add a Collider to it in order to make it part of the physics world, so that the player can walk on it and collide with it.

We can add a Collider by selecting Add Component->Physics 2D->Polygon Collider 2D in the Inspector:
blue level Collider in Inspector

If we take a look at the Scene then we can see the result. Unity just attempted to wrap a Polygon around our somewhat complex level shape:
blue level default Collider in Scene

The problem is that the polygon is only an estimation, it's not exactly how we want it just yet. Right now, only the area that we highlighted in red is actually walkable:
blue level default Collider in Scene, marked

Unity allows us to modify the polygon Collider by clicking the following button:
blue level edit Collider button

Afterwards we can modify the polygon Collider in the Scene like this:
blue level edit Collider in Scene

Let's modify the whole polygon until it perfectly fits our level:
blue level with fitting Collider

Now the level physics are perfectly fine.

The V Spikes

Alright, let's increase the difficulty of our game by adding those red V Spikes. We will begin by drawing a 16 x 16 px image:
V Spike
Note: right click on the image, select Save As... and save it in the project's Assets/Sprites folder.

We will use the following Import Settings for the image:
V Spike ImportSettings

Let's drag it from the Project Area into the Scene and position it at (-2, -12, 0):
V Spike in Scene
Note: it looks really good if we position all the V Spikes at rounded positions like (-2, -12, 0) instead of something like (-2.03 -11.99, 0).

Let's make the V Spike part of the physics world again by adding a Collider to it. This time we won't need a polygon Collider because the shape is really simple. Instead we will select Add Component->Physics 2D->Box Collider 2D in the Inspector and then use the following properties:
V Spike Collider

Now we can right click the V Spike in the Hierarchy and select Duplicate:
Duplicate V Spike

. . .

Premium Tutorial

Enjoyed this preview? Become a Premium member and access the full Unity 2D VVVVVV Style Platformer Tutorial!

All Tutorials. All Source Codes & Project Files. One time Payment.
Get Premium today!