Unity3d QuickTip – czyli szybkie porady, rozwiązania częstych problemów i sztuczki w Unity3d!

Dzisiejszy odcinek: Jak zrobić menu opcji w grze?

Uwaga! Jest to poradnik typu QuickTip. Zatem skupia się on na osiągnięciu założonego celu. Zatem zakładamy że użytkownik zna na tyle program Unity3d, aby samodzielnie wykonać najprostsze czynności, jak np. dodanie modelu kostki do sceny czy dodanie modelowi jakiegoś komponentu. Jeżeli brakuje Ci tej podstawowej wiedzy, zapraszam do tutoriala:
Unity Tutorial – Podstawy

Poniższy tutorial jest pracą konkursową, a jej autorem jest: Chraczil. Skrypty w tutorialu zostały napisane w języku JavaScript.

Na początek trzeba przygotować przyciski i slidery w Unity.

Po włączeniu gry powinno pojawić nam się okno menu z czterema przyciskami: „Graj”, „Twórcy”, ” Opcje”, „Wyjście”.

Gdy naciśniemy na „Graj” pokażą nam się trzy przyciski: „Nowa Gra”, „Kontynuuj” i „Menu”. Dla „Twórców” robimy nową scenę o nazwie „Tworcy”, na której powinna być jedna kamera z tłem najlepiej ustawionym na czarno.

W opcjach będą potrzebne nam dwa slidery, jeden dla jasności, drugi – głośność. A także dwa małe przyciski w jednym miejscu. Jeden zostaje uaktywniony, a drugi wyłączony, do któregoś podpinamy komponent „Text” i ustawiamy mu wartość na „X”, będzie to wybór pełnego ekranu.

Są potrzebne także: jeden mniejszy przycisk z komponentem „Text” i wartością „<„, po prawej 4 pola, w tym samym miejscu, z komponentami „Text”, mają mieć wartości „Wyłączony”, „X2”, „X4”, „X8”, po lewej przycisk „>” jest to wybór aliasingu.

Następnie dwa pola do wprowadzania tekstu, będzie to opcja rozdzielczości, damy wybór co do piksela, wartość wpisana będzie ustawiana, ustawiamy im w opcjach Content Type na Integer Number – dzięki temu wpisywane są tylko liczby, a także Character Limit na 4 – mamy ograniczenie do 4 znaków.

Zostały tylko dwa przyciski: „Zapisz” i „Wstecz”.

Jeszcze w inspektorze dla sliderów jasności i głośności szukamy na dole trzech opcji, „Min Value”, „Max Value” i „Whole Numbers”. Pierwsze oznacza najmniejszą możliwą wartość dla naszego slidera, druga największą, nie chcemy mieć minusowej jasności, dlatego ustawiamy ją na zero, a największa będzie to 1. Trzecia opcja pyta nas czy chcemy mieć liczby całkowite, czy ułamki. Mu odznaczamy, czyli działamy tu na ułamkach.Opcje już przygotowane, teraz wystarczy dać w wyjściu „Czy na pewno?” i „Tak”, „Nie”.

Po skończeniu całość wygląda tak:

Wygląd końcowy
Wygląd końcowy

Dobrze by było, gdybyśmy wszystko ponazywali i posegregowali jak ja:

Układ w oknie hierarchy
Układ w oknie hierarchy

Teraz możemy zabrać się, za pisanie skryptu. Będzie on w języku javaScript. Dlatego tworzymy nowy skrypt, mój jest nazwany „MenuUI”. Przypinamy go do kamery.Na początek zróbmy sobie wyjście. Chcemy, by po naciśnięciu przycisku wyjścia pokazało nam się okienko z pytaniem „Czy na pewno chcemy wyjść?” i dwiema opcjami wyboru.

Zróbmy dwie zmienne. Jedna pomieści nasz obiekt wyjścia, a druga całe menu (ten obiekt, który ukazuje nam się po starcie sceny).

Teraz napiszmy funkcję, która spowoduje wyłączenie obiektu z menu, a włączy okno wyboru.

Szukamy w hierarchii naszego przycisku „wyjście” i dodajemy mu w funkcji OnClick obiekt naszej kamery i W rozwijanym menu szukamy naszego skryptu, a także tej funkcji. Dodajemy ją i to tyle. Teraz trzeba zrobić funkcje wyjścia z gry, oraz funkcje, która po naciśnięciu na „NIE” cofnie nas do menu:

Wystarczy jeszcze tylko pouzupełniać wszystko. To samo co poprzednio robimy tutaj – dodajemy kamerę i wybieramy odpowiednie funkcje.Teraz możemy już wychodzić z gry i wracać do menu (Application.Quit(); działa tylko w zbudowanej grze! W Unity nie uda nam się tego włączyć). Teraz możemy zrobić coś podobnego z „Twórcy”. Stworzymy funkcję:

Również tę funkcję dodajemy do przycisku „Twórcy”. Przeniesie nas to do innej sceny. Tutaj damy skrypt do kamery, ale to później. ;) Dwa przyciski już mamy zrobiony, teraz zabierzmy się za rozpoczęcie gry.

Dajemy zmienną odpowiedzialną za pokazanie naszego okienka:

I funkcje obsługujące kolejne przyciski:

Przypisujemy tę funkcję do naszego przycisku „GRAJ”. To spowoduję włączenie przycisków „MENU”,  „NOWA GRA” i „KONTYNUUJ”. Zadeklarujmy zmienną.

Będziemy ją zapisywać na początek każdego poziomu. Będzie ona nam mówiła, na którym poziomie ostatnio skończyliśmy. Będziemy ją wczytywali w tym skrypcie, w nowej funkcji, którą sobie zrobimy później. :) Teraz odpowiednie funkcje:

Odpowiednio dodajemy funkcje do przycisków. W funkcji nowej gry na początku nadpisujemy wartość ostatniego poziomu na numer poziomu pierwszego. U mnie pierwszy poziom ma wartość 3 więc dałem go tutaj.Jeśli mamy inne opcje zapisu to je też je tutaj nadpisujemy na wartości wyzerowujące, czyli po prostu takie, jak byśmy uruchamiali grę pierwszy raz. Druga funkcja ładuje scenę na której skończyliśmy ostatnio grę. Teraz wystarczy do przycisku „MENU” dodać funkcję cofnij1 i dopisać do niej to:

I zostały nam tylko do zrobienia opcje gry. :) Na początek włączmy opcje.

Dodajemy to do przycisku „Opcje” znajdującym się w menu głównym. Teraz zróbmy pierwszą opcję, czyli wyboru jasności. Dajemy sobie zmienne:

Pierwsza to zwykła liczba, która zawiera informację na temat poziomu jasności w przedziale 0-100. Druga to obiekt slideru jasności.

Tworzymy funkcję Update, chyba, że już ją mamy i dajemy jej dwie linijki kodu:

W pierwszej linijce przypisujemy zmiennej poziom wartości slidera. Funkcje jasnoscSlider.value odczytuje wartość, ale jest ona podawana w wielu miejscach po przecinku, dlatego zaokrąglamy ją funkcją Round. Niestety ta funkcja zaokrągla do liczb całkowitych, dlatego wykonujemy proste działanie mnożenia i dzielenia przez 100. Dzięki temu mamy zaokrąglenie do dwóch miejsc po przecinku.

Druga linia to ustawienie poziomu jasności. Cztery parametry, są to kolory RGBA, czyli czerwony, zielony, niebieski i kolor alfa. Im mniejsze wartości tym ciemniejszy świat gry. Dlatego ustawiamy poziomy jasności na poziom naszego slidera, a ostatnie zostawiamy na 1, bo nie chcemy przeźroczystości zmieniać. :)Następna opcja to głośność. Dajemy zmienne, których nie muszę już tłumaczyć.

I w Update dajemy to:

Druga linia oznacza przypisanie głośności w grze.Opcja AntiAliasingu. Będą do wybory trzy poziomy lub wyłączenie.

Pierwsza zmienna będzie przechowywała numer naszego antiAliasingu, następne są obiektami, polami, które zostaną wyświetlone po wybraniu odpowiedniej opcji. Opcje będziemy wybierać dzięki przyciskom. Stwórzmy sobie funkcję.

Dajemy tę funkcję do dwóch przycisków obok pola tekstowego z wybranym aliasingiem. „Dzialanie” jest to liczba, która będzie przyznawana przez odpowiedni przycisk. Jeśli dzialanie jest równe 2, to zwiększamy

poziom, jeśli 1 – zmniejszamy. Do tego dołożone są dwa warunki, dzięki którym nie wyjdziemy poza skalę. To idzie do Update:

Tutaj sprawdzamy jaką wartość ma nasz wybór, następnie ustawiamy go (wartość 1 oznacza wyłączony), włączamy nasz obiekt i wyłączamy przyciski. Jeśli jakimś cudem okaże się, że poziom aliasingu jest wyższy lub niższy od dostępnych, zwracamy informację o tym i wyłączamy. Teraz dajmy opcję wyboru, czy nasza gra jest w pełnym ekranie, na początek zmienne:

Pierwsza jak i ostatnia zmienna oznacza, czy wybrany ekran jest pełen, czy nie. Druga to tablica, wktórej będziemy trzymać nasze dwa przyciski, które zrobiliśmy na początku, aktywacja jednego spowoduje wyłączenie go, a włączenie drugiego. Każdy z guzików w inspektorze w funkcji OnClick powinien mieć naszą kamerę, funkcję, którą zaraz napiszemy i ten, który będzie widoczny, gdy ekran jest pełen powinien mieć wartość 0,a drugi wartość 1.

A oto nasza prosta funkcja:

Chyba nie trzeba tłumaczyć co się tu znajduje? :) Proste przypisanie wartości do zmiennej. Jeszcze zostało nam zmiana z typu int, na boolean, a także pokazanie odpowiedniego obiektu. Dodajemy to do funkcji Update:

