BMR's Tiled/OHRRPGCE Tutorial

Make games! Discuss those games here.

Moderators: Bob the Hamster, marionline, SDHawk

Post Reply
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

BMR's Tiled/OHRRPGCE Tutorial

Post by BMR »

Difficulty: Intermediate
Requirements:
  • Working knowledge of Custom's map editor
  • Ability to unlump/relump an .rpg file
  • Intermediate plotscripting knowledge
  • Familiarity with any image editing software
  • Proficiency with any spreadsheet software
Arguably, one of the most time-consuming aspects of making any game is the making of maps. Because of that, any way to speed up the process is always welcome. Now, while the map editor in Custom is perfectly adequate, there are a few ways to speed things up, and we'll be looking at one of those methods in this article. Specifically, we'll be using Tiled Map Editor, a free map-editor for games and the sort.

One thing to keep in mind though, is that while this can potentially speed up the process of making maps, it does involve a few tricky work-arounds. Because of those tricky bits, this method might not be something for everyone. Nevertheless though, whether or not you use this method is ultimately up to you. What works for some may not work for others, so you'll have to judge whether or not the time saved with this method is worth the extra effort.

Now, it's important to note that this is not a Tiled tutorial, so while I will be going over some of the functions of Tiled, that's more to provide a brief and general overview as to what it's capable of. The focus of this article is how to use it in conjunction with the OHRRPGCE, so we won't be going too in-depth to Tiled.

Now, without further ado, let's get cracking!

Table of Contents
Last edited by BMR on Sat Jul 09, 2016 9:58 am, edited 3 times in total.
Being from the third world, I reserve the right to speak in the third person.

Using Editor version wip 20170527 gfx_sdl+fb music_sdl
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Post by BMR »

I - Using Tiled

The very first step, obviously, is to download yourself a copy of tiled. If you click the link above in the intro, it'll take you to Tiled's homepage where you can download it for a variety of different operating systems. Go ahead and download and install whichever version is appropriate for you. Once you've installed and started it up, you should see something like this:

Image
Note, the image above, as well as a bunch of the ones below, is scaled down, so some of the smaller text might not be readable. Had to scale it down so that the page doesn't load up with crazy-wide images.

Once you've got that up, you should be just about ready to go. So go ahead and create a new map. Doing so will bring up a dialogue that looks like this:

Image

There are a few options there, but the only ones you really need to look at (for now) are the ones under Map Size, and Tile Size. In the Map Size section, go ahead and create however big a map you want. In Tile Size, set the width and height of the tiles to 20px which is what the OHRRPGCE uses. Tiled can also do isometric and hex maps really well. I've used it before for both those types of maps, and it works a charm. For the OHRRPGCE though, we won't be using either of those.

Once you've created your map, you'll have something like this (sans big red letters):

Image

This is your basic work area. Up in A is your mini-map. It's also where you'll find your layers, should you choose to use them (which I always do). Layers work differently than in Custom, so we'll get back to those later on.

