O Adventure WebForge Enginu

Adventure WebForge Engine je intuitivní nástroj navržený pro rychlou a efektivní tvorbu **click & point adventur** přímo ve webovém prohlížeči. Díky jeho vizuálnímu rozhraní a robustním možnostem skriptování můžete snadno navrhovat složité hádanky, interaktivní dialogy a bohaté herní světy bez nutnosti hlubokých znalostí programování.

Engine je napsaný čistě v html, javascript a css. Největší výhoda tohoto enginu je v tom, že vámi vytvořenou hru můžete znova vyexportovat do funkční hry, která poběží samostatně v prohlížeči bez instalování a také lokálně na vašem počítači. Takto vyexportovanou hru můžete dále odeslat svým známým pro pobavení, nebo uložit na svůj web.

Cílem enginu je umožnit tvůrcům adventurních her, soustředit se na příběh a zážitek a minimalizovat technické překážky.

Jak Začít

1. Příprava projektu

Před samotnou tvorbou hry velmi doporučujeme připravit, koncept samotné click and point adventury v těchto bodech:

  • Příběh: Toto je nejdůležitější část celého procesu, bez příběhu neznáte dějovou linii, použité předměty, ani následné dialogy.
  • Předměty: Na začátku stavby hry by jste měli znát použité předměty a artefakty, bez toho se opravu nepohnete z místa.
  • Prostředí: Váš příběh se bude odehrávat v různých lokacích a pro hru samotnou musíte vědět o jaké lokace se jedná.
  • Dialogy: Není nezbytné přesně vědět co která postava bude konkrétně říkat, ale už dopředu by jste měli vědět jak bude reagovat a v jakých situacích.
  • Assety: Jelikož se jedná o click and point adventuru, která běží v grafickém módu a používá různá média, je potřeba vytvořit assety podle předchozích bodů. Assety jsou obrázky, hudba, zvuky a následně dabbing. Assetům bude dále věnována další sekce
  • Doporučení: Pokud dodržíte všechny výše uvedené body, bude pro vás hračka vytvořit skvělou hru, bez dalšího trápení. Zvukové soubory s dabingem si nechte až úplně na závěr, ušetříte si spoutu starostí při úpravách dialogových textů. Promyslete jakým systémem budete pojmenovávat identifikátory položek ve hře.
    Například:
    • herní předmět - prefix item-{název bez diakritiky}
    • doplňkový předmět v místnosti - prefix env-{název bez diakritiky}
    • Vyhněte se při zadávání identifikátorů diaktitice, mezerám a nestandardním znakům. jako jsou tečky, čárky, dvojtečky, uvozovky atd. Jinak engine nemusí fungovat správně. Pro oddělování slov doporučujeme používat pouze pomlčky.
    Určitě to hodně zrychlí vaši orientaci při výběrech v editoru.

2. Stažení a Spuštění

Nejprve si stáhněte nejnovější verzi enginu z naší stránky pro stažení (bude k dispozici v polovině roku 2026). Engine je k dispozici jako zip soubor. Po stažení rozbalte archiv do preferované složky. Uvnitř najděte složku s názvem game-editor a spusťte soubor index.html. Po spuštění se zobrazí editační rozhraní.

3. Vytvoření Nového Projektu

Engine umí pracovat pouze s jedním projektem. Pokud potřebujete více projektů současně, je třeba engine rozbalit do více preferovaných složek podle počtu vašich projektů.

Než začnete s vytvářením projektu! Klikněte na Data->Aktualizovat assety budete vyzváni k tomu aby jste vybrali složku s assety ve vašem počítači. Najděte složku ve vašem projektu s názvem assets ({preferovaná složka s projektem}/game-export/assets) engin si tak připraví data pro první spuštění.

Vyplňte pole Název hry vaším názvem (tento název se bude zobrazovat na titulní stránce hry)

Přepněte se do Editor lokací Pokud vidíte základní místnost a v ní box, vše proběhlo v pořáku a můžete se dát do práce

Základy Editoru

Rozhraní Editoru

