Skalowanie obrazu na mobilki

[LolikZabójca]

Urządzenia przenośne zarówno z Androidem jak i iOSem mają na prawdę różne proporcje ekranów i różne rozdzielczości.

Jak rozwiązujecie problem skalowania zarówno widoku w grze jak i odpowiednio dobranego GUI tak żeby to wyglądało profesjonalnie i bez czarnych pasków?

[Konrad-GM]

10 godzin temu, LolikZabójca napisał:

tak żeby to wyglądało profesjonalnie i bez czarnych pasków

Jeżeli będziesz trzymał się proporcji 16:9 to większość ekranów jest ok, czarne paski pojawiają się tylko na jakichś abominacjach  Obsłużenie wszystkich możliwych rozdzielczości jest IMO bardzo trudne, osobiście też próbowałem rozwiązywać ten problem w swoich aplikacjach (nie tylko grach). dlatego nie widzę niczego złego w trzymaniu się ustalonych proporcji, to sporo ułatwia pracę (polecam 16:9, najbardziej popularne). Jeżeli z jakiejś przyczyny takie rozwiązanie Ci nie odpowiada, możesz zawsze rysować UI po współrzędnych ekranowych, np. od prawego dolnego rogu (jeżeli np. pasek życia masz na dole po prawej stronie) a nie standardowo od lewego górnego, pamiętaj też, że na mniejszych ekranach elementy mogą na siebie nachodzić.
 

PS. W Godot jest nawet opcja rozciągania ekranu tak (tryb "2d"), żeby skalowało sprite'y do ustalonych proporcji np. 1280x720 (16:9), tzn. jeżeli miałbym ekran np. retina 3840×2160 to rozciągnie obrazki ale surface (render target) na którym będą rysowane ma oryginalny rozmiar 3840×2160 (chyba, że jest poza proporcją 16:9, to wtedy pojawiają się czarne paski), więc antyaliasing linii, i innych kształtów rysowanych dynamicznie działa poprawnie. A nawet jak sprite będą zeskalowane w dół, to po ich rozciągnięciu na większym ekranie nie będzie tragedii.

[Threef]

fyi aktualnym standardem ratio od 2019 roku jest 19,5:9 i takie ratio mają już prawie wszyscy producenci

[Konrad-GM]

14 minut temu, Threef napisał:

fyi aktualnym standardem ratio od 2019 roku jest 19,5:9 i takie ratio mają już prawie wszyscy producenci

O, a tego nie wiedziałem, czyli najlepiej jakby wspierać oba ratio 16:9 oraz 19,5:9

[gnysek]

Z mojej perspektywy robisz tak:

 

- szerokość view albo ustalasz na sztywno wszędzie, albo do szerokości telefonu (ale to wymaga przygotowania wszystkich etapów o szerokości co najmniej zgodnej z najszerszym ekranem, żeby nie było pasków, a wysokosci zgodnej z największym ratio). Oczywiście view może być 1:1, ale może też być mniejszy większy niż telefon, generalnie nie ma to znaczenia, byle zrobić to tak, że zawsze gracz widzi jakieś tam założone minimum na lewo i prawo od gracza.

- wysokość view ustalasz z proporcji ekranu. Robiąc grę musisz pamiętać, że o ile w szerokość już ustaliłeś ile się miesci, tak w wysokość na jakimś dziwnym ekranie czasem coś może zniknąć, więc trzeba projektować levele i podążanie kamery tak, żeby ważny element (np. przycisk za dwiema ścianami który masz zobaczyć) się jednak nie schował. Trzeba też czasem postawić elementy otoczenia w miejscu gdzie ekran mógłby być za wysoki, żeby nie było pusto.

 

I teraz wyjdą dwa warianty - albo z lewej i prawej widzisz zawsze to samo, a góra dół się lekko zmieniają, albo obcinasz/dodajesz zawsze parę pikseli na view, żeby było ładne ratio pikseli, podzielne przez 2, wiec bez rozmazywania

Z GUI natomiast robi się ciut inaczej:

 

- zakładasz sobie, gdzie będą elementy - np. cztery rogi ekranu, srodek ekranu, czy dolna część (na wyświetlanie dialogów)

- zakładasz, ze te elementy nigdy nie zajmują 1/4 ekranu, tylko mniej

- elementy w każdym rogu rysujesz nie względem 0,0, a względem tego rogu. Czyli w dolnym prawym rogu, piszesz draw_text(<gui_width> - 100,<gui_height>-20, "...."); Dzięki temu, jaki telefon nie będzie i zmienisz rozmiar GUI, to wszystko się automatycznie zbliży/oddali od siebie, ale będzie dokładnie tak daleko od rogu jak chcesz.

 

 

Jest z tym nieco zabawy, ale jak się dobrze zaplanuje to się okaże, że mógłbyś dowolną rozdziałkę zmyślić, a i tak gra będzie działać. I nawet nie trzeba jej będzie na tych innych rozdziałkach długo testować - praktycznie tylko jak już będzie gotowa, ostatniego dnia, sprawdzić, czy na pewno coś w GUI się nie nakłada.

[LolikZabójca]

10 godzin temu, gnysek napisał:

Z mojej perspektywy robisz tak:

 

- szerokość view albo ustalasz na sztywno wszędzie, albo do szerokości telefonu (ale to wymaga przygotowania wszystkich etapów o szerokości co najmniej zgodnej z najszerszym ekranem, żeby nie było pasków, a wysokosci zgodnej z największym ratio). Oczywiście view może być 1:1, ale może też być mniejszy większy niż telefon, generalnie nie ma to znaczenia, byle zrobić to tak, że zawsze gracz widzi jakieś tam założone minimum na lewo i prawo od gracza.

- wysokość view ustalasz z proporcji ekranu. Robiąc grę musisz pamiętać, że o ile w szerokość już ustaliłeś ile się miesci, tak w wysokość na jakimś dziwnym ekranie czasem coś może zniknąć, więc trzeba projektować levele i podążanie kamery tak, żeby ważny element (np. przycisk za dwiema ścianami który masz zobaczyć) się jednak nie schował. Trzeba też czasem postawić elementy otoczenia w miejscu gdzie ekran mógłby być za wysoki, żeby nie było pusto.

 

I teraz wyjdą dwa warianty - albo z lewej i prawej widzisz zawsze to samo, a góra dół się lekko zmieniają, albo obcinasz/dodajesz zawsze parę pikseli na view, żeby było ładne ratio pikseli, podzielne przez 2, wiec bez rozmazywania

Z GUI natomiast robi się ciut inaczej:

 

- zakładasz sobie, gdzie będą elementy - np. cztery rogi ekranu, srodek ekranu, czy dolna część (na wyświetlanie dialogów)

- zakładasz, ze te elementy nigdy nie zajmują 1/4 ekranu, tylko mniej

- elementy w każdym rogu rysujesz nie względem 0,0, a względem tego rogu. Czyli w dolnym prawym rogu, piszesz draw_text(<gui_width> - 100,<gui_height>-20, "...."); Dzięki temu, jaki telefon nie będzie i zmienisz rozmiar GUI, to wszystko się automatycznie zbliży/oddali od siebie, ale będzie dokładnie tak daleko od rogu jak chcesz.

 

 

Jest z tym nieco zabawy, ale jak się dobrze zaplanuje to się okaże, że mógłbyś dowolną rozdziałkę zmyślić, a i tak gra będzie działać. I nawet nie trzeba jej będzie na tych innych rozdziałkach długo testować - praktycznie tylko jak już będzie gotowa, ostatniego dnia, sprawdzić, czy na pewno coś w GUI się nie nakłada.

U mnie gra nie będzie miała granic(otwarty świat generowany automatycznie) i przez charakterystykę gry raczej nic nie będzie mogło być nie zauważone(wystarczy podejść bliżej. Przez ten sposób który podajesz niektórzy gracze będą mieli jednak większą widoczność niż inni. Z drugiej strony lepsze to niż czarne paski, bo nie zgodzę się z tym, że wystarczą jedne proporcje. Teraz telefony wychodzą w różnych proporcjach.

Jest jakiekolwiek alternatywne rozwiązanie, aby jedni nie mieli innej widoczności niż drudzy, czy to jedyny stosunkowo prosty i skuteczny sposób?

<gui_width> = display_get_gui_width() ?

[Threef]

Cytuj

Jest jakiekolwiek alternatywne rozwiązanie, aby jedni nie mieli innej widoczności niż drudzy, czy to jedyny stosunkowo prosty i skuteczny sposób?

Drugie rozwiązanie to aby jedni mieli więcej widoczności niż drudzy
:|

 

Tam gdzie wchodzi w grę ratio urządzenia tam będą takie problemy. Rozwiązaniem jest niestety projektowanie gier w taki sposób aby zasięg widzenia nie grał istotnej roli.

 

Ach chciałem tylko przypomnieć że dziwne ratio to nie wszystkie problemy  Są też notche które wymagają "save zone" bo inaczej gra może rysować elementy tam gdzie jest akurat notch kamery, albo zaokrąglone boki
Na to rozwiązanie jest jedynie designować tak aby nic nie było przy krawędziach (lol) albo zerkać na konkretną nazwę device i obsługiwać je specjalnie

 

Edit: A niektóre telefony pozwalają na uruchomienie 2 aplikacji na podzielonym ekranie gdzie można regulować rozmiar. Wiec apka może mieć dowolne ratio xD

[gnysek]

Hmm, nie próbówałem jeszcze gry tak odpalać... zdaje mi się, ze nie kazda apka na to pozwala.

[LolikZabójca]

6 godzin temu, Threef napisał:

Drugie rozwiązanie to aby jedni mieli więcej widoczności niż drudzy
:|

 

Tam gdzie wchodzi w grę ratio urządzenia tam będą takie problemy. Rozwiązaniem jest niestety projektowanie gier w taki sposób aby zasięg widzenia nie grał istotnej roli.

 

Ach chciałem tylko przypomnieć że dziwne ratio to nie wszystkie problemy  Są też notche które wymagają "save zone" bo inaczej gra może rysować elementy tam gdzie jest akurat notch kamery, albo zaokrąglone boki
Na to rozwiązanie jest jedynie designować tak aby nic nie było przy krawędziach (lol) albo zerkać na konkretną nazwę device i obsługiwać je specjalnie

 

Edit: A niektóre telefony pozwalają na uruchomienie 2 aplikacji na podzielonym ekranie gdzie można regulować rozmiar. Wiec apka może mieć dowolne ratio xD

Nie każdej. Aplikacja musi mieć napisaną obsługę czegoś takiego. Niby spoko, tylko co z grami multiplayer? Moja gra ma najpierw powstać w wersji single player, a jeśli okaże się, że odniosła wystarczający sukces chcę ją przenieść do świata multiplayer. I wtedy pojawi się problem. Gracze z większą widocznością będą mieli przewagę nad pozostałymi.

[Threef]

Każdą aplikację można odpalić na współdzielonym ekranie. Lepiej czy gorzej. Dopisać obsługę trzeba by działała w tle gdy focus ma druga aplikacja. Sam interfejs się zeskaluje odpowiednio źle w zależności jak ustawisz

[LolikZabójca2]

Jeszcze jedno - jak rozwiązać kwestię rozdzielczości? Robić w 720p(dla oszczędności ramu) i skalować view do 1080p na przykład, robic w 720p i zostawić view w 720p, czy może jeszcze jakoś inaczej?

[gnysek]

RAM obciąża liczba załadowanych danych, a więc spritów, kodu itp., a nie rozdzielczość. Ona obciąża procesor. Jak zrobisz w 720p i ekran będzie w 1080 to i tak samo przeskaluje, także to już twój wybór

[LolikZabójca2]

4 godziny temu, gnysek napisał:

RAM obciąża liczba załadowanych danych, a więc spritów, kodu itp., a nie rozdzielczość. Ona obciąża procesor. Jak zrobisz w 720p i ekran będzie w 1080 to i tak samo przeskaluje, także to już twój wybór

tak, ale mam na myśli to, że grafika w większej rozdzielczości to więcej zajętego ramu przez zasoby. Zastanawiam się czy zrobienie gry w 1080p to nie jest za dużo dla low-endowych telefonów.

[gnysek]

Nie bardzo rozumiem. Chcesz rysować grafiki 1,5 raza większe jeśli będzie 1080p niż 720p ?Ja raczej myślałem, że te same, tylko obszar ekranu większy. Tworzysz niepotrzebnie problemy

[LolikZabójca2]

8 minut temu, gnysek napisał:

Nie bardzo rozumiem. Chcesz rysować grafiki 1,5 raza większe jeśli będzie 1080p niż 720p ?Ja raczej myślałem, że te same, tylko obszar ekranu większy. Tworzysz niepotrzebnie problemy

Może wytłumaczę Ci swój tok myślenia, a Ty mnie popraw w czym się mylę xd

Chodzi o to, że telefon o rozdzielczości 1080p nie ma wcale ekranu większego niż 720p, tylko rozdzielczość. Więc a) jeśli zwiększę pole widzenia zamiast rozdzielczości tekstur to będzie wszystko słabiej widoczne, b ) wtedy jakość wyświetlanego obrazu będzie taka sama, a nie do tego chyba jest rozdzielczość. Wydaję mi się, że zrobię po prostu w 720p. Ale takie pytanie z natury tych głupich które jednak lepiej zadać, bo jak się coś źle rozumie to będzie jeszcze bardziej głupio: czy rozdzielczość w grze mobilnej to po prostu rozmiar view_wport/hport(zakładając tylko jeden view)?

[gnysek]

Bo GM ma jeszcze tę opcję keep aspect ratio i wtedy i tak dociąga rozdzielczość - ale myślisz dobrze, 720p powinno styknąć. Zresztą jeśli masz telefon z 1080, to narysuj sobie grafikę w 720p i przerzuć jako plik PNG na telefon i zobacz, czy jakość jest satysfakcjonująca. Typowa galeria telefonu zrobi to samo co GM z interpolacją.