Interfejs rozgrywki

W tym wpisie zajmiemy się ostatnim elementem, tworzącym wygląd naszej gry. Pozostał nam do zrobienia interfejs wyświetlany podczas potyczki. Nie będzie to długi wpis, jednak kończący naszą pracę nad aspektami estetycznymi projektu UWar. Już niebawem, możemy się spodziewać, udostępnienia gry dla użytkowników komputerów z systemem Linux, macOS oraz Windows.

Pliki graficzne

Jak we wcześniejszych wpisach, tym razem również przygotowałem pliki graficzne wykorzystane do utworzenia nowych elementów wyglądu. Podobnie jak z grafikami postaci, wykorzystałem udostępnione elementy na stronie kenney, modyfikując je.

Te dwa elementy wykorzystamy do wyświetlania danych oraz komunikatów na ekranie. Komunikaty to informacje o zdarzeniach w grze np. zebranie prezentu przez gracza. Natomiast dane to informacje o stanie rozgrywki, poziom, stan życia itp.

Implementacja

Przechodzimy do klasy, którą utworzyliśmy w jednym z wcześniejszych wpisów Designer – Interfejs gry. Interface.java i dodajemy dwa nowe pola z teksturami, które będziemy wyświetlać na ekranie.

private Texture statTexture; private Texture infoTexture;

Następnie inicjalizujemy zmienne, podając w konstruktorze ścieżkę do plików.

statTexture = new Texture("ui/panel.png"); infoTexture = new Texture("ui/info.png");

Teraz pozostaje zrobić nam wyświetlanie nowych elementów na ekranie. Przechodzimy do metody render(), gdzie dodajemy dwie linijki kodu odpowiedzialne za wyświetlanie dwóch kwadratów. W tych elementach będą znajdowały się dane statystyczne z gry takie jak życie bohatera, poziom zniszczeń bazy, czas pozostały bonusu, obecny poziom na którym znajduję się gracz oraz ilość zebranych punktów.

batch.draw(statTexture, Gdx.graphics.getWidth() * 0.92f - statTexture.getWidth() / 2, Gdx.graphics.getHeight() * 0.89f - statTexture.getHeight() / 2); batch.draw(statTexture, Gdx.graphics.getWidth() * 0.08f - statTexture.getWidth() / 2, Gdx.graphics.getHeight() * 0.89f - statTexture.getHeight() / 2);

Jest to wyświeltanie tekstury, jak już stosowaliśmy wiele razy podczas tworzenia tego projektu. Pierwszym parametrem jest zmienna klasy Texture. Kolejna to współrzędna x, czyli szerokość, będąca 92 procentami korzystanej przez ekran rozdzielczości pomniejszona o połowę szerokości tekstury. Ostatni argument to wysokość, który w naszym przypadku jest 89 procentami wysokości monitora, pomniejszony o połowę wysokości tektury.

W podobny sposób wyświetlamy drugi kwadrat po lewej stronie ekranu.

Pozostało nam jeszcze wyświetlić na ekranie zmienną infoTexture, która będzie wyświetlana tylko w chwili, gdy na ekranie będzie widoczny komunikat.

if (info != "") { batch.draw(infoTexture, Gdx.graphics.getWidth() / 2 - infoTexture.getWidth() / 2, Gdx.graphics.getHeight() * 0.05f - infoTexture.getHeight() / 2); }

W ten sam sposób jak opisany wyżej wyświetlamy również tą teksturę.

Efekty pracy

Wynikiem naszej pracy jest ładnie prezentujący się interfejs podczas rozgrywki, przedstawiony na poniższym screenie.

Podsumowanie

W tym wpisie udało nam się, stworzyć nowy wygląd interfejsu, widziany podczas gry. Kończymy etap tworzenia interfejsu. W kolejnym poście zajmiemy się dźwiękami jakie będą odtwarzane podczas gry.

Pozdrawiam,

sirmarbug