Editor je rozdělen do několika klíčových panelů:

  • Editor projektu: Zde nastavíte základní vlastnosti hry, jako je název, startovní místnost, inicializační předměty v inventáři po prvním spuštění hry, informace o hře a další.
  • Editor lokací: editor umožňuje správu předmětů, doplňků a dveří do jiných místností. Vše probíhá inuitivne pomocí drag&drop objektů, kterým nastavíte vlastnosti.
  • Panel příběhu: Jedná se o vizuální nástroj, kterým vytváříte dějové linie, vše za pomocí moderního systému node. Nastavujete podmínky ke spuštění daného questu a akce, které se mají provádět.
  • Panel dialogů: Přidat, odstranit, nebo upravit texty dialogů bude hračka. každý dialog může mít avtara a samozřejmě i dabing.
  • Panel cutscén: Slouží k vytvoření sequence akcí, které musí jít hierarchicky za sebou v časové ose. Můžete tak postupně přidávat doplňky, nebo předměty do místnosti, můžete v čase přidat dialog, nebo zvuky.
  • Panel data: Tento panel je určen pro závěrečné sestavení hry, ale také pro uložení, nebo načtení projektu.
  • Zobrazit hru: Je určen pro testování vámi vytvářené hry a veškeré změny v editoru se rovnou projeví i v tomto náhledu.

Lokace

Pro vytvoření nové místnosti klikněte na ikonu "➕" v panelu Scény a vyberte "Nová Místnost". Každá místnost má k dispozici několik volitelných položek:

  • ID: Definice identifikátoru lokace, kterým se pak odkazujete v ostatních editorech.
  • Popis: Zde můžete napsat popis lokace
  • Pozadí: Je to obrázek, který bude v pozadí lokace.
  • Hudba: Každá lokace může mít vlastní hudbu v pozadí.
  • Zamčená: Lokace může být zamčená a teprve logikou hry ji můžete odemknout.
Místnosti můžete vzájemně propojit pomocí "východů", které definují přechody mezi nimi.

Příběh

I když tento nástroj vypadá složitě, věřte, že je založen na jednoduchém principu podmínek a akcí. Jednotlivé questy je možno mezi sebou propojovat a vytvářet tak vizuální kontrolu nad plynutím příběhu.

  • ID: Definice identifikátoru questu, kterým se pak odkazujete v ostatních editorech.
  • Popis: Zde můžete napsat co se má stát pokud jsou podmínky splněny, usnadní vám to orientaci v questech.
  • Podmínky: Přidáváte předdefinované podmínky jako napríklad, "je v inventáři" předmět, "klikl na předmět" atd.
  • Akce: Akce se spustí v případě, že jsou všechny podmínky splněny. Opět jsou zde předdefinované akce, které mohou nastat, jako "spustit dialog", "odebrat z inventáře" atd. Po dokončení všech akcí se quest označí za splněný.
  • Opakující se quest: Jedná se o questy, které nebudou nikdy označeny za splněné a mohou se ve hře stále opakovat, pokud splňují zadané podmínky. Většinou se takový quest použije na vypsání náhodné hlášky. Takovýto uzel je orámovám žlutě pro zvýšení přehlednosti.
Místnosti můžete vzájemně propojit pomocí "východů", které definují přechody mezi nimi.

Dialogy

Jak už název napovídá, je tento modul určen pro administraci dialogů. Systém dialogů ve hře je postaven tak, že se nevětví do zbytečně širokého výběru otázek a odpovědí, které by stejně vždy vedly ke stejnému výsledku. Naproti tomu je koncept jednoduchý a lineární. Přidáváte repliky tak jak jdou za sebou a jen měníte účastníky hovoru. Při spouštění dialogu se vypíší repliky v daném pořadí.

  • ID: Definice identifikátoru dialogu, kterým se pak odkazujete v ostatních editorech.
  • Jméno: Zde můžete vytvořit novou postavu pro dialog, po rozevření drop-down menu máte k dispozici všechny použité dialogové postavy a ...nový NPC , kterým postavy přidáváte. Jméno postavyy se nijak neprojeví v samotném přehrávaném dialogu, toto jméno slouží interně jako identifikátor (řídíme se proto pravidly pro zadávání identifikátorů). Avatar určený pro účastníka rozhovoru musí mít stejný název, jinak systém nenalezne požadovaný obrázek. viz assety a správa zdrojů.
    Další speciální postavou je narrator (vypravěč). Pokud je zvolena tato postava, nezobrazí se při přehrávání repliky avatar a text je umístěn doprostřed dialogového okna.
  • Dabing: Na tomto místě vybíráte příslušnou zvukovou stopu pro danou repliku. Tento krok doporučujeme udělat až úplně na závěr, kdy máte připraveny a odladěny všechny dialogy, protože zvukové záznamy musí být uloženy na správném místě a ve správně nazvaných složkách. K tomu slouží nástroj exportů, který vám připraví strukturu dabingových složek, s umístěnými texty jak jdou za sebou ke každému dialogu. Tato část pro vás bude nejzdlouhavější, protože do připravených složek musíte nakopírovat příslušné soubory se zvukovým záznamem, podle připravených seznamů. Pak musíte aktualizovat assety, pro možnost výběru.

