Niezależni deweloperzy często muszą łączyć kilka ról: projektanta gier, programisty, kompozytora, artysty. A kiedy przychodzi do wizualizacji, wielu wybiera pixel art — na pierwszy rzut oka wydaje się prosty. Ale aby stworzyć coś pięknego, potrzeba dużo doświadczenia i określonych umiejętności. Znalazłem tutorial dla tych, którzy dopiero zaczynają poznawać podstawy tego stylu: zawiera opisy specjalnego oprogramowania i technik rysowania na przykładzie dwóch sprite'ów.
Tło
Pixel art to forma cyfrowej sztuki, w której zmiany wprowadza się na poziomie pikseli. Głównie kojarzy się z grafiką gier wideo z lat 80. i 90. Wtedy artyści musieli uwzględniać ograniczenia pamięci i niską rozdzielczość. Obecnie pixel art nadal cieszy się popularnością w grach i jako styl artystyczny w ogóle, mimo możliwości tworzenia realistycznej grafiki 3D. Dlaczego? Nawet pomijając nostalgię, stworzenie świetnego dzieła w tak surowych ramach to przyjemne i wartościowe wyzwanie.
Próg wejścia w pixel art jest stosunkowo niski w porównaniu do tradycyjnej sztuki i grafiki 3D, co przyciąga niezależnych deweloperów. Ale to wcale nie oznacza, że będzie łatwo ukończyć grę w tym stylu. Widziałem wielu niezależnych twórców z metroidvaniami w pixel arcie na platformach crowdfundingowych. Myśleli, że skończą wszystko w rok, ale w rzeczywistości potrzebowali jeszcze sześciu lat.
Metal Slug 3 (Arcade). SNK, 2000 rok
Pixel art na poziomie, na którym większość chce go tworzyć, zajmuje dużo czasu, a krótkich instrukcji jest bardzo mało. Pracując z modelem 3D można go obracać, deformować, przesuwać jego poszczególne części, kopiować animacje z jednego modelu na drugi itp. Pixel art na wysokim poziomie prawie zawsze wymaga mnóstwa wysiłku na skrupulatne rozmieszczanie pikseli w każdej klatce.
Ogólnie ostrzegłem.
A teraz trochę o moim stylu: głównie rysuję pixel art do gier wideo i w nich znajduję inspirację. Szczególnie uwielbiam Famicom/NES, konsole 16-bitowe i arcade z lat 90. Pixel art moich ulubionych gier z tamtego okresu można opisać jako jasny, pewny siebie i czysty (ale nie za bardzo), nie jest surowy ani minimalistyczny. W tym stylu pracuję sam, ale bez trudu możesz zastosować pomysły i techniki z tego samouczka do stworzenia zupełnie innych rzeczy. Analizuj prace różnych artystów i twórz pixel art, który ci się podoba!
Oprogramowanie
Podstawowe narzędzia cyfrowe do pixel artu — Powiększenie (Zoom) i Ołówek (Pencil), aby umieszczać piksele. Przydadzą się również Linia (Line), Kształt (Shape), Wybierz (Select), Przenieś (Move) i Bucket z farbą (Paint Bucket). Jest wiele darmowych i płatnych programów z takim zestawem narzędzi. Opowiem o najpopularniejszych i tych, z których sam korzystam.
Paint (darmowy)
Jeśli masz Windows, wbudowany w system Paint to prymitywny program, ale zawiera wszystkie narzędzia do pixel artu.
(darmowy)
Niespodziewanie funkcjonalny edytor pixel artu, który działa przez przeglądarkę. Można eksportować prace do PNG lub animowanego GIF-a. Doskonała opcja dla początkujących.
(darmowy)
GraphicsGale to jedyny edytor spośród tych, o których słyszałem, stworzony specjalnie do pixel artu i zawierający narzędzia do animacji. Został opracowany przez japońską firmę HUMANBALANCE. Od 2017 roku jest dostępny za darmo i nadal cieszy się popularnością, mimo wzrostu popularności Aseprite. Niestety, działa tylko na Windows.
($)
Być może najpopularniejszy obecnie edytor. , mnóstwo możliwości, aktywne wsparcie, wersje na Windows, Mac i Linux. Jeśli poważnie zabrałeś się za pixel art i wciąż nie znalazłeś odpowiedniego edytora, być może to właśnie to, czego potrzebujesz.
($$+)
GameMaker Studio 2 to świetne narzędzie 2D z dobrym edytorem sprite’ów (Sprite Editor). Jeśli chcesz tworzyć pixel art do własnych gier, bardzo wygodnie wszystko robić w jednym programie. Aktualnie używam tego oprogramowania do pracy nad , kolekcją 50 retro-gier: sprity i animacje tworzę w GameMaker, a tile-sety — w Photoshopie.
($$$+)
Photoshop to drogie oprogramowanie dostępne w modelu subskrypcyjnym, nie przystosowane do pixel artu. Nie polecam jego zakupu, jeśli nie zajmujesz się rysowaniem ilustracji w wysokiej rozdzielczości lub nie potrzebujesz przeprowadzać skomplikowanych manipulacji obrazem, jak ja. Można w nim tworzyć statyczne sprite'y i prace pikselowe, ale jest znacznie bardziej skomplikowany w porównaniu z dedykowanym oprogramowaniem (na przykład GraphicsGale czy Aseprite).
Inne
Mój zestaw do pixel artu. Cały czarny, dopiero teraz zauważyłem.
Tablet graficzny ($$+)
Polecam tablety graficzne do wszelkich prac z ilustracjami cyfrowymi, aby uniknąć zespołu cieśni nadgarstka. Łatwiej jest temu zapobiegać niż leczyć. Gdy poczujesz ból, tylko się nasili — dbaj o siebie od samego początku. Kiedyś rysowałem myszką, teraz trudno mi grać w gry, w których trzeba naciskać przyciski. Obecnie używam Wacom Intuos Pro S.
Wsparcie dla nadgarstka ($)
Jeśli nie możesz kupić tabletu, przynajmniej kup wsparcie dla nadgarstka. Najbardziej podoba mi się Mueller Green Fitted Wrist Brace. Inne są albo za ciasne, albo zapewniają niewystarczające wsparcie. Wsparcia można bez problemu zamówić online.
96×96 pikseli
Final Fight. Capcom, 1989 rok
Zaczynamy! Rozpoczniemy od sprite'a postaci 96×96 pikseli. Dla przykładu narysowałem orka i umieściłem go na zrzucie ekranu z Final Fight (zdjęcie powyżej), abyś zrozumiał skalę. To duży sprite dla większości retro gier, rozmiar zrzutu ekranu: 384×224 pikseli.
Na tak dużym sprite'cie łatwiej będzie pokazać technikę, o której chcę opowiedzieć. Rysowanie pikselowe jest również bardziej podobne do tradycyjnych form sztuki (na przykład rysunku czy malarstwa), z którymi być może jesteś lepiej zaznajomiony. Po opanowaniu podstawowych technik, przejdziemy do mniejszych sprite'ów.
1. Wybieramy paletę
Piksel to znacznie głębsze pojęcie w pixel arcie niż w jakiejkolwiek innej dziedzinie cyfrowej. Ograniczenia, takie jak kolory, definiują pixel art. Ważne jest, aby odpowiednio dobrać paletę, ona pomoże określić twój styl. Ale na początku proponuję nie myśleć o paletach i wybrać jedną z istniejących (lub po prostu kilka losowych kolorów) — możesz ją łatwo zmienić na każdym etapie.
Dla tego samouczka będę używać palety z 32 kolorami, którą stworzyliśmy dla . W przypadku pixel artu często zbiera się z 32 lub 16 kolorów. Nasza jest zaprojektowana z myślą o fikcyjnej konsoli, która mogłaby się pojawić gdzieś pomiędzy Famicom a PC Engine. Możesz wziąć ją lub jakąkolwiek inną - samouczek wcale nie zależy od wybranej palety.
2. Grube kontury
Zaczniemy rysowanie za pomocą narzędzia Ołówek. Narysujemy szkic tak, jak to robimy zwykłym długopisem na papierze. Oczywiście pixel art i sztuka tradycyjna się przenikają, zwłaszcza gdy mowa o dużych sprite'ach. Moje obserwacje pokazują, że utalentowani artyści pixel artu przynajmniej w miarę dobrze rysują ręcznie i odwrotnie. Dlatego rozwijanie umiejętności rysowania zawsze jest korzystne.
3. Dopracowanie konturów
Dopracowujemy kontury: usuwamy zbędne piksele i skracamy grubość każdej linii do jednego piksela. Ale co właściwie uznaje się za zbędne? Aby odpowiedzieć na to pytanie, musimy zrozumieć pixelowe linie i nierówności.
Nierówności
Należy nauczyć się rysować dwie podstawowe linie w pixel arcie: proste i krzywe. Z długopisem i papierem chodzi o kontrolę mięśniową, ale my pracujemy z malutkimi kolorowymi blokami.
Kluczem do rysowania poprawnych pixelowych linii są nierówności. Są to pojedyncze piksele lub małe segmenty, które niszczą gładkość linii. Jak już mówiłem, pojedynczy piksel ma ogromne znaczenie w pixel arcie, dlatego nierówności mogą zniszczyć całą estetykę. Wyobraź sobie, że rysujesz prostą linię na papierze, a nagle ktoś uderza w stół: nierówności w pixel arcie wyglądają tak samo, jak przypadkowe zakręty.
Przykłady:
Proste
Krzywe
Nierówności pojawiają się na krzywych, gdy długość segmentów linii zmienia się nie stopniowo.
Nie da się całkowicie uniknąć nierówności — we wszystkich twoich ulubionych retro grach one są (jeśli oczywiście pixel art nie składa się wyłącznie z prostych form). Celem jest zminimalizowanie nierówności, jednocześnie pokazując wszystko, co potrzebne.
4. Stosujemy pierwsze kolory
Pokryj swojego bohatera za pomocą wypełnienia lub innego odpowiedniego narzędzia. Paleta ułatwi tę część pracy. Jeśli oprogramowanie nie przewiduje użycia palet, można umieścić ją bezpośrednio na obrazie, jak w powyższym przykładzie, i wybierać kolory za pomocą pipety.
W lewym dolnym rogu narysowałem naszego przyjaciela, poznajcie, to — Szar. Z nim będzie łatwiej zrozumieć, co dokładnie dzieje się na każdym etapie.
5. Cieniowanie
Czas pokazać cienie — po prostu dodajemy ciemniejsze kolory do sprite'a. Tak obraz będzie wyglądał na bardziej trójwymiarowy. Załóżmy, że mamy jedno źródło światła, umiejscowione powyżej orka, nieco z jego lewej strony. Oznacza to, że oświetlone będą wszystkie elementy znajdujące się na górze i przed naszym bohaterem. Dodajemy cienie z dołu po prawej.
Forma i objętość
Jeśli ten etap sprawia Ci trudności, wyobraź sobie swój rysunek jako trójwymiarowe formy, a nie tylko linie i kolory. Formy istnieją w przestrzeni trójwymiarowej i mogą mieć objętość, którą tworzymy za pomocą cieni. To pomoże zwizualizować bohatera bez szczegółów i wyobrazić sobie, że jest zrobiony z gliny, a nie z pikseli. Cieniowanie to nie tylko dodawanie nowych kolorów, to proces budowania formy. Na dobrze wykonanym bohaterze detale nie zacierają podstawowych form: jeśli się zmrużysz, zobaczysz kilka dużych skupisk światła i cienia.
Wygładzanie (anti-aliasing, anty-aliasing)
Za każdym razem, gdy używam nowego koloru, stosuję wygładzanie (AA). Pomaga to wygładzić piksele, dodając pośrednie kolory w rogach, w miejscu styku dwóch segmentów linii:
Szare piksele łagodzą "rozrywy" w linii. Im dłuższy segment linii, tym dłuższy segment AA.
Tak AA wygląda na ramieniu orka. Jest potrzebne, aby wygładzić linie przedstawiające krzywiznę jego mięśni.
Wygładzanie nie powinno przekraczać granic sprite'a, który będzie używany w grze lub na tle, którego kolor jest nieznany. Na przykład, jeśli zastosujesz AA na jasnym tle, na ciemnym tle wygładzanie będzie wyglądać nieestetycznie.
6. Selektywny kontur
Dawniej kontury były całkowicie czarne, przez co sprite wyglądał bardzo kreskówkowo. Obraz był jakby podzielony na segmenty. Na przykład czarne linie na ręce zbyt kontrastowo przedstawiają muskulaturę, a bohater wygląda mniej spójnie.
Jeśli sprite stanie się bardziej naturalny, a segmentacja mniej oczywista, podstawowe kształty postaci będą łatwiejsze do odczytania. W tym celu można zastosować wybiórczy kontur — częściowo zastąpić czarny kontur jaśniejszym kolorem. Na oświetlonej części sprite'a można użyć najjaśniejszych kolorów lub, tam gdzie sprite styka się z negatywną przestrzenią, można całkowicie usunąć kontur. Zamiast czarnego należy użyć koloru, który został wybrany dla cienia — w ten sposób zachowa się segmentacja (dla rozgraniczenia mięśni, futra itd.).
Na tym etapie dodałem również ciemniejsze cienie. Powstały trzy odcienie zieleni na skórze orka. Najciemniejszy odcień zielonego można użyć do wybiórczego konturu i AA.
7. Ostateczne szlify
Na końcu warto dodać odbicia (najjaśniejsze plamy na spricie), detale (kolczyki, nity, blizny) i inne ulepszenia, aż postać będzie gotowa lub aż będziemy musieli przejść do następnego etapu.
Jest kilka przydatnych technik, które można zastosować na tym etapie. Obraź rysunek poziomo, to często pomaga w wykrywaniu błędów w proporcjach i cieniowaniu. Można także usunąć kolor — ustawić nasycenie na zero, aby zrozumieć, gdzie trzeba zmienić cienie.
Tworzenie szumów (dithering)
Jak dotąd głównie stosowaliśmy duże, solidne obszary cieni. Istnieje jednak inna technika — dithering, która pozwala przejść od jednego koloru do drugiego bez dodawania trzeciego. Zobacz przykład poniżej.
Górny gradient od ciemnego do jasnego używa setek różnych odcieni niebieskiego.
Środkowy gradient wykorzystuje tylko dziewięć kolorów, ale wciąż jest w nim zbyt wiele odcieni jednego koloru. Powstaje tak zwany banding, w którym przez grube jednorodne pasy oko koncentruje się na punktach styku kolorów, zamiast na samych kolorach.
W dolnym gradientie zastosowaliśmy dithering, który pozwala uniknąć bandingu i używa tylko dwóch kolorów. Tworzymy szum o różnej intensywności, aby imitować gradację koloru. Technikę tę można porównać do halftone stosowanego w druku oraz stippling w ilustracji i komiksach.
Na orku zastosowałem delikatne ditherowanie, aby przekazać teksturę. Niektórzy artyści pikselowi w ogóle go nie używają, inni wręcz przeciwnie, nie wahają się i robią to bardzo umiejętnie. Uważam, że największe ditherowanie najlepiej wygląda na dużych obszarach wypełnionych jednym kolorem (zwróćcie uwagę na niebo w zrzucie ekranu z Metal Slug, który był wcześniej) lub na tych obszarach, które powinny wyglądać chropowato i nierówno (na przykład brud). Zdecydujcie sami, jak go używać.
Jeśli chcecie zobaczyć przykład z rozległym i jakościowym ditherowaniem, zapoznajcie się z grami The Bitmap Brothers, brytyjskiej studia z lat 80-tych, lub z grami na komputerach PC-98. Tylko pamiętajcie, że wszystkie one są NSFW.
Kakyusei (PC-98). Elf, 1996 rok
Na tym obrazie jest zaledwie 16 kolorów!
8. Ostatni rzut oka
Jednym z zagrożeń związanych z pixel artem jest to, że wydaje się on łatwy i prosty (przez swoją strukturę i ograniczenia stylu). Ale na końcu spędzicie ogromną ilość czasu na dopracowywaniu swoich sprite'ów. To jak zagadka do rozwiązania — dlatego pixel art przyciąga perfekcjonistów. Pamiętajcie, że jeden sprite nie powinien zajmować zbyt dużo czasu — to tylko malutki kawałek niezwykle skomplikowanej układanki. Ważne jest, aby nie tracić wizji całości.
Nawet jeśli wasz pixel art nie jest przeznaczony do gier, czasem warto powiedzieć sobie: „Wszystko jest już wystarczająco dobre!” I przejść do przodu. Najlepszym sposobem na rozwój umiejętności jest jak najwięcej razy przejść cały proces od początku do końca, używając jak najwięcej tematów.
Czasami dobrze jest na chwilę zostawić sprite'a, aby później spojrzeć na niego świeżym okiem.
32×32 piksele
Zaczęliśmy od stworzenia dużego sprite'a 96×96 pikseli, ponieważ przy tej wielkości bardziej przypomina to rysowanie lub malarstwo, ale tylko pikselami. Im mniejszy sprite, tym mniej przypomina to, co powinien przedstawiać, i tym bardziej każdy piksel staje się ważny.
W Super Mario Bros. oko Mario to zaledwie dwa piksele, jeden nad drugim. I jego ucho też. Twórca postaci, Shigeru Miyamoto, powiedział, że wąsy były potrzebne, aby oddzielić nos od reszty twarzy. Tak więc jedną z głównych cech twarzy Mario jest nie tylko projekt postaci, ale i pragmatyczny zabieg. Co potwierdza starą mądrość — "potrzeba jest matką wynalazków."
Znane są nam już główne etapy tworzenia sprite'a o wymiarach 32×32 pikseli: szkic, kolor, cienie, dalsza obróbka. Jednak w takich warunkach, jako początkowy szkic wybieram kolorowe figury zamiast rysowania konturów z powodu małego rozmiaru. Kolor odgrywa ważniejszą rolę w definiowaniu postaci niż kontury. Spójrz ponownie na Mario, nie ma w ogóle konturów. Interesujące są nie tylko wąsy. Jego bokobrody definiują kształt uszu, rękawy pokazują ręce, a ogólny kształt w mniejszym lub większym stopniu oddaje całe jego ciało.
Tworzenie małych sprite'ów to ciągłe kompromisy. Jeśli dodasz obramowanie, możesz stracić miejsce na cień. Jeśli postać ma wyraźnie zaznaczone ręce i nogi, głowa prawdopodobnie powinna być niezbyt duża. Jeśli skutecznie wykorzystasz kolor, selektywne obramowanie i wygładzanie, narysowany obiekt może wydawać się większy, niż jest w rzeczywistości.
Dla małych sprite'ów lubię styl chibi: postacie wyglądają bardzo uroczo, mają duże głowy i oczy. To świetny sposób na stworzenie wyrazistego bohatera w ograniczonej przestrzeni, a także bardzo przyjemny styl w ogóle. Ale jeśli musisz pokazać mobilność lub siłę postaci, wtedy możesz poświęcić mniej miejsca na głowę, aby ciało wydawało się bardziej potężne. Wszystko zależy od Twoich preferencji i celów.
Cała drużyna w komplecie!
Formaty plików
Taki wynik może zaniepokoić każdego artystę pikselowego.
Obrazek, który widzisz, to rezultat zapisania rysunku w formacie JPG. Część danych została utracona z powodu algorytmów kompresji pliku. Jakościowy piksel-art w efekcie będzie wyglądał źle, a odzyskanie jego pierwotnej palety będzie trudne.
Aby zachować statyczny obrazek bez utraty jakości, użyj formatu PNG. Do animacji - GIF.
Jak poprawnie dzielić się piksel-artem
Dzielenie się piksel-artem w mediach społecznościowych to świetny sposób na uzyskanie informacji zwrotnej i poznanie innych artystów pracujących w tym samym stylu. Nie zapomnij użyć hashtagu #pixelart. Niestety, serwisy społecznościowe często konwertują PNG na JPG bez pytania, pogarszając Twoją pracę. Nie zawsze też wiadomo, dlaczego Twoje zdjęcie zostało przekonwertowane.
Istnieje kilka wskazówek dotyczących zachowania piksel-artu w odpowiedniej jakości dla różnych mediów społecznościowych.
Aby plik PNG nie zmienił się w Twitterze, użyj mniej niż 256 kolorów lub , że twój plik ma mniej niż 900 pikseli po dłuższym boku. Sugerowałbym, aby rozmiar pliku wynosił co najmniej 512×512 pikseli. Ważne jest, aby skalowanie było wielokrotnością 100 (200%, a nie 250%) i aby zachowały się ostre krawędzie (Nearest Neighbor w Photoshopie).
Animowane pliki GIF do postów na Twitterze nie mogą mieć więcej niż 15 MB. Obrazek powinien mieć co najmniej 800×800 pikseli, a cykliczna animacja powinna powtarzać się trzy razy, a ostatnia klatka powinna być dwa razy krótsza w czasie niż wszystkie pozostałe — to najpopularniejsza teoria. Jednak nie jest jasne, w jakim stopniu należy spełniać te wymagania, biorąc pod uwagę, że Twitter stale zmienia swoje algorytmy wyświetlania obrazków.
Z tego, co wiem, niemożliwe jest opublikowanie obrazka na Instagramie bez utraty jakości. Jednak z pewnością będzie wyglądać lepiej, jeśli zwiększysz go chociaż do 512×512 pikseli.
Źródło: habr.com
