Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00048 006176 20590351 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
Unity. Przepisy na interfejs gry - ebook/pdf
Unity. Przepisy na interfejs gry - ebook/pdf
Autor: Liczba stron: 272
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-2886-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> gry >> programowanie gier
Porównaj ceny (książka, ebook (-50%), audiobook).
Czytaj online.
Komentuj

Ponad 60 przepisów pomocnych w budowaniu kunsztownych i profesjonalnych interfejsów, dzięki którym gry mogą stać się atrakcyjniejsze.

Umiejętność projektowania i implementacji interfejsów użytkownika jest szczególnie ważna dla programistów gier. Aby gra mogła porwać i wciągnąć gracza po uszy, jej interfejs musi być zarówno funkcjonalny, jak i przyjemny dla oka. Idealnym narzędziem do tworzenia gier jest Unity: program, który pozwala na konstruowanie doskonałych, dynamicznych interfejsów. Szczególnie atrakcyjne jest łączenie ze sobą elementów graficznych i kodu tworzonego w języku C# — w ten sposób Unity pozwala na osiąganie imponujących wyników.

Niniejsza książka jest przeznaczona dla osób, które chcą wykorzystać silnik Unity do tworzenia gier wideo. Przedstawiono tu sposoby implementacji systemów interfejsu użytkownika i łączenia ich z pozostałymi składnikami gry. Przygotowano ją jako zbiór przepisów na wykonanie określonych zadań, jednak najpierw omówiono tu zagadnienia podstawowe, a dopiero potem te nieco trudniejsze. Pozwala to na stopniowe doskonalenie umiejętności programistycznych. Podczas lektury książki warto zwrócić uwagę na odwołania do relacji między graczem a interfejsem gry — niezwykle ważny czynnik dla projektanta.

W książce omówiono: Francesco Sapio jest inżynierem informatyki i automatyki, utalentowanym projektantem gier komputerowych i doświadczonym użytkownikiem programów graficznych. Jest wybitnym znawcą oprogramowania Unity3D. Jest także muzykiem, ponadto przez kilka lat pracował jako aktor i tancerz. Sapio uwielbia matematykę, filozofię, logikę i rozwiązywanie zagadek, ale jego największą pasją jest projektowanie i programowanie gier.