Nepodceňte přípravu dialogů, clikck&point adventury jsou postaveny právě na dialozích. Pokud přece jen zapomenete na některý z dialogů, je možné jej doplnit, nebo upravit, ale už to sebou nese velkou míru soustředění, popřípadě nahrávání nových dabingů.

Scény

Cut stény se řídí podobným principem zadávání akcí, jako u příběhu. Má ale několik odlišností. Akce cut scén probíhají lineárně, tak jak jsou za sebou na dané ose. Akcím můžete přidávat čas, nebo počkat nějakou dobu a pak provádět další akce. Akce jsou předdefinovány, můžete přidávat a odebírat předměty, zobrazit rozhovor, dokonce můžete přehrát jinou cutscénu. Nejsou primárně určeny pro vytváření složitých animací, slouží spíše pro vytvoření sequence akcí.

  • ID: Definice identifikátoru scény, kterým se pak odkazujete v ostatních editorech.
  • Časová osa: Zde přidáváte akce, tak jak půjdou za sebou a definujete přesný čas v milisekundách. Akce jsou stejné, jaké používáte u tvorby příběhu.

Lehký typ pro použití cut scén v editoru příběhu. Pokud má některý quest hodně akcí, můžete tyto akce napsat v cut scéně a v guestu jen dát odkaz na tuto cutscénu. Akce se projeví stejně, jako by jste je vypisovali do questu. Někdy je to i vhodné, tžeba pokud chcete přidat předmět do inventáře až po rozhovoru.

Data

Tady si můžete celý projekt uložit, nebo nahrát a po dokončení celého projektu hru vyexportovat do jednoduchého distribučního balíčku. Data se v průběhu editace ukládají do localstorage , aby mezi sebou mohli jednotlivé moduly interagovat. Toto ukládání ale není trvalé! Doporučujeme projekt průběžně ukládat, aby nedošlo ke ztrátě dat.

Náhled hry

Náhled slouží ke kontrole vámi editovaného projektu, jestli se postavy a předměty chovají tak jak mají. Změny, které provedete v editoru jsou rovnou přístupné v náhledu hry.

Typ pro testování hry: aby jste nemuseli hru hrát od začátku při každé změně, můžete nastavit startovní místnost v projektu na danou lokaci. Do inventáře, nebo místnosti vložit potřebné předměty nastavit důležité questy jako splněné a pak danou situaci otestovat.

Správa Prostředků (Assetů)

Engine podporuje import vlastních obrázků, zvuků a dalších médií. Složka s assety je připravena v rozbaleném projektu zde: {vaše složka s projektem}/game-export/assets. Pro import přetáhněte soubory přímo do správných složek (např. do složky img/rooms zkopírujte, obrázky pozadí lokací).

Všechny nově importované prostředky bude potřeba v editoru načíst. Klikněte na Data->Aktualizovat assety Tím engine získá reference na potřebné assety k použití.


Důrazně NEDOPORUČUJEME měnit, mazat a přidávat složky v assets, systém je navržen přesně na tuto strukturu a jaká koliv změna naruší správný chod enginu!

Formáty médií

