FilmoTvor.AI
Back to tutorials

Games

Build a playable game on the canvas: from idea to .html export

7 min readIntermediate/games
Film Movie StudioRender
Colorful Kids Quiz GameNew project
60%
frame_01.png1024²
RemixVariations
frame_02.png1024²
RemixVariations
frame_03.png1024²
RemixVariations

The /games skill is a built-in game developer inside FilmMovie Studio: you describe a game idea and the app builds it as one self-contained HTML/JS document that runs instantly in a sandboxed card on the canvas. It works for arcade games (Snake, Pong, Breakout), puzzles (2048, memory match, tic-tac-toe), quizzes, platformers and physics games (Phaser, Kaboom, Matter.js), and for modern 3D with Three.js and Rapier physics. You play the game right in the card, refine it with more chat messages, and when you're happy you export it as a .html file that opens in any browser. This guide walks the whole loop.

What you'll need

  • FilmMovie Studio installed (macOS or Windows).
  • At least one generation provider configured in Settings (a kie.ai or deAPI key) — only needed for AI art or audio; code-drawn games work without it.
  • An idea for one game — genre and theme, e.g. "Snake with a space theme".

Step by step

  1. 1

    Open a project in the Workspace

    Launch FilmMovie Studio, click "New project" in the Launchpad, name it (e.g. "My game") and confirm. The Workspace opens with the canvas on the left and chat on the right.

    Film Movie StudioRender
    Battlecraft Fantasy RTSNew project

    Film Movie Studio

    A new way to create media with AI

    Describe what you want to create…

    SkillsModels

    Type / to explore AI skills

    Short DramaE-commerceMusic VideoGamesDocumentary
  2. 2

    Pick the /games skill

    In chat, click the skill icon and choose /games (or start your message with /games). This tells the app you want to build a playable game, not a video or an image.

    Film Movie StudioRender
    Storybook Fantasy RTSNew project
    Search skills…
    AllWorkflowsQuick
    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.
    Tip: If you leave out the genre and just say "make me a game", the app asks once for the type (arcade / puzzle / quiz / platformer). When you name the genre, it starts building right away.
  3. 3

    Type your game idea into chat

    Describe the game in a sentence or two, e.g. "Make a Snake game with a space theme and score tracking". Genre and theme are enough — don't worry about the engine; the app chooses it (Canvas2D for classics, Phaser/Kaboom for arcade and platformers, Three.js for 3D).

    Film Movie StudioRender
    Fantasy Realm ConquestNew project
    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,…

    SkillsModels

    Type / to switch skills anytime

    Tip: Describe the game, not the code. A simple classic appears in one go; a more complex one (platformer, 3D) is built in pieces, and you watch each system land one at a time.
  4. 4

    Watch the playable card appear on the canvas

    A game card drops onto the canvas. The app puts a self-contained HTML/JS document inside it that runs instantly in a sandboxed iframe. For a complex game you'll see labeled parts fill in — input, physics, collision, rendering, score.

    Film Movie StudioRender
    3D Tactical Tower DefenseNew project

    Drag an image here, or click to upload

    reference.png
  5. 5

    Play the game right in the card

    Click into the card and play immediately — controls work with keyboard and touch/mouse, and you'll see an on-screen control hint, a score HUD, and a win/lose state with a Restart button.

    Film Movie StudioRender
    Fantasy RTS War GameNew project
    60%
    frame_01.png1024²
    Generating… 42%
    RemixVariations
    frame_02.png1024²
    Generating… 68%
    RemixVariations
    frame_03.png1024²
    Generating… 55%
    RemixVariations
    frame_04.png1024²
    Generating… 80%
    RemixVariations
    Tip: Drag the card's corner to make it bigger — the game refits to the new size, so you can test it full-bleed too.
  6. 6

    Iterate by chatting changes

    Want changes? Type them into chat: "make the snake faster", "add a second level", "switch the colors to neon" or "add a pickup sound". The app edits the game and the card refreshes. Iterate in a few focused passes.

    Film Movie StudioRender
    Colorful Kids Quiz GameNew project
    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…

    SkillsModels

    Type / to switch skills anytime

  7. 7

    (Optional) Add AI art or audio

    For a richer look, ask for custom art — e.g. "add a drawn ship and a space background". The app first asks whether you want the instant code-drawn version or an AI-art version (spends credits), then embeds the generated media straight into the HTML.

    Film Movie StudioRender
    Battlecraft Fantasy RTSNew project
    60%
    frame_01.png1024²
    Generating… 42%
    RemixVariations
    frame_02.png1024²
    Generating… 68%
    RemixVariations
    frame_03.png1024²
    Generating… 55%
    RemixVariations
    frame_04.png1024²
    Generating… 80%
    RemixVariations
    frame_05.png1024²
    Generating… 35%
    RemixVariations
    frame_06.png1024²
    Generating… 61%
    RemixVariations
    Tip: For arcade, puzzle and quiz games, code-drawn shapes, gradients and Web Audio beeps are enough — they're instant, free, and keep the game tiny.
  8. 8

    Export the game as a .html file (right-click)

    When you're happy, right-click the game card and choose export (or type "export the game"). A save dialog opens and the app exports a single self-contained .html file with all media inlined into it.

    Film Movie StudioRender
    Storybook Fantasy RTSNew project
    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…

    SkillsModels

    Type / to switch skills anytime

    Tip: Export is the terminal step. Double-click the resulting .html in any browser, send it to someone, or upload it to the web — it runs with no internet and without the app.

What you get

You have a finished, genuinely playable game: it came from one sentence, you played it right in the card on the canvas, tuned it through chat and exported it as one self-contained .html file. This same pattern — pick /games → describe the game → play in the card → iterate in chat → export — applies to arcade, puzzle, quiz, platformer and modern 3D with Three.js.

Pro tips

  • For 2D classics (Snake, Pong, 2048) the app stays on dependency-free Canvas2D — it always loads and never fails; for arcade and platformers it reaches for Phaser or Kaboom, and for 3D for Three.js with Rapier physics.
  • Ask for small, specific changes one at a time ("20% faster", "add a power-up") — short iterations are more reliable than one big rebuild.
  • The exported .html is fully self-contained (media inlined as data-URIs), so you can just send it or upload it to the web and it plays in any browser, even offline.

Try it yourself

FilmMovie Studio is a desktop app that walks you from idea to finished export. Download it and start creating.

Get FilmMovie Studio

More tutorials

Getting started

Your first project: from the Launchpad to a finished export

Video

Direct a short drama: from idea to rendered episodes

E-commerce

E-commerce product shots: main, hero, detail and lifestyle in minutes