In B, you have your Terrains (ignore that tab for now, we'll get back to it later) and your Tilesets (very important).

C is your map properties. Usually, you won't need to bother with any of those settings, but in order to get the map working for this tutorial, go ahead and change the Tile Layer Format to XML. You won't notice any difference right now, but we'll get back to it later.

Over in D is your history. This is pretty much the same thing as the history section in any image editing software, so if you're familiar with those then you'll be right at home here.

Your main canvas is E. It will show a grid (which can be toggled on/off) based on the tile-size you specified earlier. You can configure this grid to look however you want, but for now we'll leave it as is.

Up in F are your tools. These are fairly similar to any other image editing software, so if you're familiar with those you should be familiar with these.

Right, now with those out of the way, let's start putting together a map.
Being from the third world, I reserve the right to speak in the third person.

Using Editor version wip 20170527 gfx_sdl+fb music_sdl
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Post by BMR »

II - Making a map

Obviously, the first thing you'll need to do is to go ahead and import your tilesets. To do that, go over to B and select the Tilesets tab. There, at the bottom of the tab you should see an icon (shown below) that will allow you to import a tileset. Alternatively, you could go to the menu and select Map→New Tileset. Either way works.

Image

Once you've clicked that, a dialogue should pop up. It should look like this:

Image

There, you can name the tileset and specify all sorts of other things. By default, your tile width and tile height will be set to whatever your current map is, but should you (for some very strange reason) decide to use a different size, you can do so here. You can also set the transparent color of your map. Here, I'm using magic pink as I always do. Once you've browsed for and selected your tileset, it will show up in the bottom right of your screen under the Tileset tab. If you have more than one layer, go ahead and import the rest of your tilesets. There's no limit to the number you can have here, so go ahead and go crazy. Why you'd want more than eight (the limit in the OHRRPGCE) will be discussed later.

Once you've got all your tilesets imported, your tilesets tab should look something like this:

Image

All of your different tilesets (for your different layers) are arranged in tabs. This is your palette of sorts, where you can select different tiles (or groups of tiles via shift/ctrl+clicking) to paint onto your canvas. Here's an important difference between Tiled and Custom though: In Tiled, layers are not limited to a single tileset. Because of that, you'll also need to create different layers up in A.

Up in the layers tab, go ahead and hit the new layer button. There, you'll be given the option to create either a tile layer, an object layer, or an image layer. The latter two don't matter to us (for now) so go ahead and select tile layer. This will create a new layer which you can then rename. Go ahead and create however many layers you'll be working with. Custom is limited to eight layers, but should you need more than that (why you would need more than eight is discussed later) you can do so.

When you've got all your tilesets added and your layers made, you'll be ready to go. Again, layers are not limited to a single tileset, so it's quite easy to accidentally add tiles from the wrong tileset when working on different layers. Because of that, you'll need to pay close attention to what you're doing.

Now, when adding tiles to layers, everything functions pretty much the same as any other image editing software. You can drag your mouse around like a brush, shift+click to make lines of tiles, select areas and fill them, zoom in and out to get better views, etc... Because it's like any other image editing software, you can quickly put together a map.

Image

Granted, doing it this way is perhaps only marginally faster than mapping in Custom, but this isn't the only thing that Tiled can do. Now that we're done with the basic painting of tiles, we'll move on to terrains.
Being from the third world, I reserve the right to speak in the third person.

Using Editor version wip 20170527 gfx_sdl+fb music_sdl
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Post by BMR »

III - Terrain

The terrain tool is one of the most useful parts (but not the[/] most useful) of Tiled. It allows you to quickly and easily paint grass, dirt, roads, etc... on your map. Take the image below for example:

Image

Drawing dirt like that would take forever (or at least an annoyingly long time) in Custom. With Tiled, it's possible to do so in seconds. Let's take a look at the tileset I use to make that dirt blob.

Image

It's a bit much to look at, but that's to improve the randomization of the terrain. The dirt terrain I've used takes up 38 tiles, but at it's simplest you only really need 15 to make a decent terrain. An example of this is shown below:

Image

Those 15 tiles cover the base terrain tile, the four edges, and all the corner combinations possible. To create a terrain, go to the appropriate tileset in your tileset tab. Select the base tile, then click the terrain icon as shown below:

Image

This will bring up a window where you can edit terrain information:

Image

In this window, you can, obviously, create terrains. You can click the + sign at the bottom left to create a new terrain, but it's easier to right click on your base tile and select "Add Terrain Type". Once you do so, you'll be able to type in the name of the terrain. Now comes the slightly complex part. You have to paint your tileset so that Tiled knows what's part of the terrain and what's not. You'll want to cover all the corners, sides, etc... that should be included with your terrain. With each tile, you will be selecting corners and Tiled will automagically fill everything in for you. For example, with my dirt terrain, I've painted it thus:

Image

When that's done, you're ready to paint terrain. Go ahead and close the terrain info window and go back to your main canvas. Once there, select the Terrain tab at the bottom right (or wherever you've put it) and select your new Dirt terrain. Your cursor will change to to a 3×3 brush with your terrain. Now, when you paint with the terrain tool, Tiled will automagically fill in and change surrounding tiles to match with your terrain.

Image

Granted, just how good the terrain will look will depend on your art. You can also increase the number of tiles that Tiled can choose from in order to improve the randomness and variety of your terrain. By having more than one base terrain tile, for example, you can randomly place those different grass tiles on your map without having to worry about placing each one by hand. This is great for organic things like dirt, grass, or water, but can also be used pretty well for streets that have borders and/or sidewalks. With some creativity, it can also be used for tree canopies, walls, or pretty much whatever you can imagine.

Now, as useful as the terrain tool is, it's not the star of the show. That honor goes to Auto-mapping.
Being from the third world, I reserve the right to speak in the third person.

Using Editor version wip 20170527 gfx_sdl+fb music_sdl
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Post by BMR »

IV - Auto-mapping

With auto-mapping, you can specify set of rules for your map that will automagically add tiles for you. This can be useful for those pesky things like wall shadows, water edges, random clutter, etc... Basically, the way automapping works in Tiled is that it looks for patterns you specify, then it replaces those patterns with the tiles you tell it to. It's thus possible to have Tiled look at certain parts of your map and replace (or add to) parts of it. This greatly speeds things up, as you can simply draw, for example, a solid black line which is then turned into wall edges. You can also have Tiled randomly pick from a set of tiles when replacing, that way instead of putting different pots (for example) you can instead place a single graphic then Tiled will choose from the tiles you've specified and replace your placeholder graphics.

Image

As shown in the little animation above, it can really speed things up, especially if you're creative and efficient with your automapping rules. Now then, it's all well and good to harp on about how awesome it is, but let's get cracking as to how to actually use automapping.

The base of any automapping rule, is a rule file. To make one, simply create a new map in Tiled. Save that file in the same directory as the map you're working on. Inside that directory, you'll also need to create a file, "rules.txt". This is a simple text file where you'll type in the filenames of whatever rules you're going to use. So if, for example, you have a file "rule_barrel.tmx", you would add the line "rule_barrel.tmx" to your rules.txt file.

Once that's done, now you need to actually build the rule file. A rule file consists of various layers, specifically:
  • A region input layer (Must be named "regions_input")
  • A region output layer (Must be named "regions_output")
  • Any number of layer inputs
  • Any number of layer outputs
Let's go through this step by step by making a rule for creating a barrel. I'll create a map that's 1px × 2px, as that's how big my barrels will be. You can make it bigger if you want, but it can be simpler and more efficient to use the bare minimum that you'll require.

Your region input layer will tell Tiled what tiles to look at. It must be named "regions_input". By default, each tile on any map is blank. When specifying what regions to look at, you add a tile, any tile, to your "regions_input" layer. What tile you add doesn't matter at all, but it can be useful to stick to a specific one across multiple rule files so as to keep things organized. Go ahead and add a tileset to your map. Here, I'll be using a tileset that I use across all maps I create. I've added a single tile (the purple one) to the regions_input layer.

Image

Next, add another layer for the regions where Tiled will be writing to. This must be named "regions_output". Like the "regions_input" layer, this just tells Tiled where it will be working. Your region input and output layers do not need to be the same size, but they should overlap at some point or the other. In this case, I've set the output region to be 1×2. Now, something I like to do is to set my "regions_output" layer to 50% opacity. This is not something you need to do, and I only do it as it allows me to see where my region input and output layers overlap.

Image

The next step is to create an input layer. This must be named "input_layer name" where "layer name" is the name of the layer where Tiled will look on your base map. In this case, I'll be looking at the layer "embel 01" on my base map, so in the rule file I'll name the layer "input_embel 01". On that layer, you'll add a tile that Tiled will look for. In this case, it does matter what tile you add, as it will look for that exact one. For this one, I'll add a placeholder graphic.

Image

With that done, you can now add output layers. Like the input layers, these have to be named "input_layer name" where "layer name" is the name of the layer where Tiled will look on your base map. Now, my barrels are split across two layers, embel 01 and rails. That's because the lower half of the barrel is the base which cannot be walked through, while the top half is drawn over the player, simulating walking behind it. That's not a problem, as you can specify multiple output layers. To do that, I'll add the embel 01 and the rails tilesets. After that, I'll create two layers, "output_embel 01" and "output_rails". On each layer, I'll add the appropriate tile.

Image

Now, when working on the main map, if I want a barrel all I need to do is to set down the placeholder graphic on the embel 01 layer, hit "A" to activate automapping, and have Tiled automatically place it for me. It's also possible to have Tiled randomly pick by adding a number to the output layers as shown below:

Image

I have three different barrels (shown in the tileset tab in the bottom right), so I made three output layers named "output1_embel 01", "output2_embel 01", and "output3_embel 01" as well as corresponding output layers for the rails layer. Each of those "output#_embel 01" layers has a different tile, so when using the automapping function Tiled will randomly choose from those three layers for what to set down.

While this is a very simple example, you can easily scale up to create even more complex rules. There's no limit to the number of rules you can have, so with a bit of work and creativity you can use automapping to automate a great deal of the mapping process. I should say though, that there are more advanced functions with automapping, but those are a bit beyond the scope of this article. To view them, visit the official documentation here.

Now, terrain and automapping are all well and good, but it's time to look at how to get maps made with Tiled into Custom.
Last edited by BMR on Sat Jul 09, 2016 9:51 am, edited 1 time in total.
Being from the third world, I reserve the right to speak in the third person.

Using Editor version wip 20170527 gfx_sdl+fb music_sdl
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Post by BMR »

V - Importing/Converting for Custom

Right now, there is no way to have Custom read external files. What we're going to do then, is to get the output from Tiled, convert it into a script, run that script in Custom, and then use the generated map. We'll use our tiny little 16×10 map as an example.

Once you have the map you want, go to File→Export As. There, you can select where you want to export the file. You can export everything as a CSV, but if you have multiple layers (which I do) it can be easier to export the map as a .json file rather than having to deal with multiple .csv files. Once you've exported the map, open it up and if you set tile layer format to XML as mentioned earlier, you should have something that looks like this:

Code: Select all

{ "height":10,
 "layers":[
        {
         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
         "height":10,
         "name":"ground",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":16,
         "x":0,
         "y":0
        }, 

...
...
...
That's only a small snippet, as the rest of the file goes on and on and on. What you're looking for is the line that starts with "data". That right there is your map. This one has a bunch of 1s, but in more complex maps (i.e. not the lame one I'm using as an example right now) you'll have a bunch of different numbers. Each of those numbers corresponds to a certain tile. Here, "1" is tile position "0" in Custom. You'll have one of these blocks for each layer that you created.

One thing to keep in mind though, is that the number count goes up by 160 for each layer (16 tiles wide × 10 tiles high). This means that while in Custom, layer 1's tile 0 will be the tile at the top left, and layer 2's tile 0 will also be the tile at the top left, in this output file layer 1's top left tile will be tile 1, and layer 2's top left tile will be 161, and so on and so forth.

Now that you have these numbers, it's up to you how to parse them. The method I've done is to copy/paste those lines into a spreadsheet which will then create a string of values for me with each number formatted to be exactly 4 characters long (e.g. 0000, 0001, 0002, etc...). Once I have that string of values, it's a simple matter to script something to turn that string of values into tiles. In an .hsi file, I store each of those into separate "layer strings" (Strings 90 to 100 for me) which I can then refer to later on in other scripts. The generator script I came up with is below:

Code: Select all

#This file is a VERY crude generator.  Used in conjunction with the spreadsheet built for this, it allows me to
#  translate data from Tiled to the OHRRPGCE.


plotscript, autogen, begin
  variable(
    minX
    minY
    maxX
    maxY
    
    curX #Current X value
    curY #Current Y value
    curT #Current Tile value
    curL #Current Layer value
    
    curP #Current Pass bitset
    
    ctr  #Counter for where to cut
  )
  
  minX := 0
  minY := 0
  maxX := map width -- 1
  maxY := map height -- 1
  ctr  := 0
  
  data set
  
  for(curL, 0, 7) do(
    switch(curL) do(
      case(0) do(81 $= 90) #Layer 0
      case(1) do(81 $= 91) #Layer 1
      case(2) do(81 $= 92) #Layer 2
      case(3) do(81 $= 93) #Layer 3
      case(4) do(81 $= 94) #Layer 4
      case(5) do(81 $= 95) #Layer 5
      case(6) do(81 $= 96) #Layer 6
      case(7) do(81 $= 97) #Layer 7
    )
    
    for(curY, minY, maxY) do(
      for(curX, minX, maxX) do(
        80 $= 81
        trim string (80, ctr + 1, 4)
        
        curT := number from string (80)

        write map block(curX, curY, curT, curL)
        
        ctr += 5
      )
    )
    ctr := 0
  )
  
...
...
...
  
  save map state #Very important, saves the map so I can retrieve it later
This script is run when the map first loads, so if done right it will populate your map with the one made in Tiled. The way that script works is to grab each "layer string" and then chop each one up to figure out what tile and what layer to write map block to. As shown in the script comment, the above script is very crude, and for larger maps, relatively slow. That doesn't matter though, as we're only going to be running this script once. Granted, you can always write a more efficient script, but I'm lazy and this works well enough for my purposes.

Right, so by now you've compiled your script, imported it into Custom, added your plotscript to your map's autorun special plotscript. Now for the fun part, getting that scripted map into Custom. To do so, first check and remember the number of the map you're working on. Once you've done that, go ahead and save & quit Custom. Now, if you haven't already, unlump your .rpg file. Inside your unlumped .rpg file (.rpgdir) are a whole bunch of files. For now, you don't need to worry about them.

Go ahead and fire up Game and load up your .rpgdir. Once the game starts, and assuming that you've properly attached your plotscript and are on the appropriate map, you should be good to go. When Game runs, it will create a working directory for the game files. Exactly where this file is will vary between the different operating systems. For more information, check this page. Chances are, you'll have a whole bunch of files there as well as directories. The easiest way to find the one you want is to arrange everything by modification date. The newest directory is the one you want, so go ahead and open it up.

Inside are a whole bunch of files. The file you're looking for is named "map#_t.tmp", where ## is the number of the map you were working on (you remembered which one it was, right?). This file contains the tilemap that was created with the above script. Go ahead and copy/paste this somewhere, preferably the directory where your .rpgdir is located (but not inside the .rpgdir, or at least not yet.).

Once you've done that, you can exit Game. Now back to your game directory. Backup your .rpgdir file just in case (which should go without saying, as you should always have a backup of your game). Rename the "map#_t.tmp" file into "ohrrpgce.t##". So if the file you copied was "map1_t.tmp", you'll rename it to "ohrrpgce.t01". Next, copy/paste the renamed file into your .rpgdir, overwriting your existing file and you're done! When you next open up Custom, if you did everything correctly you should be able to see the map you created in Tiled and edit it to your heart's content.



VI - Final Thoughts

And that's that! It should save some time when making maps (or at least it does for me) as well as streamlining a few things. This tutorial only covers tiles, but once you've got this basic technique down, it's a simple matter to expand it to include wallmaps, zonemaps, doors, and everything else that you could want. This method works well for me, but the extra steps might not make it something that appeals to everyone. You'll have to do a bit of testing to see if this is right for you.

Additionally, if anyone wants a copy of the spreadsheet I use to convert stuff as well as the complete script I use, don't hesitate to ask me if you're interested in using them. Anywho, that's all from me for now, cheers!
Last edited by BMR on Sat Jul 09, 2016 10:10 am, edited 2 times in total.
Being from the third world, I reserve the right to speak in the third person.

Using Editor version wip 20170527 gfx_sdl+fb music_sdl
TMC
Metal King Slime
Posts: 4308
Joined: Sun Apr 10, 2011 9:19 am

Post by TMC »

Cool! I've never used Tiled before, but I installed it just now. Haven't read through that whole thing yet. A non-animated example of automapping might be better; the automapped version of the map is only visible for a second or two.

That method of importing tilemaps is totally impractical (although I used a similar method to convert Minecraft maps into scripts for Blockworks, at least I wrote a Python script to automate the process). (And anyway, there's no need to unlump the game and stick the .T## file in manually; you can use the 'Import/Export Tilemap' menu in the map editor, which was intended for this.) Just now I barely started on a utility to convert Tiled .tmx files to OHR .tilemap files, based on Sephy's ohr-cartographer tool. It seemed like a good idea, because that tool is written in Ruby, which I don't know (making it a fun project), and there is a Ruby library to read/write .tmx files.

But then I realised that Tiled already has plugins to support a bunch of map file formats for various engines, and Tiled plugins can be written in either C++ and Python. Also, there's a huge number of libraries and game engines which support Tiled maps, so it would make a lot of sense to either support importing/exporting .tmx maps directly in Custom, or to provide a plugin for Tiled to do it. If doing the latter, I think it makes much more sense to use Python instead of C++; that way we can we distribute an up to date plugin ourselves instead of needing it to be built into Tiled or distributed as a compiled .so/.dll/.dylib file.

It wasn't obvious how the plugin system works; it's undocumented, but see here. Windows users apparently have to install Python 2.7 separately (everyone else already has it installed). Also, here's some description of existing python plugins. Basically you put a .py file in $HOME/.tiled, which defines a class which lets you read or write a new file format. You can't extend tiled in any other way. We can follow the other plugins as examples. Writing a plugin to export OHR .tilemap files should be very easy, importing from .tilemap files and setting up tilesets and other metadata sensibly is more work. In future I want to replace the OHR map format with something that actually stores that sort of metadata, and allow importing/exporting wallmaps, zones, and other things.

Also, I have a file format definition file for Tile Studio to support OHR tilemaps.
Last edited by TMC on Sun Jul 10, 2016 6:27 am, edited 6 times in total.
User avatar
guo
Metal Slime
Posts: 749
Joined: Fri Dec 04, 2009 9:12 pm

Re: BMR's Tiled/OHRRPGCE Tutorial

Post by guo »

Hey,
Did this ever go any further? Tiled looks really powerful and useful.
Is this still the best method to import maps made in Tiled, or is there an easier way?

Cheers
vvight.wordpress.com
TMC
Metal King Slime
Posts: 4308
Joined: Sun Apr 10, 2011 9:19 am

Re: BMR's Tiled/OHRRPGCE Tutorial

Post by TMC »

I never got any further.

But I really don't think that BMR's method is a good idea and it would be less work for anyone who can program to implement a very simple conversion tool, or an importer in Custom, an exporter plugin from Tiled, than to follow his approach. The OHR's tilemap file format is very simple.
Post Reply