Piksel Sanatı Oluşturucu

Piksel sanatı oluşturucu nedir?

Piksel sanatı oluşturucu, sabit bir ızgara üzerine kurulu bir çizim aracıdır: serbest fırça darbeleri yerine pikselleri tek tek, kare kare yerleştirirsin. Bu kısıt, pixel art'ın bütün cazibesidir: oyun sprite'ları, retro ikonlar, avatarlar ve 8-bit tarzı çizimler her pikseli bilinçli seçerek yapılır.

Bu editör klasik sprite editörü setiyle gelir: 8x8'den 64x64'e ızgaralarda kalem, silgi, doldurma ve renk seçici; ayrıca canlı önizlemeli kare kare animasyon. Sonucu istediğin boyutta keskin bir PNG, hareketli bir GIF veya oyun motoruna hazır bir sprite sheet olarak dışa aktar.

Burası Coddy olduğu için çizimin aynı zamanda kod. Tek tıkla ızgara bir Python 2D dizisine, bir JavaScript canvas parçasına, CSS box-shadow sanatına, SVG'ye veya elektronik tabloda açabileceğin bir CSV'ye dönüşür: görüntülerin aslında renk dizileri olduğunu görmenin eğlenceli yolu.

Piksel sanatı yaparken neler öğrenirsin

• Bir görüntü 2D bir dizidir: her piksel, renk değeri taşıyan bir öğedir. Kod dışa aktarımı çizimini tam olarak böyle gösterir: satır satır, sütun sütun hex kodları.
• Küçük paletler daha iyi görünür. Klasik sprite'lar 4-32 renk kullanır; kendini sınırlamak temiz biçimler ve okunur siluetler doğurur.
• Animasyon sadece karelerdir. Bir göz kırpma ya da yürüyüş döngüsü, sırayla gösterilen birkaç hafif farklı ızgaradır.

Adım adım piksel sanatı

1. 1

   Izgara boyutunu seç

   Küçük başla: 16x16 veya 32x32. Küçük ızgaralar sade ve okunur biçimlere zorlar; klasik oyun sprite'larının çoğu 16x16 veya 32x32'dir. Boyutu sonra da değiştirebilirsin, çizimin kaybolmaz.

2. 2

   Silueti oturt

   Kontur için kalemi, geniş alanlar için doldurmayı kullan. Önce genel biçimi tek renkle çiz, sonra ayrıntı ekle. Sağ tık (veya silgi) pikseli temizler.

3. 3

   Küçük bir paletle gölgele

   Her malzeme için 2-3 ton seç: taban, parlaklık ve gölge. Yerleşik palet bu rampaları kolay bulacak şekilde sıralı; damlalık tuvaldeki herhangi bir rengi alır.

4. 4

   Canlandır (isteğe bağlı)

   Kareyi çoğalt, birkaç pikseli oynat ve oynat tuşuna bas. Göz kırpma, zıplama veya alev titremesi için iki üç kare yeter.

5. 5

   Dışa aktar

   32x ölçeğe kadar PNG, hareketli GIF veya tüm kareleri yan yana dizen bir sprite sheet indir. Ya da kod panelini açıp eserini Python, JavaScript, CSS, SVG veya CSV olarak kopyala.

Piksel sanatı hızlı referans

Yaygın tuval boyutları ve dışa aktarma biçimleri, hangisi ne zaman.

Denemelik piksel sanatı örnekleri

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;}

Yaygın piksel sanatı hataları

• 64x64 ızgarayla başlamak. Büyük tuval zayıf biçimleri gizler: her pikselin bir karar olduğu 16x16'da öğren.
• Çok fazla renk kullanmak. Sprite'ında 40 renk varsa stili yok demektir. Malzeme başına küçük bir rampa seç ve sadık kal.
• Dışa aktarımları yumuşatmayla ölçeklemek. Piksel sanatı en yakın komşuyla ölçeklenmeli (bu araç senin yerine yapar), yoksa bulanıklaşır.

Piksel Sanatı Oluşturucu SSS