Jak stworzyć czytelny sprite zwierzęcia w limicie 24×24 pikseli

Przed rysowaniem wybierz widok: z boku, z przodu lub trzy czwarte. W przypadku pierwszego sprite’a widok z boku często ułatwia oddzielenie ogona, uszu, dzioba lub pyska od tułowia. To praktyczny wybór projektowy, a nie sztywna zasada; wybierz kąt, który najlepiej pokazuje cechę, na którą chcesz zwrócić uwagę odbiorców.

Zapisz jedną główną cechę rozpoznawczą i najwyżej jedną uzupełniającą. U kota mogą to być spiczaste uszy i ogon, u ptaka dziób i zwarte ciało, a u żółwia kształt skorupy. To ograniczenie jest użytecznym założeniem roboczym, a nie narzuconym standardem. Pomaga uniknąć poświęcania pikseli na ogólną fakturę, zanim zwierzę będzie rozpoznawalne.

Otwórz płótno 24×24 i podczas rysowania miej widoczną siatkę pikseli. Edytor sprite’ów, taki jak Aseprite, traktuje dokument jako obraz o wymiarach wyrażonych w pikselach, a jego dokumentacja opisuje kolor indeksowany jako piksele odwołujące się do wpisów palety. Siatka ułatwia ocenę, ile wierszy lub kolumn zajmuje dana cecha. Dokumentacja sprite’ów Aseprite i przewodnik po trybach kolorów

Zostaw trochę wolnego miejsca przy krawędziach, zwłaszcza tam, gdzie uszy, rogi lub ogon mogłyby zostać ucięte. Następnie zaznacz największe elementy: tułów, głowę i wszelkie charakterystyczne wypustki. Jako przykładowy punkt wyjścia możesz przeznaczyć około 15×10 pikseli łącznie na tułów i głowę, a ogon, nogi i uszy zmieścić na pozostałym obszarze. Te wymiary nie są szablonem; wydłużone, okrągłe i pokazane od przodu zwierzęta wymagają różnych proporcji.

Wypełnij zwierzę jako jeden jednolity kształt, używając jednego koloru na kontrastującym tle. Pomiń oczy, wzory i cieniowanie. Na tym etapie sprawdź, czy można odróżnić zamierzone zwierzę od zwykłej plamy. Jeśli nie, zmień kontur: wydłuż pysk, rozdziel uszy, zmień krzywiznę grzbietu albo nadaj ogonowi wyraźniejszy kierunek.

Zwróć uwagę na wąskie przerwy. Jednopikselowe odstępy mogą wystarczyć, by oddzielić ucho od głowy lub nogę od brzucha, ale mogą zniknąć, gdy sprite jest oglądany w małym rozmiarze lub umieszczony na złożonym tle. Jeśli dwa elementy się zlewają, spróbuj zmienić ich kąt lub kształt sylwetki, zanim dodasz kolor konturu. Wprowadzający poradnik Lospec podkreśla precyzyjną kontrolę nad każdym pikselem i kieruje początkujących do samouczków tworzenia sprite’ów; w praktyce oznacza to ocenianie poszczególnych pikseli zamiast polegania na automatycznym wygładzaniu. Lospec, „Pixel Art: Where to Start”

Gdy sylwetka jest już czytelna, umieść twarz i cechę wyróżniającą. W tak małym sprite’cie może wystarczyć jedno ciemne oko. Pysk, dziób, róg lub krawędź skorupy można często zasugerować niewielką zmianą kształtu lub koloru zamiast szczegółowego rysunku. Nie umieszczaj znaków twarzy przy konturze, jeśli ich zetknięcie z nim utrudniłoby odczytanie kształtu głowy.

Zastosuj szybki test usuwania: tymczasowo ukryj każdy drobny znak. Jeśli jego usunięcie nie utrudnia rozpoznania zwierzęcia ani odczytania pozy, pomiń go. To heurystyka redakcyjna, a nie uniwersalne prawo sztuki. Pomaga zachować miejsce na najważniejsze cechy.

Zacznij od kilku ról: przezroczyste tło, główny kolor ciała, ciemniejszy odcień do oddzielenia elementów lub cienia oraz jaśniejszy odcień na jeden refleks. Dodaj kolor akcentujący tylko wtedy, gdy pomaga rozpoznać zwierzę. Sprite 24×24 nie ma wymaganej liczby kolorów. Mniejsza liczba ról po prostu ułatwia ocenę, czy kolory wyjaśniają kształt, czy wprowadzają szum.

Sprawdź zarówno jasność, jak i odcień. Dwa kolory mogą różnić się odcieniem, a jednocześnie mieć zbliżoną jasność, przez co plama będzie trudna do odróżnienia w małym rozmiarze. Tymczasowo obejrzyj sprite’a w skali szarości albo zmień tło na jednolity średnioszary kolor, by sprawdzić, czy ciało, twarz i kluczowa cecha nadal są od siebie oddzielone. Samouczek tworzenia sprite’ów Pinnguaq również zaleca ocenę kontrastu i widoczności kolorów na różnych tłach, choć przedstawione w nim płótno jest większe niż 24×24. Pinnguaq, „Pixel Power: Sprite Creation”

W Aseprite tryb RGB pozwala każdemu pikselowi mieć własny kolor, a tryb indeksowany wiąże piksele z wpisami palety, więc zmiana wpisu wpływa na używające go piksele. Tryb indeksowany może pomóc zachować spójność ograniczonej palety, a RGB jest wygodny podczas eksperymentowania z kolorami. Do tego zadania nadaje się każdy z nich. Przewodnik po trybach kolorów Aseprite

Dodaj cienie dopiero wtedy, gdy sylwetka i cecha rozpoznawcza są już czytelne. Użyj plamy cienia, by opisać formę lub oddzielić nachodzące na siebie części, a nie po to, by obrysować każdą powierzchnię. Duża, spójna plama jest zwykle czytelniejsza niż rozsiane pojedyncze piksele. Dodawaj refleksy oszczędnie; w tym rozmiarze kilka jasnych punkcików może wyglądać jak przypadkowy szum, a nie faktura.

Jeśli zacieniona krawędź sprawia, że noga, ogon lub ucho zlewają się z tułowiem, usuń cień albo przesuń go w inne miejsce. Sylwetka powinna pozostać głównym punktem odniesienia: kolory wewnątrz niej mają wspierać kontur, a nie z nim konkurować.

Powiększenie pomaga umieszczać piksele, ale może ukryć problemy widoczne w normalnym rozmiarze. Obejrzyj sprite’a zarówno w powiększeniu, jak i w rozmiarze, jaki będzie zajmować w grze lub interfejsie. W rzeczywistym rozmiarze sprawdź trzy rzeczy: Czy można rozpoznać zwierzę? Czy wiadomo, w którą stronę jest zwrócone? Czy poza nadal jest czytelna na docelowym tle?

Przetestuj też sprite’a na kilku jednolitych tłach, jeśli może pojawić się w różnych scenach. Jeśli ciemny kontur znika na jednym z nich, zmień go albo dodaj niewielki kolor oddzielający. Jeśli zwierzę jest czytelne tylko w powiększeniu, uprość detal lub powiększ cechę, która pozwala je rozpoznać. To praktyczne testy diagnostyczne, a nie gwarancja, że każdy odbiorca zinterpretuje obraz w ten sam sposób.

Wprowadzaj poprawki w tej kolejności: sylwetka, poza, cecha rozpoznawcza, rozdzielenie jasności i dekoracje. Zmieniaj jedną rzecz naraz, by ocenić, czy poprawka pomogła. Jeśli zwierzę nadal jest niejednoznaczne, porównaj je z drugim, uproszczonym szkicem, w którym wyolbrzymisz jego charakterystyczną cechę. Zostaw wersję, która jest czytelniejsza w rzeczywistym rozmiarze.

Gotowy sprite nie musi wykorzystywać wszystkich 576 dostępnych pikseli ani wszystkich kolorów z palety. Zakończ pracę, gdy zwierzę, kierunek, w którym jest zwrócone, i jego najważniejsza cecha są czytelne w docelowym rozmiarze, a kolejne znaki nie poprawiają już tych elementów.

• Aseprite, „Sprite”

• Aseprite, „Color Mode”

• Lospec, „Pixel Art: Where to Start”

• Pinnguaq, „Pixel Power: Sprite Creation”