【cocos creator 】生成六边形地图

想要生成一个六边形组成的地图

完整代码示例

以下是完整的代码示例，包含了注释来解释每一步：

cc.Class({extends: cc.Component,properties: {hexPrefab: {default: null,type: cc.Prefab},mapWidth: 10,   // 网格的宽度（六边形的数量）mapHeight: 10,  // 网格的高度（六边形的数量）hexSize: 64     // 六边形的大小（从中心到顶点的距离）},// onLoad is called once when the script is loadedonLoad() {this.generateHexMap();},generateHexMap() {// 计算六边形的宽度和高度let hexWidth = this.hexSize * Math.sqrt(3); // 计算六边形的宽度let hexHeight = this.hexSize * 1.5; // 计算六边形的高度// 遍历行和列生成六边形for (let y = 0; y < this.mapHeight; y++) {for (let x = 0; x < this.mapWidth; x++) {// 计算六边形的 x 和 y 坐标let xPos = x * hexWidth + (y % 2) * (hexWidth / 2);let yPos = y * (hexHeight * 0.75);// 实例化一个六边形预制体并设置其位置let hex = cc.instantiate(this.hexPrefab);hex.setPosition(cc.v2(xPos, yPos));this.node.addChild(hex); // 将六边形添加到当前节点}}}
});

this.hexSize 是一个属性，用来定义六边形的大小。在生成六边形网格时，它决定了每个六边形的边长或半径，从而影响整个网格的布局和尺寸。

在六边形网格中，hexSize 通常指的是六边形从中心到任意一个顶点的距离（也可以理解为半径）。这个值被用来计算六边形的宽度（从一边到另一边的水平距离）和高度（从一个顶点到对面顶点的垂直距离）。

具体示例说明

假设 this.hexSize = 64，那么：

• 六边形宽度（hexWidth）：这是从六边形左边到右边的水平距离。对于正六边形，宽度公式为 hexWidth = hexSize * sqrt(3)。在代码中，这样计算：

  let hexWidth = this.hexSize * Math.sqrt(3);
  

  如果 this.hexSize = 64，则 hexWidth = 64 * sqrt(3) ≈ 110.85。

• 六边形高度（hexHeight）：这是从一个顶点到对面顶点的垂直距离。对于正六边形，高度公式为 hexHeight = hexSize * 2。在代码中，这样计算：

  let hexHeight = this.hexSize * 1.5;
  

  如果 this.hexSize = 64，则 hexHeight = 64 * 1.5 = 96。

生成六边形网格的原理

每个六边形的位置由其在网格中的索引 (x, y) 决定。由于六边形的相邻行是错位排列的，需要根据行号 (y) 进行偏移：

• 水平偏移：

  let xPos = x * hexWidth + (y % 2) * (hexWidth / 2);
  

  这段代码意思是：如果当前行号是奇数（y % 2），则将六边形水平位置向右偏移半个六边形的宽度，以实现错位排列。

• 垂直偏移：

  let yPos = y * (hexHeight * 0.75);
  

  这段代码意思是：每行的六边形向下移动 0.75 个六边形高度，以实现垂直错位排列。0.75 是为了保证六边形之间的紧密排列。

运行项目

1. 在Cocos Creator中创建一个新的空节点，命名为HexMap。
2. 将HexMap.js脚本添加到HexMap节点。
3. 将你创建的六边形预制体（HexPrefab）拖放到HexMap脚本的hexPrefab属性中。
4. 运行项目，观察生成的六边形网格地图。

这样，你就能生成一个六边形网格地图，并可以根据需要调整六边形的大小和地图的宽高参数。