Baue ein spielbares Spiel auf der Leinwand: von der Idee zum .html-Export

Der /games-Skill ist ein eingebauter Spieleentwickler in FilmMovie Studio: Du beschreibst eine Spielidee und die App baut sie als ein eigenständiges HTML/JS-Dokument, das sofort in einer sandboxed Karte auf der Leinwand läuft. Er funktioniert für Arcade-Spiele (Snake, Pong, Breakout), Puzzles (2048, Memory, Tic-Tac-Toe), Quizze, Plattformer und Physikspiele (Phaser, Kaboom, Matter.js) sowie für modernes 3D mit Three.js und Rapier-Physik. Du spielst das Spiel direkt in der Karte, verfeinerst es mit weiteren Chat-Nachrichten und exportierst es schließlich als .html-Datei, die sich in jedem Browser öffnet. Diese Anleitung durchläuft den gesamten Zyklus.

Was Sie brauchen

FilmMovie Studio installiert (macOS oder Windows).
Mindestens ein Generierungsanbieter in den Einstellungen konfiguriert (ein kie.ai- oder deAPI-Schlüssel) — nur für KI-Grafik oder -Ton nötig; code-gezeichnete Spiele funktionieren auch ohne.
Eine Idee für ein Spiel — Genre und Thema, z. B. „Snake mit Weltraum-Thema“.

Schritt für Schritt

1
Projekt im Workspace öffnen
Starte FilmMovie Studio, klicke im Launchpad auf „Neues Projekt“, benenne es (z. B. „Mein Spiel“) und bestätige. Der Workspace öffnet sich mit der Leinwand links und dem Chat rechts.
Film Movie StudioRendern
Battlecraft Fantasy RTSNeues Projekt
LaunchpadHubAlle Projekte
Zuletzt
project 1project 2project 3
Einstellungen
Film Movie Studio
Eine neue Art, Medien mit KI zu erstellen
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tippe /, um KI-Skills zu entdecken
Short DramaE-commerceMusic VideoGamesDocumentary
2
Den /games-Skill wählen
Klicke im Chat auf das Skill-Symbol und wähle /games (oder beginne deine Nachricht mit /games). Damit sagst du der App, dass du ein spielbares Spiel bauen willst, kein Video und kein Bild.
Film Movie StudioRendern
Storybook Fantasy RTSNeues Projekt
Skills suchen…
AlleWorkflowsSchnell
video
Short DramaViral vertical mini-series, end to end.
image
Image CreatorGenerate single images from a prompt.
audio
Audio StudioVoiceover, SFX and music tracks.
copy
App BuilderMulti-screen apps with live preview.
image
E-commerce DesignPro product shots for any platform.
video
Music VideoBeat-synced clips cut to your track.
Tipp: Lässt du das Genre weg und sagst nur „bau mir ein Spiel“, fragt die App einmal nach dem Typ (Arcade / Puzzle / Quiz / Plattformer). Nennst du das Genre, legt sie sofort los.
3
Spielidee in den Chat tippen
Beschreibe das Spiel in ein, zwei Sätzen, z. B. „Bau ein Snake-Spiel mit Weltraum-Thema und Punktezählung“. Genre und Thema genügen — um die Engine musst du dich nicht kümmern, die App wählt sie (Canvas2D für Klassiker, Phaser/Kaboom für Arcade und Plattformer, Three.js für 3D).
Film Movie StudioRendern
Fantasy Realm ConquestNeues Projekt
Skills
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Panoramic 360 fantasy sky plate, warm storybook clouds, soft golden hour light, gentle gradient from warm blue at top to peach and cream near horizon, fluffy cumulus clouds,…
SkillsModelle
Tippe jederzeit /, um den Skill zu wechseln
Tipp: Beschreibe das Spiel, nicht den Code. Ein einfacher Klassiker erscheint auf einmal; ein komplexeres Spiel (Plattformer, 3D) wird in Teilen gebaut, und du siehst jedes System nacheinander erscheinen.
4
Die spielbare Karte auf der Leinwand entstehen sehen
Eine Spielkarte landet auf der Leinwand. Die App legt ein eigenständiges HTML/JS-Dokument hinein, das sofort in einem sandboxed iframe läuft. Bei einem komplexen Spiel siehst du benannte Teile auffüllen — Eingabe, Physik, Kollision, Rendering, Punkte.
Film Movie StudioRendern
3D Tactical Tower DefenseNeues Projekt
Dateien
frame_1frame_2frame_3
Bild hierher ziehen oder zum Hochladen klicken
reference.png
Chat
Panoramic wide fantasy game sky, warm golden late afternoon sunlight, soft billowing clouds lit from the side, smooth gradient from warm peach and gold at horizon up to deep…
/games → working…
Beschreibe, was du erstellen möchtest…
SkillsModelle
5
Das Spiel direkt in der Karte spielen
Klicke in die Karte und spiel sofort — die Steuerung funktioniert mit Tastatur und Touch/Maus, und du siehst einen Steuerungs-Hinweis auf dem Bildschirm, ein Punkte-HUD und einen Gewinn-/Verlust-Zustand mit Neustart-Knopf.
Film Movie StudioRendern
Fantasy RTS War GameNeues Projekt
Dateien
frame_1frame_2frame_3frame_4
60%
frame_01.png1024²
Wird generiert… 42%
RemixVariationen
frame_02.png1024²
Wird generiert… 68%
RemixVariationen
frame_03.png1024²
Wird generiert… 55%
RemixVariationen
frame_04.png1024²
Wird generiert… 80%
RemixVariationen
Chat
Seamless tileable top-down albedo texture of lush fantasy meadow grass, warm storybook hand-painted illustration style, soft varied greens with tiny wildflowers, clover and dirt…
/games → working…
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tipp: Zieh an der Ecke der Karte, um sie zu vergrößern — das Spiel passt sich der neuen Größe an, sodass du es auch in voller Größe testen kannst.
6
Per Chat Änderungen iterieren
Du willst Änderungen? Tippe sie in den Chat: „mach die Schlange schneller“, „füge ein zweites Level hinzu“, „stell die Farben auf Neon um“ oder „füge einen Aufsammel-Sound hinzu“. Die App bearbeitet das Spiel und die Karte aktualisiert sich. Iteriere in ein paar gezielten Durchgängen.
Film Movie StudioRendern
Colorful Kids Quiz GameNeues Projekt
Skills
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Majestic climactic shot: the fully revealed colossal whale creature — no longer disguised, its body flowing with whale-like curves and broad fins, glowing bioluminescent cyan…
SkillsModelle
Tippe jederzeit /, um den Skill zu wechseln
7
(Optional) KI-Grafik oder -Ton hinzufügen
Für ein reicheres Aussehen bitte um eigene Grafik — z. B. „füge ein gezeichnetes Schiff und einen Weltraum-Hintergrund hinzu“. Die App fragt zuerst, ob du die sofortige code-gezeichnete Version oder eine KI-Art-Version willst (verbraucht Credits), und bettet die generierten Medien direkt ins HTML ein.
Film Movie StudioRendern
Battlecraft Fantasy RTSNeues Projekt
Dateien
frame_1frame_2frame_3frame_4frame_5frame_6
60%
frame_01.png1024²
Wird generiert… 42%
RemixVariationen
frame_02.png1024²
Wird generiert… 68%
RemixVariationen
frame_03.png1024²
Wird generiert… 55%
RemixVariationen
frame_04.png1024²
Wird generiert… 80%
RemixVariationen
frame_05.png1024²
Wird generiert… 35%
RemixVariationen
frame_06.png1024²
Wird generiert… 61%
RemixVariationen
Chat
Panoramic fantasy sky plate, warm storybook golden-hour, soft glowing clouds in peach and lavender, distant rolling mountain silhouettes, painterly hand-painted look, 360 horizon…
/games → working…
Beschreibe, was du erstellen möchtest…
SkillsModelle
Tipp: Für Arcade-, Puzzle- und Quizspiele genügen code-gezeichnete Formen, Verläufe und Web-Audio-Pieptöne — sie sind sofort da, gratis und halten das Spiel klein.
8
Das Spiel als .html-Datei exportieren (Rechtsklick)
Wenn es dir gefällt, mach einen Rechtsklick auf die Spielkarte und wähle Export (oder tippe „exportiere das Spiel“). Ein Speicherdialog öffnet sich, und die App exportiert eine einzige eigenständige .html-Datei mit allen Medien eingebettet.
Film Movie StudioRendern
Storybook Fantasy RTSNeues Projekt
Skills
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Panoramic fantasy storybook sky background, warm golden afternoon sunlight, soft painterly fluffy cumulus clouds, distant green rolling hills and forest silhouettes along the…
SkillsModelle
Tippe jederzeit /, um den Skill zu wechseln
Tipp: Der Export ist der letzte Schritt. Doppelklicke die entstandene .html in jedem Browser, schick sie jemandem oder lade sie ins Web — sie läuft ohne Internet und ohne die App.

