Projekt: Isometrisches 2D Grid in HTML
Von: Admin | Veröffentlicht: 06.03.2015 22:03 | Kategorien: Programmieren, Games
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
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
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.