TiledMap with HTML5

[BurningHand]

I've come across this BiSON project before, which might be usable for encoding the data. It claims to have a 30-55% reduction in the size of JSON, and is compatible on the Javascript side.

There is also potential to use LZMA or, better yet, using this GWT module for LZMA.

[siondream]

Hey Tiled people!

I've been working on my personal TiledMap implementation, here´s a quick update on the existing features so far:

• XML uncompressed format parsing using Java dom.
• Class model very similar to the one used in the previous implementation but wih a few differences.
• AssetManager support, allowing app responsiveness while loading and reference counting.
• Automatic frustum culling and tile caching with custom block sizes. I used an old game's level as a test. In a given screen I had to render almost 4.000 tiles but with this system only 8 draw calls were required.
• Uses OrthographicCamera for the transformations
• Supports every Tiled feature
• Box2D PolygonShapes.
• Doesn't use a renderer class, it's a simpler design

To do list:

• Support for less verbose file formats such as JSON (as mentioned here)
• More flexibility on how to load and render levels
• Streaming for HUGE levels?
• ...

I'd also like to add info to the tiles such as collision data but I want to keep the system as simple and game agnostic as possible. Users can always add that info later on.

Suggestions are happily accepted!

[KingMaker]

Hey Tiled people!

I've been working on my personal TiledMap implementation, here´s a quick update on the existing features so far:

• XML uncompressed format parsing using Java dom.
• Class model very similar to the one used in the previous implementation but wih a few differences.
• AssetManager support, allowing app responsiveness while loading and reference counting.
• Automatic frustum culling and tile caching with custom block sizes. I used an old game's level as a test. In a given screen I had to render almost 4.000 tiles but with this system only 8 draw calls were required.
• Uses OrthographicCamera for the transformations
• Supports every Tiled feature
• Box2D PolygonShapes.
• Doesn't use a renderer class, it's a simpler design

To do list:

• Support for less verbose file formats such as JSON (as mentioned here)
• More flexibility on how to load and render levels
• Streaming for HUGE levels?
• ...

I'd also like to add info to the tiles such as collision data but I want to keep the system as simple and game agnostic as possible. Users can always add that info later on.

Suggestions are happily accepted!

Do you have a link for this in its current state, I'm currently looking into implementing polygons from Tiled maps. Failing that would you be happy to speak about the approach you took? Thanks

[siondream]

Well, it's not an elaborate thing:

Code: Select all

private TiledObject loadObject(Element objectNode) {
   String name = objectNode.getAttribute("name", null);
   String type = objectNode.getAttribute("type", null);
   
   if (name == null || type == null) {
      return null;
   }
   
   int x = Integer.parseInt(objectNode.getAttribute("x", "0"));
   int y = Integer.parseInt(objectNode.getAttribute("y", "0"));
   int width = Integer.parseInt(objectNode.getAttribute("width", "0"));
   int height = Integer.parseInt(objectNode.getAttribute("height", "0"));
   Vector2[] polygon = loadPolygon(objectNode);
   
   TiledObject object;
   
   if (polygon == null) {
      object = new TiledObject(name, type, x, y, width, height);
   }
   else {
      object = new TiledObject(name, type, x, y, width, height, polygon);
   }
   
   
   m_logger.info("TiledMap: added object " + name);
   loadObjectProperties(objectNode, object);
   
   return object;
}

private Vector2[] loadPolygon(Element objectNode) {
   Element polygonNode = objectNode.getChildByName("polygon");
   
   if (polygonNode == null) {
      return null;
   }
   
   String pointsString = polygonNode.getAttribute("points");
   String[] positions = pointsString.split(" ");
   Vector2[] polygon = new Vector2[positions.length];
   
   for (int i = 0; i < positions.length; ++i) {
      String[] pointString = positions[i].split(",");
      polygon[i] = new Vector2();
      polygon[i].x = Integer.parseInt(pointString[0]);
      polygon[i].y = Integer.parseInt(pointString[1]);
      m_logger.info("TiledMap: adding point to polygon (" + polygon[i].x + ", " + polygon[i].y + ")");
   }
   
   return polygon;
}


With a Vector2[] you can create a PolygonShape in Box2D and you're ready to go. Bare in mind that this snippet assumes the XML is well formed.

[BurningHand]

Random status update incoming...

I've completed an early version of my new TileMap implementation. It includes: a basic data structure that is similar to but not exactly the Tiled format; a SpriteBatch-based renderer, and a SpriteCache-based renderer, both compatible with GLES1 or GLES2; Json format, optionally compressed using LZMA, loadable on Android, Desktop and GWT backends; dynamic map edits (because of the way the renderers work - tiles can be changed on the fly).

To do: finish up the implementation of objects and tilesets, write a loader/converter for the Tiled format, make a chunking renderer (like the current renderer included in LibGDX), javadocs.

Future: Implement animated tiles.

I'd still be interested to bounce ideas, by the way.

[mzechner]

Carry on soldier. Especially the animated tile sets sound interesting.