Gothic Together

Komunikacja z nakładką

Nakładka w celu komunikacji z trybem gry wysyła komendy, takie same komendy, jakie mógłby wpisać gracz ręcznie z czatu, typu /ulecz [id]. Aby wysłać taką komendę poprzez nakładkę, wystarczy użyć funkcji sendGameCommand, np. sendGameCommand('UseItem', item.objectName). Obsługa komendy następuje w callbacku OnPlayerCommand.

Jeżeli chcesz wysłać dane do nakładki, robisz to za pomocą funkcji SendEventToHtmlComponents, np. SendEventToHtmlComponents(player.Id, "STATE_HP", 100). Wysyła ona event o nazwie "STATE_HP" z wartością 100 do gracza o danym ID. Jak odebrać ten event po stronie Reacta? Służy do tego funkcja onGameEvent, której wykonanie wygląda np. tak:

onGameEvent('PlayAudio', (data: any) => PlayAudio(data.FileName))

Wygląda to wszystko dość skomplikowanie, ale tak naprawdę jest ultra proste. Dla uproszczenia dodaliśmy własny hook o nazwie useGameState, np.:

const inventoryData = useGameState<InventoryState>('InventoryComponent')

Gdzie InventoryState to typ danych, które przekazujemy z trybu gry do nakładki, a "InventoryComponent" to unikalny identyfikator. Ilekroć komponent Reacta otrzyma nowe dane, przerenderuje się, dane wysyłamy w ten sposób:

UpdateOverlayState<InventoryState>(player, 'InventoryComponent', { inventory: [] })

Czyli podajemy ten sam identyfikator, typ dla zaspokojenia potrzeb TS i walidacji oraz dane, które mają zostać wysłane do nakładki. To wszystko! Więcej przykładów możesz znaleźć na naszym GitLabie oraz w Snippetach na Discordzie.

Zacznij w przeglądarce

Nie ma sensu zaczynać budowy UI od razu w Gothicu, w przykładach używamy Reacta, którego łatwo odpalisz na lokalnym serwerze http. Jeżeli planujesz budować własne UI, możesz zbudować sobie stronę typu "living style guide", jest to strona ze wszystkimi dostępnymi komponentami dla Twojego UI i przykładami użycia. Dzięki temu będziesz mógł skończyć całe UI bez odpalania gry. Podstawową interakcję z grą możesz również sprawdzić z poziomu przeglądarki, komendy wysyłane normalnie do gry, są wyświetlane na konsoli deweloperskiej, gdy strona jest otwarta w przeglądarce, a nie jako nakładka.

Fałszywy stan (mocking)

Mock to taki obiekt, który symuluje prawdziwy docelowy obiekt, kiedy nie masz np. do niego dostępu. Testując stronę internetową do zarządzania kartami kredytowymi, mógłbyś mieć mocka, który udaje serwis zarządzania nimi, bo przecież nie chcesz naprawdę blokować karty podczas testów. Warto podobny mechanizm zastosować budując UI w Gothicu. Weźmy sobie za przykład element UI, który wyświetla aktualne życie i manę gracza, w normalnych warunkach dane to przychodzą z trybu gry, ale na etapie tworzenia UI nie chcesz odpalać Gothica, więc event nigdy nie przyjdzie, możesz więc tymczasowo wybrać, że stan HP się np. losuje od 0 do 100. Możesz zamiast useGameState użyć tymczasowo stanu zczytanego z np. pliku JSON. Podczas tworzenia Castle Defense nie używaliśmy mocków, tylko zwyczajnie zahardkodowanych wartości w momencie stylowania UI. Jest to nieco mniej profesjonalna metoda, ale może być wystarczająca.

Praca z Gothickiem

Ostatecznie testowanie UI musi odbyć się w grze, możesz natomiast nadal używać konsoli deweloperskiej. Aby ją odpalić musisz mieć opcję debug ustawioną na true w pliku konfiguracyjnym GothicTogether.json i nacisnąć klawisz F12, mając zaznaczony launcher. Powinny pojawić Ci się okna z konsolami deweloperskimi, po jednej na każde otwarte okno, możesz sprawdzić błędy, czy na żywo zmienić style, zupełnie tak samo jak przy normalnej stronie internetowej. Dobrą sztuczką może też być wpisanie w nią window.location.reload(), co przeładuje stronę (bez potrzeby restartowania Gothica).