Unity 2D Super Mario Bros. Tutorial

Foreword

Welcome to one of longest and most exciting Tutorials on this website. Shigeru Miyamoto's masterpiece Super Mario Bros. was released in 1985 for the Nintendo Entertainment System and turned out to be one of the most popular video games of all time.

The game is a great example when it comes to good game design. In this Tutorial we will create a small test scene of the game and focus on the core mechanics as much as possible. We will use the Unity3D Engine and it will only take 90 lines of code.

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

Requirements

Knowledge

Our Tutorial does not require any special skills. If you are somewhat comfortable around Unity and heard about GameObjects, Prefabs and Transforms before, then you should be able to follow it without any problems.

Feel free to read our easier Unity Tutorials like Unity 2D Pong Game to get used to the engine.

Unity Version

Our Super Mario Bros. 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

Let's get to it. We will start Unity and select New Project:

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

Now we can select the Main Camera in the Hierarchy and use the typical blue Background Color (red=107, green=140, blue=255), adjust the Size and the Position so the game looks right later on:

The Art Style

In order to prevent Copyright issues we can't use the original Super Mario Bros. Sprites in this Tutorial. Instead we will draw our own Sprites and make them look similar to the original game.

Before we start, let's create a new Sprites folder in the Project Area:

This is where we will put all our Sprites (which is a fancy game development word for images).

The Stones

The Stone Image

We will begin by drawing a 16 x 16 pixels Stone image in a drawing tool like Paint.NET:

Note: right click on the image, select Save As... and save it in the project's Assets/Sprites folder.

Now we can select the image in the Project Area and then modify the Import Settings in the Inspector:

Note: a Pixels to Unit value of 16 means that the size of 16 pixels equals the size of one unit in the game world. We will use this value for all our textures. So if we want to position two 16 x 16 Sprites next to each other we can use positions like (1, 0), (2, 0) and so on.

Now we can drag the image from the Project Area into the Scene in order to add it to the game world:

Let's select the stone in the Hierarchy and change its position to (0, 0, 0) in the Inspector:

Note: we want to make a 2D game, so we don't really care about the Z coordinate. It will be 0 for all objects in our game (except for the Camera). In 2D games we only care about X (the horizontal coordinate) and Y (the vertical coordinate).

The Sorting Layer

Since we are in a two dimensional game world, there will be situations where several images are drawn on top of each other, for example when the Mario stands in front of a bush. We always want the bush to be in the background, so that Mario is drawn in front of it (otherwise we wouldn't see him).

Let's tell Unity that the stones are always supposed to be in the background. This is what Sorting Layer's are used for. We can change the stone's Sorting Layer if we take a look at the Sprite Renderer component in the Inspector:

Let's select Add Sorting Layer.. from the Sorting Layer list, then add a Background layer and move it to the first position like shown below:

Note: Unity draws the layers from top to bottom, hence whatever should be in the background will be at the top of the list.

Now we can select the stone again and assign our new Background Sorting Layer to it:

Stone Physics

Right now the stone is only an image, nothing more. It's not part of the physics world, Mario won't be able to walk on top of it or anything. We will need to add a Collider2D to make it part of the physics world, which means that things will collide with the stone instead of falling or walking right through it.

We can add a Collider2D by selecting Add Component->Physics2D->Box Collider 2D in the Inspector:

Now the stones are part of the physics world, it's that easy.

Adding more Stones

Now we can add more stones to our Scene. We will take a look over to the Hierarchy where we right click the current stone and then select Duplicate:

We will position the new stone at (x=1, y=0):

Let's repeat this work flow until we have two rows of 21 stones (one row at y=0 and one below at y=-1). The important part is to always position them at rounded coordinates like (2, 0) and never at (2.003, 0.005). Here is how it looks if we press Play:

Bushes and Clouds

Just like in the original Super Mario Bros. game we will also add a few bushes and clouds to the background. As usual, we will begin by drawing the images:



Note: right click each image, select Save As... and save them all in the project's Assets/Sprites folder.

We will use the following Import Settings for all the images:

Now we can drag the Sprites from the Project Area into the Scene and position them where we like them to be:

Since they are part of the background, it's important that we select all of them in the Hierarchy and then assign the Background Sorting Layer again:

Note: as mentioned before, the Background Sorting Layer makes sure that those objects are always drawn behind everything else. Or in other words, Mario will always be drawn in front of them.

Our Unity Super Mario Bros. game slowly starts to look like one!

Pipes

The Sprite

Those green pipes are a big part of Super Mario Bros., so let's draw one:

Note: right click on the image, select Save As... and save it in the project's Assets/Sprite folder.

And here are the Import Settings for our pipe:

Note: even though it's a 32 x 32 pixel Sprite, we still use to the same Pixels to Units value all the time.

Now we can drag the Sprite from our Project Area into the Scene. We will add two pipes to the right side of the world:

Pipe Physics

The pipes should be part of the physics world, which means that Mario should not be able to walk right through them. Instead he should collide with them. All we have to do to make them part of the physics world is select both of them in the Hierarchy and then click Add Component->Physics 2D->Box Collider 2D in the Inspector. If we take a look in the Scene then we can see the green Collider box around each pipe:

We can see that the lower part of the pipe is a bit thinner than our Collider:

This is not that much of a big deal, but let's take our time and use a neat little trick to create a perfectly fitting Collider. One option would be to just use a Polygon Collider, which would have some performance downsides.

The more elegant solution (in this case at least) is to add yet another Box Collider to our pipe and then align the first Collider so it fits the upper part of the pipe and the second Collider so it fits the lower part of the pipe:

Now the pipe's physics are perfectly realistic. It's little adjustments like this that will make the game feel right later on.