hexagon-866223_640

Ein Beitrag von Thomas Dingeldey.

Heute kommt ein etwas tech-lastiges Thema auf den Tisch. Also: Developer – als auch Designer – aufgepasst! Wie in der Headline angeteasert geht es um Hexagone. Gleichseitige Hexagone um genau zu sein. Diese Sechsecke sind – mit zwei Seiten mehr – praktisch der große Bruder der Quadrate.

Warum sind diese unscheinbaren geometrischen Formen für uns und für euch interessant? Der Nutzen von Hexagonen gegenüber Quadraten ist in seinen Grundzügen schnell erklärt: Bei Quadrat-Rastern grenzen an jede Einheit nur vier weitere Quadrate über echte Kanten – und vier über die Eckpunkte. In der Umsetzung ist das zwar komfortabel, setzt aber Limitationen bei Problemen wie der Berechnung von Distanzen oder der Wiedergabe von komplexen Strukturen. Hexagone ermöglichen durch die höhere Kanten- und somit Seitenanzahl ein deutlich exakteres Raster.

Die Anwendungsbereiche sind – obwohl nischenhaft – weit gestreut: Im Agenturalltag liegen sie zum Beispiel bei der Konzeption von Interfaces oder interaktiven Webseiten. Bei vielen Verzweigungen, Menüpunkten oder Unterseiten bieten Hexagone einen offensichtlichen Mehrwert. Durch die höhere Seitenanzahl lässt sich von einem Element auf mehr Elemente verweisen als bei Quadraten.
Es geht aber auch noch interaktiver: Gerade bei Spielfeldern lohnt sich ein hexagonales Layout, so setzt die strategisch anspruchsvolle Civilization-Serie genau darauf.

Wer sich noch intensiver mit dem Thema beschäftigen möchte, für den gibt es in diesem Artikel umfangreiche Erläuterungen und dynamisches Anschauungsmaterial zur Berechnung und effizienten Verwaltung von hexagonalen Spielfeldern. Das Spektrum an Informationen, welches der Artikel abdeckt, ist dabei sehr beachtlich. Universelle Code-Beispiele erläutern die gängigsten Lösungen für alle möglichen Herausforderungen von Pathfinding bis zu Hex-to-Pixel Conversions und helfen bei der Umsetzung von eigenen Ideen.

Bildschirmfoto 2016-02-17 um 16.57.44

Der Autor

![Thomas Dingeldey](/blog/content/images/2016/09/Dingeldey-1.jpg)**Thomas Dingeldey** Developer, Darmstadt [![Thomas bei Xing](/blog/content/images/2016/02/xing_logo-1.png)](https://www.xing.com/profile/Thomas_Dingeldey)