2016-08-05 87 views
1

Ich rendere ein Raster aus flachen Hexfeldern auf ein HTML5-Zeichenfeld. Platzierung und Kommissionierung funktionieren einwandfrei. Zu jeder Zeit sollte das gesamte Gitter sichtbar sein.Berechne das Seitenverhältnis eines hexagonalen Spielfelds

Dazu berechne ich das Minimum Rechteck, das alle Sechsecke vollständig enthält, und verwende seine Höhe und Breite, um die Leinwandgröße (Letterboxed) zu berechnen. Zur Berechnung der Größe verwende ich die gleichen Koordinaten verwende ich holen und die Fliesen Layout und berechnen:

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 

werden jedoch die angezeigten Fliesen verzerrt, werden sie gestreckt in x-Richtung. Ist mit meiner Formel etwas nicht in Ordnung? Die Messungen wurden abgeleitet als the fantastic redblob games resource beschreibt es.

Ich bin mir ziemlich sicher, dass die Funktion, die x- und y-Skalierung abhängig vom Seitenverhältnis anwendet, gut funktioniert, da orthogonale Karten genau so aussehen, wie sie sollten.

+0

Was ist die Formel für tile_h? Ich denke, das Problem ist, dass Sie mit ungeraden und geraden Zahlen von Kacheln anders umgehen müssen. horiz_dist wird nur 1,5 gemittelt über 2 Kacheln sein, es sei denn, ich missverstehe es. Bitte erklären Sie auch, warum Sie Breite um 1/4, aber Höhe um 1/2 multiplizieren – samgak

+0

Hallo samgak. tile_h wurde von tile_height abgeschnitten, sorry, habe das nicht bemerkt. Ich füge 1/4 Breite hinzu, weil die erste Spalte genau eine Kachel breit ist, jede nachfolgende Spalte fügt 3/4 Breite hinzu. Für die Höhe fügt jede gerade Zeile eine Breite hinzu, und wenn (und nur wenn, siehe aichaos Antwort) meine ungeraden Spalten die gleiche Höhe wie die geraden Spalten haben, fügen die ungeraden Zeilen eine weitere halbe Höhe zur Summe hinzu. Sie können das auf den Bildern in dem Link, den ich zur Verfügung gestellt habe. – user3410194

Antwort

0

Von Ihrem Beitrag scheinen Sie ein flaches Gitter zu wollen. Aufgrund der Informationen von Ihrem Link,

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 

wo size = 1 ist die Länge der Kante des Sechsecks.

definieren number_x_tiles als die Anzahl der ungerade Spalten und sogar Spalten im Gitter, Ihre Berechnung für das Gitter width korrekt ist:

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 

Das Problem ist also height das Raster bei der Berechnung. Ihre Formel

height = 1/2 * tile_height + number_y_tiles * tile_height 

ist korrekt, wenn die Anzahl der Reihen von Sechsecken in einer odd Spalte ist das gleiche wie eine sogar Säule (per Konvention sagen, dass die erste Spalte ist die sogar Säule und die zweite Säule ist ungerade). Wenn nicht, dann müssen Sie bestimmen, ob es mehr Reihen von Sechsecken in der ungeraden Spalte versus sogar Spalte gibt. Daher sollte die Logik sein:

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 

Hoffe, das hilft.

+0

Danke ... du hast Recht. Die Anzahl der ungeraden Spalten war um eins geringer als die Anzahl der geraden Spalten, daher die Verzerrung. – user3410194