Unity 2D Frogger Tutorial

Foreword

Our Tutorial will explain how to make a 2D Frogger game in Unity. Frogger was released a long time ago back in 1981, but thanks to its arcade nature it is still a whole lot of fun today and really easy to develop in Unity.

It will be so easy to make that we will end up with only 79 lines of code and a couple of pixel art textures with only a few colors.

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

Here is a small preview of the final game:

Requirements

Knowledge

Just like all our Tutorials, this one won't require any special skills either. A basic understanding of Unity is recommended, especially about Transforms, GameObjects and Prefabs. We will also make use of Unity's Mecanim Animation system, which may look weird first but is unbelievably powerful and easy as soon as we understand it. If you are new to Unity, feel free to try this Tutorial anyways, it's not that hard.

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

Unity Version

We will use Unity 5.0.0f4 to make our Frogger clone. 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 frogger, 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 and the Position like shown in the following image:

Creating the Background

We will choose a simple and futuristic art style for our game that only consists of two colors. The background will consist of a few squares and lines that are all 1 pixel wide. We will use the following background image, but feel free to draw your own with a tool like Paint.NET:

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

Let's select the image in the Project Area:

And then take a look over to the Inspector where we can change the Import Settings to adjust the size and the compression:

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 frog will be 16 x 16 pixels later on (which is supposed to be one unit in the game world).

Alright, now we can drag the Background from the Project Area into the Hierarchy to make it part of the game world:

If we press Play then we can already see it ingame:

Note: the orange squares at the bottom are the street where the vehicles will drive. The green area in the middle is like grass, something where the frog can stand without worrying. The black area above it will be the water, this is where the frog has to jump onto platforms in order to cross it. The green area at the top will be the goal that has to be reached.

We are making a 2D game, and the background should always be drawn behind the frog and the cars. To make this happen, we could either use Sorting Layers (which are intended for more complex games) or the Order in Layer property. We will take a look at the Inspector and change the background's Order in Layer property to -1:

Note: Unity draws the GameObjects from lowest to highest value, so whatever should be in the foreground should have a higher value than the rest.

Creating the Frog

The Frog Image

There is no Frogger game without a frog. We will make one big image with all the animation slices in it. We will need the following animations:

• Walking up
• Walking down
• Walking right
• Walking left

Note: each animation will consist of two slices. If we play those two slices in a loop then we will have an animation.

Feel free to draw any kind of frog that you like. Here is our frog image that contains all the animation slices:

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 it:

Slicing the Frog Image

Our frog image actually consists of several smaller slices that make up the animation. We can tell Unity that there are multiple slices in our image by selecting Multiple for the Sprite Mode. Afterwards we can click on the Sprite Editor button:

We will then select Slice and set the type to Grid with the following settings and then press the Slice button:

Afterwards we can close the Slice Editor and press Apply on the Unimported Import Settings warning.

Unity just sliced our frog image into several 16 x 16 pixel images that we can now see in the Project Area (they are children of the frog image):