Zróbmy sobie gre #1 - Tworzymy projekt i prototyp UI

Pierwsza część kursu z tworzenia naszej gry! Niestety spóźniony o kilka dni, chciałem szybciej lecz nie mogłem :(. Ale to nic, zabieramy się do roboty!

Co dzisiaj zrobimy?

Stworzymy w Unity projekt dla naszej gry i utworzymy odpowiednie foldery, by łatwiej nam się pracowało. Następnie wykonamy prosty prototyp UI (User Interface/Interfejs Użytkownika), na podstawie grafiki koncepcyjnej z poprzedniej części. Pozwoli nam to zobrazować jak będzie wyglądała gra, bardziej od strony "technicznej".

Zaczynamy!

Gdy otworzymy Unity, powinno wyświetlić się nam takie okno:



Informuje nas, że nie mamy stworzonego żadnego "lokalnego" projektu. Lokalny czyli mowa o naszym komputerze. Jak widać po lewej, możemy mieć projekt w chmurze. Dla zaciekawionych: projekt jest zapisywany w chmurze Unity, dostęp do niego mają tylko ci, których email'e są przypisane do projektu. Fakt, że jest ono w chmurze, pozwala nam pracować nad nim z dowolnego komputera i z dowolnego miejsca (prawie... musimy mieć dostęp do internetu). Cały projekt pobieramy na nasz komputer tylko raz, pracujemy a następnie wysyłamy z powrotem do chmury. Wysyłane są tylko nowe pliki i te, które zostały zmodyfikowane.

Żeby stworzyć projekt klikamy w przycisk New project lub na górze New i pojawi nam się takie okno:



Nadajemy odpowiednią nam nazwę, w tym przypadku Steem Clicker. Wybieramy lokalizację, gdzie ma znajdować się projekt na naszym dysku (lepiej tam, gdzie mamy dużo miejsca). Można dodać różne assety, lecz nie będziemy potrzebowali. I mamy jeszcze do wyboru, czy to ma być gra 2D czy 3D. Wybór ten, wiąże się ze mianą ustawień kamery, metody importowania np. tekstur - w 2D staje się spritem, itd itd. Oczywiście nie zostajemy uwięzieni gdy przypadkowo zmieniliśmy wymiary. To tylko wyręcza nas w zmienianiu pewnych opcji. Możemy równie dobrze tworzyć grę 2D a w Unity mieć podgląd w 3D. Żeby to zrozumieć, wybierzemy właśnie opcję 3D :)

Chwilkę musimy zaczekać, Unity pobierze co tam będzie chciał i ukaże nam się okno:



Na szybko wytłumaczę co i jak:
► Scene - Scena na której mamy podgląd naszej gry, tutaj wszystko ustawiamy.
► Game - Podgląd naszej gry. Wyżej mamy 3 przyciski, w tym pierwszy to Play który "włącza" naszą grę i możemy normalnie w nią grać. Co to będzie w tej zakładce, to będzie już w gotowej grze.
► Hierarchy - Hierarchia obiektów znajdujących się w grze a dokładniej na scenie (wytłumaczę w innej części).
► Inspector - To takie.. "miejsce" gdzie dodajemy/zmieniamy/usuwamy komponenty oraz parametry danego obiektu.
► Project - Tu znajdują się wszystko co "tworzy" grę. Modele, tekstury, dźwięki, czcionki, skrypty, shadery itd itd. Żeby coś znalazło się w grze, najpierw tutaj musi się znaleźć.
► Przyciski - Tu polecam samemu poklikać, żeby się z tym zapoznać. W lewym górnym roku jest jakaś łapka (przemieszczanie się po scenie), kierunki świata (zmiana położenia obiektu), zakręcone strzałki (zmiana rotacji obiektu), jakiś kwadracik co strzela strzałkami (skalowanie względem osi), jakieś kółeczko zamknięte w kwadracie o okrągłych rogach (skalowanie względem krawędzi obiektu)... Troszkę intuicyjnie ;)

Pierwszym krokiem będzie stworzenie Canvas z odpowiednimi parametrami. Klikamy w GameObject → UI → Canvas.



W skrypcie Canvas Scaler zmieniamy opcje:
► UI Scale Mode na Scale With Screen Size.
► Reference Resolution na 1280x720.
► Match na 0.5.
Oraz w Game zmieniamy rozdzielczość na 16:9



No dobra, ale co właściwie jest ten cały Canvas i co zrobiliśmy? Otóż Canvas to płótno. Tak jak malarze malują na płótnie, tak my też "malujemy" na płótnie. Te parametry które zmieniliśmy, wpłyną teraz na to, że całe płótno będzie skalowane według rozdzielczości ekranu (z nastawieniem na 1280x720), oraz z odpowiednią proporcją (stąd 0.5 w match, czyli i szerokość i wysokość skalowane są tak samo, żadne nie jest "ważniejsze"). W skrócie: niezależnie od rozdzielczości ekranu, gra będzie u każdego wyglądać tak samo (a przynajmniej powinna).

Następnie w hierarchii klikamy prawym przyciskiem na utworzony Canvas, najeżdżamy na UI i wybieramy Image.



W Rect Transform naciskamy kwadracik i z WCIŚNIĘTYM Alt'em wybieramy opcję jak na zdjęciu. W ten sposób nasz obraz będzie dopasowany do rozmiarów Canvas.



Teraz pobieramy grafikę koncepcyjną z poprzedniej części (link na dole), przeciągamy na zakładkę w Project → Assets i zmieniamy Texture Type na Sprite (2D and UI). Można też mu zmienić nazwę, ja zmieniłem na koncepcja.



