RP-P-1912-397

Hello World, progress bar. – rozdzielczość

Mam ci ja progress bar, jest on piękny. W pozycjonowanie w oknie oczywiście włożyłam dużo czasu i wysiłku. Odpalam grę, i widzę coś takiego:

errorResize2
WTF?

Pasek zwiększa się wraz ze zwiększeniem ekranu, ale ucieka do góry i nic nie widać. Cóż robić, jak żyć?

Trzeba będzie jakoś „przypiąć” element do okna, tak, aby znajdował się w odpowiedniej procentowej odległości od krawędzi. Te małe trójkąty widoczne w Scene View to są właśnie szpileczki.

Pins_initial
Te trójkąty na środku nazywać będę szpileczkami.

Każda odpowiada za jeden róg naszego elementu, i określa jego położenie względem obiektu Canvas.

Na obrazku widać, że rysunek ma się przemieszczać tak, aby środek (bo wszystkie szpileczki są razem) znajdował się cały czas w takim samym stosunku do środka ekranu. Ale, ale: przecież na animacji widać, że wysokość pola gry się nie zmienia. Skąd więc ta ucieczka do góry?

width_resize
Stąd!

Mówi to nam ogólnie: „Jeśli masz zdecydować, czy ważniejsze jest zachowanie proporcji względem szerokości czy wysokości, wybierz szerokość”.

Przeciągamy wajchę na stronę „Height” i co się dzieje? Nasz uroczy Progress Bar ucieka do góry. Czemu?

errorResize3
Wracaj tu!

Problemem jest Reference Resolution, która ma domyślną wartość 800×600. Podgląd gry miał, w moim wypadku, 477×638 pikseli. Wobec tego Canvas Scaler, w zależności od ustawienia, dopasowywał rozdzielczość 850.(6)x638, albo 477×357.75. Duże różnice!

Pierwszym ważnym krokiem w rozwiązaniu tego problemu byłoby ustawienie Reference Resolution na przynajmniej zbliżoną do tego, co będziemy chcieli obserwować podczas gry, już na etapie układania elementów interfejsu. Na razie świadomie daruję sobie ten krok. Ręcznie przesuwam pasek na z góry upatrzone pozycje, i uruchamiam.

errorResize5
Lepiej!

Następnie manipulujemy szpileczkami. ^^

pins corrected
Ustaw szpileczki w środku obrazka, mówili. Będzie lepiej, mówili.
errorResize4
Jest lepiej, chociaż przez niewłaściwą Reference Resolution wciąż niestabilnie. Idzie przeżyć.

Okej, a co jeśli chcemy żeby długość paska postępu to było zawsze 30% długości ekranu, a wysokość niech się sama dopasuje?

pins example 1

A jeśli wysokość ma się sama dopasować, ale tylko zwiększając rysunek do dołu, żeby nam pasek postępu nie urósł poza ekran?

pins example 2

A jeśli dodatkowo wysokość ma być stale 4% wysokości ekranu?

pins example 3

Jeśli obiekt ma się zwiększać i rozszerzać zgodnie z rozszerzeniem ekranu, ale tak żeby nie wyszedł nam bardzo zdeformowany potworek? Czyli: zwiększaj wysokość i szerokość, ale nie mniej/więcej w każdą stronę niż ileśtam % ekranu?

pins example 4
Nie mniej % niż pokazują szpileczki.
pins example 5
Nie więcej % niż pokazują szpileczki.

No, to chyba tyle, intuicja już powinna być. Aby uzyskać bardziej naukowy opis, proponuję oficjalne szkolenie Unity (LINK).

Jako wisienka na torcie miał być skrypt. Skrypt miał nam mówić jakie konkretnie wymiary ma obiekt UI (w pikselach). Przyznaję – pokonało mnie to. Ciężko ustalić faktyczną wielość elementu UI w pikselach. Nie dzisiaj.

 

Jedna myśl na temat “Hello World, progress bar. – rozdzielczość”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *