Tworzę platformówkę 2D Pixel Art na PC i smartfony, ale utknąłem w problemie technicznym.
Zdecydowałem się na rozdzielczość kafelka 32x32 i rozdzielczość sprite'a 64x64 znaków. Poziomy są podzielone na sekcje, które nazywam „ekranami”, a na każdym ekranie mam płytki o wymiarach 40 x 22,5, w przybliżeniu do 40 x 23, więc minimalna rozdzielczość to 1280 x 720.
W grze mam mechanikę podwójnego skoku, więc muszę mieć dobry zasięg widzenia w pionie na każdym „ekranie”.
Nadchodzi problem: 1280x720 nie jest bardzo wysoką rozdzielczością. Na monitorach HD okno nie byłoby duże, a jeśli zwiększę rozdzielczość o 2x, będzie to 2560x1440, a okno będzie znacznie większe niż rzeczywisty monitor HD. Jeśli spróbuję rozmiarów od 1280 x 720 do 2560 x 1440, grafika zacznie się zacinać lub ulegać deformacji.
Jak mogę rozwiązać ten problem? Czy istnieje rozwiązanie, które nie wymaga przerysowywania wszystkich kafelków i ikonek w formacie 16x16?
źródło
Odpowiedzi:
Dla każdego, kto zastanawia się, dlaczego jest to problem z grafiką pikselową, oto szybki przykład z wykorzystaniem sceny z Super Mario World:
Jeśli po prostu przeskalujemy pikselową grę graficzną z 720 do 1080 w czasie wykonywania (tak jak może to być w przypadku typowej kamery do gier), otrzymamy artefakty z powodu niecałkowitej liczby pikseli ekranu na źródłowy texel. Sprawdź niespójność liczb ze skalowanego przykładu po prawej stronie, a także jak zniekształcony liść i ucho Mario.
Jest grywalny, ale stracił tę uroczą ostrość pikseli. I w ruchu te artefakty mogą czołgać się przez duszka , przez co wyglądają na migoczące.
Użycie trybu filtrowania, który łączy sąsiednie piksele, pozwoli uniknąć zmarszczek, ale zamiast tego rozmazuje i rozmazuje grafikę pikseli, więc nie jest to również bardzo pożądane.
Niestety stosunek 1,5x między 720p a 1080p jest najgorszym scenariuszem, jaki możemy napotkać.
Jak zauważasz, skalowanie 1x jest zbyt małe, a 2x jest zbyt duże, przy tak szerokim marginesie w obie strony, i nie ma żadnego współczynnika skalowania między liczbami pomiędzy nami do wyboru.
Twoje opcje sprowadzają się do:
Toleruj skalę 1x , pokazując grę w oknie o 1/3 mniejszym niż ekran, dodając dekoracyjne obramowania, jeśli chcesz wypełnić przestrzeń.
Możesz być w stanie przedłużyć kadrowanie, wyświetlając więcej scen na raz na ekranach o wysokiej rozdzielczości. Zmniejsza to wymagane wypełnienie / litery, ale musisz ocenić, czy ma to wpływ na sposób gry
(np. czy daje to graczom na niektórych urządzeniach nieuczciwą przewagę, czy pozwala im dostrzec sekrety, których nie powinni tak łatwo zobaczyć?)
Skaluj o 2x i wykadruj scenę , aby gracz widział mniej sceny na raz (około 3/4, o ile wcześniej widział).
To również może wpłynąć na sposób gry, np. utrudniając graczowi zobaczenie miejsc, do których potrzebują podwójnego skoku.
Możesz to zrekompensować za pomocą logiki kamery, mając widok panoramiczny do śledzenia lub przewidywania odtwarzacza, dzięki czemu ważna treść jest nadal widoczna na jednym ekranie przy mniejszym kadrowaniu, ale nie ma uniwersalnej najlepszej kamery do użycia.
Jeśli zdecydujesz się wybrać tę trasę, spróbuj podzielić się szczegółami gry i bieżącej kamery oraz przykładową scenę. Dzięki temu możemy pomóc dostroić zachowanie kamery, aby zrekompensować (lub Twoja gra może wymagać większej widoczności)
Twórz alternatywne zasoby w innej rozdzielczości . (Tak, to dużo pracy, ale daje najwięcej możliwości kontrolowania wyglądu i stylu gry)
Nie oznacza to, że musisz wyrzucić swoje istniejące zasoby, które świetnie wyglądają na 720p. W tym artykule opisano kontekstową zamianę między różnymi zestawami zasobów, aby obsługiwać szerszy zakres rozdzielczości docelowych (w Unity, ale tę zasadę można zastosować także w grach innych niż Unity).
Jak zauważysz, przerysowanie wszystkich zasobów o połowę wielkości ( kafelki 16x16, znak 32x32 ) pozwoli ci obsłużyć 720p w skali 2x i 1080p w skali 3x, z taką samą liczbą kafelków, jak teraz. Rozdzielczość małych kafelków może być jednak bardziej restrykcyjna wizualnie.
Możesz także narysować alternatywny zestaw „wielkoformatowy”, który jest o 150% większy ( płytki 48x48, znak 96x96 ), który obsługiwałby 1080p w skali 1x. (Użyłbyś swoich istniejących zasobów dla 720p lub 1440 itp.). Większa rozdzielczość powinna pomóc ci zachować wierność obecnej sztuki, więc nie musisz poświęcać stylu i szczegółów, które masz teraz.
Trzecią opcją jest narysowanie tylko nieco mniejszego zestawu zasobów ( kafelki 24x24, znak 48x48 ), który może obsłużyć 1080p w skali 2x, i znowu może oznaczać mniejsze poświęcenie szczegółów niż zmniejszenie o połowę wszystkich twoich zasobów.
Wszystkie trzy z tych opcji pozwolą ci zachować ramkę i rozgrywkę dokładnie tak samo w 720 i 1080, ale kosztem około dwukrotnego nakładu pracy.
Więc niestety nie ma tutaj łatwej wygranej, tylko inne kompromisy.
źródło
Opracowanie konkretnej opcji tworzenia alternatywnych zasobów @ DMGregory w różnych rozdzielczościach:
Najlepszym rozwiązaniem, jakie znam, jest prawdopodobnie najmniej użyteczne w tym momencie: rozwijaj zasoby sztuki w formacie wektorowym i rasteryzuj je w razie potrzeby później. To nie jest magiczna kula; przez większość czasu będziesz musiał dokonać drobnych modyfikacji ręcznie po rasteryzacji.
Kolejną najlepszą opcją, jaką znam, jest wypróbowanie różnych algorytmów skalowania obrazu, w szczególności algorytmów skalowania pikseli . Tak jak poprzednio, nie jest to pancerz; wybranie określonego algorytmu skalowania jest ściśle zależne od kontekstu. Ma to tyle samo wspólnego z „wyczuciem” gry, jak sama sztuka, a nawet przy dobrym algorytmie + dopasowanie grafiki, prawdopodobnie będziesz musiał ręcznie ulepszyć niektóre duszki.
W obu przypadkach chodzi o to, aby użyć narzędzia, aby wykonać większość pracy za Ciebie i skoncentrować wysiłek człowieka na pozostałych szczegółach. Jak powiedział @DMGregory, „nie ma tutaj łatwej wygranej, tylko inne kompromisy”.
Edycja dotycząca skalowania ułamkowego: Większość algorytmów skalowania grafiki pikselowej zwiększa się tylko o liczby całkowite. Oprócz wprowadzenia własnego niestandardowego algorytmu skalowania prawdopodobnie będziesz musiał połączyć skalowanie w górę i w dół, aby uzyskać 1,5-krotną zmianę, której szukasz. Jako odniesienie, oto wynik połączenia algorytmu scale3x w celu zwiększenia skali i algorytmu fant w celu zmniejszenia skali o 50%:
Oryginał:
Łuskowaty:
źródło