Lubisz grać? Spróbuj zaprojektować i napisać swoją własną grę!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Unity UI Cookbook Tłumaczenie: Zbigniew Waśko ISBN: 978-83-283-2885-3 Copyright © Packt Publishing 2015. First published in the English language under the title „Unity UI Cookbook — (9781785885822)” Polish edition copyright © 2017 by Helion SA. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/unipig Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści O autorze O recenzentach Wstęp Rozdział 1. Podstawy interfejsu użytkownika Wprowadzenie Tworzenie obramowanego sprajta z dwuwymiarowej tekstury Dostosowanie rozmiarów interfejsu do wymiarów ekranu i jego rozdzielczości Wstawianie obrazów do interfejsu Maskowanie obrazu Przewijanie obrazu Przewijanie tekstu za pomocą pionowego suwaka Uaktywnianie przycisków za pośrednictwem klawiatury Stosowanie komponentów układu interfejsu Rozdział 2. Implementacja liczników i pasków życia Wprowadzenie Implementacja licznika punktów Implementacja licznika żyć Tworzenie modularnego licznika żetonów Tworzenie symbolicznego licznika żyć Implementacja liniowego paska zdrowia Implementacja kołowego paska zdrowia Implementacja paska zdrowia z pancerzem Scalanie wielu pasków Tworzenie pasków zdrowia w stylu Kingdom Hearts 7 8 9 13 13 14 17 19 22 24 26 32 35 39 39 40 44 48 54 58 62 64 68 72 Poleć książkęKup książkę Spis treści Rozdział 3. Implementacja timerów Wprowadzenie Implementacja timera cyfrowego Tworzenie timera liniowego Implementacja timera kołowego Tworzenie timera mieszanego Wyświetlanie czasu w formacie naturalnym Tworzenie zegara odliczającego czas i odpowiednio zmieniającego swój wygląd Rozdział 4. Tworzenie paneli sterujących Wprowadzenie Tworzenie grupy przełączników Wyświetlanie wartości suwaka w formacie procentowym Ustalanie granicznych położeń suwaka Oświetlanie elementów interfejsu Wykonanie panelu przesuwanego Wykonanie panelu o zmiennych wymiarach Obsługa techniki przeciągania i upuszczania elementów Wykonanie odtwarzacza MP3 Rozdział 5. Ozdabianie interfejsu Wprowadzenie Tworzenie rozszerzalnego elementu z końcowym efektem zanikania Tworzenie elementu rozszerzalnego i obrotowego z końcowym efektem zanikania Tworzenie słupków, które się wydłużają i skracają Tworzenie swobodnych elementów interfejsu Dodawanie cieni do tekstu Obrysowywanie konturów tekstu Rozdział 6. Animowanie interfejsu Wprowadzenie Wyświetlanie i ukrywanie menu Tworzenie menu z efektem przejścia otwierającego Tworzenie menu z animacją spoczynkową Animowanie przycisku wskazywanego przez kursor Tworzenie menu rozwijanego Animowanie serc w symbolicznym liczniku żyć Modyfikowanie animacji serc w symbolicznym liczniku żyć za pośrednictwem skryptu 77 77 78 80 84 86 90 93 99 99 100 103 105 110 113 115 119 122 129 129 130 133 138 143 146 148 151 151 151 155 159 160 163 166 168 4 Poleć książkęKup książkę Spis treści Rozdział 7. Modyfikowanie interfejsu podczas grania Wprowadzenie Tworzenie przycisku zmieniającego kolor Tworzenie suwaka zmieniającego kolory stopniowo Tworzenie prezentacji slajdów przy użyciu suwaka Tworzenie suwaka zmieniającego jeden kanał koloru Tworzenie pola edycyjnego z kontrolą poprawności wprowadzanych danych Tworzenie pola dla wpisywania hasła o określonej minimalnej liczbie znaków Zmienianie kursora w trakcie gry Rozdział 8. Implementacja zaawansowanych elementów HUD Wprowadzenie Tworzenie wyświetlacza odległości Tworzenie radaru kierunkowego Wyświetlanie napisów Rozdział 9. Interfejsy trójwymiarowe Wprowadzenie Tworzenie trójwymiarowego menu Dodawanie efektu przechylenia Tworzenie i umiejscawianie interfejsu trójwymiarowego Tworzenie i animowanie ostrzeżeń w trójwymiarowym interfejsie Rozdział 10. Tworzenie minimap Wprowadzenie Tworzenie minimapy Implementacja zaawansowanych funkcji minimap Skorowidz 171 171 172 175 178 184 190 198 202 207 207 208 216 222 229 229 230 233 237 239 245 245 246 251 265 5 Poleć książkęKup książkę Poleć książkęKup książkę 1 Podstawy interfejsu użytkownika Rozdział ten zawiera następujące przepisy:  Tworzenie obramowanego sprajta z dwuwymiarowej tekstury.  Dopasowywanie interfejsu do wymiarów i rozdzielczości ekranu.  Wstawianie obrazu do interfejsu.  Nakładanie okrągłej maski na obraz.  Implementacja przewijania obrazu.  Implementacja przewijania tekstu za pomocą pionowego suwaka.  Uaktywnianie przycisków za pośrednictwem klawiatury.  Porządkowanie interfejsu. Wprowadzenie W tym rozdziale postaram się objaśnić, jak należy używać podstawowych narzędzi do two- rzenia złożonych interfejsów. Omówię wstawianie i skalowanie elementów interfejsu, stoso- wanie masek w celu ukształtowania obrazów oraz mechanizm przewijania obrazów i tekstów za pomocą suwaków. Rozpoczniemy od utworzenia sprajta z obramowaniem. Będzie go można powiększać i po- mniejszać bez wprowadzania zniekształceń. Następnie objaśnię, jak zrobić interfejs, który można bez problemu dostosować do rozdzielczości ekranu. Poleć książkęKup książkę Unity. Przepisy na interfejs gry Później przyjrzymy się najpopularniejszemu składnikowi interfejsu, noszącemu nazwę Image (Script) (skrypt obrazu). Przy okazji pokażę, jak można zaimplementować bardziej złożone przekształcenia obrazu, np. maskowanie i przewijanie. Pokażę też, jak stworzyć mechanizm skryptowy umożliwiający aktywowanie przycisków za pośrednictwem klawiatury. Na koniec przyjrzymy się komponentom organizacyjnym, które pozwalają porządkować i sys- tematyzować rozbudowane interfejsy. Przygotowania Żeby zrealizować pierwszy przepis, musimy mieć zainstalowany program Unity 5. Zaczynamy od utworzenia nowego projektu. Projekt może mieć charakter dwu- lub trójwymiarowy, w za- leżności od tego, jaką grę zamierzamy tworzyć. Jeśli wybierzemy opcję dwóch wymiarów, pro- gram automatycznie zaimportuje nasze obrazy jako sprajty. Na potrzeby wykonywanych ćwiczeń wyszukaj kilka ładnych obrazów. Tworzenie obramowanego sprajta z dwuwymiarowej tekstury W celu dostosowania dwuwymiarowej tekstury do rozdzielczości ekranu może być konieczne wydzielenie w niej specjalnego obramowania. Pozwoli to wymusić właściwą rozdzielczość bez skalowania tych części obrazu, które mogłyby przez to zmienić swój pierwotny wygląd. Ob- ramowania są często stosowane w przypadku przycisków, których wygląd zależy w dużym stopniu od kształtu narożników i dlatego te ostatnie najczęściej są wyłączane ze skalowania. Jak to się robi… 1. Najpierw musimy zaimportować obraz. Można to zrobić przez kliknięcie prawym przyciskiem myszy w obrębie panelu Project (projekt) i wybranie polecenia Import New Asset (zaimportuj nowy element). 2. Za pomocą systemowej przeglądarki plików odszukujemy przygotowany wcześniej obraz i importujemy go. Odtąd będzie on częścią projektu i będziemy mogli go dowolnie używać. Obrazy można dodawać do projektu także przez przeciąganie ich bezpośrednio do panelu Project. 3. Następnie należy zaznaczyć obraz w panelu Project, aby wyświetlić ustawienia jego importu w panelu Inspector (inspektor). 14 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika 4. Aby obraz mógł być użyty jako część interfejsu, właściwość Texture Type (typ tekstury) musi być ustawiona na Sprite (2D and UI) (sprajt 2D i interfejs). Ustawienie to można zmienić w panelu Inspector po zaznaczeniu obrazu, ale jeśli projekt został zadeklarowany jako dwuwymiarowy, program zrobi to za nas i od razu zaimportuje obraz we właściwym trybie. 5. Po sprawdzeniu, czy typ tekstury jest prawidłowy, klikamy przycisk Sprite Editor (edytor sprajtów). 6. Na każdym z czterech boków obrazu znajdziemy zielony znacznik. Przez przeciąganie tych znaczników możemy podzielić obraz na części i stworzyć tym samym swoiste obramowanie. Przeciągnij więc te znaczniki ku środkowi obrazu, aby to obramowanie stało się widoczne. Podczas tej czynności należy zwracać uwagę na krzywizny narożników, z którymi możemy mieć do czynienia przy opracowywaniu przycisków. Wszystkie zielone linie oddzielające część środkową od obramowania powinny przebiegać poza krzywiznami. W przeciwnym wypadku krzywizny te zostaną przeskalowane w niewłaściwy dla nich sposób. 7. Na koniec klikamy w prawym górnym rogu okna Sprite Editor przycisk Apply (zastosuj), aby zatwierdzić wprowadzone zmiany. Okno Sprite Editor nie będzie już potrzebne, więc można je zamknąć. 8. Obraz ma już wytyczone obramowanie, a zatem może być należycie skalowany. Aby został prawidłowo umieszczony w interfejsie, musimy go wstawić jako komponent Image (Script) typu Sliced (pocięty). Jak to działa… Czasami niektóre składniki interfejsu wymagają przeskalowania. Nie wszystkie jednak nadają się do skalowania w sposób dowolny, gdyż mogą zyskać wygląd odmienny od tego, o jaki nam chodziło. Dlatego stosujemy obrazy z obramowaniami, które jednoznacznie określają, co i jak powinno być skalowane. Gdy przesuwamy zielone znaczniki w oknie Sprite Editor, dokonujemy podziału obrazu na dziewięć części. Każda z nich jest skalowana w inny sposób. Część środkowa jest skalowana zarówno w kierunku x, jak i w kierunku y (czyli w poziomie i w pionie). Części bocz- ne są skalowane tylko w jednym kierunku — lewa i prawa w pionie, a górna i dolna w poziomie. Części narożne są w ogóle wyłączone ze skalowania. Wszystko to ilustruje poniższy rysunek. 15 Poleć książkęKup książkę Unity. Przepisy na interfejs gry Aby lepiej zrozumieć, dlaczego wyznaczanie obramowania jest tak ważne, rozważmy prosty przykład. Załóżmy, że umieściliśmy w interfejsie przycisk podobny do pokazanego na powyż- szym rysunku. Jeśli gra będzie uruchamiana na urządzeniach z wyświetlaczami o różnych rozdzielczościach, Unity odpowiednio przeskaluje jej interfejs (więcej informacji na ten temat znajdziesz w następnym przepisie). Oczywiście zależy nam na tym, aby za każdym razem przy- cisk wyglądał tak, jak go zaprojektowaliśmy. Nie może on zmienić krzywizn narożników, a to oznacza, że one w ogóle nie powinny być skalowane. Informację taką możemy przekazać pro- gramowi właśnie przez wyznaczenie odpowiedniego obramowania. Poszczególne części przy- cisku będą dostosowywane do bieżącej rozdzielczości ekranu, ale dzięki zabezpieczeniu na- rożników ogólny kształt zostanie zachowany. Opcje dodatkowe Poniżej przedstawiam sposób pocięcia sprajta na mniej niż dziewięć części. Cięcie na mniej niż dziewięć części Jak już wiemy, w celu ustalenia metody skalowania obrazu można go podzielić na dziewięć części i wytyczyć w ten sposób odpowiednie obramowanie. Nie musimy jednak zawsze doko- nywać takiego pełnego podziału. Czasami wystarczy podział uproszczony z niepełnym obra- mowaniem. Rozwiązanie takie może być przydatne, gdy jakiś element interfejsu przylega do krawędzi ekranu. Obraz będzie wówczas skalowany tylko w tych obszarach, które wyod- rębnimy. W takiej sytuacji nie przesuwamy wszystkich zielonych znaczników — jak robili- śmy to w punktach 5. i 6. powyższego przepisu — lecz tylko niektóre z nich. W ten sposób możemy ustalać różne metody skalowania interfejsu w zależności od tego, jaki chcemy mu nadać wygląd w określonej rozdzielczości. Możemy utworzyć np. coś takiego jak na poniż- szym rysunku. 16 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika Patrz także…  Odpowiednie obramowanie obrazów jest bardzo ważne, jeśli interfejs ma być skalowany w celu dopasowania go do różnych rozdzielczości i platform systemowych, więc może warto przyjrzeć się dokładniej również samemu skalowaniu. Następny przepis, „Dostosowanie rozmiarów interfejsu do wymiarów ekranu i jego rozdzielczości”, zawiera omówienie takiego procesu.  Warto też dowiedzieć się czegoś więcej na temat umieszczania obrazów w interfejsie — w tym celu zapoznaj się z przepisem „Wstawianie obrazów do interfejsu”. Dostosowanie rozmiarów interfejsu do wymiarów ekranu i jego rozdzielczości W starszych wersjach programu Unity jedną z najtrudniejszych rzeczy do wykonania było skalowanie interfejsu użytkownika (zwanego wówczas graficznym interfejsem użytkownika, w skrócie GUI). Opanowanie tamtego systemu interfejsowego było dość trudne, a większość funkcji, włącznie ze skalowaniem, należało implementować za pomocą skryptów. W Unity 5 jest to już dużo łatwiejsze, gdyż wystarczy odpowiednio skonfigurować składnik Canvas Scaler (Script) (skrypt skalujący płótno), a ten zajmie się skalowaniem wszystkich elementów inter- fejsu umieszczonych na płótnie (obiekcie Canvas). Jak to się robi… 1. W poprzednim przepisie zobaczyliśmy, że program sam dodał do naszego projektu obiekt Canvas — widać go było w panelu Hierarchy (hierarchia). Dzieje się tak zawsze, gdy tworzymy jakikolwiek element interfejsu, a wspomniany obiekt jeszcze nie istnieje. Oczywiście możemy też zrobić to samodzielnie — przez kliknięcie panelu Hierarchy prawym przyciskiem myszy i wybranie polecenia UI/Canvas (interfejs użytkownika/płótno). 2. Jeśli zaznaczymy utworzone płótno, wszystkie jego parametry oraz umieszczone na nim składniki interfejsu zostaną wyświetlone w panelu Inspector. W chwili tworzenia płótna automatycznie dołączany jest do niego komponent Canvas Scaler (Script), ale jako że jest to komponent usuwalny, może się zdarzyć, że go nie zobaczymy, a wtedy należy go ponownie dodać. W tym celu klikamy w panelu Inspector przycisk Add Component (dodaj komponent) i wybieramy opcję Layout/Canvas Scaler (układ/skalowanie płótna). 17 Poleć książkęKup książkę Unity. Przepisy na interfejs gry 3. Następnie z listy rozwijanej Ui Scale Mode (tryb skalowania interfejsu) wybieramy opcję Scale With Screen Size (skalowanie zgodne z rozmiarem ekranu) i upewniamy się, że właściwość Screen Match Mode (sposób dopasowania do ekranu) jest ustawiona na Match Width Or Height (dopasowanie do szerokości lub wysokości). Za pomocą parametru Match (dopasowanie) możemy ustalić, czy skalowanie ma uwzględniać bardziej szerokość, czy wysokość. Poniższy rysunek przedstawia sytuację, w której wartość tego parametru wynosi dokładnie 0.5. 4. W rezultacie wszystkie elementy interfejsu umieszczone na płótnie będą skalowane zgodnie z rozdzielczością ekranu, a więc ich rozmiary będą się automatycznie zmieniać w zależności od urządzenia, na którym gra będzie uruchamiana. Jak to działa… W systemie interfejsowym oferowanym przez Unity płótno (Canvas) pełni funkcję szczególną. Jest swego rodzaju kontenerem dla wszystkich elementów interfejsu. Elementy leżące poza nim nie będą renderowane. Za każdym razem, gdy jest tworzone, otrzymuje trzy domyślne kom- ponenty, a jednym z nich jest Canvas Scaler (Script), który steruje skalowaniem elementów in- terfejsu umieszczonych na danym płótnie. Przez manipulowanie jego parametrami możemy ustawić taki sposób skalowania, który będzie najlepiej odpowiadał naszym potrzebom. W szcze- gólności za pomocą parametru Match możemy wymusić skalowanie proporcjonalne względem szerokości i wysokości ekranu, na którym gra ma być wyświetlana. Patrz także…  Istnieje wiele innych sposobów skalowania elementów interfejsu zgodnie z wymiarami ekranu. Jeśli chciałbyś się z nimi zapoznać, sięgnij po książkę Simona Jacksona Unity 3D UI Essentials, wydaną przez Packt Publishing, ISBN 139781783553617 (https://www.packtpub.com/game-development/unity3d-ui-essentials).  Możesz również poczytać o tym komponencie w oficjalnej dokumentacji programu Unity, znajdującej się pod adresem http://docs.unity3d.com/Manual/script-CanvasScaler.html. 18 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika Wstawianie obrazów do interfejsu Interfejsy użytkownika zazwyczaj zawierają dużo brązów, więc warto nauczyć się manipulo- wania nimi za pośrednictwem komponentów Image (Script). Rzeczywiście, komponentów tych będziemy używać we wszystkich przepisach zamieszczonych w tej książce. Na razie skupimy się na wstawianiu i właściwym umieszczaniu obrazu w interfejsie. Jak to się robi… 1. Zacznij od zaimportowania obrazu do naszego projektu, podobnie jak zrobiliśmy to w pierwszym przepisie z tego rozdziału. Możesz w tym celu kliknąć prawym przyciskiem myszy w panelu Project i wybrać z podręcznego menu polecenie Import New Asset albo po prostu przeciągnąć obraz na wspomniany panel (wtedy należy pominąć następny etap). 2. W przeglądarce plików odszukaj i wskaż obraz, który ma być importowany. 3. W panelu Project zaznacz obraz, a wszystkie jego właściwości staną się dostępne w panelu Inspector. 4. Aby wykorzystać zaimportowany obraz w interfejsie jako Source Image (obraz źródłowy), należy właściwość Texture Type ustawić na Sprite (2D and UI). Jak już widzieliśmy w przepisie pierwszym, jeśli projekt został zadeklarowany jako dwuwymiarowy, wszystkie obrazy są importowane domyślnie jako sprajty. 5. Panel Inspector zawiera rozmaite ustawienia importu. Na potrzeby tego przepisu nie musimy zmieniać ich wszystkich, ale warto je bliżej poznać, żeby móc prawidłowo importować obrazy. Wśród tych ustawień są m.in. takie, które określają format, wymiary i metodę kompresji obrazu. Mogą być przydatne np. wtedy, gdy dla poprawienia wydajności gry chcielibyśmy zmniejszyć rozmiar pliku z zapisanym obrazem. O innych ustawieniach będzie jeszcze mowa w punkcie „Opcje dodatkowe”. Po wprowadzeniu stosownych zmian zatwierdź je przez kliknięcie przycisku Apply (zastosuj). Jeśli zmiany mają dotyczyć wielu różnych obrazów, proces zatwierdzania może potrwać nawet kilka minut. 6. Następnie umieść obraz w interfejsie. W tym celu kliknij prawym przyciskiem myszy w obrębie panelu Hierarchy i wybierz polecenie UI/Image (interfejs użytkownika/obraz). Sprawdź też, czy obraz zostanie przypisany do obiektu Canvas. Składniki interfejsu pozostawione poza płótnem nie będą renderowane przez program, więc zawsze sprawdzaj, czy wszystkie są powiązane z obiektem płótna! Jeśli jakiś składnik nie spełnia tego warunku, po prostu przeciągnij go na obiekt Canvas, aby utworzyć stosowne powiązanie. 19 Poleć książkęKup książkę Unity. Przepisy na interfejs gry 7. Zaimportowany obraz przeciągnij na pole Source Image będące częścią komponentu Image (Script), który z kolei znajduje się w panelu Inspector. Jeśli obraz ma wytyczone obramowanie do zróżnicowanego skalowania, ustaw jego typ (Image Type) na Sliced (pocięty). 8. W rezultacie nasz obraz pojawi się w interfejsie, ale przejmie wymiary i współczynniki skalowania od obiektu Image (obraz). Jeśli konieczne jest utrzymanie jego pierwotnych wymiarów, można kliknąć przycisk Set Native Size (ustaw rozmiar pierwotny). 9. Aby ułatwić sobie pracę nad interfejsem, ustaw dwuwymiarowy widok sceny, jak pokazano na poniższym rysunku, a następnie oddal widok i przeciągnij go tak, żeby całe płótno było widoczne. Na razie jest bardzo duże, więc bądź przygotowany na dość duże oddalenie widoku. W celu skierowania na nie kamery możesz użyć klawisza F lub możesz po prostu kliknąć dwukrotnie pozycję Canvas w panelu Hierarchy. Do skalowania i umiejscawiania obrazu używamy ostatniego z narzędzi transformujących umieszczonych w lewym górny rogu okna programu (patrz rysunek poniżej). Nosi ono nazwę Rect (prostokąt) i można je szybko uaktywnić przez wciśnięcie klawisza T. Podczas gdy w trzech wymiarach do przesuwania, obracania i skalowania obiektów potrzebne są odrębne narzędzia, ponieważ mamy tam do czynienia z wieloma stopniami swobody, w dwóch wymiarach możemy te wszystkie operacje wykonać przy użyciu jednego narzędzia. 10. Po zaznaczeniu obrazu w jego narożnikach pojawią się niebieskie punkty. Są to punkty kontrolne narzędzia Rect. 11. Przez przeciąganie jednego z nich możemy skalować obraz. Aby zachować oryginalne proporcje obrazu, podczas przeciągania niebieskiego punktu przytrzymaj wciśnięty klawisz Shift. Jeśli zamiast Shift przytrzymasz Alt, uzyskasz możliwość skalowania symetrycznie w dwóch przeciwnych kierunkach. Jeszcze inny sposób zmieniania wymiarów obrazu polega na przeciąganiu boków prostokąta zamiast narożników. 12. Obraz możemy także swobodnie przemieszczać — wystarczy kliknąć gdziekolwiek wewnątrz prostokąta i przeciągnąć go w odpowiednie miejsce. Należy jednak przy tym pamiętać, że gracz zobaczy tylko te elementy interfejsu, które będą w obrębie płótna. 20 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika Jak to działa… Nowy system interfejsowy w Unity umożliwia dodawanie obrazów w bardzo prosty sposób. Komponent Image (Script) pobiera obraz źródłowy (Source Image) i rysuje go na ekranie. Dzieje się tak jednak tylko wtedy, gdy obiekt, z którym powiązany jest ten komponent, znaj- duje się w obrębie płótna. Unity wywołuje funkcje rysowania wyłącznie dla tych obiektów, które są na płótnie. W powyższym przykładzie użyliśmy narzędzia Rect do przesuwania i skalowania obrazu, ponieważ w przyjętym przez nas układzie interfejsu wszystkie elementy są reprezentowane przez prostokąty. Opcje dodatkowe W projektowaniu interfejsu użytkownika duże znaczenie ma możliwość precyzyjnego obracania obrazu. Ważna jest również możliwość przemieszczania środka obrotu. Przyjrzyjmy się zatem narzędziom, które do tego służą, i zobaczmy, jak należy się nimi posługiwać. Obracanie obrazu i przesuwanie środka obrotu Obraz można obrócić przez ustawienie kursora w niewielkiej odległości poza jednym z na- rożników prostokąta i przeciągnięcie myszą w odpowiednim kierunku. Przeciągnięcie należy wykonać wtedy, gdy kursor przyjmie postać dwóch zakrzywionych strzałek. Położenie środka obrotu możemy dowolnie zmieniać — wystarczy kliknąć znajdujący się w centrum prostokąta niebieski okrąg i przeciągnąć go. Dzięki temu możemy obracać obrazy na różne sposoby. Aby to lepiej zrozumieć, przeanalizuj poniższy rysunek, na którym przedstawiono obrót tego samego prostokąta wokół dwóch różnych środków. 21 Poleć książkęKup książkę Unity. Przepisy na interfejs gry Czarne kwadraty pełnią funkcję układu odniesienia, którego obecność pozwala dostrzec różnicę w skutkach obrotu białego prostokąta. W obu przypadkach prostokąt został obrócony o ten sam kąt. W przykładzie górnym środek obrotu (niebieski okrąg) znajduje się dokładnie w centrum prostokąta, a w przykładzie dolnym został przesunięty na środek lewego boku. Zmienianie położenia środka obrotu może dawać interesujące efekty, zwłaszcza gdy tworzymy interfejs animowany lub sterowany za pośrednictwem skryptów. Można np. poeksperymento- wać w ten sposób z interfejsami opisanymi w przepisach „Tworzenie rozszerzalnego elementu z końcowym efektem zanikania” oraz „Tworzenie elementu rozszerzalnego i obrotowego z koń- cowym efektem zanikania”, zamieszczonych w rozdziale 5., „Ozdabianie interfejsu”. Maskowanie obrazu Często spotykamy w grach elementy interfejsu, które wcale nie są prostokątne. Najprostszą metodą uzyskiwania rozmaitych kształtów jest maskowanie. Jednym z często stosowanych kształtów jest koło, więc zajmiemy się teraz tworzeniem maski o takim właśnie kształcie. Może się to przydać do konstruowania okrągłych przycisków lub okrągłych teł dla ikon. Ważnym kom- ponentem będzie teraz dla nas komponent o nazwie Mask (maska). Jak to się robi… 1. Przede wszystkim musimy utworzyć maskę, w tym przypadku okrągłą. Maska sama w sobie jest obrazem, więc do jej tworzenia musimy wykorzystać program graficzny. Zaczynamy od wygenerowania nowego płótna o takiej samej liczbie pikseli wzdłuż szerokości i wysokości, czyli kwadratowego. 2. Czynności z tego etapu oraz z następnego będą zależeć od tego, z jakiego programu graficznego korzystamy. Po prostu musimy narysować białe koło na środku płótna. 3. Następnie musimy spowodować, aby tło było przezroczyste. Ostateczny efekt powinien być podobny do tego, który widać na rysunku na następnej stronie (w tym przypadku użyto programu Photoshop). Jeśli używasz Photoshopa, możesz taką maskę łatwo utworzyć za pomocą narzędzia do rysowania elips. Po prostu przeciągnij myszą wzdłuż przekątnej kwadratu, trzymając przy tym wciśnięty klawisz Shift. Jeżeli nie masz żadnego programu graficznego lub nie chcesz tracić czasu na jego uruchamianie i ryso- wanie czegokolwiek, możesz wykorzystać obraz zamieszczony w materiałach powiązanych z tą książką. 4. Gotową maskę importujemy do projektu w Unity. W tym celu klikamy prawym przyciskiem myszy w obrębie panelu Project i wybieramy polecenie Import New Asset. 22 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika 5. Unity poprosi nas o wskazanie obrazu, który chcemy zaimportować, więc odszukujemy folder z przygotowaną wcześniej maską i importujemy ją. 6. Aby uzyskać dostęp do właściwości importowanej maski, wyświetlanych w panelu Inspector, zaznaczamy ją w panelu Project. 7. Jeśli projekt nie został zadeklarowany jako dwuwymiarowy, ustawiamy właściwość Texture Type na Sprite (2D and UI) i klikamy przycisk Apply. 8. Teraz wstawiamy do interfejsu nowy panel. Można to zrobić przez kliknięcie prawym przyciskiem myszy w obszarze panelu Hierarchy i wybranie polecenia UI/Panel (interfejs/panel). Oczywiście upewniamy się, że ów panel jest przypisany do obiektu Canvas. 9. W komponencie Image (Script) ustawiamy naszą maskę jako Source Image. 10. Aby uzyskać kształt dokładnie taki, jaki utworzyliśmy w programie graficznym, musimy przywrócić obrazowi jego pierwotne proporcje. W tym celu klikamy przycisk Set Native Size i dopiero potem, jeśli zajdzie taka potrzeba, stosujemy skalowanie proporcjonalne (przy wciśniętym klawiszu Shift). 11. Kolejna czynność, jaką musimy wykonać, to przekształcenie panelu w maskę. Dodajemy więc do naszego panelu komponent Mask (Script) (skrypt maskowy). 12. Teraz musimy przygotować obraz, na który nałożymy maskę. Tworzymy zatem nowy obiekt obrazowy w ramach panelu — w panelu Hierarchy klikamy prawym przyciskiem myszy i wybieramy opcję UI/Image. 23 Poleć książkęKup książkę Unity. Przepisy na interfejs gry 13. Komponent Image (Script) powstałego obiektu obrazowego wymaga wskazania konkretnego obrazu. W tym przypadku wybieramy ten, który zamierzamy maskować, i po prostu przeciągamy go na pole Source Image. Odtąd obraz ten będzie widoczny tylko wewnątrz okrągłej maski. 14. W razie potrzeby można kliknąć przycisk Set Native Size i zastosować skalowanie proporcjonalne. 15. Na zamieszczonym niżej rysunku pokazano rezultat zamaskowania w ten sposób obrazu przedstawiającego starodawną mapę. Jak to działa… Jak widać, Unity maskuje jeden obraz za pomocą drugiego. Dlatego komponent Mask (Script) dołączamy do obiektu posiadającego komponent Image (Script). Dzięki temu, że maska jest obrazem, możemy jej nadać taki kształt, jaki tylko zechcemy. Musimy jedynie pamiętać, że obraz maskowany będzie widoczny wyłącznie w tych obszarach, w których maska jest biała. Patrz także…  Jeśli chcesz dowiedzieć się więcej o komponencie Mask (Script), zajrzyj do dokumentacji programu Unity (http://docs.unity3d.com/Manual/script-Mask.html). Przewijanie obrazu Akcja wielu gier toczy się w olbrzymich światach, najczęściej fantastycznych. Mapy takich światów też są duże i żeby gracz mógł dostrzec ich szczegóły, musi mieć możliwość przewija- nia obszarów widzianych w odpowiednim powiększeniu. 24 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika W tym przepisie pokażę, jak coś takiego wykonać za pomocą dwóch komponentów: poznanego już Mask (Script) oraz nieomawianego jeszcze Scroll Rect (Script) (skrypt przewijania prostokąta). Ten drugi będzie odpowiadał za całą logikę mechanizmu przewijania elementów interfejsu. Jak to się robi… 1. Żeby nie zaczynać wszystkiego od nowa, wykorzystamy maskę utworzoną w ramach poprzedniego przepisu. Oczywiście wprowadzimy pewne zmiany, aby efekt przewijania był dobrze widoczny. 2. Przede wszystkim musimy wyposażyć panel maskujący w nowy komponent o nazwie Scroll Rect (Script). 3. Zachowując zaznaczenie panelu, przeciągamy przypisany do niego obraz na pole Content (zawartość) w komponencie Scroll Rect (Script). 4. Sposób przewijania jest domyślnie ustawiony jako elastyczny (Elastic) i w większości przypadków ustawienie to sprawdza się bardzo dobrze, lecz ze względu na okrągły kształt maski byłoby lepiej, gdyby obraz nie wychodził poza jej obręb. Mogłoby to zepsuć ogólne wrażenie estetyczne i raczej byłoby źle przyjęte przez gracza. Dlatego z listy rozwijanej Movement Type (rodzaj ruchu) wybierzemy opcję Clamped (z ograniczeniem). 5. Dodatkowe szczegóły przewijania można ustalić przez dobór wartości parametrów Deceleration Rate (siła hamowania) i Scroll Sensitivity (czułość przewijania). Warto trochę poeksperymentować, żeby wybrać wartości optymalne. 6. Ostatecznie komponent Scroll Rect (Script) powinien wyglądać mniej więcej tak, jak pokazano na poniższym rysunku. 25 Poleć książkęKup książkę Unity. Przepisy na interfejs gry Jak to działa… Przede wszystkim trzeba pamiętać, że wykorzystaliśmy obraz, który już wcześniej został za- maskowany. Tak też robi się zazwyczaj z obrazami, które mają być przewijane. Maskowanie pozwala graczowi skupić się na wybranym fragmencie obrazu lub tekstu, a poza tym umoż- liwia zmieszczenie nawet bardzo dużego dokumentu na stosunkowo niewielkim fragmencie ekranu. A zatem skoro mieliśmy już zamaskowany obraz, wystarczyło dodać do obiektu nad- rzędnego komponent Scroll Rect (Script), który wykonuje całą pracę związaną z obsługą przewijania i można go skonfigurować za pośrednictwem kilku parametrów. Zmieniać możemy np. parametr Movement Type. Wybranie opcji Clamped uniemożliwi obrazowi wyjście poza obszar wyznaczony przez maskę. Opcja Elastic powoduje odbijanie się przewijanej zawartości od krawędzi maski, a opcja Unrestricted (nieograniczony) znosi wszelkie ogranicze- nia ruchu. Parametr Deceleration Rate odpowiada za efekt hamowania, ale działa tylko wtedy, gdy zaznaczone jest pole Inertia (bezwładność). Od ustawionej tu wartości zależy, jak szybko nastąpi całkowite zatrzymanie przewijanej zawartości. Przy wartości 0 ruch ustaje natychmiast, gdy tylko użytkownik przerwie przewijanie, a przy wartości 1 efekt hamowania w ogóle nie występuje. Ważnym parametrem jest Scroll Sensitivity, gdyż od jego wartości zależy reakcja komponentu na zdarzenie przewijania wygenerowane przez użytkownika. Patrz także…  Jeśli szukasz więcej informacji, zawsze możesz zajrzeć do dokumentacji programu Unity. Informacje o maskach znajdziesz na stronie http://docs.unity3d.com/Manual/script-Mask.html.  A jeśli chcesz dowiedzieć się czegoś więcej o komponencie Scroll Rect (Script), przestudiuj zawartość strony http://docs.unity3d.com/Manual/script-ScrollRect.html. Przewijanie tekstu za pomocą pionowego suwaka Czasami w grach występują dość długie teksty, których bez przewijania nie dałoby się prze- czytać. Jednym z rozwiązań tego problemu jest wyświetlanie takiego tekstu w oknie wyposa- żonym w suwak, za pomocą którego można tekst szybko i wygodnie przewijać; dodatkowo suwak ten pozwala się zorientować, która część całości jest obecnie wyświetlana. Aby coś ta- kiego zrobić, postąpimy podobnie jak w poprzednim przepisie, tyle że miejsce obrazu zajmie tekst i wprowadzimy dodatkowy element w postaci pionowego paska do przewijania. Po wykonaniu wszystkich czynności będziemy w stanie przewijać tekst za pomocą kompo- nentów Scroll Rect (Script) oraz Scrollbar (Script) (skrypt paska do przewijania). 26 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika Jak to się robi… 1. Rozpoczynamy od utworzenia nowego panelu w ramach naszego interfejsu — klikamy prawym przyciskiem myszy w panelu Hierarchy i wybieramy opcję UI/Panel. 2. Następnie zmieniamy rozmiar tego panelu, aby uzyskać widok sceny podobny do pokazanego na poniższym rysunku. 3. Dobrą praktyką jest utrzymywanie należytego porządku w elementach projektu. Dlatego od razu nadajemy panelowi czytelną nazwę, np. Text Scroller (przewijacz tekstu). 4. Tak jak w poprzednich dwóch przepisach, dodajemy komponent Mask (Script). Żeby nie przeszkadzał nam w oglądaniu sceny, możemy go na razie wyłączyć. 5. Następnie klikamy prawym przyciskiem myszy pozycję Text Scroller i wybieramy polecenie Create Empty (utwórz pusty). W ten sposób tworzymy pusty obiekt podporządkowany panelowi Text Scroller. Oczywiście nadajemy mu odpowiednią nazwę, np. Text Content (zawartość tekstowa). 6. Do tego obiektu dodajemy komponent Scroll Rect (Script). Teraz musimy jeszcze dodać tekst. W tym celu klikamy prawym przyciskiem myszy pozycję Text Content i wybieramy UI/Text (interfejs/tekst). 7. Tekst możemy wpisać albo skopiować i wkleić w polu Text (tekst) widocznym w górnej części komponentu. 27 Poleć książkęKup książkę Unity. Przepisy na interfejs gry 8. Za pomocą narzędzia Rect zmieniamy rozmiar obszaru z tekstem w taki sposób, aby otrzymać prostokąt węższy od panelu Text Scroller, ale za to wyższy od niego. Wysokość zwiększamy tak długo, aż cały tekst zmieści się w prostokącie. Aby mieć jakieś wyobrażenie o tym, jak powinien wyglądać ten prostokąt, spójrz na rysunek zamieszczony po etapie 10. 9. Ponownie klikamy prawym przyciskiem myszy pozycję Text Scroller i wybieramy tym razem opcję UI/Scrollbar (interfejs/pasek przewijania). Teraz panel Hierarchy powinien wyglądać tak, jak pokazano na rysunku poniżej. 10. Następnie w komponencie Scrollbar (Script) zmieniamy kierunek paska (właściwość Direction) na Bottom To Top (od dołu do góry). Dopasowujemy rozmiar paska do rozmiaru wolnej przestrzeni w panelu i tam też go umieszczamy (jak na poniższym rysunku). 28 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika 11. Musimy również powiązać ten pasek z tekstem. W tym celu zaznaczamy pozycję Text Content i do pola Vertical Scrollbar (pionowy pasek przewijania) przeciągamy pozycję Scrollbar (pasek przewijania). Wyłączamy także opcję Horizontal (poziomo), aby wymusić przewijanie tylko w kierunku pionowym. 12. Na koniec włączamy maskę panelu Text Scroller (tę, którą wcześniej wyłączyliśmy, żeby nam nie przeszkadzała) i klikamy przycisk odtwarzania, aby przetestować to, co zrobiliśmy. Jeśli chcesz, możesz, tak jak w poprzednim przepisie, wyłączyć efekt elastyczności — w komponencie Scroll Rect (Script) zmień wartość parametru Movement Type na Clamped. 13. Teraz możemy przewijać tekst w panelu Text Scroller. Ostatecznie powinien on wyglądać tak, jak pokazano na poniższym rysunku1. Jak to działa… Cała procedura jest podobna do tej z poprzedniego przepisu, tyle że utworzyliśmy maskę nie dla obrazu, a dla tekstu. Maskę tę tymczasowo ukryliśmy, aby ułatwić sobie umieszczanie tekstu. W roli mechanizmu przewijającego użyliśmy komponentu Scroll Rect (Script). Ostatecznie mu- sieliśmy zmienić wymiary obszaru z tekstem, aby był w całości widoczny na ekranie. Dodaliśmy również pasek do przewijania i powiązaliśmy go z komponentem Scroll Rect (Script). Przez od- powiednie ustawienie opcji tego komponentu i właściwości paska ograniczyliśmy przewijanie tylko do kierunku pionowego. Na koniec przywróciliśmy działanie maski, przez co tekst stał się widoczny wyłącznie w wyznaczonym dla niego obszarze. 1 W opisie całej procedury pominięto powiązanie obiektu Text z obiektem Text Content. Bez tego prze- wijanie nie będzie działało. Aby takie powiązanie utworzyć, należy zaznaczyć obiekt Text Content i w jego komponencie Scroll Rect (Script) jako wartość parametru Content umieścić obiekt Text — przyp. tłum. 29 Poleć książkęKup książkę Unity. Przepisy na interfejs gry Opcje dodatkowe Poniżej przedstawiam opisy dwóch innych metod przewijania tekstu, które można wykorzy- stywać w zależności od konkretnych warunków projektowych. Przewijanie kilku łamów jednocześnie Co robić w sytuacji, gdy np. tekst składa się z kilku łamów? Oto zmiany, jakie należy wówczas wprowadzać w powyższym przepisie. Przede wszystkim tworzymy nowy pusty obiekt i przypisujemy go do panelu Text Scroller. Następnie dodajemy do tego obiektu komponent Scroll Rect (Script) i przeciągamy utworzony wcześniej obiekt Text Content do pola Content. Później usuwamy komponent Scroll Rect (Script) z obiektu Text Content. Na koniec dodajemy do obiektu Text Content dowolną liczbę obiektów tekstowych, a zawarty w nich tekst będzie można przewijać. Jeśli dodamy trzy takie obiekty, panel Hierarchy będzie wyglądał tak, jak zaprezentowano na poniższym rysunku. Warto przy tym pamiętać, że w celu właściwego rozmieszczenia tekstu na ekranie dobrze jest wyłączyć tymczasowo maskę przypisaną do panelu Text Scroller. Umożliwi to obserwację wszystkich obiektów w całości, a nie tylko w obszarze maski. Ostatecznie nasza scena powinna wyglądać tak, jak pokazano na rysunku na następnej stronie. W celu właściwego dopasowania tekstu do panelu może być konieczna zmiana rozmiarów wszystkich komponentów. Tylko wtedy efekt przewijania będzie naturalny i zgodny z naszymi planami. Przewijanie poziome Gdyby zaszła potrzeba zastosowania przewijania w poziomie, choć jest to raczej rzadko spoty- kane, możemy po prostu zmienić orientację i inne ustawienia paska, który już istnieje. W grach ten sposób przewijania stosuje się najczęściej przy wyświetlaniu rozmaitych spisów. 30 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika Zaczynamy od zmodyfikowania tego, co wykonaliśmy w punkcie 8. Tym razem wysokość obiektu Text musi być nieco mniejsza od wysokości panelu Text Scroller, a szerokość powinna być na tyle duża, aby pomieścić całość tekstu. Następnie w punkcie 10. zamiast opcji Bottom To Top jako kierunek paska wybieramy Left To Right (od lewej do prawej). Na koniec w punkcie 11. obiekt Scrollbar przeciągamy do pola Horizontal Scrollbar (poziomy pasek przewijanie), a nie do pola Vertical Scrollbar i wyłączamy opcję Vertical (pionowo) zamiast Horizontal. Czytanie tekstu szerszego niż przeznaczony do jego wyświetlania panel jest bardzo niewygodne, a przewijanie poziome jedynie umożliwia odczytanie całości, ale wcale tej czynności nie ułatwia. O wiele łatwiej czyta się taki tekst, jeśli jest podzielony na kilka łamów, co można dość łatwo uzyskać przez utworzenie wewnątrz obiektu Text Content odpowiedniej liczby obiektów typu Text i ułożenie ich obok siebie jak łamy tekstu. Przykład takiego rozwiązania jest pokazany na poniższym rysunku. 31 Poleć książkęKup książkę Unity. Przepisy na interfejs gry I znów w celu właściwego dopasowania tekstu do panelu może być konieczna zmiana rozmiarów wszyst- kich komponentów. Tylko wtedy efekt przewijania będzie naturalny i zgodny z naszymi planami. Uaktywnianie przycisków za pośrednictwem klawiatury W grach bardzo często polecenia menu mają przypisane indywidualne skróty klawiszowe. Jeśli gracz chce szybko włączyć jakąś funkcję, musi mieć taką możliwość. Ogólnie rzecz bio- rąc, wszędzie tam, gdzie trzeba uaktywnić kilka elementów interfejsu, takich jak przyciski lub przełączniki, powinno być możliwe wykonanie tego przez wciśnięcie odpowiednich klawiszy. W tym przepisie pokażę, jak można wykryć wciśnięcie klawisza i uaktywnić na tej podstawie określony element interfejsu. Wykonamy to wszystko za pomocą uniwersalnego skryptu, któ- rego będzie można użyć w odniesieniu do dowolnego elementu interfejsu bez potrzeby mo- dyfikowania kodu. Jak to się robi… 1. Zaczynamy od utworzenia panelu. Klikamy prawym przyciskiem myszy w panelu Hierarchy i wybieramy polecenie UI/Panel. Od razu możemy mu nadać jakąś sensowną nazwę, żeby potem nie pogubić się w gąszczu rozmaitych obiektów. 2. Następnie tworzymy na tym panelu przycisk. Można to zrobić przez kliknięcie prawym przyciskiem myszy w panelu Hierarchy i wybranie polecenia UI/Button (interfejs/przycisk). 3. Aby ułatwić sobie rozpoznawanie, który przycisk został wciśnięty, zmienimy niektóre parametry komponentu Button (Script) (skrypt przycisku). Możliwa jest np. zmiana koloru dla przycisku w stanie neutralnym (Normal Color), wyróżnienia (Highlighted Color) i wciśnięcia (Pressed Color). Na potrzeby naszego przykładu zmieniamy Highlighted Color na czerwony, Pressed Color na zielony, a Normal Color pozostawiamy biały. Zmieniamy również ustawienie Navigation (nawigacja) na Vertical (pionowa). 4. Skoro mamy wybierać spośród różnych przycisków, musimy utworzyć ich więcej. W tym celu powielimy ten, który już istnieje. Po prostu wciskamy klawisze Ctrl+D, a następnie przesuwamy kopię poniżej oryginału. Nazwę oryginału zmieniamy na Button 1 (przycisk 1), a kopii na Button 2 (przycisk 2). Zmieniamy także napisy na przyciskach, czyli zawartość pól Text w komponentach Text (Script) (skrypt tekstu) obiektów Tekst przypisanych do poszczególnych przycisków. Dzięki temu będzie można rozróżniać przyciski również na ekranie. Na koniec powtarzamy procedurę powielania, aby uzyskać sumie trzy przyciski. Ostatecznie nasza scena powinna wyglądać podobnie jak ta na rysunku na następnej stronie. 32 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika 5. W końcu nadszedł czas na napisanie pierwszego skryptu. W panelu Inspector klikamy przycisk Add Component i wybieramy opcję New Script (nowy skrypt). Jako nazwę skryptu wpisujemy ButtonThroughKeySelection (uaktywnianie przycisku za pomocą klawisza) i po upewnieniu się, że jako język skryptu wybrany jest C Sharp, klikamy przycisk Create and Add (utwórz i dodaj). 6. Następnie klikamy dwukrotnie nazwę skryptu, aby otworzyć go w aplikacji MonoDevelop. 7. Gdy używamy klas związanych z interfejsem, zawsze musimy dodawać na początku skryptu odpowiednią klauzulę using. W ten sposób zabezpieczamy się przed błędami kompilacji, jakie mogłyby powstać podczas kompilacji skryptu przez Unity. Musimy również dodać klauzulę informującą, że będziemy się odwoływać do zdarzeń. Dlatego początek naszego skryptu powinien wyglądać następująco: using UnityEngine.UI; using UnityEngine.EventSystems; using UnityEngine; using System.Collections; 8. Poza tym musimy zadeklarować zmienną dla wciśniętego klawisza. Jeśli to zrobimy, będziemy mogli później ustawiać tę zmienną w panelu Inspector. public class ButtonThroughKeySelection: MonoBehaviour { public string key; 9. Jako że nie musimy ustalać wartości początkowych, możemy usunąć funkcję Start(). Aby zaimplementować rozpoznawanie wciśniętego klawisza i uaktywnianie odpowiedniego przycisku, musimy napisać funkcję Update()w następujący sposób: public void Update() if (Input.GetKeyDown (key)) { EventSystem.current.SetSelectedGameObject(this.gameObject); } } 10. Zapisujemy skrypt i dodajemy go do pierwszego przycisku. 11. Następnie wpisujemy nazwę klawisza, którego wciśnięcie ma uaktywniać przycisk, np. space, jeśli tym klawiszem ma być spacja. Komponent skryptowy powinien wtedy wyglądać tak, jak pokazano na poniższym rysunku. 33 Poleć książkęKup książkę Unity. Przepisy na interfejs gry 12. Na koniec klikamy przycisk odtwarzania i sprawdzamy, czy wszystko działa prawidłowo. Po uaktywnieniu pierwszego przycisku przez wciśnięcie klawisza wpisanego jako wartość zmiennej możemy uaktywniać kolejne przyciski, używając klawiszy ze strzałkami. Ponowne wciśnięcie klawisza spacji spowoduje jednak powrót do przycisku pierwszego (tego, do którego ten klawisz został przypisany). Jak to działa… Na potrzeby testu utworzyliśmy trzy przyciski. Aby skutki działania skryptu były dobrze wi- doczne, zmieniliśmy odpowiednie właściwości tych przycisków. Ze względu na ich pionowy układ ustawiliśmy wartość właściwości Navigation na Vertical. Pisanie skryptu rozpoczęliśmy od klauzul using UnityEngine.UI oraz using UnityEngine.Event Systems. Pierwsza sygnalizuje, że w skrypcie będą występowały odwołania do elementów interfejsu. Klauzuli tej będziemy używać również w wielu innych skryptach prezentowanych w tej książce. Druga klauzula sygnalizuje, że w skrypcie będzie wykorzystywany bezpośrednio system zdarzeniowy (Event System). W głównej części skryptu zadeklarowaliśmy publiczną (public) zmienną łańcuchową. Publiczny charakter tej zmiennej oznacza, że jej wartość można określić później w panelu Inspector. O tym, jaki klawisz powiązać z danym przyciskiem, nie musimy więc decydować już na etapie pisania skryptu. W funkcji Update() następuje sprawdzenie za pomocą instrukcji if (Input.GetKeyDown (key), czy podany klawisz został wciśnięty. Otóż funkcja Input.GetKeyDown(string) zwraca wartość true (prawda), jeśli klawisz określony jako string jest wciśnięty, a jeśli jest niewciśnięty, war- tością zwracaną jest false (fałsz). Należy pamiętać, że wartość zmiennej key jest ustawiana w panelu Inspector, więc można ją swobodnie dopasowywać do projektu gry. Jeżeli chcesz się dowiedzieć więcej na temat wykrywania wciśniętych klawiszy, zajrzyj do punktu „Patrz także…”. Na koniec, gdy właściwy klawisz został wciśnięty, powinno nastąpić uaktywnienie powiązanego z nim przycisku. Zadanie to wykonuje funkcja o nazwie EventSystem.current.SetSelectedGame Object(this.gameObject). Początek tej nazwy, EventSystem.current, stanowi odwołanie do bieżącego systemu zdarzeniowego. Pozostałą część stanowi funkcja SetSelectedGameObject (gameObject), której działanie polega na uaktywnieniu obiektu przekazanego jej za pośred- nictwem parametru gameObject. W tym przypadku użyliśmy konstrukcji this.gameObject, aby wskazać na obiekt, do którego skrypt jest przypisany, czyli na interesujący nas przycisk. Przez sparametryzowanie wszystkich ustawień, włącznie ze zmienną key, której wartość moż- na ustalić dla każdej instancji skryptu oddzielnie, jesteśmy w stanie wykorzystać ten skrypt w odniesieniu do wielu przycisków i dopasować go do nich bez konieczności wprowadzania jakichkolwiek zmian w samym kodzie. 34 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika Patrz także…  Podczas pisania skryptu używaliśmy rozmaitych funkcji, z których najważniejszą była GetKeyDown(). Za jej pomocą można stwierdzić, czy dany klawisz jest wciśnięty, czy nie. Więcej informacji na jej temat znajdziesz pod adresem: http://docs.unity3d.com/ScriptReference/Input.GetKeyDown.html.  Funkcja ta potrzebuje jednak parametru określającego klawisz, którego wciśnięcie ma być monitorowane. Pełną listę nazw klawiszy znajdziesz pod adresem http://docs.unity3d.com/ScriptReference/KeyCode.html.  W skrypcie użyliśmy także funkcji należącej do systemu zdarzeniowego. Jest to system mocno rozbudowany i często wykorzystywany w grach. Jeśli chcesz dowiedzieć się czegoś więcej na jego temat, zajrzyj na stronę http://docs.unity3d.com/ScriptReference/EventSystems.EventSystem.html. Stosowanie komponentów układu interfejsu Często zachodzi potrzeba rozmieszczenia dużej liczby obiektów w sposób uporządkowany i sy- metryczny wewnątrz jakiegoś większego elementu interfejsu. Na szczęście Unity ma wbudo- wany system automatycznego układania interfejsu (Auto-Layout) z możliwością zagnieżdżania jednych elementów w drugich. Strukturę takiego interfejsu możemy kontrolować za pośred- nictwem specjalnych komponentów. Umiejętność posługiwania się nimi jest niezbędna, jeśli chce się szybko tworzyć przejrzyste interfejsy, i właśnie jej nabyciu ma służyć realizacja ni- niejszego przepisu. Jak to się robi… 1. Rozpoczynamy od utworzenia panelu, na którym będziemy układać obiekty podrzędne. Klikamy więc prawym przyciskiem myszy w panelu Hierarchy i wybieramy opcję UI/Panel. Nowemu panelowi nadajemy nazwę First Panel (panel pierwszy). 2. W utworzonym panelu chcemy umieścić kilka innych elementów. Tym razem będą to przyciski. Tworzymy więc pierwszy z nich, klikając pozycję First Panel i wybierając z podręcznego menu polecenie UI/Button. 3. Jeden przycisk to za mało, żeby zobaczyć, jak działają komponenty układu. A zatem wciskamy klawisze Ctrl+D tyle razy, ile kopii przycisku chcemy utworzyć. Niczego nie porządkujemy ani nie układamy, gdyż to mają zrobić za nas komponenty układu. 4. Ze względu na to, że będziemy chcieli przetestować różne komponenty układu, skopiujemy także cały panel — zaznaczamy jego nazwę i wciskamy klawisze Ctrl+D. Nazwę nowego panelu zmieniamy na Second Panel (panel drugi). 35 Poleć książkęKup książkę Unity. Przepisy na interfejs gry 5. Tworzymy też trzeci panel, któremu nadajemy nazwę External Panel (panel zewnętrzny), i umieszczamy w nim dwa poprzednie. Ostatecznie struktura naszego interfejsu powinna wyglądać tak, jak pokazano na poniższym rysunku. 6. Następnie dodajemy do panelu zewnętrznego komponent Horizontal Layout Group (Script) (skrypt grupy układu poziomego), do panelu pierwszego — komponent Vertical Layout Group (Script) (skrypt grupy układu poziomego) i do panelu drugiego — komponent Grid Layout Group (Script) (skrypt grupy układu siatkowego). Jak widać, system Auto-Layout zrobił, co do niego należało. Aby lepiej zrozumieć sposób jego działania, dodaj jeszcze kilka nowych przycisków lub powiel istniejące i zaobserwuj, jak będzie się zmieniało ich rozmieszczenie. Ostatecznie powinieneś uzyskać układ zbliżony do pokazanego na poniższym rysunku. 36 Poleć książkęKup książkę Rozdział 1. • Podstawy interfejsu użytkownika Jak to działa… System Auto-Layout składa się z dwojakiego rodzaju elementów: Layout Elements (elementy układu) i Layout Controllers (sterowniki układu). Do pierwszej grupy należą wszystkie obiekty mające komponent Rect Transform (przekształcenia prostokąta). Posiadają one pewną wiedzę na temat swoich wymiarów, ale nie są w stanie tymi wymiarami bezpośrednio sterować. Nato- miast sterowniki układu są elementami, które potrafią sterować zarówno wymiarami, jak i poło- żeniem elementów układu. Ich wpływ obejmuje nie tylko te elementy układu, do których są przypisane, ale również elementy podrzędne. W powyższym przykładzie użyliśmy komponentów Horizontal Layout Group (Script), Vertical Layout Group (Script) i Grid Layout Group (Script). Zasady ich działania są bardzo podobne. Każdy z nich zajmuje się układem obiektów podrzędnych w ramach obiektu, do którego został przypisany, i odpowiednio modyfikuje rozkład elementów interfejsu. Patrz także… Jeśli chcesz poszerzyć swoją wiedzę na temat sterowników układu, zajrzyj do oficjalnej do- kumentacji programu Unity. Oto adresy, pod którymi znajdziesz właściwe zagadnienia:  Horizontal Layout Group: http://docs.unity3d.com/Manual/script-HorizontalLayoutGroup.html;  Vertical Layout Group: http://docs.unity3d.com/Manual/script-VerticalLayoutGroup.html;  Grid Layout Group: http://docs.unity3d.com/Manual/script-GridLayoutGroup.html;  Content size fitter (dostosowywacz rozmiarów zawartości): http://docs.unity3d.com/Manual/script-ContentSizeFitter.html;  Aspect ratio fitter (dostosowywacz proporcji): http://docs.unity3d.com/Manual/script-AspectRatioFitter.html. Pobieranie przykładowego kodu Pliki z przykładowymi kodami są dostępne na serwerach wydawnictwa Helion, znajdujących się pod adresem ftp://ftp.helion.pl/przyklady/unipig.zip. 37 Poleć książkęKup książkę Unity. Przepisy na interfejs gry 38 Poleć książkęKup książkę Skorowidz A E animacja rozszerzająca, 163 serc, 168 spoczynkowa, 159 animowanie interfejsu, 151 kursora, 204 ostrzeżeń, 239 przycisku, 160 serc, 166 asymetryczny zakres obrotu, 236 automatyzacja ustawień suwaka, 182 efekt 3D, 136 pływania, 243 przechylenia, 233 przejścia otwierającego, 155 rozbłysku, 135 rozdygotania, 145 zanikania, 130, 133 elementy HUD, 207 układu, 38 cienie, 232 tekstu, 146 cięcie sprajta, 16 C D dodawanie cieni, 146, 232 efektu pływania, 243 efektu przechylenia, 233 kontrolera szybkości, 169 obrazu postaci, 226 slajdów, 183 dokładność wyświetlanego czasu, 89 dostosowanie rozmiarów interfejsu, 17 F filtrowanie dynamiczne, 196 format procentowy wartości suwaka, 103 funkcja Mathf.Sin(), 140 odejmująca punkty, 42 Update(), 242 funkcje minimap, 251 G generowanie wstrząsów, 145 H hasło, 198 Poleć książkęKup książkę Skorowidz I implementacja funkcji minimap, 251 kołowego paska zdrowia, 62 licznika punktów, 40 licznika żyć, 44 liczników, 39 liniowego paska zdrowia, 58 minimapy, 262 paska zdrowia, 64 paska życia, 39 timera cyfrowego, 78 timera kołowego, 84 timerów, 77 zaawansowanych elementów HUD, 207 interfejs animowanie, 151 dostosowanie rozmiaru, 17 elementy swobodne, 143 komponenty układu, 36 modyfikowanie, 171 obracanie obrazu, 21 oświetlanie elementów, 110 ozdabianie, 129 trójwymiarowy, 229, 237 ukrywanie menu, 151 użytkownika, 13 wstawianie obrazu, 19 wyświetlanie menu, 151 J jednoczesne przewijanie łamów, 30 K kamera, 250 kanał alfa, 188 kanały koloru, 187 kierunek celu, 220 Kingdom Hearts, 72 kołowy pasek zdrowia, 62 kompas, 259 komponent Audio Source, 126 Event Trigger, 114, 118, 121 Image, 21, 24, 61 266 Input Field, 201 Mask, 24 Outline, 149 Scroll Rect, 26, 30 Shadow, 147 Slider, 105, 178 Text, 42, 46, 52, 80, 96 Toggle Group, 102 komponenty układu interfejsu, 36 kontrola poprawności danych, 190 upuszczonych obiektów, 121 kontroler Animator, 163 szybkości, 169 kontury tekstu, 148 kończenie pracy timera, 83, 97 kursor, 202 L licznik punktów, 40 żetonów, 48 żyć, 44, 54, 166 liniowy pasek zdrowia, 58, 67 M maksymalna liczba żyć, 53 maskowanie obrazu, 22 menu, 151 rozwijane, 163 z animacją spoczynkową, 159 z efektem przejścia otwierającego, 155 minimapa, 245, 250 modularny licznik żetonów, 48 modyfikowanie animacji serc, 168 interfejsu podczas grania, 171 kanałów koloru, 187 kanału alfa, 188 obrazu, 174 oświetlenia, 260 poszczególnych animacji, 170 motyl, 137, 145 Poleć książkęKup książkę Skorowidz N napisy, 222 narzędzie Rect, 21 numer prezentowanego obrazu, 181 O obiekt Appearing menu, 156 Canvas, 156 DistanceDisplayerText, 212 KHHelthbar, 75 Linear Timer, 83 LinearPart, 75 Mixed Timer, 89 Multibar, 71 RadialPart, 75 SymbolicLivesCounter, 57 obracanie minimapy, 259 obrazu, 21 obraz maskowanie, 22 postaci, 226 przewijanie, 25 obrót, 135, 137 pierwotny, 235 obrys, 150 konturów tekstu, 148 odstępy między dźwiękami, 215 odtwarzacz MP3, 122 odwracanie osi, 236 ostrzeżenia, 242 ograniczanie ruchu, 142 ruchu słupka, 141 wartości, 109 zasięgu ruchów kamery, 258 okno Sprite Editor, 15 opóźnianie aktualizacji, 213 działania radaru, 222 ortograficzny tryb pracy kamery, 250 ostrzeżenia, 239, 242 oświetlanie elementów interfejsu, 110 oświetlenie, 260 ozdabianie interfejsu, 129 P panel Appearing menu, 154 Inspector, 109 o zmiennych wymiarach, 115 przesuwany, 113 panele sterujące, 99 parametr Scroll Sensitivity, 26 pasek zdrowia, 58, 62 zdrowia w stylu Kingdom Hearts, 72 zdrowia z pancerzem, 64 życia, 63 pętla for, 196 płaszczyzna rzutowania, 221 płynne obracanie kompasu, 259 pływanie, 243 pobieranie liczby żyć, 48 pogrubianie wyświetlanego tekstu, 43 pojawianie się, 132 pokaz slajdów, 181 pole dla wpisywania hasła, 198 edycyjne, 190 postać, 226, 227 prezentacja slajdów, 178 program Unity, 38 przechowywanie animacji, 166 przechylenie, 233 przeciąganie, 115 elementów, 119 przełącznik, 100 przesunięcia fazowe, 142 przesuwanie środka obrotu, 21 przewijanie łamów, 30 obrazu, 25 poziome, 31 tekstu, 27 przezroczystość koloru, 188 przycisk zmieniający kolor, 172 R radar, 222 kierunkowy, 216 rozbłysk, 135 rozdygotanie, 145 267 Poleć książkęKup książkę Skorowidz rozdzielczość ekranu, 17 rozmiar interfejsu, 17 rozszerzanie obiektu, 132 równomierne działanie suwaka, 182 ruch słupka, 140 rzut celu, 219 rzutowanie, 219, 221 S scalanie pasków, 68 skrypt BarTimerScript, 85 FloatingUIScript, 243 HealthBarScript, 63 SymbolicLivesCounterScript, 167 slajd, 183 słupek, 138 sprawdzanie tekstu, 194 sterowanie fazą ruchu słupka, 140 obrotami, 137 światłami, 189 sterowniki układu, 38 suwak, 27, 182 zmieniający kanał koloru, 184 zmieniający kolory, 175 sygnalizacja dźwiękowa, 215 symboliczny licznik żyć, 54, 166 system Auto-Layout, 38 środek obrotu, 21 światła, 189 Ś T tekst 3D, 148, 150 tekstura dwuwymiarowa, 14 renderowana, 249 testowanie skryptu, 211, 220, 225 timer, 77 cyfrowy, 78 dwustronny, 83 kołowy, 84 liniowy, 80 mieszany, 86 268 trójwymiarowe menu, 230 tryb pracy kamery, 250 tworzenie efektu rozbłysku, 135 elementu obrotowego, 133 elementu rozszerzalnego, 133 grupy przełączników, 100 interfejsu trójwymiarowego, 237 menu, 155, 159 menu rozwijanego, 163 minimap, 245 modularnego licznika żetonów, 48 motyla, 137 obramowanego sprajta, 14 obrysu, 150 odtwarzacza MP3, 122 ostrzeżeń, 239 paneli sterujących, 99 pasków zdrowia, 72 pola edycyjnego, 190 prezentacji slajdów, 178 przycisku zmieniającego kolor, 172 radaru kierunkowego, 216 słupków, 138 suwaka, 184 suwaka zmieniającego kolory, 175 swobodnych elementów interfejsu, 143 symbolicznego licznika żyć, 54 tekstu trójwymiarowego, 148, 150 timera dwustronnego, 83 timera liniowego, 80 timera mieszanego, 86 trójwymiarowego menu, 230 wyświetlacza odległości, 208 zegara, 93 U uaktywnianie przycisków, 33 udoskonalenie motyla, 145 ukrywanie menu, 151 upuszczanie elementów, 119 usuwanie żetonów, 53 W wartości graniczne suwaka, 105, 108 właściwość Navigation, 35 współczynnik płynności, 236 Poleć książkęKup książkę wstrząsy, 145 wstrzymywanie czasu, 155 wybieranie opcji, 102 wykrywanie najbliższego celu, 222 obiektów, 214 wyświetlacz odległości, 208 wyświetlanie czasu, 90 menu, 151 miejsc dziesiętnych, 98 napisów, 222 numeru, 181 wartości suwaka, 103 wyznaczanie części panelu, 115 Skorowidz Z zaawansowane funkcje minimap, 251 zamiana prędkości obrotowej, 236 zanikanie, 130, 132, 133 zasięg ruchów kamery, 258 zdarzenie OnClick(), 158 OnValueChanged, 105, 107, 177 zegar zmieniający wygląd, 93 zmiana kursora, 202 maksymalnej liczby żyć, 47 płaszczyzny rzutowania, 221 timera, 89 układu odniesienia, 237 zmienna farthestDistance, 210 time, 80, 93, 97 zwężanie przycisku, 163 269 Poleć książkęKup książkę Notatki Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Unity. Przepisy na interfejs gry
Autor:
Sklep
Format
Cena
Helion.pl Helion.pl
ebook/pdf
27,45 zł
Idź do sklepu »

Opinie na temat publikacji:

Inne popularne pozycje z tej kategorii:

Czytaj również:

Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: