Créez un jeu jouable sur le canevas : de l'idée à l'export .html

Le skill /games est un développeur de jeux intégré à FilmMovie Studio : vous décrivez une idée de jeu et l'app la construit comme un document HTML/JS autonome qui s'exécute aussitôt dans une carte en bac à sable sur le canevas. Il fonctionne pour les jeux d'arcade (Snake, Pong, Breakout), les casse-tête (2048, memory, morpion), les quiz, les jeux de plateforme et de physique (Phaser, Kaboom, Matter.js), ainsi que pour la 3D moderne avec Three.js et la physique Rapier. Vous jouez au jeu directement dans la carte, l'affinez avec d'autres messages dans le chat, et quand il vous convient, vous l'exportez en fichier .html qui s'ouvre dans n'importe quel navigateur. Ce guide parcourt toute la boucle.

Ce dont vous aurez besoin

FilmMovie Studio installé (macOS ou Windows).
Au moins un fournisseur de génération configuré dans les Réglages (une clé kie.ai ou deAPI) — utile seulement pour les visuels ou l'audio IA ; les jeux dessinés en code fonctionnent sans.
Une idée de jeu — genre et thème, p. ex. « Snake sur le thème de l'espace ».

Étape par étape

1
Ouvrir un projet dans le Workspace
Lancez FilmMovie Studio, cliquez sur « Nouveau projet » dans le Launchpad, nommez-le (p. ex. « Mon jeu ») et validez. Le Workspace s'ouvre avec le canevas à gauche et le chat à droite.
Film Movie StudioRendu
Battlecraft Fantasy RTSNouveau projet
LaunchpadHubTous les projets
Récents
project 1project 2project 3
Réglages
Film Movie Studio
Une nouvelle façon de créer des médias avec l'IA
Décrivez ce que vous voulez créer…
SkillsModèles
Tapez / pour explorer les skills IA
Short DramaE-commerceMusic VideoGamesDocumentary
2
Choisir le skill /games
Dans le chat, cliquez sur l'icône de skill et choisissez /games (ou commencez votre message par /games). Cela indique à l'app que vous voulez créer un jeu jouable, pas une vidéo ni une image.
Film Movie StudioRendu
Storybook Fantasy RTSNouveau projet
Rechercher des skills…
TousWorkflowsRapide
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.
Astuce: Si vous omettez le genre et dites juste « fais-moi un jeu », l'app demande une fois le type (arcade / puzzle / quiz / plateforme). Quand vous nommez le genre, elle se lance aussitôt.
3
Taper votre idée de jeu dans le chat
Décrivez le jeu en une ou deux phrases, p. ex. « Fais un jeu Snake sur le thème de l'espace avec un score ». Le genre et le thème suffisent — ne vous souciez pas du moteur ; l'app le choisit (Canvas2D pour les classiques, Phaser/Kaboom pour l'arcade et la plateforme, Three.js pour la 3D).
Film Movie StudioRendu
Fantasy Realm ConquestNouveau projet
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,…
SkillsModèles
Tapez / à tout moment pour changer de skill
Astuce: Décrivez le jeu, pas le code. Un classique simple apparaît d'un coup ; un jeu plus complexe (plateforme, 3D) est construit par morceaux, et vous voyez chaque système se poser l'un après l'autre.
4
Voir la carte jouable apparaître sur le canevas
Une carte de jeu tombe sur le canevas. L'app y place un document HTML/JS autonome qui s'exécute aussitôt dans un iframe en bac à sable. Pour un jeu complexe, vous verrez se remplir des parties nommées — entrée, physique, collision, rendu, score.
Film Movie StudioRendu
3D Tactical Tower DefenseNouveau projet
Fichiers
frame_1frame_2frame_3
Glissez une image ici, ou cliquez pour téléverser
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…
Décrivez ce que vous voulez créer…
SkillsModèles
5
Jouer au jeu directement dans la carte
Cliquez dans la carte et jouez immédiatement — les commandes fonctionnent au clavier et au tactile/souris, et vous voyez une indication de commandes à l'écran, un HUD de score et un état victoire/défaite avec un bouton Recommencer.
Film Movie StudioRendu
Fantasy RTS War GameNouveau projet
Fichiers
frame_1frame_2frame_3frame_4
60%
frame_01.png1024²
Génération… 42%
RemixerVariantes
frame_02.png1024²
Génération… 68%
RemixerVariantes
frame_03.png1024²
Génération… 55%
RemixerVariantes
frame_04.png1024²
Génération… 80%
RemixerVariantes
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…
Décrivez ce que vous voulez créer…
SkillsModèles
Astuce: Tirez le coin de la carte pour l'agrandir — le jeu se réajuste à la nouvelle taille, pour le tester en plein écran aussi.
6
Itérer en discutant les changements
Des changements ? Tapez-les dans le chat : « accélère le serpent », « ajoute un deuxième niveau », « passe les couleurs en néon » ou « ajoute un son de ramassage ». L'app modifie le jeu et la carte se rafraîchit. Itérez en quelques passes ciblées.
Film Movie StudioRendu
Colorful Kids Quiz GameNouveau projet
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…
SkillsModèles
Tapez / à tout moment pour changer de skill
7
(Optionnel) Ajouter des visuels ou de l'audio IA
Pour un rendu plus riche, demandez des visuels personnalisés — p. ex. « ajoute un vaisseau dessiné et un fond spatial ». L'app demande d'abord si vous voulez la version dessinée en code (instantanée) ou une version IA (consomme des crédits), puis intègre les médias générés directement dans le HTML.
Film Movie StudioRendu
Battlecraft Fantasy RTSNouveau projet
Fichiers
frame_1frame_2frame_3frame_4frame_5frame_6
60%
frame_01.png1024²
Génération… 42%
RemixerVariantes
frame_02.png1024²
Génération… 68%
RemixerVariantes
frame_03.png1024²
Génération… 55%
RemixerVariantes
frame_04.png1024²
Génération… 80%
RemixerVariantes
frame_05.png1024²
Génération… 35%
RemixerVariantes
frame_06.png1024²
Génération… 61%
RemixerVariantes
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…
Décrivez ce que vous voulez créer…
SkillsModèles
Astuce: Pour l'arcade, le puzzle et le quiz, des formes dessinées en code, des dégradés et des bips Web Audio suffisent — instantanés, gratuits, et le jeu reste léger.
8
Exporter le jeu en fichier .html (clic droit)
Quand il vous convient, faites un clic droit sur la carte de jeu et choisissez exporter (ou tapez « exporte le jeu »). Une boîte de dialogue d'enregistrement s'ouvre et l'app exporte un seul fichier .html autonome avec tous les médias intégrés.
Film Movie StudioRendu
Storybook Fantasy RTSNouveau projet
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…
SkillsModèles
Tapez / à tout moment pour changer de skill
Astuce: L'export est l'étape terminale. Double-cliquez le .html obtenu dans n'importe quel navigateur, envoyez-le à quelqu'un ou mettez-le en ligne — il fonctionne sans internet et sans l'app.

Ce que vous obtenez

Vous avez un jeu fini, vraiment jouable : il est né d'une phrase, vous y avez joué directement dans la carte sur le canevas, l'avez réglé via le chat et exporté en un seul fichier .html autonome. Ce même schéma — choisir /games → décrire le jeu → jouer dans la carte → itérer dans le chat → exporter — s'applique à l'arcade, au puzzle, au quiz, à la plateforme et à la 3D moderne avec Three.js.

Conseils de pro

Pour les classiques 2D (Snake, Pong, 2048), l'app reste sur Canvas2D sans dépendance — il charge toujours et ne plante jamais ; pour l'arcade et la plateforme elle prend Phaser ou Kaboom, et pour la 3D Three.js avec la physique Rapier.
Demandez de petits changements précis un par un (« 20 % plus vite », « ajoute un power-up ») — les itérations courtes sont plus fiables qu'une grosse refonte.
Le .html exporté est entièrement autonome (médias intégrés en data-URI), vous pouvez donc simplement l'envoyer ou le mettre en ligne, et il se joue dans n'importe quel navigateur, même hors ligne.

Essayez par vous-même

FilmMovie Studio est une application de bureau qui vous accompagne de l'idée à l'export terminé. Téléchargez-la et commencez à créer.

Obtenir FilmMovie Studio

Créez un jeu jouable sur le canevas : de l'idée à l'export .html

Ouvrir un projet dans le Workspace

Film Movie Studio

Choisir le skill /games

Taper votre idée de jeu dans le chat

Voir la carte jouable apparaître sur le canevas

Jouer au jeu directement dans la carte

Itérer en discutant les changements

(Optionnel) Ajouter des visuels ou de l'audio IA

Exporter le jeu en fichier .html (clic droit)

Votre premier projet : du Launchpad à l'export final

Réalisez un court drame : de l'idée aux épisodes rendus

Photos produit e-commerce : principale, hero, détail et lifestyle en quelques minutes