Postavte hrateľnú hru na plátne: od nápadu po export .html

Zručnosť /games je v FilmMovie Studio vstavaný herný vývojár: opíšete nápad na hru a aplikácia ju postaví ako jeden samostatný dokument HTML/JS, ktorý sa spustí okamžite v sandboxe karty na plátne. Funguje pre arkády (Snake, Pong, Breakout), hlavolamy (2048, pexeso, piškvorky), kvízy, plošinovky a fyzikálne hry (Phaser, Kaboom, Matter.js) aj pre moderné 3D s Three.js a fyzikou Rapier. Hru hráte priamo v karte, vylepšujete ju ďalšími správami v chate a keď ste spokojní, exportujete ju ako súbor .html, ktorý sa otvorí v ľubovoľnom prehliadači. V tomto návode prejdeme celý okruh.

Čo budete potrebovať

Nainštalovaná aplikácia FilmMovie Studio (macOS alebo Windows).
Nastavený aspoň jeden poskytovateľ generovania v Nastaveniach (kľúč ku kie.ai alebo deAPI) — potrebný len ak chcete AI grafiku či zvuk; kód-kreslené hry fungujú aj bez neho.
Nápad na jednu hru — žáner aj téma, napr. „Snake s vesmírnou témou“.

Krok za krokom

1
Otvorte projekt v pracovnej ploche
Spustite FilmMovie Studio, v Launchpade kliknite na „Nový projekt“, pomenujte ho (napr. „Moja hra“) a potvrďte. Otvorí sa Workspace s plátnom vľavo a chatom vpravo.
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
LaunchpadHubVšetky projekty
Nedávne
project 1project 2project 3
Nastavenia
Film Movie Studio
Nový spôsob tvorby médií s AI
Opíšte, čo chcete vytvoriť…
ZručnostiModely
Napíšte / a preskúmajte zručnosti AI
Short DramaE-commerceMusic VideoGamesDocumentary
2
Vyberte zručnosť /games
V chate vyberte ikonu zručnosti a zvoľte /games (alebo napíšte /games na začiatok správy). Tým aplikácii poviete, že chcete postaviť hrateľnú hru, nie video ani obrázok.
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
Hľadať zručnosti…
VšetkyPostupyRýchle
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: Ak žáner vynecháte a napíšete len „sprav mi hru“, aplikácia sa raz spýta na typ (arkáda / hlavolam / kvíz / plošinovka). Keď žáner pomenujete, začne stavať hneď.
3
Napíšte nápad na hru do chatu
Opíšte hru jednou-dvoma vetami, napr. „Sprav hru Snake s vesmírnou témou a počítaním skóre“. Stačí žáner a téma — o engine sa nestarajte, aplikácia ho zvolí sama (Canvas2D pre klasiky, Phaser/Kaboom pre arkády a plošinovky, Three.js pre 3D).
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
Zručnosti
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Panoramatická široká fantasy herná obloha, teplé zlaté neskoré popoludňajšie slnečné svetlo, mäkké klubiace sa oblaky osvetlené zboku, plynulý prechod od teplej broskyňovej a zlatej pri horizonte nahor…
ZručnostiModely
Kedykoľvek napíšte / na prepnutie zručnosti
Tip: Opisujte hru, nie kód. Pri jednoduchej klasike vznikne hra naraz; pri zložitejšej (plošinovka, 3D) ju aplikácia stavia po častiach a vy sledujete, ako pribúdajú jednotlivé systémy.
4
Sledujte, ako sa hrateľná karta objaví na plátne
Na plátno padne herná karta. Aplikácia do nej vloží samostatný dokument HTML/JS, ktorý sa spustí okamžite v sandboxovanom iframe. Pri zložitej hre uvidíte, ako sa dopĺňajú pomenované časti — vstup, fyzika, kolízie, vykresľovanie, skóre.
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
Súbory
frame_1.pngframe_2.pngframe_3.png
Sem presuňte obrázok alebo kliknite na nahranie
reference.png
Chat
Panoramatická široká fantasy herná obloha, teplé zlaté neskoré popoludňajšie slnečné svetlo, mäkké klubiace sa oblaky osvetlené zboku, plynulý prechod od teplej broskyňovej a zlatej pri horizonte nahor…
/games → working…
Opíšte, čo chcete vytvoriť…
ZručnostiModely
5
Hrajte hru priamo v karte
Kliknite do karty a hru hneď hrajte — ovládanie funguje klávesnicou aj dotykom/myšou a na obrazovke vidíte nápovedu k ovládaniu, HUD so skóre a stav výhra/prehra s tlačidlom Reštart.
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
Súbory
frame_1.pngframe_2.pngframe_3.pngframe_4.png
60%
prompt
frame_01.png
Generujem… 42%
Remixovať
frame_02.png
Generujem… 68%
Remixovať
frame_03.png
Generujem… 55%
Remixovať
frame_04.png
Generujem… 80%
Remixovať
output
Chat
Panoramatická široká fantasy herná obloha, teplé zlaté neskoré popoludňajšie slnečné svetlo, mäkké klubiace sa oblaky osvetlené zboku, plynulý prechod od teplej broskyňovej a zlatej pri horizonte nahor…
/games → working…
Opíšte, čo chcete vytvoriť…
ZručnostiModely
Tip: Kartu môžete potiahnuť za roh a zväčšiť — hra sa sama prispôsobí novej veľkosti, takže si ju otestujete aj naplno.
6
Vylepšujte hru ďalšími správami
Chcete zmeny? Napíšte ich do chatu: „zrýchli hada“, „pridaj druhú úroveň“, „zmeň farby na neónové“ alebo „pridaj zvuk pri zbere“. Aplikácia hru upraví a karta sa obnoví. Iterujte v niekoľkých cielených krokoch.
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
Zručnosti
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Panoramatická široká fantasy herná obloha, teplé zlaté neskoré popoludňajšie slnečné svetlo, mäkké klubiace sa oblaky osvetlené zboku, plynulý prechod od teplej broskyňovej a zlatej pri horizonte nahor…
ZručnostiModely
Kedykoľvek napíšte / na prepnutie zručnosti
7
(Voliteľne) pridajte AI grafiku alebo zvuk
Ak chcete bohatší vzhľad, požiadajte o vlastnú grafiku — napr. „pridaj nakreslenú loď a vesmírne pozadie“. Aplikácia sa najprv spýta, či chcete okamžitú kód-kreslenú verziu, alebo AI-art verziu (spotrebuje kredity), a vygenerované médiá vloží priamo do HTML.
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
Súbory
frame_1.pngframe_2.pngframe_3.pngframe_4.pngframe_5.pngframe_6.png
60%
prompt
frame_01.png
Generujem… 42%
Remixovať
frame_02.png
Generujem… 68%
Remixovať
frame_03.png
Generujem… 55%
Remixovať
frame_04.png
Generujem… 80%
Remixovať
output
Chat
Panoramatická široká fantasy herná obloha, teplé zlaté neskoré popoludňajšie slnečné svetlo, mäkké klubiace sa oblaky osvetlené zboku, plynulý prechod od teplej broskyňovej a zlatej pri horizonte nahor…
/games → working…
Opíšte, čo chcete vytvoriť…
ZručnostiModely
Tip: Pre arkády, hlavolamy a kvízy stačia kód-kreslené tvary, prechody a pípanie cez Web Audio — sú okamžité, zadarmo a hra zostáva malá.
8
Exportujte hru ako súbor .html (pravým tlačidlom)
Keď ste spokojní, kliknite pravým tlačidlom na hernú kartu a zvoľte export (alebo napíšte „exportuj hru“). Otvorí sa dialóg na uloženie a aplikácia vyexportuje jeden samostatný súbor .html so všetkými médiami vloženými v ňom.
Film Movie StudioRender
3D Tactical Tower DefenseNový projekt
Zručnosti
/games
/short-drama
/image-creator
/audio-studio
/app-builder
/games Panoramatická široká fantasy herná obloha, teplé zlaté neskoré popoludňajšie slnečné svetlo, mäkké klubiace sa oblaky osvetlené zboku, plynulý prechod od teplej broskyňovej a zlatej pri horizonte nahor…
ZručnostiModely
Kedykoľvek napíšte / na prepnutie zručnosti
Tip: Export je terminálny krok. Výsledný .html otvoríte dvojklikom v ľubovoľnom prehliadači, pošlete ho ďalej alebo nahráte na web — beží bez internetu aj bez aplikácie.

