Carto Vertical Slice – Map system & User Interface

This project is a Vertical Slice of the game Carto. In Carto, you solve puzzles and move around the world by moving pieces of it on a map. Our team had to recreate the mechanics shown in a 10-15sec video of the game, to a point where we would be able to recreate that video with our own project.

Time periodEngine & language(s)Team sizeGitHub link
8-9 weeksUnity, C#7here

Process

Map system

The world map is made up of a grid of chunks. This method of building up the world works well, as the game revolves around moving and placing square pieces of map in the UI, which then get placed in the “real world”.

Visual sheet of the map system

Each “chunk” is a piece of the world, stored as a prefab so that it can be easily used. They are placed on a “chunk position”, which is a separate coordinates from the Transform coordinates. These coordinates are stored in a Chunk script, on both the world pieces and black/white chunks in the world (which are invisible during gameplay). The Chunk coordinates are also used by the grid pieces in the UI, to link them to in-world chunks based on chunk coordinates.

An important feature is that chunks can be placed in the world through a function in a Manager script. This is important for the UI, so that user input can place pieces in the world.

User Interface

The User Interface is in basis the same as the game world – it’s a grid made up of chunks, that have chunk coordinates.

The UI in practice

The following visual sheet explains roughly how the system behind the UI works:

Visual sheet of the UI system

Simply put, the system checks per tile in the UI if there is a game world chunk loaded with the same chunk coordinates. Then, it takes a sprite stored in that world chunk, and uses it as its texture.

The GitHub repository for the project can be found here.