[K] Aseprite dla kochających piksele

Zakończona w miniony weekend Strefa Retro zaowocowała między innymi tym, że zaczęliśmy z Larkiem, czyli Arkiem Lubaszką, realizować projekt pewnej gry, o której na razie nic więcej nie dodam. Konkretnie zostałem poproszony o przygotowanie mu... a, nie, nie muzyki, tylko grafiki. I wydawałoby się, że nie ma w tym nic specjalnie trudnego, a już na pewno jeśli chodzi o narzędzia - przecież Photoshop powinien sobie z tym poradzić bez żadnego problemu. Nie do końca.

Wyzwania grafiki na "małe komputery"

Wyzwaniem okazuje się w tym wypadku paleta kolorów. Otóż stare komputery nie potrafiły wyświetlać takiego zakresu kolorów, jakie mamy do dyspozycji obecnie - dziś standardem jest 24-bitowa paleta kolorów, która obejmuje prawie 17 milionów kolorów i odcieni. Kiedyś wyświetlenie choćby i 16 kolorów naraz na ekranie ośmiobitowego komputera bywało prawdziwym wyzwaniem. Projektując grę dla takiego komputera, trzeba to, rzecz jasna, wziąć pod uwagę.

Poza tym rozdzielczość grafiki także była trzydzieści, czterdzieści lat temu diametralnie inna - zamiast choćby FullHD, czyli 1920x1080 pikseli, mieliśmy do dyspozycji "szalone" 160x192 pikseli - dziś podobne rozdzielczości mają ładniejsze ikonki.

To wszystko sprawia, że edycja malutkich grafik w Photoshopie, choć oczywiście możliwa, staje się mało wygodna. Na szczęście dla takich szaleńców jak my, na potrzeby tzw. pixel artu powstał program Aseprite i o nim chciałem dzisiaj parę słów napisać.

Szybkie wprowadzenie

Aseprite jest bardzo poręcznym programem dla osób, które muszą pracować w "małej skali" albo z nietypowymi paletami kolorów. Wbrew pozorom, chodzi tu nie tylko o tworzenie grafiki dla gier, ale także - na przykład - rysowanie ikon. Aplikacja bez problemu obsługuje przezroczystość, potrafi zapisywać grafiki w formatach png czy ico, więc za 19 dolarów można nabyć naprawdę ciekawe narzędzie.

Pierwszy obrazek

Pierwszą rzeczą, jaką należy zrobić przy rozpoczęciu pracy, to zdefiniowanie parametrów tworzonego obrazka:

Najważniejsze są, rzecz jasna, wymiary obszaru roboczego i zdecydowanie się na konkretną paletę kolorów - pełną RGB, odcienie szarości lub paletę indeksowaną, gdzie mamy tylko określoną liczbę zdefiniowanych z góry kolorów. Po dokonaniu wyboru od razu lądujemy w edytorze:

Po lewej stronie widać wybraną paletę kolorów, centrum zajmuje obszar roboczy, po prawej zaś znajdziemy przybornik. Wybranie narzędzia powoduje, że nad obszarem roboczym pojawiają się parametry danego narzędzia (np. wielkość "pędzla"). Poniżej obszaru roboczego dostępna jest lista warstw (wbrew pozornej prostocie, Aseprite jest bardzo przemyślanym i rozbudowanym programem), można także włączyć podgląd grafiki w rozmiarze 1:1 (lub innym, dogodnym w danej sytuacji). No i można przystąpić do pracy.

Rysowanie odbywa się niczym w systemowej aplikacji Paint - wybieramy narzędzie ołówka czy sprayu i mażemy nim po "płótnie" - domyślnie jest ono przezroczyste, chyba że wybraliśmy na początku biały lub czarny kolor tła. Kratki, widoczne jako tło, oznaczają właśnie przezroczystość. Narysujmy zatem chmurkę za pomocą ołówka (skrót: B):

Chmurka jest nieco płaska, więc możemy dodać u dołu nieco jasnoszarego cienia - najlepiej za pomocą narzędzia spray (skrót: Shift+B). Aby spray nie rozpylał się poza chmurką, wybierzmy najpierw narzędzie typu magic wand (skrót: W):

