Simplex Game Studio

V minulé lekci, Úvod do frameworku Simplex.js, jsme si představili microframework Simplex.js a podívali se na přiloženou ukázku jeho použití.

Simplex Game Studio je univerzální herní engine a editor napsaný v HTML 5 a čistém ECMA 6. Je v něm vytvořena např. hra Azurové jezero. (Zdrojové kódy enginu viz tato hra, zdrojové kódy vizuálního IDE ještě nejsou uvolněné).

GUI je silně inspirován GameMakerem.

Live verze

Editor: http://sumenimesta.cz/sgs/editor.html (úplně nová appka)
Hra: http://sumenimesta.cz/sgs/index.html (spusťte a F5, aby šla hudba; o kousek dále než předloni, nově obrázky a mapa)

Info ke zdrojákům viz níže.

Editor dokáže editovat (něco jde jen zobrazit, něco jde změnit) projekt textové hry, což je zatím jediný typ her, který engine podporuje. Při zapnutí editoru se načte projekt hry, která běží tady - https://sumenimesta.cz/public/jezero/, tedy její novější verze, kdy engine již podporuje obrázky a minimapy (online je zatím na bez nich). Můžete si projít (až se tedy publikují zdrojáky a dám sem online verzi) třeba objekt IntroObjekt a jeho událost RoomEnter, je tam vidět naskriptované intro, které lze vidět při zapnutí hry. Všechno by mělo jít prozkoumávat a měly by jít přidávat nové prvky hry, ale jak jsem psal, ne vše jde editovat. I když jsem vyřešil většinu problémů s bindingy, 100% funcionalitu editor zatím nemá, ale neměl by být problém ji dosáhnout za poměrně krátký čas dalšího vývoje.

Plány jsou jasné, v editoru vznikne druhá a třetí epizoda hry. A teď zase půl roku pauzu, uvidíme se v létě

5.2.2020

Kompletní zdrojáky kromě nové verze FW Simplex.js, kterou jsem minifikoval, dávám kompletně ke stažení níže. Simplex.js framework si lze stáhnout v příslušné JS sekci, ale tato verze používá funkce, které ve stabilním releasu zatím nejsou. Pokud byste z toho někdo byli extra nadšení, rád poskytnu na vyžádání, než se to zmerguje a vyvěsí tady.

Projekt je třeba spustit z webového serveru, nelze jen stáhnout a otevřít třeba z plochy (restrikce prohlížečů k načítání lokálních souborů).

Také jsem si všiml bugu v generování JSON, který mrší atributy některých událostí, fixnu v létě s další hrou

19.1.2020

Poslední den před koncem soutěže, ani jsem nečekal, že to stihnu dodělat do této podoby Nepočítal jsem s tím, že se vůbec dostanu k bindingům, uvidíme, co dnes stihnu.

Formát bindingů stanoven a napsána metoda na jeho parsování:

<input data-source="this.room" data-value="{bind:name,mode:TwoWay}" />

Zprovozněn jednoduchý two-way binding. Zatím je problém použít jeden element pro editaci více různých objektů.
Vzhled default nelze přejmenovat.
Refaktorování JS frameworku, aby používal enum s názvy JS událostí (kdo si to má pamatovat).
Dodání setterů do všech herních objektů kvůli bindingům.
Oprava mazání callbacků událostí JS elementů ve frameworku (to je taky nápad, že jde callback smazat jen pokud předáme callback). Poprvé v životě jsem použil continue.
Po hodinách debugování a hackování JS event modelu mám téměř funkční twoway binding. Bojovým úkolem se zdá být opravit do půlnoci poslední mouchy
Doplněny vlastnosti pro nastavení názvů různých podobjektů, které pak nastaví dané podobjekty. Některé jsem zatím nemohl implementovat, protože objekty zatím nemají předané dané závislosti.

18.1.2020

Je to neuvěřitelné, ale dnes jsem dokončil vše co jsem chtěl stihnout a zbývá ještě celý jeden den. Zítra zkusím pohrotit bindingy a uvidíme s čím skončím. Nepočítám s tím, že bych to stihl, protože je to velmi komplikované téma, ale mohl bych to dostat do stavu, aby se alespoň nějaké části hry již daly editovat.

Opravena chyba při generování akcí s variačními argumenty do JSON (zdá se, že se projekt dostal do stavu, kdy hra vygenerovaná editorem jde opravdu hrát).
Nevydržel jsem to a přestyloval ještě seznam akcí v editoru skriptů. Nyní zvýrazňuje text a zobrazuje náhledy obrázků:

Do všech dialogů jsem popřidával ikony na tlačítka a pophrál si s paddingy seznamů. Vypadá to moc dobře :

Dialog vzhledů má vyčleněné vlastnosti písma v samostatné záložce "Font".
Dialog místností nezobrazuje pozadí, pokud jej nemá místnost nastavené.
Opraveno rozložení editoru map.
Opraveno cachování obrázků při přidávání nových lokací do dialogu map.
Přepracován systém ikon, aby umožňoval dynamické náhledy, pokud jsou možné:

