Javascriptと16進タイルを使用して六角形のマップを設定するにはどうすればよいですか？

Question

標準的な "正方形"の六角形マップについて基本的な計算を行っていますが、これを六角形のマップから六角形の六角形の形に変換したいと思います。

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; 
} 

は、これが私の最終目標である：

ここで私がこれまで持っているものだ - JavaScriptがしかし、私は私がすでに構築されたコードを使用してこれを行う方法がわかりませんよ

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)); 
    } 
} 

：私は実際に座標を得た後、私は当初、 RedBlobGamesで見つけ見かけC/++ /＃の例からコードを変換しようとしてきた、しかし、それは私に非常に奇妙な長方形の台形形状を与えました210

希望の形の外にあるさまざまなオフセットセクションを '描画しない'ように言わなくても、私はむしろこれを行うでしょう。

これは、これまで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方向方向add（0,1、-1）に（1,0、-1）を加算します。次に絵画から、x + yが< 3、x + y> 11のものを除外します。または、z値で話す場合は、-11 < zとz < -3のみを塗ります。

これはどのように絵の第二の方法について：ずさんなコード、off-by-oneエラーなしブラインドコーディングするのは容易ではないため申し訳ありません

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; 
}