Maps and TileMaps

Tile Maps

A large group of sprites, like you might tile together to build a level or a map, can be organized as a 2D TileMap. TileMap assets can be created & edited as both a Tiled Map XML and Tiled SpriteSheet XML file created by Tiled.

Tiled Editor Files

The Tiled Editor creates two files when you build a map: a map TMX file and a sprite sheet TSX file. The TSX sprite sheet file should refer to your spritesheet specifying a grid with of 8 pixels and a grid height of 8 pixels. This TSX file is referenced by a Tiled map file, which should also define tiles as 8 pixels by 8 pixels. While Tiled itself can draw maps with alternate pixel dimensions, the 32blit SDK will only use 8x8 tiles when drawing maps.

The Tiled map file defined within picosystem-demo is a bit larger than the drawable area on a PicoSystem. While the map itself is 256x256 pixels wide, only 240x240 pixels are drawn on screen:

Importing Maps

TileMaps can be imported as assets by 32blit by pointing to a formatted map (TMX) file from Tiled. The spritesheet (TSX) file will be automatically imported based on the reference within the TMX file and doesn't need to be specified as an asset. Within picosystem-demo this is defined as:

assets.cpp:
  assets/map.tmx:
    name: asset_tilemap

Once imported as assets, TileMaps can be added to the current screen by loading the spritesheet image and the Tiled map asset:

screen.sprites = Surface::load(asset_sprites);
environment = new TileMap((uint8_t*)asset_tilemap, nullptr, Size(32, 32), screen.sprites);

Note that we are specifying that our map is 32 tiles wide and 32 tiles tall. The map dimension does need to be a multiple of 8; even though the PicoSystem has a 240x240 screen which would host 30x30 tiles at once, at minimum we need to specify a 32x32 map in order for the tiles to be rendered correctly.

Scrolling the Map

picosystem-demo doesn't scroll the map (it's a fixed background), but if you wanted to scroll the map as a player moved you could add a matrix transformation to translate the TileMap from one location to another. For example, to move the map 8 pixels to the right you could issue the matrix translation during an update call:

environment->transform *= Mat3::translation(Vec2(8, 0));