Některé prvky hry vyžadují určitý formát použitých prostředků pro správný chod. Formáty obrázků a zvuků jsou standardní typy jako .jpg, .png, .mp3, takže se nejadná o nic speciálního, jen někde musí být přesný typ.

  • img/avatars: Jsou obrázky tváří osob u dialogů. Tyto assety musí být ve formátu .png s alfa kanálem (to znamená průhledné pozadí). Struktura dialogů je navržena tak, že jméno osoby, se musí shodovat se jménem patřičného obrázku avatara, jinak se nebude zobrazovat. Například: jméno osoby je pepin a název souboru s avatarem bude pepin.png. Doproučené rozlišení je 256x256 pixelů
  • img/cursors: Zde si můžete nadefinovat i vlastní kurzor myši, je ale důležité zachovat názvy a použít .png. formát s průhledným pozadím. Doproučené rozlišení je 32x32 pixelů
  • img/env: Do této složky si ukládejte doplňkové obrázky prostředí, které nejsou nijak interaktivní, jen dokreslují atmosféru dané lokace. Obrázky mohou být ve formátech .png, nebo .gif. Doproučené rozlišení by nemělo být větší, než reálná velikost obrázku pozadí lokace.
  • img/items: Zde uchovávejte obrázky interaktivních předmětů, které budou používány ve hře. Do této kategorie patří i postavy. Obrázky mohou být ve formátech .png, nebo .gif. Doproučené rozlišení by nemělo být větší, než reálná velikost obrázku pozadí lokace.
  • img/rooms: Tato složka slouží k uložení obrázku pozadí celé lokace. Engin a hra jsou koncipovány pro čtvercový formát pozadí. Je možné vložit obrázky i v obdélníkovém formátu, ale některé další elementy se pak nejspíše nebudou chovat správně. Všechny takové obrázky by měli být ve stejné velikosti. Typový formát je zde .jpg. Doproučené rozlišení je 1024x1024 (2048x2048) pixelů

  • sound-music/audio-environment: Sem můžete ukládat zvukovou kulisu pozadí lokací. Hudbu ukládejte ve formátu .mp3
  • sound-music/sound: V této složce by jste měli mít uloženy zvuky, které budou použity v průběhu hry, například po nějaké akci. Hudbu ukládejte ve formátu .mp3
  • sound-music/speech: Složka speech je speciální a je určena pro dabing dialogů. Jakmile budete mít všechny dialogy v editoru připraveny, necháte si editorem vygenerovat složkovou strukturu (názvy vložených složek budou stejné jako ID dialogů). Vygenerované názvy složek neupravujte. V daných podsložkách budete mít připraven i textový soubor s potřebnými replikami, které vás navedou jaké soubory do dané složky máte vložit. Požadovaný formát souboru pro dabing je .mp3

Aktualizace assetů

Pokud změníte, nebo přidáte do složky s assety prostředky, je třeba v enginu aktualizovat nový seznam. Klikněte na Data->Aktualizovat assety budete vyzváni k tomu aby jste vybrali složku s assety ve vašem počítači. Editor si tak načte správné cesty k souborům a vy je pak můžete vybírat pomocí panelů výběrů obrázků, zvuků, nebo dabingů.

Jak získat assety

Pro tvůrce her typu click&point adventur, bude asi nejsložitější sehnat sady obrázků, zvuků a hudby. Pokud zároveň nejste hudebník, grafik, nebo animátor. Adventure WebForge Engin je postaven na jednoduchém zobrazování obrázků a proto není nutné využívat speciální sprity animací a podobně.

  • Grafik/hudebík: Úplně nejlepší řešení je mít svého grafika, či hudebníka, který pro vás vytvoří assety na míru, ale to někdy není reálné, nebo je to nad finanční možnosti projektu.
  • AI: Pozadí lokací, obrázky předmětů a avatarů v dnešní době můžete nechat vygenerovat AI a při zadávání správných promptů se vám podaří získat co potřebujete. Zdarma dostupné generátory obrázků zatím neumí vytvářet obrázky s průhledným pozadím, ale za pomocí dostupných editorů se s tím dá pracovat. Nejen, že si takto připravíte obrázky, můžete využít umělou inteligenci i pro vytvoření hudby, zvuků a dokonce i velmi slušného dabingu.
  • Knihovny médií: Je spousta serverů, kde můžete zdarma, nebo za poplatek získat vše co potřebujete, včetně hudby, obrázků i zvuků. Nejznámější budou obchody s assety pro ostatní herní enginy jako Unity, Godot, Unreal Engine, nebo třeba Game Maker. Stačí jen vědět co potřebujete a hledat. Zabere to hodně času, ale někdy se to vyplatí.

