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:

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.

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?

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?

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.

Następnie manipulujemy szpileczkami. ^^

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?

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?

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

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?

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.