Cocos Creator TiledMap 场景地图
这是一套TiledMap地图操作源码, 包含坐标转化, 镜头移动和缩放, 以及场景上物体景深序列.
功能介绍
- 支持 Isometric 和 Orthogonal 两种地图排版
- 移动场景摄像机实现场景拖动
- 移动场景摄像机高度实现场景缩放
- Creator 坐标与 Tile 格子坐标相互转换
- 根据 Tile 格子坐标获得景深位置
- 无缝衔接 [ 二叉堆 ] A分帧寻路
- 支持 Creator 2.4.x | 3.6.x | 3.7.x
接口说明
- new (camera: cc.Camera, tiledmap: cc.TiledMap)
// 需要传入 cc.Camera 和 cc.TiledMap 两个对象作为参数
const map = new IsometricMap(camera, tiled_map);
- camera_zoom(scale: number): void
// 对场景进行缩放
const scale = 0.8;
map.camera_zoom(scale);
- camera_move(pos: cc.Vec3): void
// 移动摄像机位置
const pos = cc.v3(0, 0, 0);
map.camera_move(pos);
- get scale(): number
// 返回当前缩放值
const scale = map.scale;
console.log('scenen scale: ', scale);
- get camera_pos(): cc.Vec3
// 返回场景摄像机当前位置
const pos = map.camera_pos;
console.log('camera position: ', pos);
- z_index(point: cc.Vec3): number
// 根据tile格子坐标返回景深排序值
const tile_pos = cc.v3(0, 0, 0);
const depth = map.z_index(tile_pos);
console.log('tile(0, 0, 0) z-index: ', depth);
- world_to_tile(pos: cc.Vec3, out: cc.Vec3): void
// 通过点击位置的世界坐标获取格子坐标
const wpos = cc.v3(0, 0, 0);
const out = cc.v3(0, 0, 0);
map.world_to_tile(wpos, out);
console.log('pos(0, 0, 0) => ', out);
- tile_to_world(point: cc.Vec3, out: cc.Vec3): void
// 通过格子坐标获取世界坐标
const point = cc.v3(0, 0, 0);
const out = cc.v3(0, 0, 0);
map.tile_to_world(point, out);
console.log('tile(0, 0, 0) => ', out);
坐标系
- Orthogonal坐标系示意图
- Isometric坐标系示意图
如何创建地图
- TiledMap 地图的编辑器下载和使用
- CocosCreator 地图文件的导入和使用
