六角形の競技場のアスペクト比を計算する

Question

私は、HTML5キャンバス上に平たい頂点の六角形のタイルのグリッドをレンダリングしています。配置とピッキングは完璧に動作します。常にグリッド全体を表示する必要があります。

このため、すべての六角形を完全に含む最小四角形を計算し、その高さと幅を使用してキャンバスサイズ（レターボックス）を計算します。

tile_width = 2     // 2 * distance center-corner 
tile_height = 1.7320508075688772 // sqrt(3) * distance center-corner 
horiz_dist = 1.5     // 3/4 * tile_width 


width = 1/4 * tile_width + number_x_tiles * horiz_dist 
height = 1/2 * tile_height + number_y_tiles * tile_h 
aspect = width/height 

しかし、表示タイルが歪んでいる、彼らは、x方向に延伸されていますサイズを計算するために私が選んで、タイルをレイアウトし、計算するために使用するのと同じ座標を使用します。私の処方に何か問題はありますか？測定値は、the fantastic redblob games resourceに記載されています。

私は、直交マップが正確に見えるように、アスペクト比に応じてxおよびyスケーリングを適用する関数がうまく動作することを確信しています。

Answer 1

あなたの投稿からは、フラットトップのグリッドが必要なようです。 size = 1は、六角形の辺の長さであるあなたのリンクからの情報、

tile_width = size * 2 = 2 
tile_height = sqrt(3) * size = sqrt(3)/2 * tile_width = sqrt(3) 
horiz_dist = (tile_width + size)/2 = tile_width * 3/4 = 1.5 

を考えます。 奇数列とグリッドのさえ列の数であるとしてnumber_x_tilesの定義

は、グリッドwidthのためのあなたの計算は正しいです：

width = tile_width + (number_x_tiles - 1) * horiz_dist 
     = tile_width + (number_x_tiles - 1) * tile_width * 3/4 
     = tile_width - tile_width * 3/4 + number_x_tiles * tile_width * 3/4 
     = 1/4 * tile_width + number_x_tiles * horiz_dist 

だから、問題は、グリッドheightを計算しています。 奇数列の六角形の列の数は、慣例により、最初の列は、も列、第2列であると言う（も列と同じであるときに、式

height = 1/2 * tile_height + number_y_tiles * tile_height 

が正しいです奇数）。そうでない場合は、の奇数列の六角形の列がさらに多いかどうかを、の場合でも、列と判断する必要があります。したがって、ロジックは次のようになります。

if (num_rows_in_odd_column == num_rows_in_even_column) 
    height = 1/2 * tile_height + number_y_tiles * tile_height 
else 
    number_y_tiles = max(num_rows_in_odd_column, num_rows_in_even_column) 
    height = number_y_tiles * tile_height 

これが役に立ちます。