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

Information
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
Information
Step 2
Before starting this lesson, check to make sure you have the correct version. This is Unity 2017-2018!!!!!
Temp1550971067
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.
Temp1550971533
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
Temp1550972402

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.

Temp1550973001

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
Planning
Step 13
Look closely at each file's "Pixel per unit". This HAVE to be the save as your image size.
Temp1550977980

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.
Temp1550988373
Step 17
With our Tile Palette window still opened, click "Create New Palette". Name it as "Base Layer". Click Create.
Temp1550988635

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.
Temp1550989350
Step 21
Now we can finally "paint" our level! Select the brush tool, select a tile, and then paint your scene... Uh oh.
Temp1550989626

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.
Temp1550989988
Planning
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.
Temp1550990526

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".
Temp1550990677
Information
Step 25
Next we have two tools that we are going to be using. The Select tool and the Move tool.
Temp1550990751
Step 26
Use [Select] first and click on what you want to move. Use [Move] to move it.
Challenge
Step 27
Rearrange your Tile palette to look something like this.
Temp1550991112
Challenge
Step 28
Time to create your level. With this Tile palette, let's create your first map!
Temp1550991483

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.
Temp1550991628

Select our Tile map.

Temp1550991668

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!
Temp1550991731
Check Your Work
Step 32
Press Play again to see if this works.
Planning
Step 34
Additionally if your tiles pack came with objects, you can place them onto your game!
Temp1550992989
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?
Information
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.
Planning
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.

Challenge
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

Account

MVCode Clubs

Created By

Nepgear tina (instructor)

Course:

2D Platformer Game

Access Level

premium

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