生成六边形地图并使用数组存储地图数据

 首先制作地图瓦片的预制体，预制体中的元素img为六边形图片，x，y为数字显示瓦片的坐标。

我们准备制作一个如下图所示的地图：

 首先生成从上开始2，4，6 行的瓦片

 for(let j=-2;j<3;j+=2){
            let jabs=Math.abs(j);
            //console.log("j:"+jabs);
            let iabs=(6-jabs)/2;
            //console.log("i:"+iabs)
            for(let i=-iabs;i<iabs+1;i++){
               let pos=cc.v2(i*this.tilesWeight,j*this.tilesHeight);
               let tiles=cc.instantiate(this.tile);
               this.node.addChild(tiles);
               tiles.setPosition(pos);
              
            } 
        }

 运行后结果如下

接着生成从上开始1，3，5，7行的瓦片

 for(let j=-3;j<5;j+=2){
            let jabs=Math.abs(j);
            //console.log("j:"+jabs);
            let iabs=(7-jabs)/2;
            //console.log("i:"+iabs)

            for(let i=-iabs;i<iabs;i++){
               let pos=cc.v2(i*this.tilesWeight+this.tilesWeight/2,j*this.tilesHeight);
               let tiles=cc.instantiate(this.tile);
               this.node.addChild(tiles);
               tiles.setPosition(pos);
               
              
            }
            
        }

运行结果如下

 

如果我们直接使用生成坐标位置的 i，j 变量来作为瓦片的 x , y 值。

这样的坐标我们难以使用，相邻直接的瓦片坐标也没有一般规律，我们要想办法将其变成上面展示图片的坐标。

// 2，4，6，行数值改变
               if(j>=2){
                tiles.getComponent(mapTiles).num1=i-1;
               }
               else if(j<=-1){
                tiles.getComponent(mapTiles).num1=i+1;
               }
               else{
                tiles.getComponent(mapTiles).num1=i;
               }

               //j值符合六边形坐标系无需计算
               tiles.getComponent(mapTiles).num2=j;
//1，3，5，7行数值改变
               if(j>=2){
                tiles.getComponent(mapTiles).num1=i-1;
               }
               else if(j==-1){
                tiles.getComponent(mapTiles).num1=i+1;
               }
               else if(j==-3){
                tiles.getComponent(mapTiles).num1=i+2;
               }
               else{
                tiles.getComponent(mapTiles).num1=i;
               }
               
               tiles.getComponent(mapTiles).num2=j;

结果如下

这样就可以清晰的看到地图的 x轴和y轴，为了方便存储我们使每个坐标值都加3，并把坐标信息存入数组中，我们在利用数组的坐标生成游戏棋子，后续也可以通过坐标来直接移动棋子。

完整代码如下

//生成地图代码，挂载在canvas上，在start中调用一次
mapShow(){
        for(let a=0;a<7;a++){
            this.tilesArr.push([]);
            for(let b=0;b<7;b++){
                this.tilesArr[a].push(cc.v2(0,0));
            }
        }

         for(let j=-2;j<3;j+=2){
            let jabs=Math.abs(j);
            //console.log("j:"+jabs);
            let iabs=(6-jabs)/2;
            //console.log("i:"+iabs)
            for(let i=-iabs;i<iabs+1;i++){
               let pos=cc.v2(i*this.tilesWeight,j*this.tilesHeight);
               let tiles=cc.instantiate(this.tile);
               this.node.addChild(tiles);
               tiles.setPosition(pos);

               let axX=i+3;
               let axY=j+3;
               if(j>=2){
                  axX-=1;
               }
               else if(j<=-1){
                  axX+=1;
               }
               
               tiles.getComponent(mapTiles).num1=axX;
               //j值符合六边形坐标系无需计算
               tiles.getComponent(mapTiles).num2=axY;

               this.tilesArr[axX][axY]=pos;

            }
            
        }


        for(let j=-3;j<5;j+=2){
            let jabs=Math.abs(j);
            //console.log("j:"+jabs);
            let iabs=(7-jabs)/2;
            //console.log("i:"+iabs)

            for(let i=-iabs;i<iabs;i++){
               let pos=cc.v2(i*this.tilesWeight+this.tilesWeight/2,j*this.tilesHeight);
               let tiles=cc.instantiate(this.tile);
               this.node.addChild(tiles);
               tiles.setPosition(pos);
               
               let axX=i+3;
               let axY=j+3;
               if(j>=2){
                axX-=1;
               }
               else if(j==-1){
                axX+=1;
               }
               else if(j==-3){
                axX+=2;
               }
               
               tiles.getComponent(mapTiles).num1=axX;
               tiles.getComponent(mapTiles).num2=axY;

               this.tilesArr[axX][axY]=pos;

              
            }
            
        }

        for(let a=0;a<7;a++){
            
            for(let b=0;b<7;b++){
                if(this.tilesArr[a][b]!=null){
                    let che=cc.instantiate(this.xiangmao);
                    this.node.addChild(che);
                    che.setPosition(this.tilesArr[a][b]);
                }
            }
        }
    }


//瓦片代码，挂载在瓦片预制体上
   @property
    num1:number=0;
    @property
    num2:number=0;

    @property(cc.Label)
    axisX:cc.Label;
    @property(cc.Label)
    axisY:cc.Label;


    start () {
        this.scheduleOnce(()=>{
            this.axisX.string=this.num1.toString();
            this.axisY.string=this.num2.toString();
        },0);
    }

使用软件 cocos creator 2.x

语言type script

在unity中也可以使用同样方法生成。