Skip to main content

News

Topic: Tiled Map Editor (Read 1216 times) previous topic - next topic

Tiled Map Editor
For anyone interested, there's a cross-platform FOSS map editor, primarily for top down games called Tiled, which can be found here. Since Radnen's IDE can't run in Linux, I haven't used this in any projects yet (though I might use it in a SHMUP I'm using as a testbed for Personlib), but playing around with it, it's pretty neat. You could create a map with it, export it as an image, and then import it into the Sphere 1.5 editor to add collision, scripts, etc. It doesn't seem to have an individual tile editor, so you have to import one, but it can create an isometric maps, use layers with transparency, create animations, select multiple tiles and use them as a stamp (as seen in the image), and other cool stuff.

  • Last Edit: December 20, 2016, 04:05:17 pm by Eggbert

  • Flying Jester
  • [*]
  • Verified
  • TurboSphere Developer
Re: Tiled Map Editor
Reply #1
Alternatively, I think that writing a loader for the JSON output of tiled in Sphere to load it into the map engine manually wouldn't be too tough. I've played with the format in native code, and except for its tileset specification (just uses an image, at least it's simple) it seems pretty reasonable to me. Tiled has properties that could be converted to Sphere zone, trigger, and collision properties at load time.

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • miniSphere Developer
Re: Tiled Map Editor
Reply #2
Tiled support is one of the things I want to add in minisphere 5.0 as part of the new map engine I'm planning.  While it'd be possible to write a Tiled-to-RMP builder in Cell (another thing getting an overhaul in 5.0), I think it's better at this point to retire the Sphere 1.x map engine.  It's getting quite long in the tooth these days and is due to be modernized like I did with the rest of the Sphere API (I'm quite proud of Sphere v2 by the way :))).

It'd be possible to load Tiled maps directly in the new (JavaScript-based) map engine, since it could take advantage of the xml module.
miniSphere 4.8.4 - Cell compiler - SSj debugger
Forum Thread | GitHub Repo

  • Flying Jester
  • [*]
  • Verified
  • TurboSphere Developer
Re: Tiled Map Editor
Reply #3
Tiled does include a JSON exporter by default, as well.

Re: Tiled Map Editor
Reply #4
Loading them directly into the engine sounds cool in theory, but what about entry points, characters, and scripts?

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Tiled Map Editor
Reply #5
Tiled has support for inserting sprites and zones that can hold custom properties, so I don't see much of a problem there.

I'm all for Tiled being supported, by the way. Have been from the moment I discovered it. :)

Re: Tiled Map Editor
Reply #6
Same. Now all we need is a good Spritesheet/windowstyle/font editor for Linux. I've been toying with the idea of making something using GTK or Qt or some other cross platform framework, but I have no experience with GUI creation, so that's going nowhere fast.

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • miniSphere Developer
Re: Tiled Map Editor
Reply #7
JSON-based replacements for the binary Sphere 1.x formats would be nice too, but binary formats are less of an issue now that Sphere v2 has the struct module, since you don't run into endian issues there (the API is designed so that the endianness for a read/write is explicit), and C subtleties like alignment never come into play.

Plus it's easier to embed bitmap data and such in a binary file.  With a text-based format you either end up base64-encoding everything, ballooning the file size, or you store the binary data in satellite files which is inconvenient for other reasons.
miniSphere 4.8.4 - Cell compiler - SSj debugger
Forum Thread | GitHub Repo

  • Flying Jester
  • [*]
  • Verified
  • TurboSphere Developer
Re: Tiled Map Editor
Reply #8
I agree, I don't think binary formats are as evil as most folks seem to. Especially when they are as simple as the Sphere formats. But if you have to pick an interchange format for a tool outside your software stack, using JSON for a JS-based game engine seems like a decent choice.

  • Rhuan
  • [*]
  • Verified
Re: Tiled Map Editor
Reply #9

It'd be possible to load Tiled maps directly in the new (JavaScript-based) map engine, since it could take advantage of the xml module.
Quick question - if the map engine is JS based would/could that result in a performance hit?

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • miniSphere Developer
Re: Tiled Map Editor
Reply #10
That was one of my worries initially, and is a big part of why it took me this long to do it.

If a JS map engine were coded the way the Sphere 1.5 map engine is, rendering one tile at a time then yes, you'd probably take a hit.  But in my case, I have a few tricks planned using the Galileo API that can avoid that.  If that's done properly, then the graphics card does all of the rendering work and there's no performance hit.  Other than that, the map engine isn't really CPU bound (e.g., Kefka's Revenge runs at 45fps and only uses around 2-5% of my i7) so there's no performance issue.
miniSphere 4.8.4 - Cell compiler - SSj debugger
Forum Thread | GitHub Repo

  • Flying Jester
  • [*]
  • Verified
  • TurboSphere Developer
Re: Tiled Map Editor
Reply #11
The JS map engine implementation I did in TurboSphere ran at very good speeds. Two things helped this: For most games, you're limited by the time taken to draw the map to begin with, so more than half your time will spent in graphics no matter what happens or doesn't happen in script. In TurboSphere I 'fixed' this by making the graphics system asynchronous, but this then meant that most of the time you sat in a sleep function, although if your game did lots of computation this was a big win. Second, using a native map engine requires at least two calls out of native per frame (update, render, more if triggers, zones, keybindings, etc. are used) which will easily eclipse the overhead of script compared with native. True, you could have a game with no update or render scripts, but at that point even a script map engine in 1.5 would be more than fast enough.

I found again and again, with even close to modern JS engines the big performance hit isn't in using JS, it's in the boundaries between JS and native code.

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Tiled Map Editor
Reply #12
Reviving an old topic, I'd like to state that Tiled support still seems like a great idea, especially for cross-platform development.

I found an interesting resource that should make the process a whole lot easier too:
https://hashrocket.com/blog/posts/using-tiled-and-canvas-to-render-game-screens

If I actually find the time/motivation, I'll probably give porting this a shot.

  • Rhuan
  • [*]
  • Verified
Re: Tiled Map Editor
Reply #13
I wrote a script to load Tiled maps the other week I only did Orthogonal, right down but it only took an hour or two to write from scratch, the below loads a tiled map saved as a json file and turns it into a series of images, one per layer - there are a few specifics that would need to be changed for more general use but as a basic model it works nicely.

Code: [Select]
/*Load a map file:
- Maps for this should be made with Tiled
- Must be Orthogonal & right-down
- must only use one tile set
- image for tileset should be in the maps folder
- map should also be in maps folder
- map should be saved in JSON format
- Set a custom property called "ground" to be a boolean for all layers
- set it to true for layers to draw underneath sprites
- set it to false for layers to draw above sprites
- Make a layer called "obstructions" to have obstructions in (and not be drawn):
** tile 1 = obstructed/impassable
** tile 2 = 1 AP movement cost
** tile 3 = 2 AP etc*/

function load_map(name)
{
  var map = new Object();
  map.obs = [];//obstruction map
  map.p_m = [];//array to hold player obstructions when map is in use
  map.c_m = [];//collision map (combination of the above two, when map is in use
 
  map.ground = [];//images to draw under the player
  map.sky    = [];//images to draw over the player
 
  //load the map file and parse it
  var m_file = OpenRawFile("../maps/"+name+".json", false);
  var m_data = CreateStringFromByteArray(m_file.read(m_file.getSize()));
  var m_raw = JSON.parse(m_data);
  m_file.close();
  //load the tile set
  var t_surface = LoadSurface("../maps/"+m_raw.tilesets[0].image);

  //temporary variables for this function to use
  m_raw.m_layers = [];
  var temp_x = 0;
  var temp_y = 0;
  var t = 1;
  var tiles = [];
  var mask = CreateColor(0,0,0);
 
  //build our tile set
  tiles[0] = t_surface.cloneSection(0, 0, 32, 32);
  for(temp_y = 0; temp_y < 52; ++temp_y)
  {
    for(temp_x = 0; temp_x < 20; ++temp_x, ++t)
    {
      tiles[t] = t_surface.cloneSection(temp_x * 32, temp_y * 32, 32, 32);
    }
  }
 
  //read the map layer data - generate an image per layer and an obstruction map
  for(var i = 0, j = 0, k = 0, l = 0; k < m_raw.layers.length; ++ k, l = 0)
  {
    if(m_raw.layers[k].name != "Obstructions")
    {
      m_raw.m_layers[k] = CreateSurface(m_raw.layers[k].width * m_raw.tilesets[0].tilewidth, m_raw.layers[k].height * m_raw.tilesets[0].tileheight,CreateColor(0,0,0,0));
      mask = CreateColor(255,255,255,Math.floor(m_raw.layers[k].opacity * 255));
      for(i = 0; i < m_raw.layers[0].height; ++ i)
      {
        for(j = 0; j < m_raw.layers[0].width; ++ j, ++l)
        {
          m_raw.m_layers[k].blitMaskSurface(tiles[m_raw.layers[k].data[l]], j*32, i * 32,mask);
        }
      }
      if(m_raw.layers[k].properties.ground)
      {
        map.ground.push(m_raw.m_layers[k].createImage());
      }
      else
      {
        map.sky.push(m_raw.m_layers[k].createImage());
      }
    }
    else
    {
      for(i = 0; i < m_raw.layers[0].height; ++ i)
      {
        map.obs[i] = [];
        map.p_m[i] = [];
        map.c_m[i] = [];
        for(j = 0; j < m_raw.layers[0].width; ++ j, ++l)
        {
          map.obs[i][j] = m_raw.layers[k].data[l] -1;
          map.p_m[i][j] = -1;
          map.c_m[i][j] = 1;
        }
      }
    }
  }
  return map;
}

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Tiled Map Editor
Reply #14
Oh wow, nice. This'll be very useful, thanks. :D