Po zaznaczeniu chmurka wygląda tak:

Teraz za pomocą narzędzia spray (Shift+B), korzystając z dwóch różnych jasnoszarych kolorów, możemy dorysować "cień". Jeśli wielkość nakładanego wzorku jest za duża, możemy zmienić ustawienia spraya za pomocą kontrolek umieszczonych nad obszarem roboczym:

Pierwsza liczba oznacza wielkość piksela, druga - wielkość "wzorku", a trzecia - intensywność malowania.

Chmurka faktycznie "nabrała objętości", ale jest dość niewyraźna. Powszechnym zabiegiem, stosowanym w pixel arcie, jest otoczenie kształtu ciemną obwódką. Można to zrobić, rzecz jasna, ręcznie, przełączając się na ołówek (B) i czarnym kolorem rysując pracowicie dookoła chmurki (polecam włączyć Pixel Perfect, to specjalny algorytm, który zapobiega powstawaniu "bryłek" pikseli). Na szczęście Aseprite - jak na profesjonalne narzędzie przystało - jest wyposażony w funkcję ułatwiającą tworzenie obwódek: wchodzimy do menu Edit-FX i wybieramy Outline. Wystarczy teraz wybrać kolor obwódki i sposób jej rysowania, program na bieżąco wyświetla podgląd:

No i tyle, chmurka gotowa, prezentuje się tak:

A po wyeksportowaniu jako plik png w oryginalnym rozmiarze (64x32 piksele) chmurka wygląda tak:

Piksel po pikselu

Oczywiście, to nie tak, że wszystko trzeba rysować piksel po pikselu. Są tu i narzędzia rysowania linii, i krzywych, i prostokąty, i okręgi, jest powiększanie, przemieszczanie, zaznaczanie, kopiowanie, wklejanie, obracanie, odbijanie, czyli wszystkie te rzeczy, które powinny znaleźć się w aplikacji do pracy nad grafiką bitmapową.

Ponadto bardzo ważne jest stosowanie warstw i odpowiednie rozmieszczanie na nich poszczególnych obiektów np. warstwa dolna to niebo, na niej umieszczamy warstwę gór, potem lasu, a na koniec łąkę:

Co mnie pozytywnie zaskoczyło, to możliwość bardzo łatwego kopiowania grafiki z Affinity Designera do Aseprite, dzięki czemu elementy takie jak duże, ozdobne napisy można przygotować sobie wektorowo i po prostu przekleić do Aseprite (pewnie pixel artystom otworzyły się teraz noże w kieszeniach - bo według reguł wszystko powinno być "wydziergane" ręcznie - wybaczcie!).

Ruch!

Aseprite nie tylko pomaga rysować statyczne obrazki, ale umożliwia także przygotowanie animacji, np. ruchu postaci do gry lub choćby animowanego gif-a do wrzucenia na Facebooka. Możemy duplikować klatki animacji, nakładać je na siebie i w końcu, rzecz jasna, odtwarzać. Poniżej prototyp postaci do gry - ot, stoi sobie, ale nie zupełnie nieruchomo:

Dobre narzędzie oszczędza czas

Myślę, że powyższy śródtytuł dobrze oddaje to, czym jest Aseprite. To bardzo specjalizowane narzędzie, zrobione przez fanów dla fanów pixel artu. Szybko się uruchamia, pracuje się w nim bardzo wygodnie dzięki skrótom klawiaturowym (które można sobie jeszcze dopasować do własnych potrzeb), obsługuje nawet tablety graficzne, więc kompletnie nie ma na co narzekać.

A że nie jest to narzędzie darmowe? Przyznam, że cena 19 dolarów naprawdę nie jest zaporowa, a już zwłaszcza dla kogoś, kto planuje faktycznie projektować i rysować grafikę do gier. Myślę, że warto wspomóc autorów i z całego serca polecam Aseprite każdemu, kto rysuje malutkie graficzki o rozmiarach garstki pikseli.