Teraz klikamy w hierarchii w Image i przeciągamy nasz Sprite na Source Image. I powinna nam się wyświetlić w Game na całym ekranie nasza grafika koncepcyjna. Możemy również naszemu Image zmienić nazwę np. na koncepcja. W przyszłości ten obiekt usuniemy.



Klikamy w Color na biały pasek (to kolor naszego obrazka) i wartość A zmniejszamy o połowę (tu obrazka nie muszę dawać ;) ).Chodzi o to, by obrazek był w połowie transparentny, co pozwoli na łatwiejszą pracę.
Co nam to dało że wstawiliśmy taką grafikę? Otóż przez całą/część pracy będziemy widzieć jak nasza gra będzie wyglądać. Gdzie rozmieścić grafikę, gdzie przyciski, gdzie jakiś tekst dać - wszystko jest łatwiej dopasować do siebie. Teraz tylko wystarczy umieścić te rzeczy według naszej grafiki. Więc klikamy prawym przyciskiem myszy na Canvas i z UI wybieramy Button. I ustawiamy pozycję na lewy górny róg (tak jak wyżej opisywałem).



I teraz, tam gdzie mamy te przyciski: łapka, współrzędne, kręcące się strzałki... wybieramy ten 5-ty przycisk (kółko w kwadracie), w zakładce Scene "łapiemy" za krawędzie i dopasowujemy do pierwszego przycisku z grafiki koncepcyjnej. Na Scenie kółkiem od myszki przybliżamy/oddalamy, naciskając kółko "łapiemy" widok i go przesuwamy (nie wiem jak to dokładniej opisać) a trzymając prawy przycisk myszy, możemy obracać widokiem ("rozglądać się"). Efekt powinien być taki:



Teraz musimy kliknąć w nasz button w oknie hierarchii i wcisnąć Ctrl + D by go zduplikować. Klikamy w przycisk do zmiany położenia (współrzędne, na górze), łamiemy za strzałkę odpowiadającą za ruch w osi Y i zjeżdżamy na niższy przycisk z grafiki. I z trzecim też tak robimy.



Jeszcze raz duplikujemy i zmieniamy w Rect Transform jego położenie na lewy dolny róg i ustawiamy go na najniższym przycisku. Duplikujemy, aż będziemy mieli 4 przyciski.



I znów duplikujemy, zmieniamy jego położenie w Rect Transform na prawy dolny róg, dopasowujemy do najniższego przycisku z grafiki i duplikujemy aż będziemy mieli 4 przyciski.



Teraz znów duplikujemy i zmieniamy położenie na dolną krawędź (między lewym a prawym rogiem :D). I ustawiamy go na przycisk do zamiany STEEM na STEEM POWER. I dopasowujemy jego krawędzie do przycisku z grafiki.



Jak widać większość UI to przyciski :D. Teraz musimy zrobić te środkowe przyciski i ten w prawym górnym rogu. Duplikujemy, ustawiamy pozycję na środkową i dopasowujemy. Oczywiście, ale nasze przyciski są kwadratowe a grafika pokazuje, że powinny być okrągłe... To nic nie szkodzi. Na przyciski nałożymy odpowiednią grafikę, więc ten obszar "poza" kołem będzie transparentny. Jak spojrzysz na to miejsce gdzie zmieniasz jego położenie, zobaczysz, że jest tam informacja o długości i szerokości tego przycisku. Możemy go zmieniać i nadać mu takie wartości by ten przycisk był kwadratowy.



No dobra.. Wszystkie przyciski mamy już za sobą, teraz tekst. Klikamy w Canvas prawym przyciskiem myszy i z UI wybieramy Text. Robimy tak samo jak z przyciskami. Wybieramy odpowiednią pozycję w Rect Transform i ustawiamy go w odpowiednie miejsca. Jednak zrobimy mały wyjątek dla tekstu góry znajdzie się na samej górze. Napisy "Steem: xxx", "Followers: xxx" itd, będziemy wyświetlać przez skrypt, jedyny wyjątek to nazwa gry na samej górze. Tekst który będzie tam umiejscowiony, umieszczamy na samej górze i rozciągamy w szerokości aż do kresek. Wpisujemy w Text nazwę naszej gry "STEEM CLICKER" i po enterze dolne podkreślniki. Niestety nie możemy pisać tekstu podkreślonego, więc to taki mały, sprytny sposób jak to obejść. I zmieniamy:
► Font Style na Bold.
► Font Size odpowiedna wielkość czcionki, ja dałem 35.
► Line Spacing odległość między wierszami, ustawiamy tyle by wyglądało jak podkreślenie tekstu, ja dałem -0.06.
► Alignment na środek w pionie i w poziomie.



I teraz musimy znów stworzyć nowy text, nie przez duplikowanie, by mieć podstawowe parametry. I jak wyżej napisałem, postępujemy tak jak z przyciskami. Ustawiamy je tam gdzie powinny być ;) Przy Steem Power, liczba od delegacji powinna mieć osobny text.





I to tyle na dzisiaj :) Niektórzy pewnie zauważyli, że nagle pojawiło się w Assets "map01". Jest to zapisana scena. Trzeba kliknąć w File → Save Scene. Można mieć wiele scen i na każdej co innego (w sumie po to ona jest xd), lecz nasz projekt tego nie wymaga.
Tak więc mamy w miarę rozłożone elementy UI, w następnych częściach będziemy już pisać skrypty które będą je obsługiwały. Więc zachęcam do śledzenia :)