Co sprawia, że ​​skalowanie grafiki pikselowej różni się od innych obrazów?

13

Niedawno trenowałem programistę, który jest nowy w tworzeniu gier z grafiką pikselową, i zdałem sobie sprawę, że istnieje pewna „konwencjonalna mądrość” w zakresie skalowania grafiki pikselowej, która nie jest oczywista dla początkujących i może nie być dobrze udokumentowana. Oto próba naprawienia tego ....


  1. Słyszałem, że powinienem skalować grafikę pikselową tylko o 200%, 300% itd., A nie pomiędzy rozmiarami jak 120%

    • Dlaczego? Czy skalowanie nie powinno „po prostu” działać tak, jak w przypadku innych obrazów?
    • Co jeśli naprawdę muszę sprawić, by moja postać była tylko ułamkiem większym lub mniejszym, aby uzyskać odpowiednią rozgrywkę lub wygląd? Jak to naprawić?
  2. Powiedziano mi, że „złe” jest używanie grafiki pikselowej w różnych skalach w jednej grze - dlaczego?

    • Na przykład, jeśli przeskalowałem moją postać tak, aby każdy tekst duszka miał 4 x 4 piksele ekranu, podczas gdy moja grafika tła jest skalowana w górę, więc każdy duszek ma 6 x 6 pikseli ekranu. Czy piksel nie jest pikselem na koniec dnia?
DMGregory
źródło

Odpowiedzi:

31

Skalowanie według liczb całkowitych

Skalowanie 2x, 3x ... n x jest proste - każdy piksel po prostu staje się kwadratem pikseli n x n , a wygląd oryginalnego duszka jest doskonale zachowany (w tym wszystkie ostre linie, narożniki i zygzaki schodów) .

Występują jednak problemy przy skalowaniu sztuki pikseli w ułamkach (np. 1,5x), ponieważ z natury piksele są dyskretne. Nie możemy tak naprawdę mieć „pół piksela”.

W przypadku innych rodzajów sztuki często możemy uniknąć mieszania sąsiednich pikseli źródłowych, w których piksel powinien być „półbarwny”, a przy wysokiej rozdzielczości artefakty zwykle nie są zauważalne. Ale na dużych, masywnych grafikach pikseli szybko to niszczy wyrazisty wygląd.

Zamiast tego zwykle używamy filtrowania „Najbliższego sąsiada” (zwanego również filtrowaniem punktowym), tak aby każdy piksel po skalowaniu pobierał kolor dokładnie z jednego piksela w oryginalnym ikonce.

Ma to jeszcze jedną zmarszczkę: ponieważ liczba pikseli po skalowaniu nie jest wielokrotnością liczby całkowitej liczby pikseli źródłowych, niektóre piksele źródłowe zostaną zduplikowane bardziej niż inne (w przypadku skalowania w górę) lub całkowicie pominięte (w przypadku skalowania w dół).

Niestety oprogramowanie do edycji obrazów i filtrowanie tekstur GPU nie są zbyt wybredne, jeśli chodzi o to, gdzie duplikują lub pomijają piksele - po prostu przestrzegają podstawowych zasad zaokrąglania - co może sprawić, że wynik będzie zniekształcony i nierówny.

Sprawdź poniższy przykład. W środku przeskalowaliśmy duszka grzybowego o 150% przy użyciu filtrowania Nearest Neighbor, a wynik wygląda na niepewny i przypadkowy. Jedno oko jest większe od drugiego, niektóre kontury są grube, podczas gdy inne pozostają cienkie, a zaokrąglone plamy wyglądają na blokowe ... nie wygląda to tak, jakby celowo rysował je piksel.

Przykład artefaktów z zastosowania skali niecałkowitej

Jeśli naprawdę potrzebujemy, aby duszek był o 150% większy (powiedzmy, aby gra była w porządku lub aby obsługiwać alternatywne rozdzielczości wyświetlania ), możemy odmalować problematyczne obszary, takie jak przykład po prawej stronie. Teraz wygląda bardziej jak coś, co zrobiłby artysta i jest stylistycznie spójny z innymi sztukami w grze. (Chociaż sam nie jestem świetnym artystą pikselowym, więc mogłoby być jeszcze lepiej 😉)

Niestety nie ma tu wielu świetnych skrótów. W przypadku skal liczb całkowitych można użyć specjalnie zaprojektowanych algorytmów skalowania grafiki pikselowej - w narzędziach takich jak ImageResizer dostępna jest szeroka gama, aby uzyskać mniej blokujący punkt początkowy niż najbliższy sąsiad, ale nadal wymaga to spojrzenia artysty i odrobiny smaru łokciowego, aby uzyskać wynik wysokiej jakości.


Poza tym: skale ułamkowe mogą również pojawiać się w czasie wykonywania .

Wyobraź sobie, że twoja gra ma rozdzielczość NES (256 x 240) i chcesz ją wyświetlić na ekranie 1080p.

1080 ÷ 240 = 4,5, więc niektóre piksele źródłowe lub „tekstury” w twojej scenie są powiększane do 5 pikseli ekranu, podczas gdy inne mają tylko 4, powodując zniekształcenia, jak widzieliśmy powyżej. W ruchu powodują, że duszki falują i migoczą rozpraszająco, bez wyraźnej przyczyny:

Przykład poruszającego się grzyba w skali ułamkowej, pokazujący falujące artefakty

Często zobaczysz, jak ludzie sugerują zaokrąglenie pozycji kamery lub obiektu do całkowitych współrzędnych pikseli, ale to tak naprawdę nie rozwiązuje problemu. Zaokrąglanie odbywa się już w ramach filtrowania najbliższego sąsiada - problem polega na tym, że niektóre piksele ekranu zaokrąglają się do tego samego źródłowego texela (powielając go), podczas gdy inne nie, co prowadzi do nierównomiernego wyniku.

Rozwiązaniem jest użycie kombinacji dopełniania / przycinania lub alternatywnych zestawów zasobów, aby powrócić do spójnego stosunku liczby pikseli na ekranie do tekstur dla każdej rozdzielczości, którą chcesz obsługiwać - zobacz kilka przykładów Unity tutaj . Jest to kolejny przypadek, w którym nie ma łatwej uniwersalnej poprawki, a będziesz musiał zastosować ocenę i kunszt, aby gra była ostra.

Utrzymanie spójności skali pikseli

Ta „reguła” sprowadza się do spójności stylistycznej.

Gdy używasz grafiki pikselowej w różnych skalach, może to wyglądać, jakby zasoby zostały połączone ze sobą w różne gry, zamiast tego o jednolitej estetyce.

Przykład skalowania zasobów inaczej w jednej grze

W przykładzie po lewej stronie zestawiłem niektóre duszki z Super Mario World, wszystkie w tej samej skali i wygląda świetnie.

Pośrodku przeskoczyłem Mario i poziom do dwukrotności rozdzielczości tła, a kret potroił rozdzielczość. Ponieważ używałem skal liczb całkowitych, nigdzie nie dochodzi do zniekształceń ani fal, ale nadal wygląda to trochę zabawnie.

Po pierwsze, tło jest o wiele bardziej szczegółowe niż pierwszy plan. Jest w stanie reprezentować gładkie krzywe i ostre podświetlenie, co sprawia, że ​​pierwszy plan wydaje się szczególnie „blokowy”, a nie ma spójnego efektu pikseli. A kontury mola są zauważalnie grubsze i bardziej postrzępione niż reszta pierwszego planu.

Po prawej stronie pokazuję, że ponownie, odmalowując zasoby we wspólnej skali pikseli, możemy przywrócić bardziej jednolity i celowy efekt dzięki nowym rozmiarom zasobów.

Ale czy muszę?

Nie, nie bardzo. To twoja gra i możesz zrobić to tak, jak chcesz.

Zwłaszcza przy tworzeniu prototypów i czerpaniu radości z gry, możliwość szybkiego wypróbowania rzeczy jest ważniejsza niż wyglądanie idealnie. Prawdopodobnie źle zrozumiesz rozmiar ważnych rzeczy, takich jak twoja postać, zanim znajdziesz najlepsze dla swojej gry, i to byłoby trudne do odświeżenia każdej klatki animacji za każdym razem, gdy chcesz spróbować czegoś innego. Więc wcześnie, nie przejmuj się.

W wydanej grze jest to wyrok sądowy. Żadna policja pikselowa nie zabroni ci dystrybucji gry, jeśli nie będziesz przestrzegać zasad, a wielu graczy nie byłoby w stanie opisać różnicy. Ale uwaga na te szczegóły w pikselach jest czymś, co wielu graczy (i recenzentów) uważa za ważny znak jakości - więc poznaj swoich odbiorców i zdecyduj, co jest najlepsze dla doświadczenia, które chcesz im zaoferować.

Ostatnią kwestią jest to, że wiele gier z grafiką pikselową ma bardzo precyzyjną rozgrywkę. Pomyśl o przeskakiwaniu między platformami 1-blokowymi we wczesnych grach Mega Man. W takich sytuacjach spójna siatka pikseli (i siatka płytek) może być ważną wskazówką dla gracza przy ocenie i wykonywaniu ruchów. Wprowadzenie nieprawidłowości w sztuce może utrudnić naukę gry, co może być frustrujące.

DMGregory
źródło