Spriters: Nowa nadzieja.

W ciągu ostatniej dekady rozwój gier wideo eksplodował dzięki nowym technologiom. Na początku wszystkie gry miały jedynie świetną rozgrywkę i piksele. Jednak w ciągu ostatnich kilku lat gry 3D stały się bardziej dominujące, a teraz, wraz z rozwojem HTML5, spriterzy mogą ponownie postawić na piksele w grach!

Dla programistów najbardziej atrakcyjną rzeczą w HTML5 jest to, że działa on na wielu platformach – od sieci po urządzenia przenośne. Wiąże się to z pewnymi ograniczeniami dla warstwy artystycznej. Jednak artyści, którzy preferują klasyczne podejście, przekonają się, że ta platforma daje im możliwość rozkwitu. Mianowicie poprzez pixel art.

Dla artystów najfajniejszą rzeczą w HTML5 jest potencjał do tworzenia większej liczby gier w stylu pixel art. Tego typu gry mają w sobie pewien urok. Kiedy patrzysz na obraz z gry pikselowej, widzisz elementy składowe – kości, które tworzą piękną kompozycję.

Mam ogromny szacunek do artystów, którzy potrafią stworzyć więcej za pomocą mniejszej liczby środków. Oglądając dużą grę w wysokiej rozdzielczości, łatwo zapomnieć o tysiącach pikseli tworzących obraz. Artyści pixel art budują obraz od podstaw. Aby to osiągnąć, potrzebne jest planowanie, przezorność oraz bardzo silne wyczucie teorii koloru.

Częścią zabawy w „przesuwaniu pikseli” jest poczucie spełnienia, które odczuwasz, gdy skończysz tło lub postać. Przypomina to skompletowanie zestawu Lego. Wszystkie małe elementy pasują na swoje miejsce, tworząc coś dużego i fajnego. Artystom, którzy nie próbowali jeszcze pixel artu, gorąco polecam go jako ćwiczenie. To buduje charakter.

Oto część, która mnie ekscytuje: możliwość stworzenia w pełni profesjonalnej gry w stylu pixel art. Fora takie jak Pixel Joint są wypełnione pracami, które aż proszą się o przekształcenie w pełnowymiarowe gry.

Powiązane: Unity Asset Store — Gotowe grafiki, narzędzia i szablony, które można wrzucić bezpośrednio do projektu Unity.

Czy możecie sobie wyobrazić pełnowymiarową grę stworzoną z takim poświęceniem czasu i staranności, jakiej potrzeba tym artystom, aby stworzyć JEDNĄ grafikę?! To byłoby LEGEN (poczekaj na to) DARNE. A także to: CanvasCycle. Niesamowite.

Tła z cyklem kolorów byłyby epickie w przygodzie typu side-scroller!

Świetnym przykładem niedawnej gry pikselowej jest Sword & Sworcery. Chętnie zobaczyłbym więcej nowych gier tego typu. Wieloplatformowa wygoda HTML5 oznacza ciągły rozwój tworzenia gier i większe zapotrzebowanie na artystów pixel art. Prawda jest taka, że przy użyciu HTML5 można stworzyć naprawdę genialną grę pikselową. Niektórzy mogą powiedzieć, że pixel art to niskorozdzielczowy chłam, ale ja widzę w tym cyfrowy pointylizm i piękną formę sztuki, która w przeciwnym razie mogłaby zaniknąć.

Jeśli robisz zakupy: Construct 3 — Oparty na przeglądarce, niewymagający kodu silnik HTML5, który eksportuje do Internetu, urządzeń mobilnych i komputerów stacjonarnych.

Kluczowe wnioski

• Wieloplatformowy zasięg HTML5 jest głównym powodem, dla którego pixel art znów rozkwita — jeden zestaw zasobów może działać w przeglądarce, na telefonie i na tablecie.
• Pixel art nie jest ograniczeniem, na które się godzisz; to dyscyplina, która wymusza silną kompozycję, teorię koloru i planowanie.
• Element canvas i narzędzia takie jak CanvasCycle otwierają dostęp do technik (cykliczność palety, tła proceduralne), które są naprawdę trudne do zrealizowania w potokach 3D.
• Pełnowymiarowa gra w stylu pixel art to osiągalny cel dla małego zespołu, a nie mrzonka — barierą jest kunszt i czas, a nie technologia.
• Jeśli jesteś artystą, który nie próbował „przesuwania pikseli”, potraktuj to jako ćwiczenie. To buduje charakter.

Dlaczego HTML5 zmienił zasady gry dla artystów pikselowych

