TiledMap with HTML5

Anything about development not directly related to libgdx, e.g. OpenGL, Android APIs etc.

Re: TiledMap with HTML5

Postby BurningHand » Wed May 30, 2012 7:34 pm

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.
IRC: nexsoftware / mobidevelop; GitHub: MobiDevelop;
BurningHand
 
Posts: 2464
Joined: Mon Oct 25, 2010 4:35 am

Re: TiledMap with HTML5

Postby siondream » Sun Jun 03, 2012 11:02 am

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!
siondream
 
Posts: 240
Joined: Tue Apr 03, 2012 11:59 pm

Re: TiledMap with HTML5

Postby KingMaker » Tue Jun 05, 2012 10:40 pm

siondream wrote: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
KingMaker
 
Posts: 3
Joined: Sun Jun 03, 2012 11:33 pm

Re: TiledMap with HTML5

Postby siondream » Wed Jun 06, 2012 6:34 am

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.
siondream
 
Posts: 240
Joined: Tue Apr 03, 2012 11:59 pm

Re: TiledMap with HTML5

Postby BurningHand » Thu Jun 14, 2012 5:22 am

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.
IRC: nexsoftware / mobidevelop; GitHub: MobiDevelop;
BurningHand
 
Posts: 2464
Joined: Mon Oct 25, 2010 4:35 am

Re: TiledMap with HTML5

Postby mzechner » Thu Jun 14, 2012 3:49 pm

Carry on soldier. Especially the animated tile sets sound interesting.
mzechner
Site Admin
 
Posts: 4715
Joined: Sat Jul 10, 2010 3:50 pm

Previous

Return to General Development

Who is online

Users browsing this forum: No registered users and 2 guests