Was Sie erhalten

Du hast ein fertiges, wirklich spielbares Spiel: Es entstand aus einem Satz, du hast es direkt in der Karte auf der Leinwand gespielt, per Chat abgestimmt und als eine eigenständige .html-Datei exportiert. Dasselbe Muster — /games wählen → Spiel beschreiben → in der Karte spielen → im Chat iterieren → exportieren — gilt für Arcade, Puzzle, Quiz, Plattformer und modernes 3D mit Three.js.

Profi-Tipps

Für 2D-Klassiker (Snake, Pong, 2048) bleibt die App bei abhängigkeitsfreiem Canvas2D — es lädt immer und schlägt nie fehl; für Arcade und Plattformer greift sie zu Phaser oder Kaboom und für 3D zu Three.js mit Rapier-Physik.
Bitte um kleine, konkrete Änderungen nacheinander („20 % schneller“, „füge ein Power-up hinzu“) — kurze Iterationen sind zuverlässiger als ein großer Umbau.
Die exportierte .html ist vollständig eigenständig (Medien als Daten-URIs eingebettet), du kannst sie also einfach verschicken oder ins Web laden, und sie läuft in jedem Browser, auch offline.

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

Baue ein spielbares Spiel auf der Leinwand: von der Idee zum .html-Export

Projekt im Workspace öffnen

Film Movie Studio

Den /games-Skill wählen

Spielidee in den Chat tippen

Die spielbare Karte auf der Leinwand entstehen sehen

Das Spiel direkt in der Karte spielen

Per Chat Änderungen iterieren

(Optional) KI-Grafik oder -Ton hinzufügen

Das Spiel als .html-Datei exportieren (Rechtsklick)

Dein erstes Projekt: vom Launchpad bis zum fertigen Export

Inszeniere ein Kurzdrama: von der Idee zu gerenderten Episoden

Produktfotos für den Onlineshop: Hauptbild, Hero, Detail und Lifestyle in Minuten