Čo dostanete

Máte hotovú, skutočne hrateľnú hru: vznikla z jednej vety, hrali ste ju priamo v karte na plátne, vyladili ste ju cez chat a vyexportovali ako jeden samostatný súbor .html. Ten istý vzorec — vyberte /games → opíšte hru → hrajte v karte → iterujte v chate → exportujte — platí pre arkády, hlavolamy, kvízy, plošinovky aj moderné 3D s Three.js.

Tipy od profíkov

Pre 2D klasiky (Snake, Pong, 2048) zostáva aplikácia pri Canvas2D bez závislostí — vždy sa načíta a nikdy nezlyhá; pre arkády a plošinovky siahne po Phaser či Kaboom a pre 3D po Three.js s fyzikou Rapier.
Žiadajte si len malé, konkrétne zmeny naraz („zrýchli o 20 %“, „pridaj power-up“) — krátke iterácie sú spoľahlivejšie než jedna veľká prestavba.
Exportovaný .html je úplne samostatný (médiá vložené ako data-URI), takže ho stačí poslať alebo nahrať na web a hrá sa v ľubovoľnom prehliadači aj offline.

Vyskúšajte to sami

FilmMovie Studio je desktopová aplikácia, ktorá vás prevedie od nápadu až po hotový export. Stiahnite si ju a začnite tvoriť.

Začať s FilmMovie Studio

Postavte hrateľnú hru na plátne: od nápadu po export .html

Otvorte projekt v pracovnej ploche

Film Movie Studio

Vyberte zručnosť /games

Napíšte nápad na hru do chatu

Sledujte, ako sa hrateľná karta objaví na plátne

Hrajte hru priamo v karte

Vylepšujte hru ďalšími správami

(Voliteľne) pridajte AI grafiku alebo zvuk

Exportujte hru ako súbor .html (pravým tlačidlom)

Váš prvý projekt: od Launchpadu po hotový export

Natočte krátku drámu: od nápadu po vyrenderované epizódy

Produktové fotky pre e-shop: hlavná, hero, detail aj lifestyle za pár minút