Dynamický zaměřovač
Vzhled a chování
Zaměřovač je dynamický, při pohybu po scéně dochází k rozestupu nitkových částí a mizení zaměřovací tečky uprostřed pro navození pocitu rozmíření. Nitková část konstantním pohybem putuje do svého maximálního rozměření, kde setrvá do doby, než uživatel zastaví pohyb kamery po scéně. Při zastavení pohybu kamery po scéně se opět nitková část zaměřovače vrací zpět ke středu a objeví se i středová tečka. Zaměřovač je umístěn do středu obrazovky.
See the Pen HUD_Dynamic_reticle by Filip Mička (@Filda360) on CodePen.
Ukázka výsledného HUD prvku zobrazující dynamický zaměřovač v CodePen
Popis implementace
Pro implementaci zaměřovače byl zvolen přístup s použitím kamery ve scéně v kombinaci s geometrickými tvary.
Nejprve byly vytvořeny 4 úsečky (left, right, upper a lower) pro nitkovou část a 1 kruh pro středovou tečku (dot).
Tyto části byly následně umístěny před kameru a předány objektu kamery.
Při pohybu uživatele po scéně jsou jeho stisknuté klávesy pro pohyb (W, A, S, D) zaznamenávány do pole pomocí listeneru.
Následně při každém renderování snímku je volána funkce move, ve které dochází k vyhodnocení, zda dojde k rozměření nebo zaměření.
Pokud byla stisknuta pohybová klávesa, dojde k zavolání funkce unaim. Pokud nedošlo ke stisknutí pohybové klávesy, je volána funkce aim.
Ve funkci unaim je nastaveno středovému kruhu zaměřovače viditelnost (vlastnost visible) na hodnotu false.
Pro určení maximální míry rozměření zaměřovače slouží konstanta maxUnaim a pro rychlost rozměření zaměřovače slouží konstanta unaimCoeficient.
Hodnota těchto konstant byla zvolena tak, aby rozměření zaměřovače mělo přirozený pohyb. Ve funkci je dále podmínka, zda rozměření nedosáhlo maxima.
Pokud nedosáhlo, dojde k posunu úseček od středu o hodnotu danou konstantou unaimCoeficient.
Funkce aim je velmi podobná funkci unaim, liší se pouze ve směru posunu úseček nitkového kříže,
úsečky se pohybují ve směru do středu kříže a středový kruh je opět zobrazen (nastavení vlastnosti visible na true).
Pro určení rychlosti zaměření je využita konstanta aimCoeficient.
Pro realizaci statického zaměřovače (bez rozmíření) by způsob implementace pomocí HTML elementů byl jistě rychlejší a jednodušší.