Create a top-down 2D map using standard Unity tilemaps
Verification environment
- Windows
-
- Windows 11
- Unity Editor
-
- 2021.3.3f1
- Input System Package
-
- 1.3.0
Prerequisites for this tip
The following settings have been made in advance as a premise for the description of this tip.
About MapTips
In old games, it was difficult to prepare a single-picture map due to capacity problems. A method of creating a map by combining small images called "mapchips" was popular. This makes it possible to express a vast map with only small image data without preparing a large image.
Now there is almost no limit to the size of the file that can be created, so it is possible to express the map without using mapchips. Map creation with maptips is very easy and is still a popular method.
Unity has relatively recently supported map creation with maptips, so I'll use this feature to create a common RPG top-down map.
By the way, the size of the mapchip varies, such as 16x16px, 32x32px, and 64x64px. Basically, the shape is square. This time we will use the size of 32x32px.
About borrowing map materials
We have removed unnecessary parts and used them as samples for those borrowed from the following sites.
Create a project and prepare images
Once you've created your 2D project, add a MapTip image to your project.
As it is, it is just a single image, so we will divide it so that Unity can handle it on a chip-by-chip basis. Select a MapTip added to the project to display the Inspector.
Each item is displayed in the inspector, so set it.
| Item name | value | remarks |
|---|---|---|
| Texture Type | sprite | |
| Sprite Mode | plural | |
| Pixels per unit | 32 | Basically, it should be the same size as the map chip, but it depends on the game you make. |
| Mesh Type | Perfect rectangle | |
| Filter Mode | point | If necessary |
| compression | without | If necessary |
Once configured, click the "Apply" button below.
Then click the "Sprite Editor" button near the middle.
When the Sprite Editor dialog appears, click the "Slice" drop-down, Set the type to Grid By Cell Size, specify the pixel size XY to be the same size as the maptip, and click the Slice button.
Then the image will be separated by a white line. If the line is difficult to understand, press the Ctrl key so that it turns green.
When confirmed, click the "Apply" button to close the dialog.
It is OK if the split image is displayed when you click the button to the right of the maptip image in the project.
Add a tilemap
Let's create a tilemap on the game screen. Select "2D Object > Tilemap - > Rectangle" from the Add Hierarchy button to add it.
Then, when Grid and Tipemap are added to the hierarchy and either one is selected, the grid is displayed in the view.
Configuring the Tile Palette
Select a tab in the tile palette. If not, select Window > 2D > Tile Palette from the menu.
Select Create New Palette and give it a descriptive name. Here, we use "MapChipPalette" for the time being. After entering, click the "Create" button.
Since the folder specification dialog is displayed, create it with "MapChipPalette", which is the same as the palette name. The palette you are going to create will be created in the folder you just created.
After creating the palette, drop the maptip image onto the newly created palette.
The Specify Folder dialog will be displayed again, but specify the folder you just created.
You can see that the maptip has been added to the tile palette.
Also, if you look inside the created folder, you can see that the divided image is included.
Now you're ready to create a map.
Create a map
Now that you're ready, all you have to do is create a map. Select the eyedropper icon from the tile palette.
Then, you can select the MapChip you want to use, so select the MapTip you want to place.
Try clicking with the mouse on the grid displayed in the view. A maptip should be placed where you clicked.
You can also drag it as it is to place it continuously.
You can also select and place other MapChips.
If you want to arrange them together, select the rectangle icon from the tile palette.
You can arrange them in ranges like this:
If you want to remove the maptip, select the eraser icon from the tile palette and click where you want to erase it.
Also, if you want to place an object that spans multiple cells in the palette, select the range in the palette.
Then, the range will be displayed in the view, and you can click it to arrange it together.
There are other icons such as "Select", "Move", and "Fill", so please try using them.
After that, you can place the map chips as you like, and the map will be complete.
This time, I only placed it in the range of the camera, but if you create a map with a wider range, I think you can also move your character around the game and make him walk while scrolling the map.