Cocos Creator is a popular game development engine with rich components and tools, among which the TiledMap component can help developers quickly create, load and render maps.
Table of contents
1. Component introduction
TiledMap is based on Tiled map editor, which is an open source, cross-platform 2D map editor. Tiled supports a variety of map formats, including CSV, XML, JSON, and more. The TiledMap component will parse and render the map data edited by the Tiled map editor to the game screen. In the TiledMap component, map data is mainly divided into two parts: map properties and tile sets. Map attributes refer to some basic information of the entire map, such as the size of the map, the size of tiles, and so on. A tile set refers to all the tiles used in the map, and each tile has its own attributes and location information. The TiledMap component will create a map object based on these information, and render the tiles on the map according to certain rules.
2. Component properties
| Attributes | Function Description |
|---|---|
| Tmx Asset | Specify a map resource in .tmx format |
3. Script control
3.1 Loading the map
In Cocos Creator, the following code can be used to load the map:
cc.resources.load('maps/map1', cc.TiledMapAsset, function (err, mapAsset) {
if (err) {
cc.error(err.message || err);
return;
}
// 加载成功后，创建TiledMap组件
var mapNode = new cc.Node();
var tiledMap = mapNode.addComponent(cc.TiledMap);
tiledMap.tmxAsset = mapAsset;
// 将地图节点添加到场景中
cc.director.getScene().addChild(mapNode);
}); In the above code, first use cc.resources.loadthe method to load the map resource, where maps/map1is the path of the map resource, cc.TiledMapAssetindicating the type of resource to be loaded. After the loading is successful, create a new node, add the TiledMap component, and tmxAssetset the property of the TiledMap component to the successfully loaded map resource. Finally, add this node to the scene.
3.2 Rendering the map
In the TiledMap component, you can use the following methods to get the tiles on the map:
var layer = tiledMap.getLayer('layer1');
var tile = layer.getTiledTileAt(0, 0, true); In the above code, first obtain layer1the layer object named in the TiledMap component, and then use getTiledTileAtthe method to obtain the tile whose coordinates are (0,0) on the layer. Finally, some operations can be performed on this block, such as modifying its position or rotation angle, etc.
4. Detailed description
After adding the TiledMap component, drag a map resource in .tmx format from the resource manager to the Tmx Asset property to see the map display in the scene.
After the Tmx Asset attribute is added to the TiledMap component, the node corresponding to the Layer in the map will be automatically added to the node. These nodes have the TiledLayer component added. Do not delete the TiledLayer components in these Layer nodes.
The TiledMap component does not support mapLoaded callbacks, and start the TiledMap component can be used normally in the function.
5. Close cropping
cc.macro.ENABLE_TILEDMAP_CULLING = false;
If you need to rotate the map or place the map in the 3D camera, you need to turn off clipping. In addition, if the number of map blocks is not very large, such as less than 5000 blocks, then turning off clipping can also reduce the computational burden of the CPU, and the GPU directly uses the cache for rendering.
6. Node occlusion
In the game, some nodes may occlude other nodes, causing the occluded nodes to not be displayed normally. For maps, this can happen when there are multiple layers overlaid on the map. In order to solve this problem, the TiledMap component provides some node occlusion functions, which can temporarily hide the occluded nodes and display them when the occluded nodes are no longer occluded.
In the TiledMap component, you can use the following methods to set node occlusion:
var layer = tiledMap.getLayer('layer1');
layer.enableCulling = true; In the above code, first get layer1the layer object named in the TiledMap component, and then enableCullingset the property of the layer to true. In this way, when a node on this layer is blocked by other nodes, the node will not be displayed temporarily. Wait until the node that occluded it is no longer occluded, and the node is revealed again.
In addition to the above methods, the TiledMap component also provides some other related methods of node occlusion, for example:
setCullingDirty(): Set the node occlusion dirty flag, which can force update the node occlusion state.isCullingEnabled(): Get whether the node occlusion function is enabled for this layer.setCullingBlockSize(size: cc.Size): Set the size of the node occlusion block.setCullingPadding(padding: cc.Rect): Set the padding of the node block.setCullingBorder(border: number): Set the size of the node occlusion border.
In short, the TiledMap component is one of the components used to create, load and render maps in Cocos Creator. It is based on the Tiled map editor, which can quickly create and edit maps, and render them in the game. When using the TiledMap component, you need to add the TiledMap component to the scene first, then load the map resource, and tmxAssetset the property of the TiledMap component to the successfully loaded map resource. Finally, you can use the methods provided by the TiledMap component to get the tiles on the map and perform some operations.