FilmoTvor.AI
Späť na návody

Hry

Postavte 3D hru v prehliadači: Three.js, Rapier fyzika a export do jedného HTML

8 min čítaniaExpert/threejs-game
Film Movie StudioRender
Fantasy RTS War GameNový projekt
60%
prompt
frame_01.png
Remixovať
frame_02.png
Remixovať
frame_03.png
Generujem… 55%
Remixovať
output

Toto je pokročilý návod. Ukážeme si, ako z jednoduchého nápadu („nekonečný bežec medzi neónovými prekážkami“) postaviť skutočnú 3D hru, ktorá beží priamo na plátne FilmMovie Studio v izolovanom iframe. Hra vzniká ako jeden samostatný HTML súbor: scénu, kameru a render rieši Three.js, pohyb a kolízie poháňa fyzikálny engine Rapier a vzhľad dolaďuje post-processing (bloom, tónové mapovanie). Kľúčové je tempo — AI neposiela celú hru naraz, ale skladá ju po malých kúskoch, takže sledujete, ako svet rastie, a každé kolo zostáva rýchle. Na konci máte hrateľnú hru, ktorú stiahnete ako jediný .html a otvoríte v ktoromkoľvek prehliadači bez inštalácie.

Čo budete potrebovať

  • Dokončený návod „Začíname“ — viete vytvoriť projekt a pracovať s plátnom a chatom.
  • Nastavený poskytovateľ generovania v Nastaveniach (pre prípadné textúry, skybox a zvuky cez generate_image / generate_audio).
  • Jasný nápad na jednu hernú slučku — sloveso, cieľ a podmienka prehry (napr. „vyhýbaj sa prekážkam, zbieraj kryštály, náraz = koniec“).

