TiledMap Component References

    Click the Add Component -> Components -> TiledMap button under the Inspector panel to add the TiledMap component to the node.

    TiledMap - 图2

    For the script interface of TiledMap, please refer to the TiledMap API.

    • When the Tmx Asset property is added to the TiledMap component, nodes corresponding to the Layers in the map are automatically added to the nodes (floor, barrier, and players nodes in the image below). These nodes are added to the TiledLayer component. Do not delete the TiledLayer component from these Layer nodes.

    • TiledMap component does not support the mapLoaded callback. It can be used normally in the function.

    The TiledLayer component converts the node coordinates added to the map layer into map block row coordinates. When rendering a map block in a map layer in row order, if there is a node in the row of the map block, then rendering of the map block will be interrupted in favor of rendering the node. After the nodes in the map block are rendered, the rendering of the map block will continue. In this way, the nodes and map layers are mutually occluded from each other.

    The following is an example of how the TiledLayer and the node can occlude each other.

    1. Create a new node in the scene and add the TiledMap component. After setting the properties of the TiledMap component, the node with the TiledLayer component (i.e. map layer) will be generated automatically.

    2. Create a new TypeScript script in Assets panel to write component scripts. The script code is as follows:

    3. Attach the script component to the Canvas node, i.e. drag and drop the script into the Inspector panel of the Canvas node. Then drag and drop the automatically generated node with TiledLayer component from Hierarchy panel and the Prefabs from Assets panel to the corresponding property box of the script component, and then save the scene.

    4. Click the Preview button at the top of the editor to see the effect of the nodes and map layers occluding each other. For the code, please refer to the example.

    To remove a node from a map layer, call the removeUserNode method of TiledLayer.