HTML5 und CSS3 bieten dem Website-Entwickler neue, schicke und leistungsstarke Möglichkeiten zum Gestalten von Elementen und Bereichen. Auch für die Spieleentwicklung bringt dies neue Möglichkeiten mit sich, 3D-Räume und Landschaften zu gestalten.
Anbei zwei Beispiel, welche 3D-Landschaften mit CSS und HTML möglich sind und in welche Richtung der Trend Online-Gaming gehen wird.
CSS3 in Games: 3D Raum via Images
Der 3D-Raum basiert auf 2D-Darstellungen, welche lediglich Grafiken von 1D-Texturen enthalten. Erzeugt wird der Raum mit CSS3-Drehungen der Texturen. Eine räumliche Tiefe entsteht durch Verzerrung und Verdunkelung der Texturen. Auf die Seiten-Wände und den Boden wurde zudem eine Maske (mask) gelegt, welche den Schatten-Effekt in WebKit-Browser erzeugt.
Eine Demo ist hier verfügbar: http://index.dariodomi.de/3D-Game/
3D-Modell
Der 3D-Tunnel besteht aus einem Drahtgitter-Modell. Basierend auf einer vordefinierten Form werden Kurven und gerade Strecken erzeugt. Entwicklung mit HTML5 Canvas, Berechnungen erfolgen mit JavaScript.
Steuerung via W, A, S, D
Tipp
Das erste Beispiel mit dem 3D-Raum basiert ja auf 3D-Transforms (Umformen / Verzerren). Informationsreiches, englischsprachiges Tutorial zu dem Thema:
- http://24ways.org/2010/intro-to-css-3d-transforms
Update
Weiter Infos zu CSS3. Zum einen einige coole Beispiele eines belgisches Software-Entwicklers, zudem hat seine seine 3D-Engine Open-Source veröffentlicht:
- http://sprite3d.minimal.be/
- Sprite3D.js Engine
The Reality of HTML5 Game Development and making money from it
- *click*
Code-Snippets and more:
- http://cssdeck.com/