Tvorba přehledového displeje (heads-up display - HUD)
Přehledový displej (dále jako HUD) je interface, které ukazuje hráčovi životy, skóre a osttní podstané informace ve hře. Vytvořme si jeden opravdu jednoduchý HUD pro textový objekt.
HUD je vždy na stejném místě na obrazovce. Jestli máme některé interface objekty, nechceme, aby se pohnuli pryč, když se hráč pohne - měly by být přilepený na obrazovce. V základním nastavení se vrstvy pohybují. Pro jejich udržení na obrazovce využijeme nastavení Parallax. Parralax nám umožňuje pohybovat vrstvami odlišnou rychlostí pro vytvoření rádoby 3D efektu. Nastavením parallaxu na nulu se vrstva nebude pohybovat vůbec - ideální pro HUD.
Přesuň svou pozornost k liště s vrstvami. Přidej novou prstvu jménem HUD. Ujisti se, že je nahoře a označená (to z ní dělá aktivní vrstvu). Lišta s properties by měla ukazovat její vlastnosti. Nastan Parallax na 0, 0 (to je nula na obu X i Y souřadnicích).
Dvojklikem v layoutu přidej nový pbjekt. Tentokrát zvol objekt Text. Vlož ho do levého horního rohu layoutu. Bude velmi obtížné ho vidět v černé, proto v liště properties nastav bold (tučně), italic (kurzíva), yellow (žlutá) a větší velikost fontu. Objekt zvětši tak, aby se do něj vešlo přiměřené množství textu. Mělo by to vapadat nějak takhle:
Přesuň se zpět do tabulky událostí. Budem chtít, aby text byl stále aktualizován se skórem hráče. Do podmínky Every tick, kterou jsme vytvořili dříve, přidej akci Text -> Set text.
Využitím operátoru & můžeme přeměnit číslo v text a připojit ho k jinému textovému řetězci. Takže pro text zadej:
"Skóre: " & Skóre
První část ("Skóre: ") znamená, že text vždy začne frází Score:. Druhá část (Skóre) je aktuální hodnota hromadné proměnné Skóre. Znak & je spojí dohromady v jeden text.
Spusť hru a postřílej pár příšer. Tvé skóre je zobrazeno a drží na jednom místě!
Poslední kroky
Jsme skoro hotovy. Přidáme pár konečných detailů.
Nejprve vytvoříme pravidelné přidávání příšer, jinak by po zabití všech příšer nebylo už co dělat. Vytvoříme novou příšeru každé 3 vteřiny. Přidej novou podmínku:
Okolnost: System -> Every X seconds -> 3
Akce: System -> Create object -> Příšera, vrstva 1, 1400 (pro X), random(1024) (pro Y)
1400 je souřadnice X přesně na pravé straně layoutu a random (1024) je náhodná Y souřadnice rovna výšce layoutu.
A konečně, umožníme duchům zabít hráče.
Okolnost: Příšera -> On collision with another object -> Hráč
Akce: Hráč -> Destroy
Závěrem
Gratuluji, vytvořil jsi svoji první HTML5 hru v C2! Pokud máš server a chceš ukázat svoji práci, klikni na Export v nabídce File (soubor). Construct uloží všechny soubory z projektu do jedné složky na tvůj počítač, tu potom můžeš nahrát nebo vložit na webovou stránku. Pokud vlastní server nemáš, můžeš sdílet své hry na Dropbox.
Naučil jsi se některé základy o C2: Vkládání objektů, použití vrstev, vlastnosti, podmínky a další. Snad tě to dostatečně připravilo na naučení se více o C2! Zkoušej objevovat jeho prvky a najít, co všechno pro tebe může udělat.
Dokončená věc
Zkus si stáhnout dokončený tutoriál. Přidal jsem do něj některé extra prvky jako např. text "Game over" (Konec hry) a postupné zrychlování příšer. Díky tomu, co teď víš by pro tebe neměl být problém přijít na to, jak to funguje. Je tu také mnoho komentářů popisujících, jak to funguje.
Hotovo! Jestli máš nějaké problémy nebo si myslíš, že některá část tutoriálu by mohla být zlepšena, zanech komentář nebo využij naše fórum. Uvidíme, co budem schopni udělat!
Další počteníčko
Chceš přidat hudbu a zvukové efekty? Nepřehlédni Sounds & Music (Zvuk a hudba) v manuálu pro rychlý přehled.
Kdyby tě zajímali další tutoriály pro začátečníky, Jak vytvořit plošinovku (How to make platform game).
Pokud by jsi chtěl vědět více o tom, jak podmínky fungují, shlédni sekci How Events Work (Jak funguje podmínka) v manuálu. S nově nabytými zkušenostmi se můžeš dát do tvorby vlastních her! A pro ještě více informací, nezapomeň, že tu je kompletní dokumentace v manuálu.