W tym wpisie zajmiemy się stworzeniem interfejsu podczas naszej rozgrywki. Będzie to taki swoisty szkic oparty na wyświetlaniu tekstu we właściwym miejscu na ekranie. Do utworzenia tego posłuży nam klasa Viewport, która pozwala na tworzenie widoków w kilku trybach wyświetlania. Początkowymi naszymi założeniami będzie, aby na ekranie w górnym lewym rogu wyświetlały się obecne współrzędne bohatera, w prawym górnym rogu życie naszej postaci oraz pomiędzy pierwszym, a drugim tekstem (na środku) suma zdobytych punktów.

Tryby widoków

Na początku wspomniałem, iż opisywana dziś klasa, ma kilka trybów. Pokrótce omówię każdy z nich.

StretchViewport – tworzy wirtualny rozmiar ekranu określony przez współrzędne szerokości oraz wysokości. Dopasowuję się zawsze do szerokości ekranu, nie tworząc pasków po bokach, zmieniając kształt w wyniku skalowania.

FitViewport – również obsługuje wirtualny rozmiar ekranu. Zachowuje proporcje wirtualnego rozmiaru ekranu, dopasowując go do wielkości monitora, jednak w tym trybie mogą pojawić się paski po bokach.

FillViewport – zachowuje współczynnik kształtu oraz wypełnia cały ekran. Jednak może spowodować odcięcie fragmentów wirtualnego ekranu.

ScreenViewport – nie ma stałego rozmiaru ekranu wirtualnego. Zawsze dopasowuje do wielkości ekranu. Osoba z większym ekranem zobaczy większy obszar gry, niż osoba z mniejszym.

ExtendViewport – zachowuje współczynnik kształtu bez czarnych pasów, poszerzając świat w jednym kierunku. Obraz jest skalowany, a następnie krótszy wymiar zostaje wydłużony.

CustomViewport – dzięki tego trybu można stosować własne tryby skalowania obrazu np. przy zmianie rozmiaru okna.

Interfejs gry

Po omówieniu trybów skalowania obrazu w widoku, czas zająć się naszym interfejsem gry. Zacznijmy od utworzenia klasy Interface.java

public class Interface extends Actor{ private String player; private String score; private String life; private BitmapFont playerFont; private BitmapFont scoreFont; private BitmapFont lifeFont; public Interface(){ playerFont = new BitmapFont(); scoreFont = new BitmapFont(); lifeFont = new BitmapFont(); playerFont.setColor(Color.WHITE); scoreFont.setColor(Color.WHITE); lifeFont.setColor(Color.WHITE); } public String getPlayer() { return player; } public void setPlayer(String player) { this.player = player; } public String getScore() { return score; } public void setScore(String monster) { this.score = monster; } public String getLife() { return life; } public void setLife(String life) { this.life = life; } @Override public void draw(Batch batch, float parentAlpha){ playerFont.draw(batch, player, 5, 475); scoreFont.draw(batch, score, 300, 475); lifeFont.draw(batch, life, 570, 475); } }

Klasa dziedziczy po klasie Actor, która umożliwi dodanie do sceny naszego widoku. We wstępie napisałem, iż nasza gra będzie wyświetlała tekst odpowiedzialny za współrzędne gracza, jego życie oraz ilość zdobytych punktów. Dlatego nasza nowa klasa posiada trzy atrybuty typu String oraz odpowiednio trzy typu BitmapFont. W konstruktorze inicjalizujemy zmienne klasy BitmapFont oraz ustawiamy im kolor na biały. Następne linijki to gettery i settery. Ostatnia metoda draw zostaje nadpisana i tutaj mamy linijki odpowiedzialne za wyświetlanie odpowiednio współrzędnych, wyniku i życia. Rysowanie odbywa się dzięki metody draw, która przyjmuje jako pierwszy argument obiekt klasy Batch, następny argument to wyświetlany tekst, a kolejne dwa to współrzędne – miejsce początku wyświetlania.

Teraz przechodzimy do naszej klasy UWar.java, gdzie dodajemy dwa nowe pola.

private Stage stage; private Interface myinterface;

Uzupełniamy metodę create w inicjalizacje nowych zmiennych oraz odpowiednio je ustawiamy.

stage = new Stage(new ScreenViewport()); myinterface = new Interface(); stage.addActor(myinterface); Gdx.input.setInputProcessor(stage);

Pierw inicjalizujemy zmienną stage wybierając tryb widoku, następnie myinterface. W kolejnej linijce dodajemy aktora do naszej sceny. Ostatnie co pozostaje zrobić to ustawić wejście jako naszą scenę.

// ustawienie współrzędnych playera myinterface.setPlayer("x: " + player.x + " y: " + player.y); // ustawienie życia bohatera myinterface.setLife("Life: " + player.getHp()); // ustawienie obecnego wyniku myinterface.setScore(player.getScore() + "");

Teraz aby wartości się zmieniały (na razie nie zobaczymy zmiany wyniku gry, ale już niebawem…) należy w metodzie update odświeżać stan zmiennych typu String. dzięki metody setLife ustawiamy obecną wartość pobraną z obiekty klasy Player.

Efekt naszej dzisiejszej pracy.

Podsumowanie

Stworzyliśmy dziś prosty interfejs, na razie zbudowany tylko z tekstów, ale w przyszłości zostanie wypełniony grafikami, tak aby ładniej prezentował się dla oka. Powoli gra zaczyna nabierać kształtów. Zbliża się czas świąt, który postaram się w wolnych chwilach przeznaczyć na przemyślenia związane z mechaniką oraz całą otoczką wizualną gry. Na dziś to wszystko, miłego i do następnego…

Pozdrawiam,

sirmarbug