I can't render tmx file in cocos2d-JS

Question

When I loaded .tmx file in cocos2d-JS which was created by Tiled and tried rendering in view, I could not render and the following error were output

and the contents of .tmx file is

I want to render as follows

why I can't render?

Answer 1

Cocos2d-JS has a limited support for TMX format.

• Embedded tiles are NOT supported (i.e., tilesets with embedded images).

• Only embedded tilesets are supported (i.e., the tileset is embedded, but not its images).

• supports at most 1 tileset per layer.

So to fix your problem:

1. While saving to TMX - save metadata only (images will be served from external files). Currently i see "encoding=base64 compression=zlib" line in your file - Cocos2d-JS won't render that one.
2. One tile per layer means exactly one tile per layer. If you want to draw a nice map using multiple tiles per layer - Cocos2d-JS won't render it correctly (It will be a horrible mess of wrong tiles basically). What I suggest you to do instead is to draw your map in Tiled and to export it as an image. Then you create another TMX file with your beautiful level as background image and use some basic red/green/blue rectangles (one per layer) to place enemies, bonuses e.t.c. so you'll be able to read the meta of those tiles from cocos2d-JS (you can keep this meta TMX layer invisible and just draw it on top of basic image layer with your map)