Oke Software
Published in

Oke Software

Creating 2D platformer game in Unity3D

Hello! My name is Wojciech Bilicki and I am frontend developer in OKE Software. I specialize in ReactJS and web development. Last year I picked up a new hobby: game development. I fell in love with Unity3d. Currently I am hosting a workshop where I teach people how to write games in C# using Unity3D. Therefore I decided to write and article showing you how can you start with your own 2D platformer game in Unity :).

First off you need to have Unity3D and IDE of your choice installed. Go to: https://unity3d.com/get-unity/download and click .

Once that’s done. You need to use Unity Hub to download Unity Editor itself:

Here you can find installed version

When choosing the Unity version to install I would stick with LTS (Long Term Support) for now.

After the installation we can finally start working on our platformer game. One thing that we’ll definitely need will be some 2D assets to build our world. You can find many free assets pack on the internet. Good places to search are for example:


Yet definitely the best place to look for assets when it comes to Unity is:

So go ahead and create your account there:

You can create the Unity account on Unity Asset Store

You can use the same account inside Unity Hub:

Click here to sign in with your UnityID inside Unity Hub

Going back to Unity Asset Store you can choose and then on the left side filter by the pricing. Select and you should see

Assets pack we will use in our game

Next step is to actually adding selected assets to your asset library:

Now we should be set up to actually start working on our platformer game. So go ahead and start new Unity project with 2d preset.

First thing we have to do is to actually import the . So in the top tool bar go to:

from there look to the left upper corner and you’ll find a drop down:

Dropdown in Package Manager

Click on it and choose . If you did not sign in previously (in Unity Hub) you’re gonna be asked to do it right now. After that you should see a list of all of your assets from Asset Sto re ready to import into project. You should see your assets list:

Click and once it’s done .

In your window you should see new folder with imported assets. The folder will be named and will contain all assets from the package:

To keep our project organized we will create separate folder in which we’ll hold stuff related to our game. I named it .

That is the end of our setup. We can finally start adding elements to our scene. We’ll need to things player character that we can control and a floor for him to walk on. Let’s start with the floor.

In platformer games it is common to build the environment using tiles. You can think of them as reusable blocks that player can interact and collide with. If you’ll think of Mario game you can see that whole world is built from these reusable blocks:

https://cdn-media-1.freecodecamp.org/images/0*dwRaOKJJTu_i9TvZ. Mario game tileset

We definitely want to do the same. In your project window if you’ll go to:

BayatGames -> Free Platform Game Assets -> Tiles -> Spring -> 256x256

you’ll find a tileset we’ll use to create our world.

Now we make sure that our tiles are properly configured before we start using them in our scene. So Shift-Click all the tiles in the folder and you should see the inspector panel pop up on the right side of the editor. First thing we need to do is to adjust the size of our tiles. We already now that their dimensions are 256px for both width and height. Make sure that value in the inspector is set to that value exactly:

Pixel per unit inspector settings

Remember to hit after you adjust settings.

I copied all the sprites to folder just to keep things clean.

Form there we can go to our window and create in our scene. So right click in the and choose . That’s going to create a grid game object with tilemap as its child. Grid game object divides the scene into blocks of given size. The size can be changed by the use of inspector:

Grid Component inspector

The tilemap is the concrete graphical representation of blocks seen in the scene. To actually start painting the tilemap and adding blocks to the scene we need to use window. So go to the . It will probably popup as a new window in the center of your screen so reasonable thing to do is to grab it and dock it next to your inspector tab on the right:

Tile Palette window

Click and then drag all the tile sprites into the Tile Palette window. You will be asked to select folder in which you’d like the tile palette to be.

Tile Palette with tiles

You’d probably like to rename it from . You can do it in hierarchy or project panel.

Hierarchy window while working with tile palette

If you click on the palette in the hierarchy and press F2 it will allow you to rename it and also the popup should show whether to rename the file.

Important thing to note that now the editor is working in the tile palette context so you don’t see the full hierarchy of your scene. You can always go back to the full context by clicking the back arrow in the hierarchy (marked red in screenshot above).

Go back to the full hierarchy by clicking the arrow and select the from the hierarchy. Then from select the paint brush tool and select the tile you’d like to paint. Now you can finally paint the tile into the scene.

You should end up with simple floor painted into the scene similar to this:

Next thing we can do is actually to add our player to the screen. To do that we have to prepare some kind of player 2d sprite representing our player. If you’ll go to the window at the bottom and go to you’ll find the folders showing possible states for our player: . The problem is that we need to prepare them a bit for use in Unity.

Let’s start with animation. In the folder click . This should show the Inspector on the right for the Texture 2D we selected. What we’re actually working with here is called sprite atlas. This is the texture where different images are jammed together in one image. It is done for efficiency and optimization (it’s alway faster to load only one image instead of many into the memory).

Texture atlas/Sprite atlas example — https://developer.playcanvas.com/images/user-manual/assets/texture-atlas/texture-atlas.jpg

We need to adjust the import settings for the texture atlas as we’d like to use it for animation (or if we’d like to use just one tile of given atlas). First thing that we need to do is to inform the Unity that we’re working with multiple sprites in sprites atlas:

Change the sprite mode to multiple

This will enable us to use and cut the atlas into pieces:

Click to show Sprite Editor

In simply click make sure that is set to and is set to and press again. That’s gonna allow us to work separately with each sprite in the atlas. To keep things neat I’m gonna move the sprite atlas from the location into the . In this location I’m going to keep all sprites atlases that I’ll splice.

With that we can finally create our player. Let’s go to hierarchy and add two new objects:

We create and as a child of . This will allow us to keep the physics of the player and its representation separated.

So in object add component and we can choose sprite just to see our player on the screen. You should see something like this in your scene:

If you run your game right now you’ll see that nothing actually happens. What we actually need to do is to add rigid body and collider to our player and floor.

Let’s start with our player. One thing to note is we’ll be adding our rigid body and box collider to the Player game object and not it’s sprite child:

Add rigid body and box collider to the Player

We will be using as collider and as rigid body. The default settings for are fine so we don’t need to change anything there.

Fortunately the same goes for for our case use of body type is fine since we’ll be moving our character using physics by applying forces and modifying velocity.

Now let’s take a look at our add we need add two colliders two it . First is going to be the . If we take a closer look we’ll see that the collider is added to every single tile of our tilemap:

Tilemap collider added to the tilemap

This isn’t the best way to handle collider. Calculation for colliders tend to be resource heavy and as your level will grow so also the computational requirements. Fortunately there’s a way to optimize it.

We can add which will merge the colliders in the continuous tiles into one. This will dramatically decrease amount of collider objects in the scene. This will also automatically add to our . That’s because needs it to work.

If you play your game right now you’ll see that our floor falls to the ground. This is because has its by default set to . Whenever we deal with stuff like floors or walls or other obstructions we should set the to static since we don’t expect it to move.

To make our work we also must tell our to actually allow to merge it. You can find option on . So finally our options for our object should be:

Inspector settings for collider on Tilemap

Next thing that we need to set up is how our game uses user input. We could read the input directly into code using class but this approach is rather rigid. What we’ll use is the special additional package that allow is easily configure how we translate user inputs into functional calls in our code.

In the project window use right-click and choose and name it This is what you’ll see if you click to open it:

This is the reasonable defaults provided by Unity. We have different set of maps actions maps we are like super sets of actions (for example for player in game and for UI controls).

Then for each super set we can define actions groups that allow to perform actions for different type of inputs (i.e. keyboard and gamepad both can trigger action fire weapon action). Then pressing onto each action definition for given input we can define which button triggers the action.

Let’s start working on that. Press on next to :

Let’s name that and then let’s name our .

Then click next to and choose . We will use this binding to define horizontal movement of our player. Name that binding and then we can finally add the keys on which we’d like to listen.

So select the binding. Next click on . After that you can find the key in keyboard section or you can just click on and then press .Set the value for key,

Now we must add those to the object that we’d like to control. Select our and add component to it. We need to provide as to it.

Ok finally we can start coding. Let’s create C# script where we’ll add possibility to move for our player.

We will start by defining some class variables that we’ll use in our class and we’ll get reference to :

Next let’s create a function that we’ll be called by our

public void OnMove(InputAction.CallbackContext ctx)


The function has to be public so that can be called from Unity. It also has to correctly defined arguments so that we can use it with . After we have that definition in place we can plug it into the .

Go to component of our and unfold and at the bottom. Then drag into the and then select function from it on the right side.

Now we should read the velocity value in function and store it. We will also apply this velocity to our each frame in function:

This actually makes our player move across the screen. Unfortunately this does not look to good as we’re not animating our movement yet. Let’s figure that out now. First let’s start by creating folder in our . We’ll need to create both and animations.

To do so we need to slice that and sprites in . Make sure to set the to and use to slice the sprite into frames. My suggestions is also to copy and sprites to .

Easiest way to change them into animations is to simply drag them into the scene. This will show you a file explorer window where you can set the location where to save the animations. It will automatically create file that we can use to play animations.

So drag both sprites into the scene and save the files into folder with and animations.

To play and control our animations we need . Let’s create one in folder and name it :

Animations folder with animation controller and animations for our character

Next in our hierarchy select and add component and set to . If you double click on animation controller it should open the . It works using state machine pattern.

Meaning we will be changing the state of our character animation. Whenever the player is moving we will change the state to and when he’s not we’re going to move to . What we can do is drag our animations into the window.

Next right click on the animation and select and connect the output to animation. We also need to create the transition from to . We should end up with something like this:

Animator with state machine set up

After that we can switch to tab. Here we can set up some parameters for our state machine that will drive the transitions between our state. So let’s click and choose parameter and name it .

Next click on the arrow that is transitioning from to . We need to uncheck checkbox and set the to 0. We also need to add transition condition so let’s click next to tab. It will automatically populate with the parameter we have created:

We need to configure the transition back with the same settings. Only difference of course is that parameter is going to be set to .

Ok the last thing is to trigger our transitions with code. Let’s start by grabbing the reference to the in our class.

[SerializeField] private Animator animator;

Since we serialize it we can pass it via we can get it from the child object:

The other option would be to use function in callback in our class.

Now we can finally trigger our transition using code. What we’ll do is check for the value of to trigger the parameter. We can improve our code by caching our parameter value first with:

static readonly int IsRunning = Animator.StringToHash("IsRunning");

Added at the top of our class. With that we need to add some checks to function:

This will make our animation works. Well, almost… it works if we move our character to the right. Unfortunately if we move to the left he is still looking right. We can fix it by switching the value to make our character turn the other way.

We just need to check whether our is greater than zero and reassuring the transform value.

That should make our character animate properly.

This concludes the first part of creating 2d platformer game in Unity3D engine. I hope you enjoyed article and stay tuner for more :).

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Would you like to join our team? See our open positions here:



We are creating and improving IT solutions based on the latest technologies, adequate to various long-term projects.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wojciech Bilicki

Mobile & FrontEnd Developer at OKE Software Poland. Marvel fan. Can't live without music and books.