如何設置使用Javascript和六角形瓷磚的六角形地圖？

Question

我已經爲一個標準的「方形」六角形地圖做了基本的數學運算，但是我想將它轉換爲一個六角形地圖，一個看起來像六角形的六角形。對於JavaScript不過，我不確定如何做到這一點使用我已經建立的代碼 - 這是我到目前爲止有：

function CreateHexGrid() 
{ 
    for (x = 0; x < mapWidth; x++) 
    { 
     tileArray[x] = []; 

     for (y = 0; y < mapWidth; y++) 
     { 
      var hex = new hexTile(game, 0, 0); 
      var point = calculateGrid(x,y); 
      hex.x = point.x; 
      hex.y = point.y; 
      gameContainer.add(hex); 
      hex.tileColor = returnRandomHex(); 
      hex.switchSprite(hex.tileColor); 

      tileArray[x][y] = hex; 

     } 
    } 
} 

function calculateGrid(x, y) 
{ 
    var point = new PIXI.Point(x,y); 

    var offset = 0; 

    if (point.y % 2 != 0) 
    { 
     offset = 90/2; 
    } 

    var x = offset + point.x * 95; 
    var y = point.y * 100 * 0.75; 

    point.x = x; 
    point.y = y; 

    return point; 
} 

這是我的最終目標：

我試圖從最初在RedBlobGames上找到的明顯的C/++ /＃例子轉換代碼，但是一旦我實際上獲得了座標後，它給了我一個非常奇怪的矩形梯形形狀：

for (int q = -map_radius; q <= map_radius; q++) { 
    int r1 = max(-map_radius, -q - map_radius); 
    int r2 = min(map_radius, -q + map_radius); 
    for (int r = r1; r <= r2; r++) { 
     map.insert(Hex(q, r, -q-r)); 
    } 
} 

我寧願這樣做，而不必告訴它在想要的形狀之外不繪製各種偏移部分 - 在繪製事實之後我會考慮一個「編輯」的地圖。

這是我的RBG和StackExchange到目前爲止提供的JavaScript下面的例子轉換後的版本：

for (q = 0; q < mapRadius; q++) 
{ 
    for (r = 0; r < mapRadius; r++) 
    { 
     var point = calculateGrid(-q-r, r); 
     var hex = new hexTile(game, point.x, point.y); 
     gameContainer.add(hex); 
    } 
} 

當我按照提供的六角地圖的例子，這是我得到的結果是：

我該怎麼做才能解決這個問題？

Answer 1

一個簡單的代碼來計算這樣的六邊形排列每個單元的位置。

function hexGrid(edgeLength){ 
    var len = 2*edgeLength - 1, 
     vx = Math.sin(Math.PI/6), vy = Math.cos(Math.PI/6), 
     tl = edgeLength - 1, br = 3*edgeLength - 2, 
     positions = []; 

    for(var y = 0; y < len; ++y){ 
     for(var x = 0; x < len; ++x){ 
      //you may want to remove this condition 
      //if you don't understand the code 
      if(x+y < tl || x+y >= br) continue; 
      positions.push({ 
       x: vx*y + x, 
       y: vy*y 
      }); 
     } 
    } 
    return positions; 
} 

它希望爲網格的外邊緣的長度，並返回所述細胞的位置的陣列。

這只是安排細胞的基本數學，因爲這似乎是你的核心問題。您必須根據您的需求來縮放和平移/補償點數，但這取決於您。

沙箱周圍打了一下：https://jsfiddle.net/36bjmtax/1/

Answer 2

如果您使用不同的座標方法，那麼您會得到一個接近目標的菱形區域。座標將以（0,0,0）開始，其中每個座標具有零和。在x方向上，在y-ish方向add（0,1，-1）上添加（1,0，-1）。然後從繪畫中排除那些帶有x + y < 3和x + y> 11的字符。或者用z值交談，只繪製-11 < z和z < -3。

這個怎麼樣對繪畫的第二種方法：

int map_side = 4; 
for (int q = 0; q < map_side; q++) { 
    for (int r = 0; r < map_side; r++) { 
     if(-map_side >= -q-r && -q-r > -3*map_side) 
      map.insert(Hex(q, r, -q-r)); 
    } 
} 

對不起，馬虎的代碼，它不是簡單的一個錯誤代碼，而無需一次性盲。對於翻譯座標系可以使用：

function hexToXY(hex) { 
    var xy = new Point(hex.X * 7 + hex.Y * 5, hex.Y * 5); 
    return xy; 
}