Crea un gioco giocabile sulla tela: dall'idea all'esportazione .html

Lo skill /games è uno sviluppatore di giochi integrato in FilmMovie Studio: descrivi un'idea di gioco e l'app la costruisce come un documento HTML/JS autonomo che parte all'istante in una scheda sandbox sulla tela. Funziona per giochi arcade (Snake, Pong, Breakout), rompicapi (2048, memory, tris), quiz, platform e giochi di fisica (Phaser, Kaboom, Matter.js), e per il 3D moderno con Three.js e la fisica Rapier. Giochi al gioco direttamente nella scheda, lo rifinisci con altri messaggi in chat e, quando sei soddisfatto, lo esporti come file .html che si apre in qualsiasi browser. Questa guida percorre l'intero giro.

Cosa ti serve

FilmMovie Studio installato (macOS o Windows).
Almeno un fornitore di generazione configurato nelle Impostazioni (una chiave kie.ai o deAPI) — serve solo per la grafica o l'audio IA; i giochi disegnati in codice funzionano anche senza.
Un'idea per un gioco — genere e tema, es. «Snake a tema spaziale».

Passo dopo passo

1
Apri un progetto nel Workspace
Avvia FilmMovie Studio, clicca su «Nuovo progetto» nel Launchpad, dagli un nome (es. «Il mio gioco») e conferma. Si apre il Workspace con la tela a sinistra e la chat a destra.
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
LaunchpadHubTutti i progetti
Recenti
project 1project 2project 3
Impostazioni
Film Movie Studio
Un nuovo modo di creare contenuti con l'IA
Descrivi cosa vuoi creare…
SkillModelli
Digita / per esplorare gli skill IA
Short DramaE-commerceMusic VideoGamesDocumentary
2
Scegli lo skill /games
In chat clicca l'icona dello skill e scegli /games (oppure inizia il messaggio con /games). Così dici all'app che vuoi costruire un gioco giocabile, non un video o un'immagine.
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
Cerca skill…
TuttiWorkflowRapidi
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.
Consiglio: Se ometti il genere e dici solo «fammi un gioco», l'app chiede una volta il tipo (arcade / puzzle / quiz / platform). Quando nomini il genere, parte subito.
3
Scrivi la tua idea di gioco in chat
Descrivi il gioco in una o due frasi, es. «Fai un gioco Snake a tema spaziale con conteggio del punteggio». Bastano genere e tema — non preoccuparti del motore; lo sceglie l'app (Canvas2D per i classici, Phaser/Kaboom per arcade e platform, Three.js per il 3D).
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
Skill
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Cielo panoramico ampio di gioco fantasy, calda luce dorata del tardo pomeriggio, morbide nuvole gonfie illuminate di lato, sfumatura morbida dal pesca caldo e oro all'orizzonte verso l'alto…
SkillModelli
Digita / in qualsiasi momento per cambiare skill
Consiglio: Descrivi il gioco, non il codice. Un classico semplice compare in un colpo solo; uno più complesso (platform, 3D) viene costruito a pezzi, e vedi ogni sistema comparire uno alla volta.
4
Guarda la scheda giocabile comparire sulla tela
Una scheda di gioco cade sulla tela. L'app vi inserisce un documento HTML/JS autonomo che parte all'istante in un iframe sandbox. Per un gioco complesso vedrai riempirsi parti etichettate — input, fisica, collisione, rendering, punteggio.
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
File
frame_1.pngframe_2.pngframe_3.png
Trascina un'immagine qui, o clicca per caricare
reference.png
Chat
Cielo panoramico ampio di gioco fantasy, calda luce dorata del tardo pomeriggio, morbide nuvole gonfie illuminate di lato, sfumatura morbida dal pesca caldo e oro all'orizzonte verso l'alto…
/games → working…
Descrivi cosa vuoi creare…
SkillModelli
5
Gioca al gioco direttamente nella scheda
Clicca nella scheda e gioca subito — i comandi funzionano con tastiera e touch/mouse, e vedi un suggerimento sui comandi a schermo, un HUD del punteggio e uno stato vittoria/sconfitta con un pulsante Riavvia.
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
File
frame_1.pngframe_2.pngframe_3.pngframe_4.png
60%
prompt
frame_01.png
Generazione… 42%
Remix
frame_02.png
Generazione… 68%
Remix
frame_03.png
Generazione… 55%
Remix
frame_04.png
Generazione… 80%
Remix
output
Chat
Cielo panoramico ampio di gioco fantasy, calda luce dorata del tardo pomeriggio, morbide nuvole gonfie illuminate di lato, sfumatura morbida dal pesca caldo e oro all'orizzonte verso l'alto…
/games → working…
Descrivi cosa vuoi creare…
SkillModelli
Consiglio: Trascina l'angolo della scheda per ingrandirla — il gioco si riadatta alla nuova dimensione, così lo provi anche a tutto schermo.
6
Itera chattando le modifiche
Vuoi modifiche? Scrivile in chat: «velocizza il serpente», «aggiungi un secondo livello», «cambia i colori in neon» o «aggiungi un suono di raccolta». L'app modifica il gioco e la scheda si aggiorna. Itera in pochi passaggi mirati.
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
Skill
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Cielo panoramico ampio di gioco fantasy, calda luce dorata del tardo pomeriggio, morbide nuvole gonfie illuminate di lato, sfumatura morbida dal pesca caldo e oro all'orizzonte verso l'alto…
SkillModelli
Digita / in qualsiasi momento per cambiare skill
7
(Opzionale) Aggiungi grafica o audio IA
Per un aspetto più ricco, chiedi grafica personalizzata — es. «aggiungi una nave disegnata e uno sfondo spaziale». L'app chiede prima se vuoi la versione disegnata in codice (istantanea) o una versione IA (consuma crediti), poi incorpora i media generati direttamente nell'HTML.
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
File
frame_1.pngframe_2.pngframe_3.pngframe_4.pngframe_5.pngframe_6.png
60%
prompt
frame_01.png
Generazione… 42%
Remix
frame_02.png
Generazione… 68%
Remix
frame_03.png
Generazione… 55%
Remix
frame_04.png
Generazione… 80%
Remix
output
Chat
Cielo panoramico ampio di gioco fantasy, calda luce dorata del tardo pomeriggio, morbide nuvole gonfie illuminate di lato, sfumatura morbida dal pesca caldo e oro all'orizzonte verso l'alto…
/games → working…
Descrivi cosa vuoi creare…
SkillModelli
Consiglio: Per arcade, puzzle e quiz bastano forme disegnate in codice, gradienti e bip via Web Audio — istantanei, gratuiti e mantengono il gioco leggero.
8
Esporta il gioco come file .html (clic destro)
Quando sei soddisfatto, fai clic destro sulla scheda di gioco e scegli esporta (o scrivi «esporta il gioco»). Si apre una finestra di salvataggio e l'app esporta un unico file .html autonomo con tutti i media incorporati.
Film Movie StudioRender
3D Tactical Tower DefenseNuovo progetto
Skill
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Cielo panoramico ampio di gioco fantasy, calda luce dorata del tardo pomeriggio, morbide nuvole gonfie illuminate di lato, sfumatura morbida dal pesca caldo e oro all'orizzonte verso l'alto…
SkillModelli
Digita / in qualsiasi momento per cambiare skill
Consiglio: L'esportazione è il passo finale. Fai doppio clic sul .html ottenuto in qualsiasi browser, invialo a qualcuno o caricalo sul web — funziona senza internet e senza l'app.

