Archiv - März 2015


Projekt: Isometrisches 2D Grid in HTML

Als ich auf das flashbasierte Browsergame Forge of Empires gestoßen bin und Flash mal wieder abgestürzt ist, habe ich mich gefragt ob Spiele wie Forge of Empires nicht auch direkt in HTML möglich wäre. Dabei habe ich vor allem an die Stadtbau-Funktion gedacht

Nach ersten Überlegungen bin ich zu dem Entschluss gekommen: ja es müsste gehen. Die Frage war eher wie das Ganze von der Performance her aussieht, da ich beabsichtige mit DOM-Elementen zu arbeiten.

Erste Tests während der Entwicklung von Isogrid
Erste Tests während der Entwicklung von Isogrid

Nach einigen Tests und Anfangsschwierigkeiten wurde aber schnell klar das ein isometrisches 2D-Grid nur mit HTML, CSS und Javascript verhältnismäßig gut funktioniert. CSS3 Technologien wie 3D-Translation machen es möglich die quadratischen Terrain-Tiles isometrisch darzustellen, womit man das Terrain schon mal geschaffen hat. Diese Technologien funktionieren natürlich nur in aktuellen Browsern, aber auf Support dabei älterer Browserversionen wurde auch keine Rücksicht genommen.

Nach dem Terrain probierte ich wie man am besten die Objekte wie Gebäde und Wege auf der Map darstellt. Nach einigem probieren klappte auch das und es folgten Routinen zum Bauen, Bewegen und Abreißen von Objekten. Besondere Herausforderungen war dabei unteranderem die z-Index Kalkulation, d.h. die Ermittlung der Ebene auf der das jeweilige Objekt angezeigt werdem soll. Aber auch das Bauen von Straßen war nicht allzu einfach. Das Ergebnis kann sich durchaus sehen lassen:

Das Resultat: ein Citybuilder für Forge of Empires
Das Resultat: ein Citybuilder für Forge of Empires

Die Grundlagen sind also geschaffen. Momentan fehlt für die Verwendung als Forge of Empires Citybuilder noch ein ordentliches GUI, aber auch alle Gebäude und Straßentypen die im Spiel enthalten sind müssten noch hinzugefügt werden, was einiges an Arbeit darstellt. Um das Ganze sinnvoll verwenden zu können fehlt außerdem noch eine Speicherfunktion.

Also ist noch eine ganze Menge Arbeit nötig um das ganze als Citybuilder zu nutzen, jedoch wird diese in den nächsten Wochen und Monaten definitiv angegangen.