【工具】Cocos 六边形地图 (TiledMap)

版本：2.4.10

 

一 六边形地图

常规地图是地块是矩形，有些游戏是六边形，例如剑与远征。现在就来看看用TiledMap设计六边形地图。

 

二 Tiled创建六边形地图

先画3个六边形的地块，大小64x74。

 

打开TiledMap，选择文件-新建-创建新地图。地图方向选择六角(交错)，地图大小20x20，块大小64x74。

 

创建后地图是这样的，是个棱形，不是六边形

 

选择地图-地图属性，设置图块边长为40

 

地图变成六边形的了

 

选择文件-新建-新图块。点击浏览，选择六边形图块的图片，块高宽64x74。

 

创建图块后，右下角就会出现创建的图块，点击右下角任一图块，选择工具栏上的图章刷，然后就能用图块画地图了。

 

 三  周围格子的遍历

1 普通地图

 

例如获取(1,1)周围的格子，如下图

 

    /**地图数据，二维数组[][] */
    private mapData;
    /**最大行 */
    private maxRow;
    /**最大列 */
    private maxCol;

    /**
     * 获取指定格子周围的格子
     * @param row 行
     * @param col 列
     * @returns 返回周围的格子
     */
    public getAroundGrid(row: number, col: number) {
        let list = [];
        //获取上一行格子
        if (row > 0) {
            list.push(this.mapData[row - 1][col - 1]);
            list.push(this.mapData[row - 1][col]);
            list.push(this.mapData[row - 1][col + 1]);
        }
        //获取同行格子
        list.push(this.mapData[row][col - 1]);
        list.push(this.mapData[row][col + 1]);
        //获取下一行格子
        if (row < this.maxRow - 1) {
            list.push(this.mapData[row + 1][col - 1]);
            list.push(this.mapData[row + 1][col]);
            list.push(this.mapData[row + 1][col + 1]);
        }
        //剔除为null的格子
        let len = list.length - 1;
        for (let i = len; i >= 0; i--) {
            if (list[i] == null) {
                list.splice(i, 1);
            }
        }
        return list;
    }

　　

2 六边形地图

 

六边形地图获取周围格子，奇数和偶数行是不一样的，例如获取(1,1)周围格子或获取(2,2)周围格子。

(1,1)获取上一行是(row-1,col)和(row-1,col+1)

(2,2)获取上一行是(row-1,col-1)和(row-1,col)

    

 

   /**地图数据，二维数组[][] */
    private mapData;
    /**最大行 */
    private maxRow;
    /**最大列 */
    private maxCol;

    /**
     * 获取指定格子周围的格子
     * @param row 行
     * @param col 列
     * @returns 返回周围的格子
     */
    public getAroundTile(row: number, col: number) {
        let list = [];
        //偶数行
        if (row % 2 == 0) {
            //上一行相邻格子
            if (row > 0) {
                list.push(this.mapData[row - 1][col - 1]);
                list.push(this.mapData[row - 1][col]);
            }
            //同行左右相邻格子
            list.push(this.mapData[row][col - 1]);
            list.push(this.mapData[row][col + 1]);
            //下一行相邻格子
            if (row < this.maxRow - 1) {
                list.push(this.mapData[row + 1][col - 1]);
                list.push(this.mapData[row + 1][col]);
            }
            //奇数行
        } else {
            //上一行相邻格子
            if (row > 0) {
                list.push(this.mapData[row - 1][col]);
                list.push(this.mapData[row - 1][col + 1]);
            }
            //同行左右相邻格子
            list.push(this.mapData[row][col - 1]);
            list.push(this.mapData[row][col + 1]);
            //下一行相邻格子
            if (row < this.maxRow - 1) {
                list.push(this.mapData[row + 1][col]);
                list.push(this.mapData[row + 1][col + 1]);
            }
        }
        //剔除为null的格子
        let len = list.length - 1;
        for (let i = len; i >= 0; i--) {
            if (list[i] == null) {
                list.splice(i, 1);
            }
        }
        return list;
    }

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

搜索

复制