Sleepy King: ein gemütliches 3D-Spiel für den Browser

Sleepy King ist ein 3D-Spiel, das direkt im Browser läuft, ganz ohne Installation. Du spielst Sol, ein Löwenjunges und den ziemlich verschlafenen König eines Tals, das seine Farbe verloren hat. Jeder Durchgang ist ein Tag: Du trabst durchs Land, trinkst an Wasserstellen, sammelst Blütenblätter und legst dich schlafen. Während der König döst, erblüht sein Reich.

Es ist ein Spiel, aber es stellt dieselben Fragen wie jedes interaktive Webprojekt: Fühlt es sich gut an, lädt es auf dem Smartphone, und bleibt es freundlich zu den Menschen, die es nutzen? So ist es gemacht.

1. Die Idee: ein Held, der schlafen will

Die meisten Actionspiele belohnen dich dafür, nie anzuhalten. Sleepy King dreht das um: Stehenbleiben ist das Stärkste, was du tun kannst, und zugleich das Gefährlichste.

Wasser ist Sols Gesundheit, und es wird beim Laufen weniger. Blütenblätter füllen einen Traum, und beim Nickerchen wird jeder volle Traum zu einer Wahl: eines von drei Upgrades. Größere Träume brauchen längeren Schlaf, mitten im Freien, während die Dürre näher rückt. Unter einem Schattenbaum ist das Nickerchen sicher und bringt eine Wahl extra. Wer früher aufwacht, verliert nichts, die Träume bleiben erhalten. Wer sich ohne fertigen Traum hinlegt, sieht die gesammelten Blätter davonwehen. Und wer zu viele Träume mit sich trägt, wird schläfrig und langsamer. So stellt jeder Tag immer wieder dieselbe kleine Frage: noch ein Blatt, oder jetzt schlafen?

Die Dürrewesen sind kleine, graue Gesellen, und sie werden gereinigt, nie verletzt. Nichts in diesem Spiel ist brutal. Ein Tag kann früher enden, wenn das Wasser ausgeht, aber Blütenblätter und das damit aufgebaute Königreich gehen nie verloren. Dazu gibt es eine Checkliste, die das Spiel erfüllen muss: keine Timer außerhalb des Spiels, keine Streaks, keine Bestenlisten. Es soll da sein, wenn du Lust hast, und dich in Ruhe lassen, wenn nicht.

2. Welt: ein runder Planet auf einer flachen Karte

Sol lebt auf etwas, das wie ein winziger Planet aussieht: Der Horizont krümmt sich weg, und ferne Bäume versinken stammabwärts dahinter. Das Spiel selbst weiß davon nichts. Bewegung, Kollisionen und Gegner spielen sich auf einer flachen Karte ab. Erst der Vertex-Shader biegt das Bild zu einer Kugel um Sol, und zwar bevor Licht und Schatten berechnet werden, sodass alles zusammenpasst.

Die flache Karte macht die Welt außerdem endlos. Die Wiese ist eine Kachel von 112 Metern, deren Hügel und Farbflächen an den Rändern ineinander übergehen, und der Shader zeichnet alles an der Kopie, die Sol am nächsten liegt. Wer lange genug in eine Richtung läuft, kommt wieder an, ohne Naht und ohne Ladebildschirm.

Auch die Bewegung ist von Hand geschrieben: Geländehöhe und weiche Kreiskollisionen sind alles, was dieses Spiel braucht. Eine Physik-Engine muss also niemand herunterladen.

3. Look: Malerei ohne Post-Processing

Das Vorbild sind handgemalte Animationsfilme: Gouache-Hintergründe, warmes Licht, Schatten, die ihren Farbton ändern, statt nur dunkler zu werden. Üblich sind dafür Vollbildfilter, und genau die machen Smartphones heiß. Das Spiel kommt deshalb ohne sie aus, alles steckt in einem gemeinsamen Material.

• Licht: Eine kleine Farbrampe ersetzt die normale Schattierung. Die Schattenseite wird kühl-lila, die Lichtseite warm-cremig, dazwischen liegt ein einziger kurzer, weicher Übergang.
• Pinselstriche: Eine kachelbare Textur aus warmen und kühlen Strichen, in zwei Größen übereinandergelegt, damit sich kein Muster wiederholt. Sie hängt am Objekt und nicht am Bildschirm, die Farbe schwimmt also nicht, wenn sich die Kamera bewegt.
• Tusche: Nur was sich bewegt oder berührt werden kann, bekommt eine Kontur. Bäume und Felsen haben keine. So wirkt die Landschaft wie gemalter Hintergrund, und Sol steht davor wie eine gezeichnete Figur.
• Wolken: Hohe Quellwolken, beim Start einmal auf ein 2D-Canvas gemalt und dann auf flachen Flächen gezeigt. Zwei Ringe ziehen unterschiedlich schnell vorbei, und ein langsames Wabern des Bildes lässt sie quellen.
• Wind und Wasser: Gras, Blumen und Blätter wiegen sich im Vertex-Shader, und Lichtflecken treiben über die Teiche.