Przesłanie HTML5 jest proste: napisz raz, uruchom wszędzie. Pod maską głównym narzędziem jest element <canvas>, który zapewnia JavaScriptowi bezpośredni dostęp do mapy bitowej, na której można rysować klatka po klatce. Dla artysty pikselowego to prezent. Nie walczysz z potokiem tekstur ani kompilatorem shaderów — rysujesz prostokąty koloru na siatce, czyli dokładnie tak, jak tworzy się pixel art.

Porównajmy te dwa światy:

Kwestia	Tradycyjny potok 3D	Potok HTML5 canvas / pixel
Tworzenie zasobów	Modelowanie, mapowanie UV, rigging, teksturowanie	Rysowanie na stałej siatce pikseli, eksport arkusza sprite’ów
Rozmiar pliku	Duże siatki (meshes) i tekstury	Małe pliki PNG i indeksowane palety
Skalowanie	Zależne od rozdzielczości, wymaga LOD-ów	Skalowanie „nearest-neighbor” zachowuje ostre krawędzie
Portowanie	Buildy i shadery dla każdej platformy	Jedna baza kodu, wiele przeglądarek i urządzeń
Ryzyko kierunku artystycznego	Łatwo o generyczny wygląd	Domyślnie charakterystyczny

Kompromis jest jednak realny. Renderowanie na canvasie jest w wielu przypadkach obciążeniem dla CPU i trzeba świadomie planować, ile sprite’ów przesyła się w każdej klatce.

Musisz także ostrożnie zarządzać współczynnikami pikseli urządzenia (device pixel ratios), w przeciwnym razie starannie rozmieszczone piksele rozmyją się na ekranach o wysokim DPI. Rozwiązaniem jest renderowanie do pomocniczego płótna o niskiej rozdzielczości i skalowanie go przy wyłączonym wygładzaniu obrazu — to technika, której w końcu uczy się każdy twórca gier pikselowych w HTML5.

Rzemiosło kryjące się za „robieniem więcej za pomocą mniejszej liczby środków”

Kiedy patrzysz na obraz z gry pikselowej, widzisz elementy składowe – kości, które tworzą piękną kompozycję. Mam ogromny szacunek do artystów, którzy potrafią stworzyć więcej za pomocą mniejszej liczby środków. Oglądając dużą grę w wysokiej rozdzielczości, łatwo zapomnieć o tysiącach pikseli tworzących obraz. Artyści pixel art budują obraz od podstaw.

Aby tego dokonać, potrzebne jest planowanie, przezorność i bardzo silne wyczucie teorii koloru. Kilka praktycznych zasad, które oddzielają dobrą grafikę pikselową od szumu:

Powiązane: Amazon: Game Dev Books & Gear — Książki o programowaniu gier, klawiatury mechaniczne, monitory i sprzęt komputerowy dla programistów.

• Ogranicz swoją paletę. Klasyczny sprzęt narzucał twarde ograniczenia — na przykład NES działał w ramach małego zestawu kolorów wyświetlanych jednocześnie. Ograniczenia zmuszają do wyboru kolorów, które naprawdę „pracują”.
• Używaj selektywnego konturowania. Pełny czarny kontur spłaszcza sprite’a. Kolorowe, przerywane kontury sugerują światło i formę.
• Kontroluj walory. Przymruż oczy, patrząc na swojego sprite’a. Jeśli sylwetka nie jest czytelna, żadna ilość szczegółów jej nie uratuje.
• Szanuj siatkę. Ręczne wygładzanie krawędzi (anti-aliasing), piksel po pikselu, to umiejętność — ale równie ważna jest wiedza, kiedy tego nie robić.
• Myśl kafelkami. Tła zbudowane z kafelków wielokrotnego użytku są tańsze w produkcji i łatwiejsze do animacji.

Dlatego pixel art nagradza planowanie. Nie można ukryć słabej kompozycji za dużą liczbą wielokątów. Każdy piksel to decyzja, a widz widzi je wszystkie.

Color Cycling: Zapomniana supermoc

A także to: CanvasCycle. Niesamowite. Tła z cykliczną zmianą kolorów byłyby epickie w przygodzie typu side-scroller!

Dla każdego, kto tego nie widział: color cycling to technika, w której w ogóle nie przesuwa się żadnych pikseli. Zamiast tego obraca się wpisy w indeksowanej palecie, a obraz wydaje się animowany — woda płynie, pochodnie migoczą, niebo się zmienia. Był to standard ery 8- i 16-bitowej, a jego uruchomienie jest zdumiewająco tanie, ponieważ nadpisuje się tylko małą paletę, a nie przerysowuje całej sceny.