Krok za krokom

  1. 1

    Spustite zručnosť /threejs-game

    V projekte otvorte chat a vyberte ikonu zručnosti, alebo rovno napíšte /threejs-game. Táto zručnosť je pre 3D, Three.js a prémiové hry — pre 2D klasiky (Snake, Pong, kvíz) použite radšej /games. Hneď za príkaz pripíšte svoj nápad.

    Film Movie StudioRender
    Fantasy RTS War GameNový 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: Pri zadaní je dobré spomenúť, či cielite na desktop, dotyk, alebo oboje — ovplyvní to ovládanie aj HUD.
  2. 2

    Opíšte hernú slučku jednou vetou

    Do chatu napíšte slučku ako sloveso + cieľ + tlak + odmena + prehra, napr. „Nekonečný bežec: utekaj dopredu, uhýbaj neónovým prekážkam, zbieraj kryštály za body, náraz = koniec a reštart“. Ak je zadanie nejasné, AI sa raz spýta na žáner, art direction a cieľové zariadenie — odpovedzte a buduje ďalej.

    Film Movie StudioRender
    Fantasy RTS War GameNový projekt
    Zručnosti
    /threejs-game
    /short-drama
    /image-creator
    /audio-studio
    /app-builder

    /threejs-game Bezšvíkovo dlaždicovateľná albedo textúra zhora nadol bujnej fantasy lúčnej trávy, teplý ručne maľovaný ilustračný štýl ako z rozprávkovej knihy, mäkké rozmanité zelené tóny s drobnými poľnými kvetmi,…

    ZručnostiModely

    Kedykoľvek napíšte / na prepnutie zručnosti

    Tip: Opisujte zámer, nie kód. Zručnosť si sama prečíta postup a vyberie geometriu, fyziku aj efekty.
  3. 3

    Sledujte, ako vznikne herná karta (shell)

    AI prvým krokom (create_game) otvorí na plátne hernú kartu len so „shellom“ — kostrou: full-screen plátno, HUD, úvodný overlay a render/scéna/kamera Three.js. Three.js a Rapier sa načítajú z CDN cez importmap. Shell sa zámerne posiela malý, aby ho karta neodmietla.

    Film Movie StudioRender
    Fantasy RTS War GameNový projekt
    60%
    prompt
    frame_01.png
    Remixovať
    frame_02.png
    Remixovať
    frame_03.png
    Remixovať
    frame_04.png
    Generujem… 80%
    Remixovať
    output
  4. 4

    Nechajte hru rásť po kúskoch (append_game_code)

    Teraz AI volá append_game_code mnohokrát — vždy jeden systém za kolo: vstup hráča, telo a kolízny tvar v Rapier, spawner prekážok, krok update(dt), staviteľ sveta, materiály a VFX. Prémiová 3D hra ich má kľudne 15–25. Karta sa po každom kúsku oživuje priamo pred vami.

    Film Movie StudioRender
    Fantasy RTS War GameNový projekt
    60%
    prompt
    frame_01.png
    Remixovať
    frame_02.png
    Remixovať
    frame_03.png
    Generujem… 55%
    Remixovať
    output
    Tip: Toto tempo je zámer, nie pomalosť — každé kolo je rýchle a vy vidíte, ako svet pribúda.
  5. 5

    Hrajte priamo v karte

    Kliknite na úvodný overlay v karte a hrajte hru inline v izolovanom iframe — klávesnicou a myšou na desktope alebo dotykom na mobile. Fyzika Rapier rieši skoky, nárazy a pády; po prehre sa hra musí čisto reštartovať (žiadne staré objekty, časovače ani poslucháče).

    Film Movie StudioRender
    Fantasy RTS War GameNový projekt
    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
  6. 6

    Pridajte textúry, skybox a zvuky

    Pre prémiový vzhľad nechajte AI vygenerovať aspoň jednu hrdinskú textúru či skybox (generate_image) a základné SFX — skok, zber, náraz — a hudobný podklad (generate_audio). Cesta k súboru sa automaticky vloží priamo do HTML hry, takže z obrázka sa stane reálna textúra a zo zvuku reálny SFX bez nahrávania.

    Film Movie StudioRender
    Fantasy RTS War GameNový projekt

    Sem presuňte obrázok alebo kliknite na nahranie

    reference.png
    Tip: Každý asset generujte len raz — AI si sleduje, čo už na plátne existuje, a neopakuje to.
  7. 7

    Ladite hru cez chat

    Hru vylepšujete obyčajnou rečou v chate: „zrýchli prekážky“, „pridaj druhý typ prekážky s telegrafom“, „stlm bloom“, „uprav skok, je príliš plávajúci“. AI cez append_game_code dopĺňa alebo cez update_game prepíše hru a vy hneď znova hráte. Meňte vždy jednu vec a otestujte.

    Film Movie StudioRender
    Fantasy RTS War GameNový projekt
    Zručnosti
    /threejs-game
    /short-drama
    /image-creator
    /audio-studio
    /app-builder

    /threejs-game Bezšvíkovo dlaždicovateľná albedo textúra zhora nadol bujnej fantasy lúčnej trávy, teplý ručne maľovaný ilustračný štýl ako z rozprávkovej knihy, mäkké rozmanité zelené tóny s drobnými poľnými kvetmi,…

    ZručnostiModely

    Kedykoľvek napíšte / na prepnutie zručnosti

  8. 8

    Exportujte hru ako jeden .html

    Keď ste spokojní, požiadajte o export — AI zavolá export_game_html a vy stiahnete jediný samostatný .html súbor. Otvorí sa v ktoromkoľvek prehliadači bez inštalácie a bez servera, dá sa zdieľať alebo nahrať na web. Toto je terminálny krok.

    Film Movie StudioRender
    Fantasy RTS War GameNový projekt

    Sem presuňte obrázok alebo kliknite na nahranie

    reference.png
    Tip: Export je posledný krok. Ak chcete ďalšie zmeny, doladte hru v chate a exportujte znova.

Čo dostanete

Z jednej vety máte hrateľnú 3D hru, ktorá bežala priamo na plátne: scéna v Three.js, pohyb a kolízie cez fyziku Rapier, vyladený vzhľad post-processingom a HUD so stavmi pre pauzu, prehru a reštart. Po iteráciách v chate ste ju exportovali ako jediný samostatný .html, ktorý sa otvorí v ktoromkoľvek prehliadači bez inštalácie a bez servera — pripravený na zdieľanie či nahranie na web.

Tipy od profíkov

  • Pre 2D klasiky (Snake, Pong, 2048, kvíz) použite /games — /threejs-game vždy platí cenu plnej WebGL pipeline a hodí sa na 3D a prémiové hry.
  • Nečakajte hotové 3D modely: tvary sú procedurálna geometria Three.js, generate_image dáva textúry, skybox, dekály a UI — nie riggované postavy.
  • Po každej zmene si hru krátko zahrajte a riešte vždy jednu os (rýchlosť, skok, počet prekážok), aby ste videli, čo presne pomohlo.

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

Ďalšie návody

Začíname

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

Video

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

E-commerce

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