Creating a Map in Tiled
This tutorial will show you how to create a map in Tiled for use with Flare. We'll be using my Flare Starter Pack as a base. Either clone it with Git or download the zip file.
In order to save maps in Flare's format. You will need to enable the libflare.so plugin in Tiled. Go to Edit -> Preferences, and then the "Plugins" tab. Enable libflare.so and close the window.
Note for users of Tiled 1.9.2 and newer: It is highly recommended to create a project file first before creating the map.
Create a new map in Tiled. The starter pack uses orthogonal maps with 32x32 pixel tiles. We'll make this map small, 16x16 tiles. Save the map in the starter pack under the tiled directory.
Let's begin by setting up some of the map properties. Go to Map -> Map Properties... In the Properties dock, set the "Background Colour" to black. Now we can add some custom properties that Flare understands. Click the + button at the bottom of the dock to add a property. All of the properties for Flare maps are string typed.
We'll be adding three map properties. The first and most straightforward is title. This will be the map's title that gets displayed near the minimap and on the load game screen. Next is hero_pos, which is the X,Y coordinate for where the player will be placed by default. The last property is tileset, which is a file path to the tileset definition Flare will use for this map. There will be more explanation later on how to create/edit one of these files, but for now we will use the one that comes in the starter pack mod.
Next, let's set up our layers. By default, Tiled gives you one tile layer. We'll rename this to background. Create two more tile layers and name them object and collision. Now create three object layers. Name them event, enemy, and npc. We won't be using the npc layer for this tutorial, but this is where NPCs would go if your map had them. Your layers should now look like the image below:
Now let's add our tilesets. Flare uses tiles placed on the collision layer to determine how the player, creatures, and spells will collide with the map. The tileset that we use for the collision layer MUST be the first tileset added. Otherwise, the tile IDs will be incorrect.
To add the collision tileset, click the + button at the bottom of the Tilesets dock. For the image source, browse for the tiled_collision.png located in the starter pack's tiled directory. Name the tileset "collision". Be sure to check "Embed in map" and set the tile width and height to 32 pixels.
Now do the same, but with the tileset.png located in the starter pack's tiled directory.
Before we get on with painting our map and placing objects, I highly recommend loading the objecttypes.xml file. To do this, go to View -> Object Types Editor. In the dialog that opens, go to File -> Import Object Types... and select the objecttypes.xml file in the starter pack's tiled directory. This will make it much easier to edit objects such as events and enemies by displaying all the possible properties they have.
Note for users of Tiled 1.9.2 and newer: The 'Object Types Editor' (since renamed to the 'Custom Types Editor') is only available when working within a project. When importing the XML file, ensure that 'Object Types XML' (as opposed to 'Custom Types files') is selected in the file filter.
Now we can actually start placing tiles to design our map! Our tileset has 4 tiles in it: 2 floor tiles, 1 orange wall tile, and a button. Because of their shape and size, the first three tiles can all be safely placed on the background layer, though you may opt to place the wall tile on the object layer. It may help to turn on the grid (View -> Show Grid) when starting. You should make sure that there is some floor where we set our hero_pos (4,4 if you forgot). On the object layer, place a button somewhere, we'll be using it in a bit.
All that's left to paint is the collision layer. Switch to the collision tileset. There are four collision tiles, two red and two blue. Red tiles represent walls, which block almost all entities. Blue tiles represent pits, which block ground-based entites, but allow airborne entities to pass. The solid red/blue tiles will appear on the minimap in-game, where as the dithered tiles will be invisible on the minimap. So let's paint our collision layer, using red for walls and blue for pits/short objects.
Before adding any objects, it's important to turn on snapping by going to View -> Snapping -> Snap to Grid.
Let's make the map more interesting by first adding an enemy spawner. Select the enemy layer and then the "Insert Rectangle" tool. Draw a rectangle on the floor and switch over to the Properties dock. Under "Type", enter enemy. If you loaded the objecttypes.xml file earlier, you should see the "Custom Properties" section become populated. Fill them out as follows:
-
category =
slime -
level =
1 -
number =
1,2 -
wander_radius =
2
Now let's create an event. Select the event layer and create a 1x1 rectangle object over our button from earlier. Like before, edit the "Type", but this time set it to event. Set the following properties:
-
activate =
on_trigger -
cooldown =
1s -
hotspot =
location -
msg =
Hello World -
repeat =
true -
tooltip =
Button
Save your map and then go to File -> Export. Under the filetype, select "Flare map files (*.txt)" and save it under mods/flare-starter-pack/maps/ as mymap.txt.
If we had created our own tileset, this would be the point where we would need to create our tileset definition for Flare. Since we already have one created for us, we'll take this oppourtunty to briefly review its contents. A full explaination of tileset defintions can be found here.
# tileset_default.txt
img=images/tilesets/tileset_default.png
# tileset
tile=16,0,0,32,32,16,16
tile=17,32,0,32,32,16,16
tile=18,64,0,32,32,16,16
tile=19,96,0,32,32,16,16
The first value of each tile is its ID. Because of the size of the collision tileset, the first ID of our actual tileset gets pushed to 16. Next are the X/Y pixel values for where the tile is on the image. After that are the width and height of the tile in pixels. Finally, we have an X/Y pixel offset. We want our orthogonal tiles to be centered on both axes, so 16 is the number here.
It's about time we see how our map looks in Flare. First, we need to make sure developer mode is enabled. Go to the "Configuration" menu, followed by the "Interface" tab. Check "Developer Mode".
While we're here, let's make sure that the flare-starter-pack mod is the only enabled mod. Go to the "Mods" tab. If you do not see the flare-starter-pack mod, refer to the Flare documentation for information on where to place mods. Set up the "Active Mods" list as shown below and click "OK".
Now click on "Play Game" and start a new game. You'll now be in the map that comes with the starter pack. In order to get to the map that we made, we'll have to teleport there with the Developer Console. Hit F5 to bring up the console and enter:
exec intermap=maps/mymap.txt
Close the console to return to the game. You're now on the map that you made! Make your way over to the button and give it a click.
