Skalowanie mojej platformówki Pixel Art z 720p do 1080p

12

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?

Xargon Wan
źródło
Czy obniżenie rozdzielczości, ale przesunięcie ekranu kamery jest akceptowalnym wyborem? tzn. rozdzielczość wynosi teraz 640 x 360, ale twoje ekrany wciąż mają rozdzielczość 1280 x 720, ale musisz poruszać się po pokoju, na przykład Metroid lub Axiom Verge?
lozzajp
Jesteś w złym miejscu, nawet jeśli jest to gra 2D, musisz zdefiniować kamerę. Kamera określa więc rozdzielczość oglądania, fov i kąty, a dane są prezentowane tylko w kamerze. W ten sposób Twoja gra jest niezależna od gry
Yosh Synergi
Próbuję tylko upewnić się, na czym dokładnie polega problem. Czy mówisz, że ponieważ ekran mapy 1280X720 jest mniejszy niż powiedzmy monitor 1920X1080, to chcesz powiększyć ekran mapy tak, aby był jak najbardziej „pełny ekran”? Jestem zdezorientowany, ponieważ rysowanie kafelków 16X16 i tak nie rozwiązałoby problemu (jak rozumiem).
RobM
@DMGregory, jeśli możesz podać mi przykłady artefaktów w skalowaniu podczas korzystania ze skali ułamkowej, byłoby to niesamowite, ponieważ nie wyobrażam sobie jednego scenariusza, w którym kiedy skaluję obraz w obu kierunkach o tej samej wartości, nie ma znaczenia, jeśli kwota jest pojawiają się liczby całkowite lub ułamkowe. z artefaktami mam na myśli rzeczy, których nie powinno tam być, co różni się od rozmycia, pojawiania się do wysokiego skalowania bez wystarczającej liczby pikseli.
Yosh Synergi

Odpowiedzi:

16

Dla każdego, kto zastanawia się, dlaczego jest to problem z grafiką pikselową, oto szybki przykład z wykorzystaniem sceny z Super Mario World:

Przykład skalowanej sceny pikselowej, pokazującej artefakty

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.

      Przykład zasobu przerysowanego w skali 150%

    • 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.

DMGregory
źródło
2
wspominasz o zachowaniu oryginalnej skali i zastosowaniu ozdobnych ramek. W zależności od kontekstu może to być idealne miejsce do umieszczenia elementów GUI, takich jak partytura i życie. Jeśli te granice są wystarczająco duże, aby odpowiednio zmieścić takie informacje, może to mniej przypominać „wypełniacz”, a bardziej „pełne treści” i być odpowiednie dla gry.
Gnemlock,
3

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ł:

wprowadź opis zdjęcia tutaj

Łuskowaty:

wprowadź opis zdjęcia tutaj

Pikalek
źródło
Niestety, większość algorytmów skalowania grafiki pikselowej, które znalazłem, nadal obsługuje tylko skalowanie liczb całkowitych (zwykle 2x, 3x, 4x), więc nie pomagają zbytnio w przypadku 720-> 1080. (Być może można by użyć 3-krotnego skalowania pikseli, a następnie próbkowania w dół o połowę ...? Nie jestem pewien, czy wyglądałoby to lepiej czy gorzej niż bezpośrednie
skalowanie
Ważny punkt Zmodyfikowano nieco, aby rozwiązać ten problem. Natknąłem się również na ten moduł cieniujący, który wydaje się wspierać skalowanie ułamkowe .
Pikalek
+1 do rozwiązania wektorowego. Musisz sprawić, by Twoje zasoby były naprawdę duże i zmniejszone.
Mark Aven