Tiled is a free map editor game developers use to produce scenes and levels in mobile app and web games. The basics are covered in the video below.
Maps are created by importing tilesets. Each tile is then painted onto the map.
The open source package flame_tiled then imports the tiles and data files into your Flame game.
homeMap = await TiledComponent.load('map2.tmx', Vector2.all(32));
add(homeMap);In the example above, map2.tmx is the data file for the map that Tiled creates for Flame.
The primary tools to use in the Tiled map editor are:
- stamp
- bucket fill
- eraser
In the example below, I am using the stamp tool to place a full map into my game.
The raw material to create the maps are organized in tilesets. In the example below, I’ve called my tileset background.
Normally, you do not have to edit the data file by hand. It is created for you automatically by the wonderful Tiled editor. The map file can be edited and parsed by hand, but it is easier to use the Tiled tool for map creation and flame_tiled for map import.
<?xml version="1.0" encoding="UTF-8"?><map version="1.8" tiledversion="1.8.4" orientation="orthogonal" renderorder="right-down" width="100" height="20" tilewidth="32" tileheight="32" infinite="0" nextlayerid="4" nextobjectid="12"><tileset firstgid="1" name="background" tilewidth="32" tileheight="32" tilecount="713" columns="31"><image source="../images/background.png" width="1000" height="750"/></tileset><tileset firstgid="714" name="ground_tiles" tilewidth="32" tileheight="32" tilecount="18" columns="0"><grid orientation="orthogonal" width="1" height="1"/><tile id="0"><image width="32" height="32" source="../images/ground_tiles/1.png"/></tile>
There are two types of map layers that the tutorial series focuses on:
- tiles
- objects
Tiles do not have collision and are for visual cues in game play.
Objects can have collision and are used for the ground platform in the tutorial.
The full series of Flutter mobile app platform game development with Flutter is available in the playlist below.
