Unity 2D VVVVVV Style Platformer Tutorial

Foreword

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:

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

Requirements

Knowledge

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:

We will name it vvvvvv_platformer, select any location like C:\, select 2D and click Create 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:

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:

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:

And then modify the Import Settings in the Inspector:

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:

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:

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:

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:

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

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

Let's modify the whole polygon until it perfectly fits our level:

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:

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:

Let's drag it from the Project Area into the Scene and position it at (-2, -12, 0):

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:

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