Guide to Creating, Editing, and Using Tiled Maps in Cocos Creator

1. Using Tiled to draw maps – Tiled provides a Chinese UI after installation. Create a new Map by setting tile count and tile size, rename the default tile layer to background , enable grid snapping, import tilesets, and fill the map using the bucket tool or individual tile placement. Multiple layers such as road and wall are created to separate walkable paths and obstacles, and tiles are copied, moved, and erased with standard shortcuts (e.g., command + X , command + V ).

2. Importing Tiled maps into Cocos Creator – Drag the exported tiledMap file and related textures into the project's textures folder. Create a Background Image node, add a Widget component with zero margins, and set its anchor to the bottom‑left (0,0). Attach the tiled map as a child of this node. If the map fails to load, edit the .tmx file to remove the leading TiledMap/ path so that image sources are resolved relative to the map file.

<image source="Dungeon_Tileset.png" width="160" height="160"/>

Adjust the canvas size, map anchor, and widget constraints so the map aligns correctly. Save with Command + S .

3. Playing animations in Tiled maps – Create a new tileset for animated objects (e.g., a flag). In the tile editor, open the animation timeline, set each frame to 200 ms, select frames in order, and apply. The animated tile appears with a film‑strip icon. Place the animated tile on a dedicated widget layer in the map.

4. Replacing the maze map with a carnival map – Create a new map with appropriate tile count (e.g., 51 × 75) based on the source PNG dimensions. Separate obstacles into a wall layer, export the map, and replace the old map node in the scene. Update widget constraints, set the anchor to (0,0), and adjust canvas dimensions to match the new map size.

5. Deprecating Tiled for curve‑based obstacles – The original tile‑by‑tile collision creates gaps that trap the player. Instead, export the wall layer as three closed‑polygon PNGs, import them, and add each as a child of the original background node. Set each wall node’s Anchor to (0,0), position them correctly, and change the Src Blend Factor to ONE to avoid black seams. Add a cc.PhysicsPolygonCollider component to each wall node, set the rigid body type to Static , and assign the group wall so the hero collides properly.

tiledWallCollider: function () { let wallLayer = this.tiledMap.getLayer("wall"); let wallLayerSize = wallLayer.getLayerSize(); let tiledWallSize = this.tiledMap.getTileSize(); for (let i = 0; i < wallLayerSize.width; i++) { for (let j = 0; j < wallLayerSize.height; j++) { let tiledWall = wallLayer.getTiledTileAt(i, j, true); if (tiledWall.gid != 0) { tiledWall.node.group = "wall"; let rigidBody = tiledWall.node.addComponent(cc.RigidBody); rigidBody.type = cc.RigidBodyType.Static; let collider = tiledWall.node.addComponent(cc.PhysicsBoxCollider); collider.offset = cc.v2(tiledWallSize.width/2, tiledWallSize.height/2); collider.size = tiledWallSize; collider.apply(); } } } },

6. References

ARPG Dungeon Series