4. Luft: 182 Partikel, ein Draw Call

Eine Wiese wirkt lebendig durch das, was in der Luft liegt: Pollen, Pusteblumen-Samen, treibende Blätter, Schmetterlinge und nach Einbruch der Dunkelheit Glühwürmchen. All das ist ein einziges Mesh aus kleinen Flächen. Jede speichert nur eine Startposition und ein paar Zufallswerte, ihre ganze Flugbahn ist eine Funktion der Zeit und wird im Vertex-Shader berechnet. Die Partikel kreisen in einer Box, die Sol folgt, und blenden aus, bevor sie deren Rand erreichen.

Das kostet einen Draw Call und keinerlei Arbeit im Main Thread, egal wie viele gerade fliegen.

5. Assets: alles ist Code

Das Spiel hat keine Modelldateien, keine Texturen und keine Audiodateien. Sol, die Bäume und die Wesen entstehen aus Geometrie mit Vertex-Farben aus einer gemeinsamen Palette. Schritte, Glöckchen, Ambience und Musik werden mit Web Audio erzeugt. Three.js ist die einzige Abhängigkeit zur Laufzeit. Das hält den Download klein, und eine einzige Datei kann den gesamten Look verändern.

Das Interface folgt derselben Idee. Icons, Kugeln und Rahmen sind kleine 3D-Modelle mit dem Material und der Tusche des Spiels, beim Start einmal zu Bildern gerendert. Sie sehen aus wie ein Teil der Welt und kosten beim Spielen nichts. Layout und Text bleiben schlichtes HTML. So funktionieren Screenreader und beide Bildschirmausrichtungen, und das Spiel spricht Deutsch, Englisch und Spanisch.

6. Smartphones: ein Daumen, kühle Hardware

Gespielt wird mit einem Daumen: Ein schwebender Joystick erscheint dort, wo du den Bildschirm berührst, im Hochformat auf dem Smartphone und im Querformat auf Tablet und Desktop. Kein Sprungknopf, kein zweiter Stick.

Ein paar Entscheidungen halten das Gerät kühl:

• Schatten werden nur jeden zweiten Frame erneuert, was bei diesem Tempo nicht auffällt.
• Kantenglättung läuft nur auf Bildschirmen mit niedriger Pixeldichte, auf dichten sind die Kanten ohnehin fein.
• Erblühender Boden lädt nur die Zeilen neu hoch, die sich geändert haben. Pflanzen sind nach Gebiet nummeriert, sodass die, die sich gemeinsam ändern, im Speicher nebeneinanderliegen und nur ein kleiner Ausschnitt zum Grafikchip muss.
• Verstecktes Fenster: Spiel und Ton pausieren, sobald das Fenster den Fokus verliert.

Als PWA lässt es sich auf den Homescreen legen, und eine Einstellung für reduzierte Bewegung beruhigt das Bild für alle, die das brauchen.

7. Spielstände: ohne Konto

Der Fortschritt wird auf dem Gerät gespeichert und unter einer anonymen ID in einer kleinen Datenbank am Edge. Es gibt keine Anmeldung und keine personenbezogenen Daten. Das Spiel selbst besteht aus statischen Dateien, nur die Speicher-Route führt auf dem Server überhaupt Code aus, ein voller Tag belastet ihn also kaum.

Die Kurzfassung

• Ein Nickerchen als Kernmechanik: Der stärkste Zug ist zugleich der riskanteste.
• Flache Karte, rundes Bild: einfache Spiellogik und ein endloser kleiner Planet.
• Gemalt in einem Material, ohne Vollbildfilter.
• 182 Partikel in einem Draw Call, komplett vom Grafikchip bewegt.
• Keine Asset-Dateien: Modelle, Grafik und Ton kommen aus dem Code.
• Gemütlich per Regel: nichts Brutales, nichts geht verloren, nichts nervt.

Sleepy King spielen, am besten auf dem Smartphone. Und wenn deine Marke ein eigenes Spiel oder eine interaktive Welt gebrauchen kann: Hier steht, was ich dafür baue, oder schreib mir einfach.