Game Frameworks  
Lecture 06: 2D Tilemaps in Unity  
Edirlei Soares de Lima  
<edirlei.lima@universidadeeuropeia.pt>  
Tilemap  
The Tilemap component is a system which stores and handles  
Tile Assets for creating 2D levels.  
Tilemap Workflow  
General workflow to create and paint a Tilemap in Unity:  
1. Create a Tilemap GameObject.  
A Grid GameObject is also created automatically in the process.  
2. Create Tile Assets or generate Tiles from Sprites, and then assign  
them to a Tile Palette.  
3. Paint on a Tilemap with your Tile Palette.  
4. Attach the Tilemap Collider 2D component to the Tilemaps to make  
them interact with Physics2D.  
Tilemap Workflow  
1. Create a Tilemap GameObject.  
A Grid GameObject is also created automatically in the process.  
Tilemap Workflow  
2
. Create Tile Assets or generate Tiles from Sprites, and then assign them  
to a Tile Palette.  
Individual Tiles (Create -> Tile):  
Tiles from Sprites (Window -> 2D -> Tile Palette):  
https://edirlei.com/aulas/gameframeworks/tileset_example.png  
Tilemap Workflow  
3. Paint on a Tilemap with your Tile Palette.  
Tilemap Workflow  
4
. Attach the Tilemap Collider 2D component to the Tilemaps to make  
them interact with Physics2D.  
Tilemap Layers  
Multiple Tilemaps can be added to the same grid, which  
allows the creation of different types of layers: background,  
foreground, collision, and event layers.  
Example: a layer dedicated to collision detection.  
Scripting Accessing Tiles  
Example 1: Instantiate bombs on click that destroy tiles on collision.  
public class InstantiateBomb : MonoBehaviour  
{
public GameObject bombPrefab;  
public float cooldownTime = 0.5f;  
private float bombTimer = 0;  
void Update(){  
if ((Input.GetMouseButton(0)) && (bombTimer <= 0)){  
Vector2 screenPos = Input.mousePosition;  
Vector3 worldPos = GetComponent<Camera>().  
ScreenToWorldPoint(screenPos);  
Instantiate(bombPrefab, new Vector2(worldPos.x, worldPos.y),  
Quaternion.identity);  
bombTimer = cooldownTime;  
}
if (bombTimer >= 0){  
bombTimer -= Time.deltaTime;  
}
}
}
Scripting Accessing Tiles  
Example 1: Instantiate bombs on click that destroy tiles on collision.  
public class Bomb : MonoBehaviour  
{
private void OnCollisionEnter2D(Collision2D collision)  
{
bool explode = false;  
Tilemap tilemap = collision.gameObject.GetComponent<Tilemap>();  
if (tilemap){  
Vector3 hitPosition = Vector3.zero;  
foreach (ContactPoint2D hit in collision.contacts){  
hitPosition.x = hit.point.x - 0.01f * hit.normal.x;  
hitPosition.y = hit.point.y - 0.01f * hit.normal.y;  
tilemap.SetTile(tilemap.WorldToCell(hitPosition), null);  
explode = true;  
}
}
if (explode){  
Destroy(gameObject);  
}
}
}
Scripting Accessing Tiles  
Example 2: Create a new tile on collision (bomb smoke).  
public class Bomb : MonoBehaviour  
{
public Tile explosionTile;  
private Tilemap hitLayer;  
private void Start()  
{
hitLayer = GameObject.FindGameObjectWithTag("HitLayer").  
GetComponent<Tilemap>();  
}
private void OnCollisionEnter2D(Collision2D collision)  
{
bool explode = false;  
Tilemap tilemap = collision.gameObject.GetComponent<Tilemap>();  
if (tilemap)  
{
Vector3 hitPosition = Vector3.zero;  
.
..  
Scripting Accessing Tiles  
Example 2: Create a new tile on collision (bomb smoke).  
.
..  
foreach (ContactPoint2D hit in collision.contacts)  
{
hitPosition.x = hit.point.x - 0.01f * hit.normal.x;  
hitPosition.y = hit.point.y - 0.01f * hit.normal.y;  
tilemap.SetTile(hitLayer.WorldToCell(hitPosition), null);  
hitLayer.SetTile(hitLayer.WorldToCell(hitPosition),  
explosionTile);  
explode = true;  
}
}
if (explode)  
{
Destroy(gameObject);  
}
}
}
Exercise 1  
1
) Create a small level for a platform game using tile maps and  
implement the following tasks:  
a) Implement the camera movement;  
b) Respawn the player at the beginning of the level when he falls off the  
platforms;  
c) Allow the player to drop bombs that explode and destroy the tiles  
around.  
The bomb must explode after 3 seconds.  
Hexagonal Tilemaps  
In addition to regular Tilemaps, Unity provides both  
Hexagonal Point Top and Hexagonal Flat Top Tilemaps.  
Hexagonal Flat Top  
Hexagonal Point Top  
Hexagonal Tilemaps  
Example: https://www.kenney.nl/assets/hexagon-pack  
Hexagonal Tilemaps  
Example: https://www.kenney.nl/assets/hexagon-pack  
Scripting Hexagonal Character Movement  
Example 3: Character movement in a hexagonal tilemap (+ pathfinding)  
Character sprites: https://opengameart.org/content/zombie-sprites  
Import and slice sprite, and then create animation clips for idle and walk (all directions).  
Create a State Machine to control the animations:  
Scripting Hexagonal Character Movement  
Example 3: Character movement in a hexagonal tilemap (+ pathfinding)  
Tileset: https://www.kenney.nl/assets/hexagon-pack  
Create the level: Tilemap and Collision Tilemap  
Scripting Hexagonal Character Movement  
Example 3: Character movement in a hexagonal tilemap (+ pathfinding)  
public class Pathfinding{  
float Heuristic(Vector3Int w1, Vector3Int w2){  
.
..  
}
List<Vector3Int> ReconstructPath(Dictionary<Vector3Int, Vector3Int>  
cameFrom, Vector3Int current, Vector3Int start){  
.
..  
}
List<Vector3Int> GetNeighbors(Tilemap tilemap, Vector3Int node){  
..  
.
}
public List<Vector3Int> FindPath(Tilemap tilemap, Vector3Int start,  
Vector3Int goal){  
.
..  
}
}
Scripting Hexagonal Character Movement  
Example 3: Character movement in a hexagonal tilemap (+ pathfinding)  
public class HexagonalPlayerController : MonoBehaviour  
{
public Tilemap collisionTilemap;  
public Tilemap worldTilemap;  
public float moveSpeed = 2.5f;  
private Vector3 currentDestination = Vector3.zero;  
private Pathfinding pathfinding;  
private List<Vector3Int> currentPath = null;  
private int pathIndex = 0;  
private Animator animator;  
void Start()  
{
currentDestination = collisionTilemap.CellToWorld(collisionTilemap.  
WorldToCell(transform.position));  
pathfinding = new Pathfinding();  
animator = GetComponent<Animator>();  
}
Scripting Hexagonal Character Movement  
Example 3: Character movement in a hexagonal tilemap (+ pathfinding)  
private void UpdateAnimation(){  
int direction = 0;  
if (currentPath != null){  
float angle = Vector3.Angle(currentDestination transform.position,  
transform.right);  
if (angle < 10)  
direction = 4; //right  
else if ((angle > 170) && (angle < 190))  
direction = 1; //left  
else if ((angle > 10) && (angle < 90) && (transform.position.y <  
currentDestination.y))  
direction = 3; //top right  
else if ((angle > 90) && (angle < 170) && (transform.position.y <  
currentDestination.y))  
direction = 2; //top left  
else if ((angle > 90) && (angle < 170) && (transform.position.y >  
currentDestination.y))  
direction = 6; //bottom left  
else if ((angle < 90) && (transform.position.y > currentDestination.y))  
direction = 5; //bottom right  
}
animator.SetInteger("Direction", direction);  
}
Scripting Hexagonal Character Movement  
Example 3: Character movement in a hexagonal tilemap (+ pathfinding)  
void Update(){  
if ((Input.GetMouseButton(0)) && (currentPath == null)){  
Vector2 screenPos = Input.mousePosition;  
Vector3 worldPos = Camera.main.GetComponent<Camera>().  
ScreenToWorldPoint(screenPos);  
TileBase tile = collisionTilemap.GetTile(collisionTilemap.  
WorldToCell(worldPos));  
if (tile == null){  
currentPath = pathfinding.FindPath(collisionTilemap,  
collisionTilemap.WorldToCell(transform.position),  
collisionTilemap.WorldToCell(worldPos));  
if (currentPath.Count > 0){  
pathIndex = 0;  
currentDestination = collisionTilemap.  
CellToWorld(currentPath[pathIndex]);  
UpdateAnimation();  
}
}
else{  
currentDestination = Vector3.zero;  
}
}
.
..  
Scripting Hexagonal Character Movement  
Example 3: Character movement in a hexagonal tilemap (+ pathfinding)  
if ((currentPath != null) && (currentPath.Count > 0)){  
if (pathIndex < currentPath.Count){  
Vector3 targetPosition = new Vector3(currentDestination.x,  
currentDestination.y, transform.position.z);  
transform.position = Vector3.MoveTowards(transform.position,  
targetPosition, moveSpeed * Time.deltaTime);  
if (Vector3.Distance(targetPosition,transform.position)<0.05){  
pathIndex++;  
if (pathIndex < currentPath.Count){  
currentDestination = collisionTilemap.  
CellToWorld(currentPath[pathIndex]);  
UpdateAnimation();  
}
else{  
currentPath = null;  
UpdateAnimation();  
}
}
}
else{  
currentPath = null;  
UpdateAnimation();  
}
}
}}  
Exercise 2  
2
) Change the code of hexagonal character movement example  
to use keyboard input to move the zombie character.  
The movement must follow the hexagonal directions of the tiles.  
Isometric Tilemaps  
Unity also supports Isometric Tilemaps.  
The isometric perspective displays all three X, Y, and Z axes, adding a  
pseudo-depth to a Tilemap.  
Isometric Tilemaps  
Example: https://shallow-lagoon.itch.io/mega-isometric-block-pack  
1
. Prepare Sprites for the Isometric Tilemap and create a Tile Pallete.  
Isometric Tilemaps  
Example: https://shallow-lagoon.itch.io/mega-isometric-block-pack  
Further Reading  
Unity User Manual, Available at: https://docs.unity3d.com/2020.1/  
Documentation/Manual/  
2D  
Tilemap Grid  
Tilemap Renderer  
Tile Assets  
Tile Palette  
Hexagonal Tilemaps  
Isometric Tilemaps  
Painting on Tilemaps  
Tilemap Collider 2D  
Books  
Jeremy G. (2017). Introduction to Game Design, Prototyping, and  
Development: from the Concept to Playable Game - with Unity and C# (2nd  
ed.). Boston, MA: Addison-Wesley Professional. ISBN: 978-0134659862  
Hocking, J. (2018). Unity in Action: Multiplatform Game Development in C#  
(
2nd ed.). Shelter Island, NY: Manning Publications. ISBN: 978-1617294969