Kontextové informace

Popis implementace

Implementace HUD prvku byla provedena pomocí objektu kamery ve scéně. Nejprve bylo ve scéně vytvořeno několik objektů v podobě zvedací brány a dvou přilehlých věží. Objekt samotné brány byl přidán do skupiny gate.

Pro vytvoření objektu contextInformation, který reprezentuje kontextovou informaci, je volána funkce createText. Ve funkci je text informace nastylizován do požadované podoby tak, aby celý text byl ohraničen rámečkem a akční klávesa byla dalším rámečkem zvýrazněna. Vše je zbarveno do poloprůhledné bílé barvy. Text je vytvořen na základě vytvořeného elementu canvas, ze kterého je následně získán context, na který je vytvářen daný obsah. Orámování je realizováno pomocí funkce createBoundary, kde je rám vytvořen pomocí úseček a kvadratických křivek. Význam parametrů funkce createBoundary je znázorněn na obrázku níže. Nakonec je z canvasu vytvořena textura, ze které je následně vytvořen somotný objekt třídy Sprite, který je uložen do proměnné sprite. Výhoda takto vytvořeného textu spočíva v tom, že je vždy natočen správně ke kameře. Dle parametrů funkce je sprite umístěn do dané pozice a je mu nastaveno měřítko (vlastnost scale) pro vylepšení finálního rozměru. Výsledný sprite je vrácen z funkce a umístěn před kameru.

Popis funkce createBoundary

Ve funkci animate volané při obnově snímku jsou následně vyhledány objekty brány (skupina gate), které leží před kamerou, pomocí objektu raycaster. Dále v cyklu je kontrolováno, zda objekt brány není vzdálen příliš daleko od kamery. Hodnota minimální vzdálenosti brány od kamery pro zobrazení kontextové informace je určena konstantou minDistance. Pokud se tedy uživatel nachází v těsné blízkosti brány a jeho pohled směřuje na bránu, dojde ke změně vlastnosti visible objektu contextInformation na hodnotu true a uživateli je tak zobrazena výzva ke stisknutí akční klávesy. Následně dochází k vyhodnocení zda uživatel stiskl klávesu E. Pokud došlo k jejímu stisknutí, je podle proměnné doorOpened vyhodnoceno, zda dojde k posunu objektu brány nahoru, či dolu. Pomocí využití třídy Tween je pohyb brány animován.