Reading time: 4 minutes
In today’s post, I’m going to show you how we can create a surface using Unity.
I’ve used this image that you can download here (it is licensed under CC0, created/distributed by Kenney (www.kenney.nl)):
We’re going to copy this .png image into the Sprites folder (Assets > Sprites) in our Unity project. If we don’t have the folder, we create it.
To split the tile, we can use the Unity editor. To do this, click on the tiles_packed image and in the options that appear on the right, click on Sprite Editor.
Now, inside the editor, click on the second arrow pointing downwards next to Sprite Editor and select:
- Type: Grid by Cell Count
- Column & Row: C: 19 R: 10
And click on Slice.
Now click on Apply and exit the editor.
We can verify that it has been split in the Sprites viewer (Assets > Sprites) where we had the original image.
Now let’s place the surface in the scene. To do this, go to Hierarchy and right-click inside to create a new element 2D Object > Tilemap > Rectangular.
Now, to draw the floor on the surface, open the tab in the top options of Unity Window > 2D > Tile Palette.
The Tile Palette editor will open.
Click on Create New Palette, give it a name, and leave the rest of the fields as default.
Click on Create and choose the path to save it. In this case, let’s create or choose a folder called tiles (Assets > Tiles).
Now we can see our element inside this folder Assets > Tiles.
Now open the Assets > Sprites folder and drag tiles_packed into the right editor, Tile Palette.
It will ask again where we want to save it, so we choose the Assets > Tiles folder again.
Once saved, we have created the palette generated with our floor image.
Now go back to Hierarchy and select the element we created earlier (inside Grid). I renamed it as Suelo (Floor).
Once selected, we can paint it using the created palette.
If the elements appear too small like the ones in my image, we can make them larger. To do this, go back to Assets > Sprites and click on tiles_packed.
Now choose Pixels Per Unit: 16.
This way, the elements will fit the screen size.
