Agradable hexágonos isométricos

Qué angularjs y lado largo: las relaciones del lado corto dan los hexágonos más estéticamente agradables y gráficamente regulares isométricos (aplastados, con el lado plano hacia arriba); que, además, se resuelven en tamaños de píxeles completos para varios tamaños cuando se procesan?

Desde que presenta el map de hex a través de una vista isométrica que cambia las cosas.

Aquí está la versión tradicional con hexágonos horizontales que están efectivamente aplastados en el eje vertical para hacer una apariencia pseudoisométrica.

vista hexagonal 2

Esto toma un enfoque diferente con los hexes que se rotan para no presentar líneas verticales u horizontales.

vista hexagonal 1

Cualquiera de los dos styles puede funcionar, solo depende de lo que quieras hacer, la dirección principal en la que los jugadores se moverán por el mundo y cuánto quieres evitar en zigzag.

Por "lado plano hacia arriba", supongo que te refieres a "horizontal plano horizontal" (ya que "hacia arriba" podría significar que el borde apunta hacia arriba o "mira hacia arriba", es decir, sus puntos normales hacia arriba).

Experimenté con ambas orientaciones para un juego que desarrollé en la universidad. Personalmente, encontré hexágonos de "lado plano vertical" más agradables para los ojos. Definitivamente podría ser una minoría aquí, pero creo que Civilization V usa la misma orientación, así que definitivamente no estoy solo. Si no estás decidido a usar una orientación sobre la otra, entonces te sugiero que experimentes con ambas. Dado que la mayoría de los resources en línea que he encontrado con respecto a las cuadrículas hexagonales usan la orientación horizontal plana horizontal, muchas ecuaciones que encuentres pueden requerir ajustes; este sitio debería ayudar.

Construí mi proyecto con un marco de interfaz de usuario independiente de la resolución que realizaba el ajuste automático de píxeles del dispositivo, así que no perdí mucho time ajustando los angularjs y las proporciones. Creo que cada uno de mis hexágonos tenía un cuadro delimitador de 96 píxeles independientes del dispositivo al cuadrado (96 píxeles de dispositivo en una pantalla estándar de 96 ppp con escala = 1.0). Deberías poder derivar el rest de la captura de pantalla :).

Estos son para el lado plano horizontal. La terminología que estoy usando proviene de los pensamientos de Amit en la página de grillas, con el lenguaje adicional de "longitud de los lados estrechos" que significa la longitud de los lados aplastados no horizontales.

http://www-cs-students.stanford.edu/~amitp/game-programming/grids/hex-grid-metrics-labeled.png

equilátero (proyección de 0 grados):
"altura" = L√3
"ancho ancho" = L
"ancho estrecho" = L√3
longitud lateral estrecha = L

Proyección de 45 grados:
"altura" = L
"ancho ancho" = L
"ancho estrecho" = 2 * √ (3/8) L
longitud del lado estrecho = √ (2) L

Proyección de 60 grados:
"altura" = (3/2) L
"ancho ancho" = L
"ancho estrecho" = 2 * √ (3/4) L
longitud del lado estrecho = √ (13/16) L

Los calculé a mano, así que por favor revisa mi trabajo.