Nasz wybór: Udemy Game Development Courses — Kursy na żądanie obejmujące Unity, Unreal, C++, C# i programowanie shaderów.

CanvasCycle ożywia to w sieci, renderując klasyczną grafikę z cyklicznymi kolorami na płótnie HTML5. W przypadku przygody typu side-scrolling atrakcyjność jest oczywista: żywe, oddychające tła, które kosztują niemal nic w obciążeniu CPU w porównaniu z ręcznym animowaniem każdej klatki. Jeśli tworzysz grę w HTML5 i chcesz atmosfery bez spadku wydajności, cycling palety jest jednym z najbardziej niedocenianych narzędzi w skrzynce.

Od jednego obrazu do pełnej gry

I tu przechodzimy do części, która mnie ekscytuje: możliwości stworzenia pełnoprawnej gry w pixel artcie. Fora takie jak Pixel Joint są pełne prac, które aż proszą się o przekształcenie w pełnometrażowe gry. Czy możecie sobie wyobrazić pełną grę stworzoną z taką starannością i poświęceniem czasu, jakiego ci artyści potrzebują, by stworzyć JEDEN obraz?! To byłoby LEGEN (poczekaj na to) DARNE.

Przepaść między zachwycającym obrazem a wydaną grą to miejsce, w którym większość projektów ginie, i warto szczerze powiedzieć dlaczego:

• Pojedynczy sprite bohatera może zająć godziny. Pełny zestaw animacji zajmuje dni. Idle, chodzenie, atak, otrzymanie obrażeń, śmierć — każda z nich to osobna łamigłówka.
• Tła się mnożą. Side-scroller potrzebuje warstw paralaksy, przejść i kafelków, które łączą się bezszwowo.
• UI to także sztuka. Menu, czcionki i ikony wymagają tej samej staranności, a czcionki pikselowe to osobna dyscyplina.
• Spójność jest najtrudniejsza. Utrzymanie spójnego stylu w setkach zasobów to problem zarządczy w takim samym stopniu, co artystyczny.

Dobra wiadomość jest taka, że HTML5 obniża techniczną barierę wydawniczą. Nie potrzebujesz zestawu deweloperskiego konsoli ani wydawcy. Potrzebujesz płótna, pętli gry i dyscypliny, by skończyć. Właśnie dlatego społeczność pixel artu i społeczność HTML5 tak naturalnie do siebie pasują — obie nagradzają ludzi, którzy lubią budować rzeczy od podstaw.

Nauka na przykładzie Sword & Sworcery

Świetnym przykładem niedawnej gry pikselowej jest Sword & Sworcery. Chętnie zobaczyłbym więcej nowych gier w tym stylu. To, co czyni ją pouczającą, to nie tylko oprawa — to sposób, w jaki grafika, muzyka i tempo współgrają ze sobą. Estetyka pikseli nie jest tu dekoracją; jest całym nastrojem. Dowodzi to, że mały zespół z silną tożsamością wizualną może stworzyć coś, co wydaje się większe niż jego budżet.

Jeśli analizujecie ten tytuł, przyjrzyjcie się, jak wykorzystuje ograniczone palety, jak pozwala scenom oddychać i jak traktuje ekran jako kompozycję, a nie okno do przestrzeni 3D. To lekcje, które można przenieść do dowolnego projektu HTML5.

Praktyczne porady dla aspirujących twórców sprite’ów

Artystom, którzy nie próbowali jeszcze pixel artu, gorąco polecam go jako ćwiczenie. To buduje charakter. Kilka sposobów na start, które faktycznie działają:

• Odtwórz coś małego. Wybierz sprite’a, którego uwielbiasz, i odbuduj go piksel po pikselu. Więcej nauczysz się z kopiowania niż z czytania.
• Pracuj na stałym rozmiarze. Zacznij od płótna 16×16 lub 32×32 i nie oszukuj, zwiększając skalę.
• Studiuj palety. Narzędzia takie jak Lospec hostują palety społeczności, które możesz załadować bezpośrednio do Aseprite, GraphicsGale lub Piskel.
• Animuj wcześnie. Nawet dwuklatkowe podskakiwanie uczy więcej o czytelności niż statyczne arcydzieło.
• Publikuj i przyjmuj krytykę. Społeczności takie jak Pixel Joint i subreddity poświęcone pixel artowi powiedzą Ci prawdę, a to jest dokładnie to, czego potrzebujesz.

