Dies ist eine fortgeschrittene Anleitung. Wir zeigen, wie aus einer einfachen Idee ("ein Endlosläufer, der neonfarbenen Hindernissen ausweicht") ein echtes 3D-Spiel entsteht, das direkt auf der Leinwand von FilmMovie Studio in einem sandboxed iframe läuft. Das Spiel wird als eine eigenständige HTML-Datei erstellt: Three.js übernimmt Szene, Kamera und Rendering, die Physik-Engine Rapier treibt Bewegung und Kollisionen an, und Post-Processing (Bloom, Tone-Mapping) verfeinert den Look. Entscheidend ist das Tempo — die KI sendet nicht das ganze Spiel auf einmal, sondern setzt es in kleinen Teilen zusammen, sodass du die Welt wachsen siehst und jede Runde schnell bleibt. Am Ende hast du ein spielbares Spiel, das du als einzelne .html herunterlädst und ohne Installation in jedem Browser öffnest.
Was Sie brauchen
- Die Anleitung "Erste Schritte" abgeschlossen — du kannst ein Projekt anlegen und mit Leinwand und Chat arbeiten.
- Ein Generierungsanbieter in den Einstellungen konfiguriert (für mögliche Texturen, Skybox und Sounds über generate_image / generate_audio).
- Eine klare Idee für eine Spielschleife — ein Verb, ein Ziel und eine Verlustbedingung (z. B. "Hindernissen ausweichen, Kristalle sammeln, ein Crash beendet den Lauf").
Schritt für Schritt
- 1
Den Skill /threejs-game starten
Öffne im Projekt den Chat und wähle das Skill-Symbol, oder tippe einfach /threejs-game. Dieser Skill ist für 3D, Three.js und Premium-Spiele — für 2D-Klassiker (Snake, Pong, ein Quiz) nimm stattdessen /games. Hänge deine Idee direkt an den Befehl an.
Film Movie StudioRendernFantasy RTS War GameNeues ProjektSkills suchen…AlleWorkflowsSchnellvideoShort DramaViral vertical mini-series, end to end.imageImage CreatorGenerate single images from a prompt.audioAudio StudioVoiceover, SFX and music tracks.copyApp BuilderMulti-screen apps with live preview.imageE-commerce DesignPro product shots for any platform.videoMusic VideoBeat-synced clips cut to your track.Tipp: Es hilft zu erwähnen, ob du Desktop, Touch oder beides anvisierst — das prägt Steuerung und HUD. - 2
Die Spielschleife in einem Satz beschreiben
Schreibe die Schleife im Chat als Verb + Ziel + Druck + Belohnung + Verlust, z. B. "Endlosläufer: nach vorn rennen, neonfarbenen Hindernissen ausweichen, Kristalle für Punkte sammeln, ein Crash beendet den Lauf und startet neu". Bei vager Anfrage fragt die KI einmal nach Genre, Art Direction und Zielgerät — antworte und sie baut weiter.
Film Movie StudioRendernFantasy RTS War GameNeues ProjektSkills/threejs-game/short-drama/image-creator/audio-studio/app-builder/threejs-game Nahtlos kachelbare Top-down-Albedo-Textur von üppigem Fantasy-Wiesengras, warmer handgemalter Bilderbuch-Illustrationsstil, weiche, abwechslungsreiche Grüntöne mit winzigen Wildblumen,…
SkillsModelleTippe jederzeit /, um den Skill zu wechseln
Tipp: Beschreibe die Absicht, nicht den Code. Der Skill liest den Ablauf selbst und wählt Geometrie, Physik und Effekte. - 3
Die Spielkarte entstehen sehen (der Shell)
Der erste Schritt der KI (create_game) öffnet eine Spielkarte auf der Leinwand mit nur einem "Shell" — dem Gerüst: ein Vollbild-Canvas, das HUD, ein Start-Overlay und der Three.js-Renderer/-Szene/-Kamera. Three.js und Rapier laden per importmap von einem CDN. Der Shell ist bewusst klein, damit die Karte ihn nicht ablehnt.
Film Movie StudioRendernFantasy RTS War GameNeues ProjektDateien
frame_1.png
frame_2.png
frame_3.png
frame_4.png
frame_5.png
frame_6.png60%promptframe_01.pngRemixframe_02.pngRemixframe_03.pngRemixframe_04.pngWird generiert… 80%Remixoutput - 4
Das Spiel Stück für Stück wachsen lassen (append_game_code)
Jetzt ruft die KI append_game_code viele Male — ein System pro Runde: Spielereingabe, ein Rapier-Körper und Collider, der Hindernis-Spawner, der update(dt)-Schritt, der Weltbauer, Materialien und VFX. Ein Premium-3D-Spiel hat davon locker 15–25. Die Karte erwacht nach jedem Stück direkt vor dir zum Leben.
Film Movie StudioRendernFantasy RTS War GameNeues ProjektDateienframe_1.pngframe_2.pngframe_3.png60%promptframe_01.pngRemixframe_02.pngRemixframe_03.pngWird generiert… 55%RemixoutputTipp: Dieses Tempo ist Absicht, keine Langsamkeit — jede Runde ist schnell und du siehst die Welt anwachsen. - 5
Direkt in der Karte spielen
Klicke das Start-Overlay in der Karte an und spiele das Spiel inline im sandboxed iframe — Tastatur und Maus am Desktop oder Touch am Handy. Die Rapier-Physik regelt Sprünge, Crashes und Stürze; nach einem Verlust muss das Spiel sauber neu starten (keine alten Entities, Timer oder Listener).
Film Movie StudioRendernFantasy RTS War GameNeues ProjektDateienframe_1.pngframe_2.pngframe_3.pngframe_4.png60%promptframe_01.pngWird generiert… 42%Remixframe_02.pngWird generiert… 68%Remixframe_03.pngWird generiert… 55%Remixframe_04.pngWird generiert… 80%Remixoutput - 6
Texturen, einen Skybox und Sounds hinzufügen
Für den Premium-Look lass die KI mindestens eine Hero-Textur oder einen Skybox erzeugen (generate_image) sowie die Kern-SFX — Sprung, Aufnahme, Crash — plus ein Musikbett (generate_audio). Der Dateipfad wird automatisch direkt ins Spiel-HTML eingebettet, sodass aus einem Bild eine echte Textur und aus einem Sound ein echtes SFX wird, ohne Upload-Schritt.
Film Movie StudioRendernFantasy RTS War GameNeues ProjektDateienframe_1.pngframe_2.pngframe_3.pngframe_4.png
frame_5.pngBild hierher ziehen oder zum Hochladen klicken
reference.pngTipp: Erzeuge jedes Asset nur einmal — die KI verfolgt, was auf der Leinwand schon existiert, und wiederholt es nicht. - 7
Per Chat iterieren
Du verfeinerst das Spiel in normaler Sprache im Chat: "Hindernisse schneller", "einen zweiten Hindernistyp mit Telegraf hinzufügen", "Bloom zurücknehmen", "den Sprung fixen, er fühlt sich zu schwebend an". Die KI ergänzt per append_game_code oder schreibt mit update_game um, und du spielst sofort wieder. Ändere eine Sache und teste.
Film Movie StudioRendernFantasy RTS War GameNeues ProjektSkills/threejs-game/short-drama/image-creator/audio-studio/app-builder/threejs-game Nahtlos kachelbare Top-down-Albedo-Textur von üppigem Fantasy-Wiesengras, warmer handgemalter Bilderbuch-Illustrationsstil, weiche, abwechslungsreiche Grüntöne mit winzigen Wildblumen,…
SkillsModelleTippe jederzeit /, um den Skill zu wechseln
- 8
Das Spiel als einzelne .html exportieren
Wenn du zufrieden bist, bitte um den Export — die KI ruft export_game_html und du lädst eine eigenständige .html-Datei herunter. Sie öffnet sich in jedem Browser ohne Installation und ohne Server, bereit zum Teilen oder zum Hochladen ins Web. Das ist der letzte Schritt.
Film Movie StudioRendernFantasy RTS War GameNeues ProjektDateienframe_1.pngframe_2.pngframe_3.pngBild hierher ziehen oder zum Hochladen klicken
reference.pngTipp: Der Export ist der letzte Schritt. Für weitere Änderungen justiere das Spiel im Chat und exportiere erneut.
Was Sie erhalten
Aus einem einzigen Satz hast du ein spielbares 3D-Spiel, das direkt auf der Leinwand lief: eine Three.js-Szene, Bewegung und Kollisionen über Rapier-Physik, ein mit Post-Processing verfeinerter Look und ein HUD mit Zuständen für Pause, Verlust und Neustart. Nach dem Iterieren im Chat hast du es als eine eigenständige .html exportiert, die in jedem Browser ohne Installation und ohne Server öffnet — bereit zum Teilen oder zum Hochladen ins Web.
Profi-Tipps
- Für 2D-Klassiker (Snake, Pong, 2048, ein Quiz) nimm /games — /threejs-game zahlt immer den Preis einer vollen WebGL-Pipeline und passt zu 3D- und Premium-Spielen.
- Erwarte keine fertigen 3D-Modelle: Formen sind prozedurale Three.js-Geometrie; generate_image liefert Texturen, Skyboxen, Dekale und UI — keine gerigten Charaktere.
- Spiele nach jeder Änderung eine kurze Runde und justiere immer nur eine Achse (Tempo, Sprung, Hindernisanzahl), damit du genau siehst, was geholfen hat.
Probieren Sie es selbst aus
FilmMovie Studio ist eine Desktop-App, die Sie von der Idee bis zum fertigen Export begleitet. Laden Sie sie herunter und legen Sie los.
FilmMovie Studio holen