想要生成一個六邊形組成的地圖
完整代碼示例
以下是完整的代碼示例，包含了注釋來解釋每一步：
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是為了保證六邊形之間的緊密排列。
運行項目
- 在Cocos Creator中創建一個新的空節點，命名為
HexMap。 - 將
HexMap.js腳本添加到HexMap節點。 - 將你創建的六邊形預制體（
HexPrefab）拖放到HexMap腳本的hexPrefab屬性中。 - 運行項目，觀察生成的六邊形網格地圖。
這樣，你就能生成一個六邊形網格地圖，并可以根據需要調整六邊形的大小和地圖的寬高參數。
