Die Startseite dieser Website ist kein gewöhnliches Navigationsmenü. Stattdessen empfängt ein interaktives Segelspiel den Besucher. Man steuert ein kleines Segelboot in isometrischer Perspektive über einen endlosen Ozean. Die Menüpunkte der Website (Blog, Projekte, Über mich) sind als Inseln im Ozean platziert.
Features
- Isometrische 2D-Physik: Maßgeschneiderte Kollisionsabfrage und Dämpfung für das Segeln.
- Custom GLSL Shader: Ein dynamischer Wasser-Shader berechnet die Wellenbewegung und Schaumkronen an den Ufern der Inseln.
- Auto-Sailing: Ein intelligenter Repulsions-Algorithmus steuert das Boot um Hindernisse herum, wenn der Nutzer auf eine Zielinsel klickt.
- Responsive Canvas: Das Spiel skaliert flüssig auf verschiedene Bildschirmgrößen und unterstützt Touch-Gesten auf mobilen Geräten.
Technische Details
Die Herausforderung bestand darin, die isometrische 2:1 Perspektive performant in Phaser 3 zu rendern. Durch Custom Physics Bodies und die Shoreline Heatmap Render Texture werden optisch korrekte Uferschaum-Wellen generiert, ohne die CPU zu belasten.
Tech Stack
hugoPhaser 3GLSL ShadersHTML5SCSS