Ceci est un guide avancé. Nous montrons comment partir d'une idée simple ("un runner sans fin qui esquive des obstacles néon") pour construire un vrai jeu 3D qui tourne directement sur le canevas de FilmMovie Studio dans un iframe en bac à sable. Le jeu est créé sous forme d'un fichier HTML autonome : Three.js gère la scène, la caméra et le rendu, le moteur physique Rapier pilote les mouvements et les collisions, et le post-traitement (bloom, mappage tonal) peaufine le rendu. L'essentiel est le rythme — l'IA n'envoie pas tout le jeu d'un coup ; elle l'assemble par petits morceaux, si bien que vous voyez le monde grandir et chaque tour reste rapide. À la fin, vous avez un jeu jouable que vous téléchargez en un seul .html et ouvrez dans n'importe quel navigateur sans installation.
Ce dont vous aurez besoin
- Le guide « Pour commencer » terminé — vous savez créer un projet et utiliser le canevas et le chat.
- Un fournisseur de génération configuré dans les Réglages (pour d'éventuelles textures, un skybox et des sons via generate_image / generate_audio).
- Une idée claire pour une boucle de jeu — un verbe, un objectif et une condition d'échec (p. ex. « esquiver les obstacles, ramasser des cristaux, une collision met fin à la partie »).
Étape par étape
- 1
Lancer le skill /threejs-game
Dans votre projet, ouvrez le chat et choisissez l'icône du skill, ou tapez simplement /threejs-game. Ce skill est pour la 3D, Three.js et les jeux haut de gamme — pour les classiques 2D (Snake, Pong, un quiz) utilisez plutôt /games. Ajoutez votre idée juste après la commande.
Film Movie StudioRenduFantasy RTS War GameNouveau projetRechercher des skills…TousWorkflowsRapidevideoShort 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.Astuce: Il est utile de préciser si vous visez le bureau, le tactile ou les deux — cela façonne les commandes et le HUD. - 2
Décrire la boucle de jeu en une phrase
Dans le chat, écrivez la boucle comme verbe + objectif + pression + récompense + échec, p. ex. « Runner sans fin : courir vers l'avant, esquiver des obstacles néon, ramasser des cristaux pour des points, une collision met fin à la partie et relance ». Si la demande est vague, l'IA pose une question sur le genre, la direction artistique et l'appareil cible — répondez et elle continue à construire.
Film Movie StudioRenduFantasy RTS War GameNouveau projetSkills/threejs-game/short-drama/image-creator/audio-studio/app-builder/threejs-game Texture albédo en vue de dessus, raccordable sans couture, d'une herbe de prairie fantasy luxuriante, style illustration peinte à la main façon livre d'histoires, verts doux et variés parsemés de minuscules fleurs sauvages,…
SkillsModèlesTapez / à tout moment pour changer de skill
Astuce: Décrivez l'intention, pas le code. Le skill lit lui-même le déroulé et choisit la géométrie, la physique et les effets. - 3
Voir apparaître la carte de jeu (le shell)
La première étape de l'IA (create_game) ouvre une carte de jeu sur le canevas avec seulement un « shell » — le squelette : un canevas plein écran, le HUD, un overlay de démarrage et le renderer/scène/caméra Three.js. Three.js et Rapier se chargent depuis un CDN via un importmap. Le shell est volontairement petit pour que la carte ne le rejette pas.
Film Movie StudioRenduFantasy RTS War GameNouveau projetFichiers
frame_1.png
frame_2.png
frame_3.png
frame_4.png
frame_5.png
frame_6.png60%promptframe_01.pngRemixerframe_02.pngRemixerframe_03.pngRemixerframe_04.pngGénération… 80%Remixeroutput - 4
Laisser le jeu grandir morceau par morceau (append_game_code)
L'IA appelle maintenant append_game_code de nombreuses fois — un système par tour : entrée du joueur, un corps et un collisionneur Rapier, le générateur d'obstacles, l'étape update(dt), le constructeur de monde, les matériaux et les VFX. Un jeu 3D haut de gamme en compte facilement 15 à 25. La carte prend vie après chaque morceau, sous vos yeux.
Film Movie StudioRenduFantasy RTS War GameNouveau projetFichiersframe_1.pngframe_2.pngframe_3.png60%promptframe_01.pngRemixerframe_02.pngRemixerframe_03.pngGénération… 55%RemixeroutputAstuce: Ce rythme est voulu, pas de la lenteur — chaque tour est rapide et vous voyez le monde s'accumuler. - 5
Y jouer en ligne dans la carte
Cliquez sur l'overlay de démarrage dans la carte et jouez au jeu en ligne dans l'iframe en bac à sable — clavier et souris sur le bureau, ou tactile sur mobile. La physique Rapier gère les sauts, les collisions et les chutes ; après une défaite, le jeu doit redémarrer proprement (aucune entité, minuterie ni écouteur résiduels).
Film Movie StudioRenduFantasy RTS War GameNouveau projetFichiersframe_1.pngframe_2.pngframe_3.pngframe_4.png60%promptframe_01.pngGénération… 42%Remixerframe_02.pngGénération… 68%Remixerframe_03.pngGénération… 55%Remixerframe_04.pngGénération… 80%Remixeroutput - 6
Ajouter des textures, un skybox et des sons
Pour un rendu haut de gamme, faites générer par l'IA au moins une texture héroïque ou un skybox (generate_image) et les SFX essentiels — saut, ramassage, collision — plus une nappe musicale (generate_audio). Le chemin du fichier est inséré automatiquement directement dans le HTML du jeu, donc une image devient une vraie texture et un son un vrai SFX, sans étape d'upload.
Film Movie StudioRenduFantasy RTS War GameNouveau projetFichiersframe_1.pngframe_2.pngframe_3.pngframe_4.png
frame_5.pngGlissez une image ici, ou cliquez pour téléverser
reference.pngAstuce: Générez chaque asset une seule fois — l'IA suit ce qui existe déjà sur le canevas et ne le répète pas. - 7
Itérer via le chat
Vous affinez le jeu en langage clair dans le chat : « accélère les obstacles », « ajoute un deuxième type d'obstacle avec un télégraphe », « réduis le bloom », « corrige le saut, il flotte trop ». L'IA complète via append_game_code ou réécrit avec update_game, et vous rejouez aussitôt. Changez une chose et testez.
Film Movie StudioRenduFantasy RTS War GameNouveau projetSkills/threejs-game/short-drama/image-creator/audio-studio/app-builder/threejs-game Texture albédo en vue de dessus, raccordable sans couture, d'une herbe de prairie fantasy luxuriante, style illustration peinte à la main façon livre d'histoires, verts doux et variés parsemés de minuscules fleurs sauvages,…
SkillsModèlesTapez / à tout moment pour changer de skill
- 8
Exporter le jeu en un seul .html
Quand cela vous convient, demandez l'export — l'IA appelle export_game_html et vous téléchargez un fichier .html autonome. Il s'ouvre dans n'importe quel navigateur sans installation et sans serveur, prêt à partager ou à mettre en ligne. C'est l'étape terminale.
Film Movie StudioRenduFantasy RTS War GameNouveau projetFichiersframe_1.pngframe_2.pngframe_3.pngGlissez une image ici, ou cliquez pour téléverser
reference.pngAstuce: L'export est la dernière étape. Pour d'autres changements, ajustez le jeu dans le chat et exportez de nouveau.
Ce que vous obtenez
À partir d'une seule phrase, vous avez un jeu 3D jouable qui tournait directement sur le canevas : une scène Three.js, des mouvements et des collisions via la physique Rapier, un rendu peaufiné par du post-traitement et un HUD avec des états de pause, d'échec et de redémarrage. Après itération dans le chat, vous l'avez exporté en un seul .html autonome qui s'ouvre dans n'importe quel navigateur sans installation et sans serveur — prêt à partager ou à mettre en ligne.
Conseils de pro
- Pour les classiques 2D (Snake, Pong, 2048, un quiz) utilisez /games — /threejs-game paie toujours le coût d'une pipeline WebGL complète et convient à la 3D et aux jeux haut de gamme.
- N'attendez pas de modèles 3D tout faits : les formes sont de la géométrie Three.js procédurale ; generate_image fournit textures, skyboxes, décalques et UI — pas de personnages riggés.
- Après chaque changement, jouez une courte boucle et ajustez un seul axe à la fois (vitesse, saut, nombre d'obstacles) pour voir exactement ce qui a aidé.
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