noobtuts

Unity 2D Super Mario Bros. Tutorial

Unity Super Mario Bros.

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:
Unity New Project

We will name it mario, select any location like C:\, select 2D and click Create Project:
Unity Create new 2D 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:
Camera Properties

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:
Sprites Folder

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:
Stone
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:
Stone Import Settings
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:
Drag Stone into Scene

Let's select the stone in the Hierarchy and change its position to (0, 0, 0) in the Inspector:
Stone Position in 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:
Sprite Renderer with default Sorting Layer

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:
Add Background Sorting Layer
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:
Sprite Renderer with Background Sorting Layer

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:
Stone Collider

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:
Stone Duplicate

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

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:
All Stones

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:
Cloud
Clouds
Bush
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:
Bush and Cloud ImportSettings

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

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:
Bushes and Clouds Sorting Layer
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:
Pipe
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:
Pipe ImportSettings
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:
Pipes in game

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:
Pipe Collider

We can see that the lower part of the pipe is a bit thinner than our Collider:
Unfitting Pipe 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:
Pipe Colliders in Inspector
Pipe Colliders in Scene

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

. . .

Premium Tutorial

Enjoyed this preview? Become a Premium member and access the full Unity 2D Super Mario Bros. Tutorial!

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