Seit einigen Wochen versuche ich ein kleines Computerspiel selbst zu entwickeln. Es soll ein Spiel mit isometrischer Darstellung von Spielfeld und Spielsteinen werden. Bei dem der Spieler strategisch geschickt die Spielsteine bewegen muss um mit möglichst wenigen Zügen das Ziel des jeweiligen Levels zu erreichen. Die Entwicklung erfolgt in HTML5 und JavaScript. Die Grafik wird dabei auf einem Canvas-Element in 2D ausgegeben. Aktuell habe ich die Grafikengine soweit fertiggestellt, dass sie Spielfeld und Spielsteine fehlerfrei zeichnet. Bei der Entwicklung habe ich festgestellt, dass die richtige Zeichenreihenfolge nicht so trivial ist wie zunächst vermutet. Die mögliche Positionierung von Spielsteinen zwischen mehreren Spielfeldkacheln, im Rahmen der Bewegung der Steine bei den Spielzügen, erschwert die Darstellung der Wände. Da es hier wenn die Zeichenreihenfolge nicht richtig ist zu fehlerhafter Tiefendarstellung kommen kann. Dabei werden Wände die hinter Spielsteinen liegen vor den Spielsteinen oder Spielsteine hinter Wänden vor den Wänden dargestellt. Um dies in allen möglichen Konstellationen die in meinem geplanten Spiel vorkommen werden auszuschließen ist eine nicht lineare Zeichenreihenfolge erforderlich. Es werden also nicht schlicht alle Kacheln zeilen- und spaltenweise gezeichnet, da dies zu den beschriebenen Fehlern führt. Die Kacheln des Spielfeldes werden in einer je nach Position der Spielsteine durchaus komplexen Zeichenreihenfolge gezeichnet. Da sich diese schwierig beschreiben lässt habe ich für ein kleines Beispielspielfeld eine Animation der Zeichenreihenfolge erstellt.
Die Animation ist absichtlich deutlich verlangsamt damit erkennbar ist in welcher Reihenfolge die einzelnen Elemente des Spielfelds gezeichnet werden. In der echten Engine erfolgt das Zeichnen des gesamten Spielfelds im Bruchteil einer Sekunde. Als nächsten Schritt werde ich die Grafikelemente für die Kacheln des Spielfelds und die Spielsteine neu erstellen. Mit den aktuell in der Animation verwendeten Grafiken bin ich noch unzufrieden, da diese noch einige grafische Unschönheiten aufweisen. Außerdem benötige ich noch weitere Grafikelemente. Aktuell habe ich angedacht die Grafiken mit POV-Ray neu zu erstellen. Allerdings ist mir noch unklar ob das so wie ich es mir vorstelle funktionieren wird. Falls nicht muss ich nach einer Alternative suchen. :)