Skriptování a Logika

Pro základní interakce (např. sebrání předmětu, otevření dveří) můžete využít vizuální systém událostí bez nutnosti psaní kódu. Pro komplexnější logiku a hádanky engine nabízí robustní skriptovací prostředí. Toto prostřecí spravuje již vytvořené lokace, předměty, dialogy v logickém sledu dějové linie.

Příklad: Chcete-li, aby se po použití klíče na truhlu objevila zpráva a truhla se otevřela, definujete v editoru příběhů nový quest. Nový quest přidáte pravým tlačítkem myši, zadáte ID questu. Předpokládejme, že již máte vytvořenou lokaci, ve které je umístěn interaktivní předmět zavřené truhly a v inventáři již máte získaný klíč, dále máte připraven interaktivní předmět otevřené truhly.

  • Přidejte podmínku: V nově vytvořeném questu přidejte podmínku použil klic-truhly a truhla-zamcena
  • Přidejte akce: Nasledně přidejte akce, které se musí stát po splnění podmínky.
    • Odeber klic-truhly z inventáře
    • Odeber truhla-zamcena z lokace
    • Vlož truhla-odemcena do lokace
    • Spusť dialog d-truhla-odemcena
  • Následuje: Při splnění podmínky se odebere klíč z inventáře, odebere se zavřená truhla z lokace a místo ní se vloží otevřená truhla, následuje výpis dialogu, například "Podařilo se ti otevřít truhlu a uvnitř něco je."

Engine používá jednoduchý vizuální skriptovací jazyk podobný blokovému programování, což umožňuje i netechnickým uživatelům vytvářet složitou logiku.

Export Hry

Co dělá Export?

Funkce exportu enginu vezme váš celý projekt a zkompiluje ho do sady standardních webových souborů (HTML, CSS, JavaScript, obrázky, zvuky). Výsledkem je **samostatná webová aplikace**, kterou lze spustit v jakémkoli moderním webovém prohlížeči, bez nutnosti instalace enginu nebo speciálních pluginů.

Tato složka s exportovanou hrou je připravena k nahrání na webový server, sdílení s přáteli nebo dokonce zabalení jako mobilní aplikace.

Jak Exportovat?

V hlavním menu editoru vyberte "Soubor" > "Exportovat Hru". Zobrazí se dialogové okno, kde můžete vybrat cílovou složku pro export a případně nastavit další možnosti (např. název výstupního souboru, optimalizace obrázků). Klikněte na "Exportovat".

Po dokončení exportu najdete všechny soubory ve vybrané složce, připravené ke spuštění přes soubor index.html.

Často Kladené Dotazy (FAQ)

Mohu použít vlastní fonty?
Ano, engine podporuje import vlastních fontů ve formátech TTF/OTF, které budou automaticky vloženy do exportované hry.
Je engine zdarma?
Adventure WebForge Engine je open-source a plně zdarma pro osobní i komerční použití. Rádi přijímáme příspěvky od komunity!
Jak přidat vlastní animace?
Engine podporuje sprite sheet animace. Můžete nahrát sadu obrázků a definovat jejich rychlost a sekvenci v panelu vlastností.

Řešení Problémů

Hra se po exportu nespustí

  • Zkontrolujte, zda jste spustili soubor index.html v kořenové složce exportu.
  • Ujistěte se, že všechny cesty k prostředkům (obrázky, zvuky) jsou správné.
  • Zkontrolujte konzoli prohlížeče (F12), zda se v ní nenachází nějaké chyby JavaScriptu.

Grafika vypadá rozmazaně

Zkontrolujte původní rozlišení vašich importovaných obrázků. Pro nejlepší výsledky by měly být obrázky optimalizovány, ale ne příliš zkomprimovány před importem. Engine má vestavěné nástroje pro základní optimalizaci.