Urządzenia z Androidem są dostępne w różnych formatach i rozmiarach ekranów. Popularne kategorie:
- Telefony komórkowe
- Tablety
- Telewizory i dekodery telewizyjne
- Laptopy ze środowiskiem wykonawczym Androida w Chrome
To oznacza, że gra będzie się mierzyć w różnych rozdzielczościach ekranu, często o różnych proporcjach obrazu. Na przykład:
- Telefon w orientacji poziomej o współczynniku proporcji 19:9 (2280 x 1080)
- Inny telefon w orientacji poziomej o współczynniku proporcji 20:9 (3200 x 1400)
- Telewizor HD 1080p, format obrazu 16:9 (1920 x 1080)
- Tablet o współczynniku proporcji 4:3 (2048 x 1536)
Podczas projektowania gry należy wziąć pod uwagę te różnice, aby zapewnić prawidłową prezentację niezależnie od rozdzielczości ekranu i współczynnika proporcji urządzenia.
Tryby projekcji rozkładu
Projekt Defold ma konfigurowalną rozdzielczość podstawową. Tę rozdzielczość ustawia się w pliku game.project za pomocą pól Szerokość i Wysokość w kategorii Display.
Domyślnym działaniem funkcji jest renderowanie w podstawowej rozdzielczości, a następnie skalowanie powstałego obrazu do rzeczywistej rozdzielczości urządzenia docelowego. Rozkładanie oznacza ten tryb jako projekcję rozciągniętą. Rzut rozciągnięty nie zachowuje oryginalnego współczynnika proporcji. W przypadku niektórych gier to ustawienie domyślne może być akceptowalne wizualnie. Standardowy skrypt renderowania Defold zawiera 2 dodatkowe opcje projekcji, które pozwalają zachować podstawowy współczynnik proporcji: odwzorowanie o stałym dopasowaniu i odwzorowanie stałe.
Poniższy przykład to przykładowy projekt zaprojektowany z myślą o podstawowej rozdzielczości 480 x 272 wyświetlany w edytorze Defold.
W tym przykładzie:
- Obiekt tilemap służy do rysowania ramki wokół granicy rozdzielczości podstawowej.
- Dwa obiekty sprite i obiekt tekstowy znajdują się wewnątrz granic rozdzielczości podstawowej.
- Znajdują się 4 obiekty sprite znajdujące się poza granicami rozdzielczości podstawowej – powyżej, poniżej, od lewej i w prawo.
Po uruchomieniu w rozdzielczości 960 x 544, czyli dokładnie 2 razy większej niż rozdzielczość podstawowa, projekt wyświetla się w następujący sposób:
Rzut rozciągnięty
Poniższe przykłady pokazują wyniki zmiany rozmiaru okna z domyślnym rozciągnięciem, gdy współczynnik proporcji nie jest zachowywany:
Odwzorowanie stałe
Tryb projekcji stałe dopasowanie zachowuje współczynnik proporcji podstawowej rozdzielczości. Ponieważ współczynnik proporcji jest zachowywany, widoczny jest dodatkowy obszar ekranu, którego nie obejmuje skalowana rozdzielczość podstawowa. W zależności od głównej osi różnicy współczynnika proporcji ten dodatkowy obszar znajduje się u góry i u dołu lub po lewej i prawej stronie rozdzielczości podstawowej. Odwzorowanie o stałym dopasowaniu modyfikuje rozdzielczość podstawową z uwzględnieniem tego obszaru. W rezultacie renderowane są dodatkowe obszary sceny gry poza regionem rozdzielczości podstawowej. Wynikowy obraz jest następnie skalowany do rozdzielczości wyświetlacza.
W poniższych przykładach pokazano renderowanie projekcji o stałym dopasowaniu do rozdzielczości wyświetlacza z innym współczynnikiem proporcji niż w przypadku rozdzielczości podstawowej 480 x 272:
Odwzorowanie stałe
Tryb obrazu stałego zachowuje podstawową rozdzielczość obrazu i skaluje rozdzielczość podstawową o określony współczynnik powiększenia. W zależności od rozdzielczości wyświetlacza i współczynnika powiększenia może być wyświetlany podzbiór lub nadzbiór obszaru rozdzielczości podstawowej.
W poniższych przykładach pokazano tryb projekcji stałej z użyciem rozdzielczości ekranu 644 x 408 z powiększeniem 1x i 2x:
Zmienianie trybów projekcji
Aktywny tryb projekcji możesz przełączyć w czasie działania, wysyłając odpowiednią wiadomość do mechanizmu renderowania. Wiadomości te są wysyłane przy użyciu standardowego systemu rozdzielania wiadomości. Wszystkie komunikaty w trybie projekcji zawierają parametry określające wartości na płaszczyźnie Z bliską i dalekiej.
-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })
-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })
-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })
Rozwiń skrypty renderowania
Działanie renderowania po przewinięciu jest kontrolowane przez specjalny plik skryptu nazywany skryptem renderowania. Podobnie jak inne skrypty Defold Engine, skrypt renderowania jest napisany w języku programowania Lua. Domyślny skrypt renderowania jest dołączany podczas tworzenia projektu, ale możesz go też zastąpić niestandardowym skryptem renderowania.
Tryby rozciągniętego, stałego dopasowania i stałego wyświetlania to funkcje domyślnego skryptu renderowania. W jednym z tych trybów skrypt renderowania generuje macierz ortograficzną 2D do wykorzystania w renderowaniu obiektów gry. Konfiguracja tej macierzy różni się w zależności od używanego trybu projekcji.
Aby rozszerzyć lub zmienić konfigurację macierzy projekcji, możesz użyć niestandardowego skryptu renderowania. Funkcje, których nie obsługuje domyślny skrypt, takie jak skrzynki na listy lub pillarbox dla różnych formatów obrazu, mogą być również implementowane za pomocą niestandardowych skryptów renderowania.
Programiści na licencji open source stworzyli pakiety skryptów i skryptów renderowania, które oferują więcej funkcji niż domyślne skrypty Defold. 2 powszechnie używane pakiety to RenderCam i Defold-Orthographic.
Rozłóż system GUI
Defold jest wyposażony w system GUI oparty na plikach scen GUI. Pliki scen GUI zawierają obiekty nazywane węzłami, które definiują poszczególne elementy interfejsu użytkownika, takie jak obrazy lub tekst.
Pliki sceny GUI można dodać jako komponent do obiektu gry Defold. Sceny GUI i dołączone do nich węzły są renderowane oddzielnie i działają nieco inaczej niż zwykłe obiekty gry. Ze względu na te różnice obsługa wielu rozdzielczości wyświetlania z użyciem scen GUI wiąże się z dodatkowymi kwestiami związanymi ze współrzędnymi systemu GUI oraz z przestawianiem i kotwicami węzłów GUI.
Współrzędne systemu GUI
Zwykłe obiekty gry w rozkładaniu określają ich współrzędne w przestrzeni świata. Obiekt aparatu przekształca przestrzeń świata w przestrzeń ekranu i wyświetla obiekty gry, które znajdują się w bieżącym obszarze wirtualnym kamery. System GUI ma własną, osobną kamerę. Węzły należące do sceny GUI używają współrzędnych przestrzeni ekranu, a nie współrzędnych przestrzeni świata. Jeśli rozdzielczość wyświetlania różni się od rozdzielczości podstawowej projektu użytej do układu węzłów GUI, może to spowodować, że węzły będą miały różne marginesy względem krawędzi ekranu lub krawędzi węzła nadrzędnego. Defold ma wiele opcji dostosowania układu graficznego interfejsu GUI, by uwzględnić różnice w rozdzielczości wyświetlacza.
Obrót i kotwice węzłów GUI
Węzły GUI można zakotwiczyć do pionowych lub poziomych krawędzi za pomocą właściwości X zakotwiczenie i kotwica Y.
- Jeśli węzeł ma węzeł nadrzędny, kotwica znajduje się na jego krawędziach.
- Jeśli węzeł nie ma węzła nadrzędnego, kotwica znajduje się przy krawędziach ekranu.
Poniżej pokazano przykładową scenę z 2 węzłami GUI – ikonami kontrolera w lewym dolnym i prawym górnym rogu. Oba węzły mają kotwice X i kotwice Y ustawione na None:
Po zmianie rozmiaru wyświetlacza bez kotwicy ikony kontrolera utrzymują swoje położenie względem rozdzielczości podstawowej:
NoneJeśli kotwica Y w lewym dolnym rogu węzła jest ustawiona na Bottom, a kotwica Y w prawym górnym rogu węzła jest ustawiona na Top, węzły GUI będą zakotwiczone do odpowiednich krawędzi ekranu:
EdgesWłaściwość Pivot węzła GUI określa punkt na granicy węzła, który odpowiada właściwości Position jego współrzędnych przestrzeni ekranu. Węzły GUI domyślnie ustawiają się na Center. Punkt Położenie znajduje się bezpośrednio na środku prostokąta granicznego. Inne możliwe ustawienia punktu przestawnego to 4 kierunki główne i 4 przekątne. Właściwość Pivot może uprościć specyfikację przestrzeni marginesów, jeśli jest używana w połączeniu z właściwościami X Anchor i Y Anchor.
W tym przykładzie węzeł GUI ikony kontrolera w lewym dolnym rogu ma Pozycję równą 0,0, a Tabela przestawna – Center.
CenterZmiana ustawienia Tabela przestawna na wartość South West spowoduje następujące dostosowanie:
South WestTryby dostosowywania węzłów GUI
Rozmiar węzłów GUI można zmienić, jeśli rozdzielczość wyświetlania różni się od rozdzielczości projektu podstawowego. Właściwość Dostosuj tryb steruje zachowaniem skalowania zawartości węzła. Tryb dostosowania ma 3 ustawienia: Fit, Zoom i Stretch.
Fit
Ustawienie Fit zachowuje współczynnik proporcji zawartości węzła. Zawartość jest skalowana tak, aby pasowała do szerokości lub wysokości prostokątnych obramowań węzła o zmienionych rozmiarach. Wybrana oś to ta o mniejszej różnicy. W ten sposób zawartość mieści się w prostokącie granic z pierwotnym współczynnikiem proporcji.
Zoom
Ustawienie Zoom zachowuje też współczynnik proporcji zawartości węzła. Podobnie jak ustawienie Fit, Zoom skaluje zawartość w taki sposób, aby pasowała do szerokości lub wysokości prostokąta ze zmienionym rozmiarem granic węzła. W odróżnieniu od ustawień Fit elementy docelowe dopasowania Zoom wykorzystują oś, w której przypadku większa różnica jest względem rozmiaru pierwotnego. Oznacza to, że skalowana treść może wykraczać poza prostokąt.
Poniżej znajdziesz przykład 2 węzłów GUI z różnymi ustawieniami trybu Dostosuj tryb. Na ikonie kontrolera w lewym dolnym rogu widać tryb dostosowania o wartości Fit, a na ikonie kontrolera w prawym górnym rogu – tryb dostosowania o wartości Zoom.
Rozciąganie
Ustawienie Stretch skaluje zawartość węzła dokładnie tak, aby odpowiadała prostokątowi ze zmienionym rozmiarem granic węzła. Oryginalny format obrazu nie zostaje zachowany.
Układy GUI
W aplikacji Defold dostępna jest alternatywna metoda dostosowywania układów interfejsu GUI do różnych rozdzielczości ekranu: Układy. Układy można dodać do sceny GUI, aby zastąpić domyślne właściwości węzła GUI. Układ jest powiązany z konkretną rozdzielczością ekranu. Jeśli dostępnych jest wiele układów, rozłóż wybierz ten, który najbardziej odpowiada rzeczywistej rozdzielczości ekranu. Domyślne położenie, rozmiar, skala lub zasób graficzny używane przez węzeł GUI mogą zostać zastąpione przez układ.
Dodatkowe materiały
- Dekładanie podręcznika – potok renderowania
- Złóż instrukcję obsługi – sceny GUI
- Rozłóż instrukcja obsługi – układy GUI