[Unity2D] Creating your Level (Unity version 2017-2018)

Step 1
In this lesson we are going to learn how to create a background, floors, objects using a Tilemap!
Ezgif.com video to gif
Step 2
Before starting this lesson, check to make sure you have the correct version. This is Unity 2017-2018!!!!!
Step 3
Let's go on the internet and import some new assets. Look up some free 2D game tile sets!
Step 4
Let's delete that white floor! Using the [Delete] button or Right Click and Delete.
Step 5
Remember how to import a folder or zip/rar file? No worries, time for a refresher! First we extract this to its own name

Going back to the freetileset folder, we'll click and drag this folder into our Unity project tab.

Step 6
Now let's create a background! Find the Background image and click & drag it into your scene!

You might want to enlarge the background image by either using the enlarge tool or increase the x & y scale.


I kept mines at size 10 for x and y

Step 7
Copy and Paste another background and put them side by side. Hold down CTRL while moving for it to clip.
  1. Select the background
  2. Hold CTRL, then press C to Copy.
  3. Hold CTRL, then press V to Paste.
  4. Click and drag your select background out to the right.
  5. Hold CTRL while moving your background so that it can clip onto your first background.
Step 8
Lets create a Tilemap. Right click the empty space in your Hierarchy and select 2D Object > Tilemap
Check Your Work
Step 9
When selecting on your Grid or Tilemap, you should be able to see a white lined grid in your Scene view.
Step 10
Zoom into your Grid and you may see that it's a lot smaller than your player, scale the X and Y so that it's bigger.

I set my Cell Size X and Y to 3

Step 11
Now let's open the Tile Palette. Go to Window>Tile Palette. This should appear as a separate window.
Step 12
Locate your tile files, it should be in Assets>freetileset>png>Tiles

We are going to change the settings for all of them. So...

  1. Click on the first one with left click (then let go)
  2. Hold SHIFT
  3. Now left click the last one to select them all
Step 13
Look closely at each file's "Pixel per unit". This HAVE to be the save as your image size.

If our image size is 128x128 then our Pixels per Unit have to be 128.

If our image is another size then our pixels per unit must be that size.

Step 14
Let's highlight all of our tile images by clicking the first image, let go, hold [shift] and click on the last image.
  1. Click on the first one with left click (then let go)
  2. Hold SHIFT
  3. Now left click the last one to select them all
Step 15
With all of your image selected, change the Pixels per Unit to your image size number. Then click Apply.
Step 16
Create a new folder called "Tiles" In our assets folder.
Step 17
With our Tile Palette window still opened, click "Create New Palette". Name it as "Base Layer". Click Create.

When you click Create, select the Tiles folder you made in your Assets folder.

Check Your Work
Step 18
After you created the Base Layer, let's see if we have it!
Step 19
Let's move all our tiles into the Tile Palette. When it asks you to select a folder,select the Tile folder in the Assets
Check Your Work
Step 20
Our Tile Palette should now look like this.
Step 21
Now we can finally "paint" our level! Select the brush tool, select a tile, and then paint your scene... Uh oh.

What happened was our grid's cell size is 3, we actually needed to change the scale to 3, not the grid cell size!

Step 22
To fix this, let's select the Grid and apply those fixes! Change Grid's X & Y scale to 3, Grid's X & Y cell size to 1.
Step 23
Let's clean up our Tile palette a little bit, right now it looks like all these tiles are scrambled and no connections.

Cleaning it up means it will be easier to know when we want a corner piece, a button piece, a left side piece, a right side piece, and so on.

Step 24
To edit our Palette, first click "Edit".
Step 25
Next we have two tools that we are going to be using. The Select tool and the Move tool.
Step 26
Use [Select] first and click on what you want to move. Use [Move] to move it.
Step 27
Rearrange your Tile palette to look something like this.
Step 28
Time to create your level. With this Tile palette, let's create your first map!

Here's what my map looks like.

Check Your Work
Step 29
Let's press Play and see if this works out! Uh oh, we just fall through. Do we have a Tilemap Collider?
Step 30
Let's add a Tilemap Collider to our tilemap.

Select our Tile map.


In our Inspector, click Add Component at the bottom, and Search for Tilemap. Add the Tilemap Collider 2D.

Check Your Work
Step 31
All our blocks should have Green Collision lines now, that means they all have colliders!
Check Your Work
Step 32
Press Play again to see if this works.
Step 34
Additionally if your tiles pack came with objects, you can place them onto your game!
Step 35
Let's try placing a tree into your game... Uh oh, how come the tree isn't there? Is it "behind" or in "front" of the BG?
Step 36
If you take a look at the Order in Layer, it's at 0. The higher, the more it's in "Front", the lower, the more "behind".
Temp1550993170 Temp1550993185

In this example, 0 is the most behind and 6 is the most in front.

Step 37
Change the tree's Order in Layer to a higher number than 0. This will put it in front of the background.
Step 38
What would happen if both our Player and Tree are on the same layer? (Order layer 1). They would clip each other.

This is because with both our Player and Tree on Order Layer 1. We don't know if the tree is in front or behind the player. So Unity believes they're both in the same spot at the same time.

Step 39
Try to change either the Tree's or Player's layer until our player is in front of the tree.
Step 51
You are finished with this lesson! Click on submit to continue onto the next lesson!
[Unity2D] Creating your Level (Unity version 2017-2018) Info


MVCode Clubs

Created By

Nepgear tina (instructor)


2D Platformer Game

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach