Creating a New Map with the FLARE art assets

Creating a New Map with the FLARE art assets
Part 1

This tutorial will guide you through the necessary steps for making a new map using the FLARE art assets. If this is the first time you are using Tiled, I recomend that you check out the tutorial called "Creating a Map in Tiled".

We'll be using the Empyrean Campaign as our testing grounds.
Since we're going to be making some changes to the Empyrean Campaign, you might want to make a copy of the mod, just so that there's a backup. Go to /flare-game/mods, copy the empyrean_campaign folder, and rename the copy to backup_for_empyrean, or whatever you want. Now that we have a backup, we can safely modify the contents of the empyrean_campaign folder.

Open Tiled, choose "Open File...", and go to /flare-game/mods/empyrean_campaign/maps. Since we're going to be creating a dungeon map, it will be convenient to modify a map that already has everything configured to use the dungeon tileset. "Fort Amir" will do, so let's open that one:

Before modifying the map, the first thing we need to do is to save it with a different name and a different file format. We don't want to actually replace Fort Amir, we just want it's configurations so that we don't have to set everything up from scratch. Go to File, Save As, name it whatever you want. Be sure to save it as a .tmx file instead of a .txt file.

The reason for using the .tmx format is that we are going to use the Terrain Brush in order to make the walls. The configuration information for that brush would not be saved if we worked with a .txt file. But when we're done making the map, we'll export it as a .txt file, so that FLARE can read it.

Zoom out so that we can see the whole map. You can do this by holding down the Ctrl key and using the mouse wheel. Go over to the panel on the top right, and hide the enemy, event, collision and object layers. You can do this by clicking on the eye icon next to each of them. Only the background layer should be visible. Click on that layer, and let's start to modify the floor tiles.

In order to fill the entire floor with the appropiate tiles, first we need to erase the ones that are already there. Click on the Eraser tool, then go to one of the corners of the dungeon, hold down the right button on the mouse, and cover the entire floor. It should look like this:

After releasing the right button, the floor should be clear:


In principle we could fill the dungeon with the exact same floor tile, but we want to randomize things a bit. Go to the panel on the bottom right, where it says door_left.png, and instead choose tiled_dungeon.png. Hold down the Ctrl key and left-click on the first four floor tiles.

Now go to the dice icon in the toolbar, this will enable the random mode. Finally, select the Bucket Fill tool, and click on any area of the dungeon. The result should look similar to this:

We have finished the floor. Click again on the dice icon to deactivate it. Now it's time to make the walls. Click on the closed eye icon next to the object layer. This will bring back up the walls that Fort Amir uses:


Same as with the floor tiles, we need to erase these walls. Select the eraser, right-click on one of the map's corners while holding down the mouse's right button, cover the entire area, and release. Let's place the outer walls. Click on the Stamp Brush, and select the wall with no decorations that is facing south-west. You can click on an individual tile to place a single wall tile, but this is of course very time consuming. Instead, hold down the Shift key, then left click on one of the tiles, and move the mouse further from that point. This will create a line using the wall tile that we have selected. Before releasing the Shift key, the result should look like this:

If not, then just move the mouse until you get a straight line. Then left click wherever you want the wall to end. Repeat the process until you're done with that side of the map. Do the same thing for the other three sides of the dungeon, choosing the appropiate wall tiles. Finally, choose the appropiate corners, and place them.

You might be wondering "What if I want some random decorations on the walls, like statues, bookcases, etc.?" That can be done in a similar way to what we did with the floor. For example, select the same wall tiles that you see in the next image, click on the dice icon to randomize, and draw a line by holding down Shift and left clicking.

Remember to deactivate the Dice icon one you're done randomizing. For the rest of the walls, we won't use the Stamp Brush. Instead, we're going to use the Terrain Brush. But first we have to set it up. Go to the panel on the bottom right, and click on the gear icon. This will open the "Edit Tileset" mode. Once there, right-click on any of the wall tiles, and select "Add Terrain Type". Now you can left-click on individual tile walls. However, selecting the appropiate ones can be tricky. Here is what your selection should look like:


You might be wondering why those selections look a bit strange. If we were dealing with orthographic tiles, the explanation would be rather simple. But with isometric tiles, that explanation gets complicated. First of all, try to simply experiment with your selections. You will notice that depending on where your mouse cursor is, sometimes it selects top-right angles, sometimes bottom-left angles, and so forth. If you hold down the left mouse button you will be able to modify the selection, turning it into a rectangle. Now, if we were dealing with isometric tiles, our selection would look like the next image (I have selected empty tiles just to illustrate the point)


Each of the four blue corners would correspond to one of the tile corners, and the rectangles would correspond to sides. That selection, however, is incomplete. We need to incorporate four more selections, that correspond to the perpendicular connections between walls:


Now here's the key point. If Tiled was limited to only this type of selection, it would complicate the lives of the artists, because they would have to generate .png images that match that kind of selection. In other words, it would not be possible to arrange the tiles like FLARE has done. But Tiled is a powerful tool, and this has already been taken into account. So, in principle, you could "spread out" the selection, like so:


But that's not the end of it. Not only is it possible to "spread out" the selection, it's also possible to "jumble it up", meaning that it's not necessary to always have the top-left corner on the top-left, or the right-bottom corner on the bottom-right, etc. You can rearrange these tiles in any way you want. So, for example:


Of course, this looks chaotic. But there is a method to this madness. The actual explanation behind this would be quite extensive. However, for our purposes, it is enought to know that you do not need to edit FLARE's .png files to accommodate for a selection: you can accommodate the selection to FLARE's tilesets instead.
Having selected the appropiate wall tiles, as shown a few images ago, click on the "Save" button, and close the "Edit Tileset" tab. We are back at the map view. Go to the bottom right panel again, and instead of "Tilesets", choose "Terrains". We can now make walls using the Terrain Brush.