Lotti & Greta
Jump'n'Run fürs Smartphone im Querformat: ein 3D-Kurs-Plattformer mit frei begehbarer Weltkarte
(Vorbild in der Anmutung: Super Mario 3D World), dazu das ursprüngliche Side-Scroller-Spiel als „Klassik“.
Läuft im Browser, installierbar als PWA. Alle Grafiken und Sounds werden prozedural per Code erzeugt –
keine externen Assets.
Zwei spielbare Heldinnen: Lotti (dunkelblond, geflochtene Zöpfe, rote Schleife, blaues Kleid)
springt höher, Greta (hellblond, langes Haar mit Haarreif, grünes Kleid mit Schürze) springt
weiter (HERO_VARIANTS in src/config.js). Die Figur wird auf der Weltkarte über die Porträt-Knöpfe
gewählt (PC: Tab) und kann auch im Pause-Menü gewechselt werden.
Pflaume, ein schwarzes Schlappohr-Kaninchen mit weißer Brust, ist das Reittier; sein Halstuch nimmt
die Farbe der gefressenen Beere an und zeigt so die aktuelle Kraft. Beim Reiten hält die Heldin dem
Kaninchen eine Möhre an der Angel vor die Nase – deshalb rennt es schneller (PFLAUME.rideSpeedMult).
Die Sammelmünzen sind Bitcoins.
Darstellung
- Die Spiellogik (Phaser 3, Arcade Physics) rechnet unverändert in 480x270 Weltpixeln mit 16-px-Tiles.
- Die 3D-Ansicht (Three.js,
src/three/) zeichnet Welt, Figuren, Gegner, Objekte und Effekte auf einer
eigenen WebGL-Leinwand unter der transparenten Phaser-Leinwand; HUD, Touch-Steuerung und Menüs bleiben
in Phaser. Die Perspektivkamera folgt der Spielkamera und blickt leicht von oben (src/render3d.js).
- Jedes Phaser-Sprite bekommt über seinen Textur-Key einen Avatar (
src/three/avatars/), der den
Spielzustand liest und ein prozedural gebautes, prozedural animiertes 3D-Modell steuert. Die Welt
entsteht aus der Logik-Tilemap (src/three/world/), die Weltkarte ist eine 3D-Insel (src/three/map/).
- Fällt die Bildrate, senkt die Ansicht stufenweise die Auflösung (
?adapt=0 schaltet das ab).
?r3d=0 schaltet auf die 2D-Vektorfassung zurück (Canvas-2D-Grafik in 2- bis 3-facher Auflösung,
src/gfx/). Regeln: docs/3D-STYLEGUIDE.md (3D) und docs/GRAFIK-STYLEGUIDE.md (2D).
Entwicklung
npm install
npm run dev # Dev-Server (http://localhost:5173)
npm run build # Produktions-Build nach dist/
npm run preview # Build lokal ansehen
npm test # Headless-Tests (Chromium): Logik in 2D, 3D-Ansichten mit Screenshots → tests/out/
Steuerung (PC)
| Taste | Aktion |
|---|
| ← → | Laufen |
| Leertaste / ↑ | Springen (kurz tippen = kleiner Sprung) |
| Leertaste halten (in der Luft) | Blätterschirm: Gleiten |
| ↓ (beim Gleiten) | Sturzflug; loslassen → Aufschwung nach oben |
| X | Aktion (Feuer/Stampfen – nur auf Pflaume) |
| D | Debug-Modus (Hitboxen, FPS, Zustand) |
| M | Ton an/aus |
| Esc / P | Pause |
| R | Zurück zum Start |
Steuerung (Controller)
Bluetooth- und USB-Controller (Xbox-, PlayStation-, Switch-Pro-Belegung über die Gamepad-API des Browsers) bedienen das
ganze Spiel ohne Tastatur und Touch – am Handy, am PC und im Windows-Programm, auch wenn der Controller über
Spiele-Streaming (Steam Link/Remote Play, Moonlight …) weitergereicht wird. src/systems/gamepad.js, Test
tests/gamepad.mjs.
| Knopf (Xbox-Namen) | Im Level | Auf der Weltkarte | In Menüs |
|---|
| Linker Stick | Laufen (ganz gekippt = rennen) | Laufen | Knopf wählen |
| Steuerkreuz | Laufen | Laufen | Knopf wählen |
| A | Springen | Level betreten | gewählten Knopf drücken |
| B | Ducken / Stampfen | Springen | zurück / weiter (Esc) |
| X, Y, RT | Rennen + Aktion | X Figur wechseln, Y Kostüm, RT rennen | – |
| LT | Ducken | – | – |
| LB / RB, rechter Stick | Kamera drehen | Kamera drehen | – |
| R3 (Stick drücken) | Zoom | Zoom | – |
| Start | Pause | Level betreten | zurück / weiter (Esc) |
| Back / Select | – | Ton an/aus | Ton an/aus |
Im Windows-Programm startet der Ton ohne Mausklick, und es läuft im Vollbild (F11 schaltet um). Im Browser verlangt der
Ton einmal eine Berührung, einen Klick oder Tastendruck.
Steuerung (Touch, Querformat)
- Weltkarte (3D-Insel): Level-Podest antippen = hinlaufen (auch über mehrere Etappen), großer
Knopf „Level starten“ unten rechts oder die Figur antippen = Level starten; Porträt-Knöpfe oben
links wählen Lotti/Greta, daneben der Ton-Knopf.
- Linke Bildschirmhälfte: virtueller Analog-Stick – erscheint dort, wo der Daumen aufsetzt,
wandert mit, wenn man über den Rand hinauszieht.
- Rechte Hälfte: Tippen = Springen, Halten = Gleiten (Blätterschirm),
beim Gleiten nach unten wischen = Sturzflug, Finger heben oder nach oben wischen = Aufschwung.
- Runder Knopf am rechten Rand: Aktion (Feuer/Stampfen – nur auf Pflaume).
- Im Hochformat erscheint ein Dreh-Hinweis und das Spiel pausiert.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