Sprawdzamy, czy ekran powinien być całkowity i przypisujemy odpowiednią wartość do naszej zmiennej ekranPelen, a także włączamy odpowiedni przycisk.Jeszcze damy jedną funkcję, a dokładniej tę do wyboru rozdzielczości.

Zmienne:

Pierwsze dwie są polami textowymi, do których użytkownik będzie wpisywał roździelczość jaką chce. Po w pisaniu wartości, zmienne będą miały wartości typu String, a my potrzebujemy float, dlatego użyjemy Vector2. Po otworzenia w inspektorze naszych pól, zobaczymy, że mają one dwie funkcje: „OnValueChange” i „EndEdit”. Pierwsza z nich jest wykonana od razu, gdy wpiszemy coś, druga, gdy już skończymy i zatwierdzimy to klawiszem Enter, lub klikając gdzieś indziej. Nie chcemy by rozdzielczość zmieniała się od razu po wpisaniu, bo gdyby nasz gracz chciał wpisać 1920, to na początku od razu zmieniłoby mu się to na 1, co może być lekko denerwujące.

Dwie bardzo podobne funkcje, które robią prawie to samo, dlatego omówię tylko jedną.

Na początku tworzymy  zmienną o nazwie X, używamy tu funkcji parseFloat, która zamienia zmienną String na Float. W tej funkcji używamy wprowadzanyTekstX.text by pobrać komponent text. Następnie gdy mamy już nasz wymiar sprawdzamy, czy nasz wymiar nie jest przypadkiem pusty, nie za mały i nie za wielki. W innym przypadku pobieramy z naszego ekranu aktualną rozdzielczość i przypisujemy tę wartość do naszego pola tekstowego. Musimy przypisać zmienną typu String, dlatego używamy prostej funkcji ToString do zamiany tego.Zostało jeszcze dodać w Update to:

Ustawiamy w naszym ekranie rozdzielczość na wymiary x i y z naszego Vector2, a także ustawiamy pełen ekran. Można by zostawić ten skrypt już, ale gdy wyjdziemy z gry i zagramy ponownie, to wszystkie opcje ponownie staną w domyślnych miejscach, dlatego zapiszmy to sobie.

Ale jak zapisujemy coś, to wypadałoby to wczytać:

I jeszcze dodajmy do funkcji cofnij nasz obiekt.

PlayerPrefs zapisuje lub wczytuje daną zmienną pod nazwą podaną w nawiasach, jasnoscSlider.value = jasnosc; przypisuje pozycje naszemu sliderowi wprowadzanyTekstX.text = wprowadzonyTekst.x.ToString() przypisuje nam wartość w polu tekstowym. Pierwszą funkcję dodajemy do przycisku „Zapisz”, a drugą dodajemy jako kolejną funkcję do Przycisku „Wstecz”. Jescze została nam do napisania krótka funkcja Awake, która wykonuje się przed funkcją Start.

Raczej nic skomplikowanego tu nie ma. Na początku wykonuje się funkcja wczytaj, następnie sprawdzamy, czy przypadkiem nie uruchamiamy gry pierwszy raz, przez co zmienne mają wartości po 0 i przypisujemy im standardowe wartości. Na koniec inpsektor naszego skryptu wygląda tak:

Końcowy wygląd skryptu w oknie inspector.
Końcowy wygląd skryptu w oknie inspector.

Prawie zapomnielibyśmy o jeszcze jednym skrypcie, a dokładnie, o skrypcie do Twórców. Więc stwórzmy sobie nowy i dodajmy mu te dwie zmienne:

„wysokosc” jest to pozycja naszego textu, a czcionka, to po prostu nasza czcionka. Dodajmy funkcję OnGUI:

W pierwszej linijce tworzymy obiekt Label, czyli zwykły text, a następnie podajemy jego pozycje w x i y, a także szerokość i wysokość. Użyliśmy odejmowania od naszej wysokości ekranu, aby po włączeniu tej sceny tekst od razu wyskoczył nam z dołu, a użyliśmy wymiaru szerokości naszego ekranu, by nie znajdował się napis poza nim, ostatni parametr powinien być jak największy, by nie skończyła nam się długość, a tekst nie. W cudzysłowie zawarty jest text który chcemy tam umieścić, znak „\n” odpowiada przejściu linię w dół.Następnie mamy ustawienie pozycji naszego text, dzięki temu będzie on się znajdował na środku, u góry.Dwie pozostałe linijki to rozmiar naszej czcionki i sama ona. Zostało tylko dodać to w funkcji Update:

By wysokość stale się zwiększała Dodajemy do niej Co sekundę 100 i gdybyśmy chcieli wrócić do naszego menu naciśniemy klawisz Ecsape.

Całe menu już działa, tyle, że jeśli wejdziemy w inny poziom, to tam nie zadziałają te opcje, dlatego należy dać w nim inny skrypt, który będzie posiadał funkcje Awake, wczytaj i update, z naszego poradnika. Ten poradnik właśnie się skończył. Dziękuję za przeczytanie.

Kompletny skrypt: