Jak wybrać spójny rozmiar sprite’a pikselowego przed narysowaniem postaci do gry

Zanim zaczniesz rysować, określ ogólny widok rozgrywki: z boku, z góry, izometryczny albo zbliżenie. Zdecyduj, jak duży obszar świata ma mieścić się na ekranie i jak dużą jego część ma zajmować gracz. Postać, którą trzeba od razu rozpoznać w zatłoczonej scenie z widokiem z góry, ma inne wymagania niż portret w dialogu pokazany z bliska.

Jeśli znasz już rozdzielczość wewnętrzną gry, wykorzystaj ją jako ramę pomiarową. Na przykład naszkicuj testowy ekran o wymiarach 320 × 180 i zaznacz przybliżoną wysokość gracza wynoszącą 32 piksele. Otrzymasz konkretny punkt odniesienia: postać zajmuje około 18% wysokości ekranu. To tylko przykładowe liczby, a nie zalecany standard. Proporcję powinny wyznaczać kadrowanie kamery, przestrzeń do poruszania się i zamierzony akcent wizualny.

Dokumentacja Unity dotycząca Pixel Perfect Camera opisuje Reference Resolution jako pierwotną rozdzielczość, z myślą o której przygotowano zasoby. Instrukcja konfiguracji wyjaśnia, że rozdzielczość referencyjna 320 × 180 zapewnia widok kamery o wymiarach 320 na 180 pikseli sprite’a. Dlatego widok w grze stanowi praktyczny punkt wyjścia przy określaniu wymiarów postaci. Unity: Dodawanie kamery Pixel Perfect

Oddziel wysokość narysowanej postaci od wymiarów płótna. Jeśli postać ma 28 pikseli wysokości na płótnie 32 × 32, pozostałe miejsce może pomieścić włosy, wyskok lub broń, bez konieczności zmiany rozmiaru płótna dla każdej pozy. Najpierw wybierz docelową widoczną wysokość, a potem dodaj tylko takie marginesy, jakich wymaga gra.

Narysuj prosty kształt w dwóch lub trzech wysokościach, na przykład 16, 24 i 32 piksele. Sprawdź, czy głowa, kończyny i charakterystyczny przedmiot pozostają rozpoznawalne przy typowej skali rozgrywki. Postać o wymiarach 12 × 16 pikseli nadal może być czytelna; praktyk pixel artu Kabaya podaje oryginalne Mario z NES-a jako przykład postaci o takim rozmiarze. Wniosek nie polega na kopiowaniu tych wymiarów, lecz na ocenie minimalnej siatki pod kątem cech, których wymaga twój projekt. Creative Bloq: Zapomnij o nostalgii, współczesny pixel art to coś więcej niż gry retro

Mniejsze płótna ograniczają liczbę pikseli, którymi można przedstawić twarz, strój lub trzymany przedmiot; większe dają więcej miejsca, ale wymagają podjęcia większej liczby decyzji na poziomie pojedynczych pikseli. Wybierz rozmiar w zależności od potrzebnych informacji wizualnych. Jeśli mimika ma znaczenie podczas gry, sprawdź, czy da się odróżnić oczy i usta. Jeśli postać jest mała na tle szerokiej sceny, ważniejszy od pikseli twarzy może być jej kształt i układ kolorów.

Praktycznym sposobem na wybór jest narysowanie tej samej prostej sylwetki w dwóch lub trzech rozmiarach, a następnie dodanie tylko najważniejszych elementów rozpoznawczych: kształtu głowy, jednego szczegółu stroju oraz broni lub narzędzia, jeśli ma zastosowanie. Obejrzyj każdą wersję w docelowej skali ekranowej. Jeśli najmniejsza wersja traci ważny element, a kolejny rozmiar pozwala go czytelnie przedstawić, przemawia to za większą siatką. To porównanie służy do oceny projektu, a nie ustanawiania uniwersalnej reguły rozmiaru.

Jeśli postać będzie animowana, przed ustaleniem wymiarów przetestuj coś więcej niż tylko pozycję stojącą. Przygotuj przybliżone sylwetki w pozycji stojącej, podczas biegu i skoku, umieszczone w tej samej ramce. Sprawdź, czy stopy, głowa i trzymane przedmioty mieszczą się w jej granicach w całym ruchu. Zbyt ciasna ramka może ucinać uniesioną rękę lub włosy; nadmiernie duża może utrudnić pozycjonowanie i porównywanie proporcji wizualnych.

Gdy stabilne położenie ma znaczenie, zachowaj te same wymiary płótna i zasady wyrównania we wszystkich klatkach. Zdecyduj, gdzie znajduje się punkt styku postaci z podłożem lub jej punkt obrotu, a następnie używaj tego samego punktu odniesienia w każdej pozie. Płótno programu graficznego i widoczny obszar rysunku to dwie różne rzeczy: Aseprite definiuje płótno jako widoczny obszar sprite’a i udostępnia osobne opcje zmiany rozmiaru płótna oraz skalowania zawartości sprite’a. Aseprite: Rozmiar płótna, Aseprite: Rozmiar sprite’a

Jeśli gra wykorzystuje kafelki, porównaj wysokość i szerokość postaci z typowym kafelkiem. Postać gracza w widoku z boku może być wyższa niż kafelek podłoża; w widoku z góry może być konieczne, by mieściła się w obrysie kafelka, a jednocześnie sprawiała wrażenie wyższej. Proporcje zależą od perspektywy gry i projektu kolizji, więc przygotuj szybką makietę sceny zamiast zakładać, że postacie i kafelki muszą mieć identyczne wymiary.

Umieść gracza obok zwykłego kafelka otoczenia, drzwi i innej postaci lub przedmiotu, zachowując docelową odległość kamery. Jeśli gracz jest zbyt mały, by go rozpoznać, albo zbyt duży, by swobodnie poruszać się po scenie, zmień widoczną wysokość lub kadrowanie kamery, zanim dodasz detale. Utrzymuj stałą gęstość pikseli w zasobach. Instrukcja konfiguracji Pixel Perfect Camera w Unity wymaga, by sprite’y korzystały ze wspólnej wartości Pixels Per Unit, a ustawienie Asset Pixels Per Unit kamery było do niej dopasowane. Unity: Dodawanie kamery Pixel Perfect

Zamiast od razu kończyć pierwszą postać, przygotuj niewielki arkusz porównawczy. Umieść trzy rozmiary płótna w makiecie widoku gry, narysuj na każdym płaską sylwetkę i dodaj te same charakterystyczne detale. Następnie obejrzyj arkusz w rzeczywistej skali rozgrywki i zadaj sobie pytania: Czy potrafię rozpoznać pozę? Czy postać naturalnie pasuje do otoczenia? Czy jej ruch mieści się w ramce? Czy zachował się zamierzony wyraz twarzy lub przedmiot?

Zapisz wybraną szerokość i wysokość płótna, docelową widoczną wysokość, linię podstawy lub punkt obrotu oraz ewentualne wyjątki. Taka krótka ściągawka ułatwi porównywanie kolejnych postaci i pomoże zapobiec rozjeżdżaniu się skali przy każdym nowym rysunku. Nie wymaga, by każda postać miała identyczny obszar pokryty rysunkiem: wysoki kapelusz lub szeroka sylwetka bossa mogą zajmować większą część wspólnego płótna, zachowując przy tym przyjętą w projekcie gęstość pikseli i zasady wyrównania.

Duże powiększenie w edytorze może sprawić, że maleńki sprite wydaje się szczegółowy, choć podczas gry będzie trudny do odczytania. Zaimportuj wersję testową do gry lub reprezentatywnej sceny i obejrzyj ją przy docelowej skali kamery. W Unity rozdzielczość referencyjna określa widok pikselowy, z myślą o którym projektujesz; Pixel Perfect Camera i zgodne ustawienia sprite’ów pomagają zachować poprawne renderowanie pikseli przy różnych rozmiarach ekranu. Unity: Dokumentacja komponentu Pixel Perfect Camera

Jeśli postać jest nieczytelna, najpierw ustal, czy problem wynika z wymiarów w pikselach, sylwetki, kontrastu czy odległości kamery. Samo zwiększenie płótna nie musi poprawić słabej sylwetki, a zmniejszenie go nie pomoże, jeśli postać zajmuje zbyt małą część ekranu. Zmieniaj po jednej rzeczy naraz i porównuj rezultat z pierwotnym testem. Gdy postać jest czytelna, a jej animacja mieści się w wybranej ramce, przyjmij to płótno jako standard dla postaci o tej samej roli i skali kamery.

• Rozmiar płótna — dokumentacja Aseprite

• Rozmiar sprite’a — dokumentacja Aseprite

• Dodawanie kamery Pixel Perfect — dokumentacja Unity

• Dokumentacja komponentu Pixel Perfect Camera dla URP — podręcznik Unity

• Zapomnij o nostalgii, współczesny pixel art to coś więcej niż gry retro — Creative Bloq