Working with Tilemaps:

Painting on Unity’s Grid map to create an 2D scene

Since Unity 2018, Unity has been working hard on implementing more ease of life changes for working with 2D environments. One of the more recent addition is the “Tilemap system”, which allows users to import an image and slice them into a desired size so users are able to paint on the image in a grid like structure.

Objective: Understanding how create and use the Unity Tilemap system.

Creating the Grid:

Before users are able to start painting on their scene, we first need to place in the grid. Users can bring up the Tile Palette which is located under Windows > 2D > Tile Palette. There should be an new window which houses the Tilemap system.

To insert the grid into the scene, in the Hierarchy > Create > 2D > Tilemap > Rectangular. That should automatically create an new object component which houses the first Tilemap grid. We can name this Ground_Tilemap hence we are going to place all of the ground images into this grid.

The grid system works in Layers, where you can have a background grid, a foreground grid and a level grid. Each grid system has their own tile map which allows for organization.

Populating the Tilemap Palette:

Now it is time to add some images to the Tilemap Palette so we can paint. Provided by the GamedevHQ course and downloaded from Filebase, is an environmental image that we will be using as our ground layer. Since the image is considered “Single” in the sprite mode, we need to change that to “Multiple” allowing us to divide the image into smaller parts. Once that is selected, make sure to hit the “Apply” button to make the changes concrete.

Once the new settings has been applied, we are going to use the sprite editor to slice the image according to something called “cell size”. A “cell Size” is basically the pixel size per grid. According to this designer of this image, the pixel size per grid is going to be 128 x 128. Once that setting has be done, hit the “Slice” Button to make the changes happen.

When sliced by 128 x 128 the grid fits perfectly.

Once everything is concrete, hit “Apply” to have the image sliced into smaller 128 x 128 individual images.

Now in the Tile Palette window we are going to create an new Palette.

Save the new palette in a organized folder for ease of access later, and the palette window shall greet you with an new grid inside the Palette. Drag and drop the sliced image of the ground into the palette window to add the ground image as a palette. Unity will prompt you to save the new tile map in a folder.

The folders should be organized like so.
Once saved into an organized folder, you will be greeted with an tile map like so.

In the next article, we will go over all the of the different functions the tile map provides when painting on the grid.

--

--

--

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[FAQ] How to create EOS account (Paid version)

Practical Azure: Secure a .NET Core Web API using Azure AD B2C.

Advanced Container Management

Creating Audio and video Assets using Flutter Framework.

My MATLAB code which uses a support package works,

How I Passed my Azure Developer Associate Certification(AZ-204)

Internship Experience at Nodeflux

Day 1 of LeetCode February Challenge

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
Simon Truong

Simon Truong

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

More from Medium

Level Design in Unity Part 2: The Walls

Initializing Ads on the Main Menu

How to Install the Universal Render Pipeline

My journey becoming a Unity game developer: Make a game look beautiful-Creating Columns pt.1