Częścią zabawy w „popychaniu pikseli” jest poczucie spełnienia, gdy kończysz tło lub postać. Przypomina to układanie zestawu Lego. Wszystkie małe elementy trafiają na swoje miejsce, tworząc coś dużego i fajnego.

Droga przed nami

Wieloplatformowa wygoda HTML5 oznacza ciągły rozwój tworzenia gier i większe zapotrzebowanie na artystów pixel artu. Prawda jest taka, że przy użyciu HTML5 można stworzyć naprawdę genialną grę pikselową. Niektórzy mogą twierdzić, że pixel art to bzdura o niskiej rozdzielczości, ale ja widzę w tym cyfrowy pointylizm i piękną formę sztuki, która w przeciwnym razie mogłaby zaniknąć.

Technologia nie jest już wąskim gardłem. Przeglądarki są szybkie, element canvas ma duże możliwości, a narzędzia – od Aseprite przez Tiled po zbudowane na nich silniki gier – są dojrzałe. Pozostaje to samo, co zawsze się liczyło: kunszt, cierpliwość i chęć umieszczania jednego piksela na raz, aż pojawi się coś pięknego.

Pozdrawiam!

Jacob Weberg jest artystą cyfrowym w Massively Fun. Lubi tworzyć gry, grać w gry i Easy Cheese.

Często zadawane pytania

Co to jest „spriter”?

Spriter to artysta, który tworzy sprite’y — małe, dopasowane do siatki obrazy 2D używane do postaci, obiektów i efektów w grach. Termin pochodzi z klasycznej ery tworzenia gier, kiedy sprite’y były obiektami sprzętowymi, którymi konsola mogła niezależnie poruszać po ekranie. Dziś jest on szeroko stosowany w odniesieniu do każdego, kto pracuje nad grafiką pikselową w grach.

Dlaczego HTML5 tak dobrze sprawdza się w grach z grafiką pikselową?

Element canvas w HTML5 pozwala JavaScriptowi rysować bezpośrednio na bitmapie, co naturalnie odpowiada sposobowi tworzenia pixel artu. W połączeniu z faktem, że jedna baza kodu działa w przeglądarkach, na telefonach i tabletach, oznacza to, że mały zespół może wydać grę pikselową na wszystkie platformy bez konieczności przebudowywania jej dla każdej z nich. Małe rozmiary zasobów oznaczają również szybki czas ładowania w sieci.

Co to jest cykliczność kolorów (color cycling) i dlaczego ma to znaczenie?

Color cycling animuje obraz poprzez rotację wpisów w indeksowanej palecie kolorów, zamiast przesuwać piksele. Było to powszechne w grach 8- i 16-bitowych przy tworzeniu wody, ognia i nieba, a jego uruchomienie jest niezwykle tanie obliczeniowo. CanvasCycle demonstruje tę technikę w canvasie HTML5; to świetny trik dla klimatycznych teł z przewijaniem bocznym (side-scrolling).

Czy potrzebuję drogiego oprogramowania, aby tworzyć pixel art?

Nie. Bezpłatne i niedrogie narzędzia, takie jak Piskel, GraphicsGale i Aseprite (płatne, ale tanie), pokrywają wszystkie potrzeby większości spriterów. O wiele ważniejsze niż narzędzie jest Twoje wyczucie koloru, kompozycji i umiar. Wiele sławnych gier pikselowych powstało przy użyciu narzędzi znacznie prostszych niż nowoczesne pakiety 3D.

Jak zachować ostrość grafiki pikselowej na ekranach o wysokiej rozdzielczości?

Renderuj grę do pomocniczego canvasa o niskiej rozdzielczości, a następnie przeskaluj ten canvas, aby dopasować go do wyświetlacza z wyłączonym wygładzaniem obrazu (image smoothing). Dzięki temu zachowasz ostre krawędzie pikseli zamiast ich rozmywać. Prawidłowa obsługa współczynnika pikseli urządzenia (device pixel ratio) to jedna z pierwszych przeszkód technicznych, na jakie napotyka każdy twórca gier pikselowych w HTML5.

Czy pixel art to tylko kwestia nostalgii?

Zupełnie nie. Pixel art to świadoma estetyka z realnymi zaletami: jest czytelna w małych rozmiarach, tania w produkcji i dystrybucji oraz wyróżnia się na rynku pełnym podobnie wyglądających gier 3D. Wiele nowoczesnych gier wybiera go z powodów artystycznych, a nie dlatego, że są do niego ograniczone. Jak już mówiłem, to cyfrowy pointylizm.