Cosa ottieni

Hai un gioco finito e davvero giocabile: è nato da una frase, ci hai giocato direttamente nella scheda sulla tela, l'hai messo a punto via chat e l'hai esportato come un unico file .html autonomo. Questo stesso schema — scegli /games → descrivi il gioco → gioca nella scheda → itera in chat → esporta — vale per arcade, puzzle, quiz, platform e 3D moderno con Three.js.

Consigli da esperti

Per i classici 2D (Snake, Pong, 2048) l'app resta su Canvas2D senza dipendenze — si carica sempre e non fallisce mai; per arcade e platform usa Phaser o Kaboom, e per il 3D Three.js con la fisica Rapier.
Chiedi modifiche piccole e precise una alla volta («20% più veloce», «aggiungi un power-up») — iterazioni brevi sono più affidabili di una grande ricostruzione.
Il .html esportato è completamente autonomo (media incorporati come data-URI), quindi puoi semplicemente inviarlo o caricarlo sul web e si gioca in qualsiasi browser, anche offline.

Provalo tu stesso

FilmMovie Studio è un'app desktop che ti accompagna dall'idea all'esportazione finita. Scaricala e inizia a creare.

Ottieni FilmMovie Studio

Crea un gioco giocabile sulla tela: dall'idea all'esportazione .html

Apri un progetto nel Workspace

Film Movie Studio

Scegli lo skill /games

Scrivi la tua idea di gioco in chat

Guarda la scheda giocabile comparire sulla tela

Gioca al gioco direttamente nella scheda

Itera chattando le modifiche

(Opzionale) Aggiungi grafica o audio IA

Esporta il gioco come file .html (clic destro)

Il tuo primo progetto: dal Launchpad all'esportazione finale

Dirigi un cortometraggio: dall'idea agli episodi renderizzati

Foto prodotto per e-commerce: principale, hero, dettaglio e lifestyle in pochi minuti