Kreator pixel art

Czym jest edytor pixel art?

Edytor pixel art to narzędzie do rysowania oparte na stałej siatce: zamiast swobodnych pociągnięć stawiasz pojedyncze piksele, jeden kwadrat po drugim. To ograniczenie jest całym urokiem pixel artu: sprite'y w grach, retro ikony, awatary i ilustracje w stylu 8-bit powstają przez świadomy wybór każdego piksela.

Ten edytor daje ci klasyczny zestaw narzędzi do sprite'ów: ołówek, gumkę, wypełnianie i próbnik koloru na siatkach od 8x8 do 64x64, a do tego animację klatka po klatce z podglądem na żywo. Eksportuj wynik jako ostry PNG w dowolnym rozmiarze, animowany GIF albo arkusz sprite'ów gotowy dla silnika gry.

Ponieważ to Coddy, twój rysunek jest też kodem. Jedno kliknięcie zamienia siatkę w dwuwymiarową tablicę w Pythonie, fragment kodu canvas w JavaScripcie, grafikę z box-shadow w CSS, plik SVG albo CSV, który otworzysz w arkuszu kalkulacyjnym. To zabawny sposób, żeby zobaczyć, że obrazy to naprawdę tylko tablice wartości kolorów.

Czego nauczysz się, tworząc pixel art

• Obraz to tablica dwuwymiarowa: każdy piksel to jeden element z wartością koloru. Eksport do kodu pokazuje twój rysunek dokładnie w ten sposób, jako wiersze i kolumny kodów hex.
• Małe palety wyglądają lepiej. Klasyczne sprite'y używają od 4 do 32 kolorów; ograniczenie wymusza czyste kształty i czytelne sylwetki.
• Animacja to po prostu klatki. Cykl chodu czy mrugnięcie to kilka lekko różniących się siatek pokazanych po kolei, a eksport GIF odtwarza je w wybranym tempie.
• Skalowanie pixel artu wymaga interpolacji metodą najbliższego sąsiada. Eksportuj w skali 16x lub 32x, a kwadraty zostaną idealnie ostre; wygładzanie by je rozmyło.

Jak zrobić pixel art krok po kroku

1. 1

   Wybierz rozmiar siatki

   Zacznij od małej: 16x16 lub 32x32. Małe siatki wymuszają proste, czytelne kształty, a większość klasycznych sprite'ów w grach ma 16x16 lub 32x32. Rozmiar możesz zmienić później bez utraty rysunku.

2. 2

   Zarysuj sylwetkę

   Używaj ołówka do konturów i wypełniania do dużych obszarów. Najpierw narysuj ogólny kształt jednym kolorem, potem dodaj szczegóły. Prawy przycisk myszy (albo gumka) czyści piksel.

3. 3

   Cieniuj małą paletą

   Wybierz 2 lub 3 odcienie na materiał: bazowy, rozjaśnienie i cień. Wbudowana paleta jest ułożona tak, żeby łatwo znaleźć takie przejścia, a próbnik pobiera każdy kolor, który już jest na płótnie.

4. 4

   Animuj (opcjonalnie)

   Zduplikuj klatkę, przesuń kilka pikseli i naciśnij Odtwórz. Dwie lub trzy klatki wystarczą na mrugnięcie, podskok albo migotanie płomienia.

5. 5

   Eksportuj

   Pobierz PNG w skali do 32x, animowany GIF albo arkusz sprite'ów ze wszystkimi klatkami w jednym rzędzie. Możesz też otworzyć panel kodu i skopiować grafikę jako Python, JavaScript, CSS, SVG lub CSV.

Ściąga z pixel artu

Popularne rozmiary płótna i formaty eksportu oraz to, kiedy ich używać.

Przykłady pixel artu do wypróbowania

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

Częste błędy w pixel arcie

• Zaczynanie od siatki 64x64. Duże płótna ukrywają słabe kształty, więc ucz się na 16x16, gdzie każdy piksel to decyzja.
• Używanie zbyt wielu kolorów. Jeśli sprite ma 40 kolorów, nie ma stylu. Wybierz małą gamę odcieni na materiał i się jej trzymaj.
• Skalowanie eksportu z włączonym wygładzaniem. Pixel art trzeba skalować metodą najbliższego sąsiada (to narzędzie robi to za ciebie), inaczej zmienia się w rozmytą papkę.
• Eksportowanie sprite'ów na białym tle. Zostaw przezroczyste tło dla wszystkiego, co trafi do gry lub zostanie nałożone na inne treści.
• Animowanie ze zbyt wieloma klatkami. Klasyczny klimat gier bierze się z 2 do 4 dobrze dobranych klatek, a nie z 16 prawie identycznych.

Edytor pixel art: FAQ