VRath – projektowanie tarczy

I już połowa maja minęła, czas biegnie nieubłaganie, a ja akurat mam teraz milion rzeczy na głowie. Broni jednak nie składam i pokażę dziś jak zbudowałem sobie tarczę i jak rozwiązałem problem punktacji.

Do tej pory moim celem była encja kuli zawieszona w przestrzeni, animująca się z lewej do prawej i na odwrót. Animacje chciałbym zachować, natomiast kule muszę zastąpić jakimś sensownym obiektem, który chociaż trochę będzie przypominał normalną tarczę strzelniczą. Cel będzie grupą encji i będzie się składał z następujących elementów:

  • Belka służąca jako „taśma” po której będzie poruszała się tarcza
  • Belka „zwisająca” z taśmy, służąca do trzymania tarczy
  • Białe płótno w postaci cienkiego prostopadłościanu imitujące ciało
  • Białe płótno w postaci okręgu imitujące głowę
  • Pierścienie z różnych kolorów szarości imitujące wartości na tarczy i umiejscowione na płótnach

I teraz w kolejności powyższe elementy będą w kodzie wyglądały następująco:

1. Taśma:

Belka górna to po prostu prostopadłościan zbudowany z pomocą encji <a-box>. Oprócz swojej wizualnej funkcji, będzie również spełniał rolę kontenera dla pozostałych encji. Pozycjonowanie elementów wewnętrznych odbywać się zatem będzie względem pozycji tej belki, nie względem środka sceny.

2. Encja animacyjna i belka dla tarczy:

Powyższa encja nie ma żadnej geometrii poza pozycją, wyróżnia ją jednak komponent animacyjny. To właśnie ta encja przejmie animację po starym prototypie tarczy i również będzie grupą dla wewnętrznych obiektów. Dzięki temu będą się one poruszały wszystkie razem, nie trzeba będzie animować ich osobno (to nawet brzmi absurdalnie). Belka pionowa to z kolei taki prosty obiekt:

Oprócz obiektu typu a-box, pojawia się tu też a-sphere, która „symuluje” uchwyt belki pionowej do poziomej. Taki tam smaczek graficzny ha!

3. Płótno główne tarczy:

I kolejny a-box. Tym razem będzie to właściwy element tarczy i przy okazji grupa dla pierścieni punktacyjnych.

4. Płótno imitujące głowę sylwetki na tarczy:

Tym razem użyłem encji <a-circle>, rysuje ona proste dwuwymiarowe koło na scenie. Encja ta została umieszczona wewnątrz encji sylwetki.

5. Pierścienie punktacyjne:

Powyższe dwie encje umieszczone zostały w elemencie głowy. Pierścień zewnętrzny zbudowany z pomocą <a-ring>, który wypisuje na konsoli 25 przy kliknięciu w niego, oraz koło, które po kliknięciu wypisuje 50. Te liczby to oczywiście punktacja. Podobną rzecz wykonuję dla encji sylwetki:

W powyższym przykładzie znajdują się dwa pierścienie z punktami 5 i 15, oraz środek sylwetki: koło z 30 punktami za strzał. I to by było na tyle jeżeli chodzi o tarczę! No dobrze, może nie do końca, bo przecież nikt nie chce patrzeć w konsole czy trafił. Zarządzaniem punktacją zajmę się w kolejnym wpisie.
Można się zastanawiać jak długo wybierałem wartości dla chociażby pozycji elementów. Otóż z A-Frame jest to bardzo proste, ponieważ dysponuje on wbudowanym A-Frame inspectorem. Za pomocą tego narzędzia można wizualnie przenosić obiekty encji w trzech płaszczyznach, zmieniać właściwości obiektów, a nawet dogrywać komponenty z A-Frame register. O to jak prezentuje się kawałek mojej sceny w A-Frame inspectorze:

Zrzut z A-Frame inspector

A tak prezentuje się cały kod elementu tarczy:

Podsumowanie

Wpis nieco skromniejszy niż zwykle, ale mam już najważniejszy element na scenie. W kolejnym kroku zajmę się stanem gry i uzupełnieniem sceny o dodatkowe elementy.