Vložení ikon do editorů akcí a událostí.

17.1.2020

Zprovozněno přidávání nových akcí do událostí objektů.
Opraveno volání validátoru parametrů akcí.
Aktualizace komponenty TabControl na novější verzi, která podporuje změnu záložky podle data atributu s ID a zakomponování tohoto přepínání do editoru objektů.
Přidána podpora ikon v editoru přes společného předka všech editovatelných objektů.
Zprovozněno přidávání nových událostí objektů.
Přidána textová reprezentace akcí, což činí editor mnohem přehlednější:

Přidán editor akcí, čímž je editor objektů dokončený. Zbývají dokončit ještě 2 dialogy - editor místností a editor map.
Nastavena maximální výška dialogů.
Opraven bug s načítáním mapy ve hře.
Dokončen editor místností.

16.1.2020

Dost možná nestihnu editor naučit editovat, ale měl bych stihnout udělat alespoň kompletní vizuální viewer herních souborů s možností přidávat nové položky.
Generování unikátních názvů položek jako object5 apod. vyčleněno do samostatné třídy.
Opraveno generování nových unikátních názvů příkazů. Dialog na příkazy se nyní zdá hotový.
Ošklivý fix CSS bugu, který způsoboval zobrazení horizontálního scrollbaru v dialozích.
Dopsáno přidávání nových barev do vzhledů. Dialog na vzhledy se nyní zdá hotový.
V editoru akcí skriptů objektů se všechny hodnoty zobrazují do <textarea>, což by mělo pro jednoduchou editaci čehokoli stačit.
Zvelebena obrazovka action dialogu informující o akci, která nemá žádné parametry.
Přidána obrazovka pro přidání nové akce dle kategorie pomocí Simplex komponenty Accordion:

Nevím, jestli to stihnu dodělat, ale měl bych dokončit alespoň ten editor objektů

15.1.2020

Nastává panika, samozřejmě jsem doteď nic neudělal
Ošetření bindování na objekt s hodnotou null.
Přidána podpora bindingů na vlastnosti, které nemohou ve value obsahovat text ".{binding:nazevVlastnosti}", např. <input type="color" value="...">. Lze využít i pro prvky, u kterých se mění bindovací objekt za běhu aplikace.
Dialog na editaci barevných schémat rozšířen o editor barev.
Přidán styl na <input type="color" />

16.12.2019

Jelikož jsem to přes léto nestihl, tak projekt přihlašuji do vánoční soutěže. Nevím, jestli to dám, ale o státních svátcích s tím minimálně zas podstatně pohnu

29.9.2019

Přidány ikony akcí
Přidáno tlačítko pro zavření všech oken
Funkční kaskáda oken:

28.9.2019

Opraveno tahání oken po pracovní ploše a přidán manažer oken, mohou se nyní překrývat a každé lze otevřít jen jednou. Při otevření objektu, jehož editor je již otevřený, se tento editor najde a zaktivní.
Přidány hovery a zaklapávání složek do projektového treeview.
Učesán hlavní layout aplikace přes flexbox, aby to nějak rozumně vypadalo

15.9.2019

Přidán základní skriptovací editor alá GameMaker event-action style, vypadá to moc dobře Vypily se 2l Monster Energy a jelikož to je poprvé, co se od posledního update něco udělalo, tak se to trochu nestíhá Všude je špinavé prádlo a nádobí, ale vyplatilo se to

4.7.2019

Základ engine je hotový a umožňuje tvorbu jednoduchých textových her s obrázky a zvuky, chybí podpora 2D a 3D grafiky a práce s proměnnými.
Editor dokáže importovat/exportovat herní soubory, chybí vizuální programování objektů a podpora two-way bindingů.

Hodnocení poroty

Porotce	Bodů	Hodnocení
David Jančík	10	Chybí mi návod k tomu, jak studio používat. Editor nabízí spoustu možností, ale člověk moc ze začátku nemá tušení, jak je používat. Dále je trošku divné, že se všechny otevřené složky po stisknutí + a pokusu o přidání - například zvuku - sbalí. Hodně se mi líbí vlastní implementace pohybu pop-upových okýnek, která je very smooth and precise.
Tomáš Bitter	10	Hodně propracovaná aplikace s hodně možnostmi, což na začátku může působit trošku chaoticky a děsivě. Stejně jako kolega bych ocenil nějaký návod k tomu, abych věděl, jak s aplikací pracovat Zároveň je však její ovládání poměrně intuitivní a když tomu člověk chvilku dá, v aplikaci se nakonec zorientuje. Když pominu další nedostatky v rámci UI, tak se jedná o velmi vydařený projekt.
Michal Čápka	9	Jedná se opravdu o velmi komplexní nástroj, který nabízí spoustu možností a využití. Možná mi projekt přijde v rámci zařazení do soutěže až příliš propracovaný a odborný.

Příště, v lekci Vytvoření vlastní komponenty a třída SimplexSelection, si ukážeme, jak na vytvoření vlastní komponenty a popíšeme si třídu SimplexSelection pro práci s elementy.