Pixel Art Temelleri

1. Pixel Art Nedir?

Metal Slug 3 (Arcade). SNK, 2000.

Pixel art (Japonya'da "dot art"), düzenlemenin piksel seviyesinde yapıldığı bir dijital sanat formudur. Öncelikle 80'ler ve 90'lar video oyunlarının grafikleriyle ilişkilendirilir; bu dönemde ticari sanatçılar sınırlı bellek ve düşük çözünürlüklere rağmen giderek daha göz alıcı görseller yaratmak için mücadele ediyorlardı.

Günümüzde, gerçekçi 3D grafiklerin mümkün olmasına rağmen, oyunlarda ve kendi başına bir sanat formu olarak hâlâ popülerdir. Nostalji bir yana, bu kadar sıkı kısıtlamalar içinde canlı sanat eserleri yaratmak eğlenceli ve ödüllendirici bir mücadele olmaya devam ediyor.

Giriş bariyeri, boyama veya 3D grafiklere kıyasla nispeten düşüktür, bu da onu indie oyun geliştiricileri için güzel bir seçenek yapar. Ama yanılmayın — bu hiçbir şekilde bir oyunu bitirmenin kolay olduğu anlamına gelmez.

Derek Yu'nun stili hakkında: Öncelikle video oyunları için pixel art kullanır ve ilhamını video oyunlarından alır. Famicom/NES, 16-bit konsollar ve 90'lar arcade oyunları favori kaynaklarıdır. Bu dönemin pixel art'ı "renkli, cesur ve temiz… ama sert veya minimalist olmayacak kadar temiz" olarak tanımlanabilir.

1b. Pixel Art Tarihçesi

Pixel art'ın tarihi, bilgisayar grafiklerinin tarihiyle iç içedir. 2D Will Never Die'ın ifadesiyle: "Piksel, ekranın gösterebildiği en küçük yapı taşıdır" — pixel art bu yapı taşlarının bilinçli kontrollü olarak yerleştirilmesidir.

Donanım Kısıtları Dönemi

Dönem	Donanım	Özellikler	Önemli Oyunlar
1977–1982	Atari 2600, Arcade	1-bit sprite'lar, çok sınırlı renk, 128 renk ama aynı anda çok az kullanılabilir	Space Invaders (1978), Pac-Man (1980)
1983–1990	NES / Famicom (8-bit)	Sadece 54 renk, ekranda aynı anda 25 renk (1 arka plan + 4×3 tile rengi + 4×3 sprite rengi), sprite boyutu 8×8 veya 8×16, 256×240	Super Mario Bros, Mega Man, Zelda, Castlevania
1983	Commodore 64	Dikdörtgen pikseller! 320×200 hi-res (tek renk) veya 160×200 multicolor mod, 16 renk	International Karate, Impossible Mission
1989–1998	Genesis / SNES (16-bit)	256–512 renk aynı anda, daha büyük sprite'lar, Genesis'te hızlı işlemci, SNES'te Mode 7 efektleri	Sonic, Street Fighter II, Metal Slug, Chrono Trigger
1989–2003	Game Boy / GBA	4 yeşil ton → 32K renk (GBA), taşınabilir pixel art	Pokémon, Advance Wars, Castlevania: SOTN

🎮 Donanım Palet Kısıtlamaları — Yaratıcı Çözümler

Donanım sınırlamaları pixel art sanatçılarını inanılmaz yaratıcı çözümler bulmaya zorladı:

• Mario'nun bıyığı pragmatik bir karardır: NES'te sprite başına sadece 3+1 renk kullanılabiliyordu. Miyamoto, burnunu yüzünden ayırt etmek için bıyık ekledi — sanatsal değil, teknik bir çözüm! Aynı şekilde şapkası saç animasyonu ihtiyacını ortadan kaldırdı.
• NES scanline sprite sınırı: NES bir scanline'da (yatay piksel satırı) sadece 8 sprite gösterebilirdi. Geliştiriciler bu sınırı aşmak için frame'ler arasında sprite'ları değiştirerek flickering (titreme) kullandı — bu yüzden NES oyunlarında yoğun anlarda düşmanlar titrer!
• Palette cycling: Renk paletinin kendisini döndürerek (rotate) animasyon efekti yaratma tekniği. Tek bir statik görüntüyle akan su, yanan ateş, parıldayan mücevher efektleri oluşturulurdu — hiç ek bellek kullanmadan! Mark Ferrari bu tekniğin ustasıdır.
• C64 dikdörtgen pikseller: Commodore 64'ün multicolor modu 160×200 çözünürlük kullanır ve her piksel yatayda 2:1 oranıyla dikdörtgen görünürdü. Sanatçılar buna uyum sağlayarak benzersiz bir estetik geliştirdi.
• Game Boy'un 4 tonu: Orijinal Game Boy sadece 4 yeşil ton gösterebiliyordu. Pokémon'un 151 farklı yaratığının herbiri bu 4 tonla ifade edildi — bu derecede kısıtlamada karakter tasarımı olağanüstü bir beceridir.
• Dithering zorunluluğu: Sınırlı renk paletleriyle ara tonlar oluşturmak için dithering hayati önem taşıyordu. Sega Genesis'in "blast processing" pazarlamasının ardında, SNES'e göre daha sınırlı renk paleti olduğu gerçeği yatıyordu — Genesis sanatçıları dithering'e daha çok başvururdu.

Sprite Sheet Evrimi

Sprite sheet'ler, bir karakterin tüm animasyon karelerini ve yönlerini tek bir görüntü dosyasında toplama yöntemidir. Bu uygulama 1980'lerin 8-bit konsollarından başlayarak gelişmiştir:

• 8-bit dönem: Basit sprite sheet'ler — birkaç frame'lik yürüme ve zıplama animasyonları tek satırda diziliydi.
• 16-bit dönem: Street Fighter II gibi dövüş oyunları devasa sprite sheet'ler gerektirdi — her karakter için yüzlerce animasyon karesi. Sonic the Hedgehog'un akıcı animasyonları hız duygusunu pekiştirdi.
• Arka plan tile sheet'leri: Level tasarımı için tekrarlayan tile'lar grid düzeninde saklanırdı — verimli bellek kullanımı.
• 3D geçiş sonrası: Sprite'lar tamamen kaybolmadı — UI elementleri, parçacık efektleri ve 2D overlay'ler hâlâ sprite sheet kullanıyordu.
• Modern dönem: TexturePacker gibi araçlarla otomatik sprite atlas oluşturma, Unity/Unreal'da dahili sprite atlas desteği.

3D Devrimi ve Düşüş (1996–2005)

PlayStation, N64 ve gelişen PC donanımıyla 3D grafiklerin yükselişi, pixel art'ı "geçmişte kalmış" bir teknik haline getirdi. Oyun stüdyoları 3D'ye geçiş yaparken, piksel düzeyinde çalışma neredeyse tamamen terk edildi. Bu dönemde pixel art ağırlıklı olarak GBA, DS gibi taşınabilir konsollar ile cep telefonu oyunlarında yaşamaya devam etti. Castlevania: Symphony of the Night (1997) gibi başyapıtlar 2D pixel art'ın hâlâ neler yapabildiğini gösterdi.

İndie Rönesans (2008–Günümüz)

Dijital dağıtım platformlarının (Steam, itch.io, App Store) yaygınlaşmasıyla bağımsız geliştiriciler pixel art'ı bilinçli bir estetik tercih olarak yeniden keşfetti:

• Cave Story (2004): Daisuke "Pixel" Amaya'nın tek başına geliştirdiği başyapıt — indie pixel art oyunların öncüsü
• Shovel Knight (2014): NES estetiğini modern oyun tasarımıyla birleştiren nostaljik başyapıt
• Celeste (2018): Duygusal anlatım + hassas platforming + etkileyici pixel art
• Stardew Valley (2016): Tek kişi tarafından tasarlanan SNES tarzı çiftlik simülasyonu — 30M+ satış
• Dead Cells (2018), Katana ZERO (2019), Sea of Stars (2023): Modern pixel art'ın sınırlarını zorlayan oyunlar

2. Yazılımlar & Araçlar

Pixel art için gereken temel araçlar: zoom ve piksel yerleşimi için Pencil (kalem). Ayrıca çizgi/şekil araçları, seçim/taşıma araçları ve hızlı doldurma için Paint Bucket yardımcı olur.

Yazılım	Platform	Fiyat	Özellikler & Notlar
LibreSprite	Win/Mac/Linux	Ücretsiz	Aseprite'ın açık kaynak fork'u, GPL lisanslı. Animasyon, katmanlar, palet desteği. Önerilen başlangıç aracı!
Aseprite	Win/Mac/Linux	$15 / kaynak koddan ücretsiz	Şu anda en popüler editör. Kaynak kodu açık — derleyerek ücretsiz kullanılabilir.
Piskel	Web (tarayıcı)	Ücretsiz	Tarayıcıda çalışan şaşırtıcı derecede sağlam bir editör. PNG, animated GIF export'u.
GIMP	Win/Mac/Linux	Ücretsiz	Zaten biliyorsunuz! Genel amaçlı ama pixel art için yapılandırılabilir.
GraphicsGale	Windows	Ücretsiz	Pixel art için tasarlanmış erken editörlerden. Animasyon araçları güçlü (onion skinning). 2017'den beri ücretsiz.
Krita	Win/Mac/Linux	Ücretsiz	Dijital boyama için tasarlanmış ama pixel art için yapılandırılabilir.
PixiEditor	Windows	Ücretsiz	Hafif editör. Lospec Palette List entegrasyonu.
MS Paint	Windows	Ücretsiz	En basit araçlarla bile pixel art yapılabilir. Sadece Windows XP sürümü ideal.

Ek Donanım

Derek Yu'nun pixel art kurulumu

• Çizim Tableti: Tekrarlayan stres yaralanmalarını (RSI) önlemek için şiddetle tavsiye edilir. RSI önlemesi tedavisinden çok daha kolay! Wacom Intuos Pro gibi bir tablet ideal.
• Bilek Koruması: Tablet mümkün değilse en azından bir bilek koruması alın.

3. Lospec — Palet & Kaynak Merkezi

Lospec, 2017'de skeddles tarafından kurulmuş, dijital kısıtlı sanat için bağımsız bir platformdur. Pixel art dünyasının en kapsamlı kaynak merkezi olarak kabul edilir.

Lospec Araçları

• Palette List — 4100+ renk paleti veritabanı
  • Eski donanım paletleri (GameBoy, NES, C64) ve sanatçı paletleri
  • Renk sayısı, etiket, popülerlik ile filtreleme
  • 6 farklı formatta indirme (ASE, GPL, PAL, PNG, HEX, vb.)
  • GPL formatı → GIMP'e doğrudan import edilebilir!
• Pixel Art Tutorials — 500+ tutorial, konu/yazar/ortam ile arama
• Pixel Art Software List — tüm araçların karşılaştırması
• Where to Start — tam yeni başlayanlar için rehber
• Dailies — her gün yeni bir pratik konusu
• Gallery — topluluk galerisi, geri bildirim alma
• Pixel School — yapılandırılmış öğrenme yolu

4. Palet Seçimi & Renk Teorisi

Pixel art kısıtlamalarla tanımlanır. Bir piksel, pixel art'ta diğer dijital ortamlardan çok daha fazla anlam taşır ve renkler için de aynısı geçerlidir — sonuçta renkleri de kısıtlamak istersiniz.

UFO 50 için oluşturulan 32 renklik palet

Palet Temelleri

• 32 renk popüler bir seçim, 16 renk de yaygın
• UFO 50 paleti: Famicom ile PC Engine arasında hayali bir konsol için tasarlanmış
• Başlangıçta: Teoriyi düşünmeyi bırakın, mevcut bir palet seçin ve piksellemeye başlayın!
• Pixel art'ta palet değiştirmek çok kolay — herhangi bir noktada takas edebilirsiniz

Renk Seçiminin Önemi

5. Kaba Çizim (Crude Outline)

96x96 piksel bir karakter sprite'ı ile başlayalım. Büyük sprite ile başlamak teknikleri göstermeyi kolaylaştırır ve geleneksel sanat formlarına (çizim, boyama) daha yakın hissettirir.

Sprite'ımıza Pencil aracını sürükleyerek, kağıda çizer gibi bir eskiz çizerek başlıyoruz. Pixel art ve geleneksel sanat arasında kesinlikle örtüşme var, özellikle bu büyüklükteki sprite'larda. Güçlü pixel sanatçıları genellikle en azından iyi çizim yapabilir (ve tersi). Çizim becerilerinizi geliştirmek her zaman faydalıdır.

6. Jaggies — Çizgi Temizliği

Temizlenmiş outline — her çizgi tek piksel kalınlığında

Şimdi başıboş pikselleri kaldırarak ve her çizgiyi tek piksel kalınlığına indirgeyerek outline'ı temizleyeceğiz.

Jaggies Nedir?

Pixel art'ta yapılması gereken iki temel çizgi var: düz ve eğri. Jaggies: Bir çizginin tutarlılığını bozan tekil pikseller veya küçük piksel segmentleridir. Pixel art'ta tek bir pikselin genel görüntü üzerinde büyük etkisi olduğundan, jaggies göze batar.

Düz Çizgiler

Düz çizgilerde segment uzunluklarının tutarlı olması gerekir. Tutarsız segment uzunlukları jaggies yaratır.

Eğri Çizgiler

Eğri çizgilerde, çizgi segmentlerinin uzunluğu tutarlı bir şekilde büyümeli veya küçülmelidir. Segment uzunluklarının tutarsız değişimi jaggies yaratır.

6b. Alternatif Teknik: Cluster Sketching (Pixel Grimoire)

Pedro Medeiros'un Pixel Grimoire serisinden: Outline çizmekle başlamak yerine, doğrudan büyük renk kütleleriyle (cluster) başlayıp kademeli olarak rafine etme tekniği.

Cluster Nedir?

Bir cluster (veya "color cluster", "pixel cluster"), aynı renkteki sürekli piksel grubudur. Pixel art yaparken odak noktanız mümkün olduğunca az sayıda cluster kullanmak ve orphan pixel'leri (yalnız pikselleri) önlemek olmalıdır.

Cluster Sketching Adımları

1. Adım 1 — Büyük Kütleler: 2-3 piksel boyutunda fırçayla veya Paint Bucket ile çok kaba bir versiyon çizin. Renklere ve genel atmosfere odaklanın, detay eklemeyin. Arka plandan ön plana doğru çalışın.
2. Adım 2 — Rafine Etme: Cluster'ları detaylandırın, kontrastı artırın, katmanlar kullanın. Fırça boyutunu 1 piksele düşürün ve kenar düzeltmeleri yapın.
3. Adım 3 — Jaggies Düzeltme & Detay: Piksel piksel kırıkları düzeltin, anti-alias ekleyin, orphan pikselleri temizleyin.

7. İlk Renklendirme

Paint Bucket ile renklendirme ve palet kullanımı

Paint Bucket veya başka bir dolgu aracıyla karakterinizi renklendirin! Palet bu kısmı basitleştirir. Paint yazılımınız paletleri desteklemiyorsa, paletinizi her zaman resmin içine yapıştırabilir ve Eye Dropper aracını kullanarak renkler seçebilirsiniz.

8. Gölgeleme (Shading) & Form

Gölgeleme zamanı! Temel fikir: sprite'a daha koyu renkler (shades) ekleyerek gölge simüle edeceğiz, böylece sprite düz yerine 3D görünecek.

Bu tutorial için varsayalım ki orkun üstünde ve biraz önünde tek bir ışık kaynağı var — üstte ve/veya önde olan her şey parlak, alt ve arkaya daha koyu renkler ekliyoruz.

Form ve Hacim (Form and Volume)

Bu kısımda zorluk yaşıyorsanız, çizimleri basitçe çizgiler ve renk olarak değil, hacmi olan formlar olarak düşünme pratiği yapmanız gerekebilir.

9. Anti-Aliasing (AA)

Her yeni renk tonu eklediğimde biraz anti-aliasing (AA) yapıyorum. AA, iki çizgi segmentinin buluştuğu köşelere "ara" renkler koyarak bloklu pikselleri yumuşatma yöntemidir.

Gri pikseller çizgimizdeki "kırılmaları" yumuşatır. Çizgi segmenti uzadıkça, onu yumuşatmak için kullandığımız AA segmenti de uzar.

10. Seçici Dış Çizgi (Selective Outlining / Selout)

Selout uygulanmış — daha doğal ve yumuşak görünüm

Şimdiye kadar outline'ımız saf siyahtı, bu sprite'a genel olarak karikatürsü bir görünüm veriyor. Ayrıca çok sert segmentasyon yaratıyor.

Sprite'a daha doğalcı bir görünüm vermek ve segmentasyonu yumuşatmak için selective outlining (selout) tekniğini kullanabiliriz. Selout, siyah outline'ın çoğunu daha açık renklerle değiştirmek demektir:

• Üst kısım (ışığın vurduğu yer) → en açık renkler veya tamamen kaldır
• Segmentasyon çizgileri (kas, kürk dokusu vb.) → siyah yerine koyu gölge renkleri
• Bu adımda 3. yeşil ton da eklendi — selout ve ek AA için kullanılır

11. Dithering

Üst: Yüzlerce ton ile gradient | Orta: 9 renk → banding | Alt: Dithering → 2 renk!

Şimdiye kadar çoğunlukla büyük, kesintisiz koyu renk kümeleriyle gölgeleme yaptık. Ancak, dithering adlı başka bir teknik var — yeni bir ton eklemeden iki farklı renk tonu arasında köprü kurmanızı sağlar.

• Üstteki gradient yüzlerce farklı mavi tonu kullanıyor
• Ortada renk sayısı 9'a düşürüldü ama bu hâlâ tek renk için çok fazla ton. Ayrıca banding etkisi yarattı
• Altta dithering uygulandı — banding etkisi giderildi ve sadece 2 renk kullanıyor!

Fikir: Renk geçişini simüle etmek için değişen yoğunluklarda gürültü yaratmak. Baskıda kullanılan "halftone" tekniğine çok benzer.

Kakyusei (PC-98). Elf, 1996. Bu görselde sadece 16 renk var!

Dithering'in kapsamlı ve iyi yapıldığını görmek istiyorsanız, 80'lerin İngiliz oyun stüdyosu Bitmap Brothers'ın oyunlarını veya PC-98'deki oyunları inceleyin.

11b. Işık Yapısı & İleri Gölgeleme (Pixel Grimoire)

Pedro Medeiros'un Pixel Grimoire #4 makalesinden: Gölgeleme, ışığın nesnelerle nasıl etkileştiğini simüle etmektir. Her piksel ışık davranışını yansıtmalıdır.

Gölgeleme Terimleri

Terim	Açıklama	Pixel Art İpucu
Volume Shadow	Nesnenin kendi hacminin oluşturduğu yumuşak gölge	En yaygın gölge tipi
Terminator	Aydınlık/karanlık arasındaki geçiş bölgesi	Pixel art'ta keskin tutun — banding'den kaçının
Projected Shadow	Bir nesnenin diğerine düşürdüğü sert gölge	Genellikle oldukça sert ve keskin
Specular Highlight	En parlak yansıma noktası	Parlak nesnelerde küçük ve odaklı
Rim Light	Arkadan gelen ışığın yarattığı parlak kontur	İkincil, daha soluk bir ışık kaynağından
Bounce Light	Yerden yansıyan ışık — gölge içinde hafif aydınlık	Subtle ama gerçekçilik katar

Düz vs Eğri Yüzeyler

Düz yüzeyler genellikle tüm yüzey boyunca tek bir renge sahip olmalıdır, eğri yüzeyler ise renk rampası (gradient) gösterebilir. Düz yüzeylerde ramp kullanmak "soft faces" hatasına yol açar.

Gölgeleme Adımları

1. Temel renkler ve şekillerle başlayın — koyu renklerden açığa doğru çalışın
2. Nesne içinde temel ışık/gölge bölgelerini boyayın — renk sayısını düşük tutun
3. Projected shadow'ları çizin
4. Detayları, oyma desenleri ve küçük parçaları ekleyin
5. Şekilleri düzeltin, gölgeleri ve highlight'ları güçlendirin
6. Ekstra anti-alias ve outline'larla bitirin

Foto Referans Kullanımı

Foto referans kullanmak her zaman iyi bir pratiktir. Fotoğrafı birebir kopyalamanıza gerek yok, ancak ışığın o durumda nasıl davrandığını anlamak için kullanabilirsiniz.

11c. Pixel Art Animasyon Temelleri (Pixel Grimoire)

Pedro Medeiros'un Pixel Grimoire #3 makalesinden: Animasyon, belirli bir sırada oynatılan görüntü dizisinin yarattığı hareket illüzyonudur.

Animasyon Yaklaşımları

Timing (Zamanlama)

Her karenin ne kadar süre gösterildiği, animasyonun hissini belirler. Aseprite/LibreSprite'da kare numarasına sağ tıklayarak süreyi (milisaniye) ayarlayabilirsiniz.

Squash & Stretch (Sıkıştır & Uzat)

Hareket yönünde nesneyi uzatma, çarpma anında sıkıştırma. Hacmi koruyun: Dikey uzatırken yatay daralma, yatay sıkıştırırken dikey genişleme olmalı.

• Anticipation frame: Hareket öncesi sıkıştırma — "yüklenme" etkisi
• Contact frame: Yere değme anında maksimum sıkıştırma
• Stretch frame: En hızlı olduğu anda maksimum uzama

Animasyon Kaydetme

• Web'de paylaşım: GIF formatında export
• Oyunlarda kullanım: Sprite sheet olarak PNG export (File → Export Sprite Sheet)
• Image sequence: Frame'leri ayrı dosyalar olarak kaydetme (bounce00.png, bounce01.png...)

11d. Banding & Anti-Alias İleri Düzey (Pixel Grimoire)

Pedro Medeiros'un Pixel Grimoire #5 makalesinden: Anti-alias ve banding, pixel art topluluğunda en çok tartışılan konulardandır.

Anti-Alias Yapma Yöntemi

1. İki piksel veya daha uzun merdiven desenleri arayın
2. Adım bittiğinde halftone (ara renk) ekleyin
3. Halftone uzunluğu, adım uzunluğuyla orantılı olmalı
4. Gerekirse orijinal şekilden 1 piksel "yiyin" — genişlemeyi telafi etmek için

Yaygın Anti-Alias Hataları

Hata	Açıklama	Çözüm
Aşırı AA	Her şey bulanıklaşır	Daha az halftone kullanın, 45° ve düz çizgilerde AA yapMAYIN
Yetersiz AA	Adım uzunluğuna kıyasla çok kısa halftone	Uzun adım = orantılı uzun halftone
Yanlış değer	Halftone çok açık/koyu — köprü olmamış	Value'nun iki renk arasında olduğundan emin olun

Banding Sorunu

Banding: Birden çok renk bandının belirgin şekilde birbirinden ayrışması. Nesneyi düz ve bazen bulanık gösterir.

• Band sıkıştırma: Bantları mümkün olduğunca dar alanlara sıkıştırın
• Gradient yönünü döndürün: Yatay slope = yatay AA, dikey slope = dikey AA. Yanlış yön banding yaratır
• Banding tamamen kaçınılamaz olabilir, ama minimize edilmelidir

12. Son Dokunuşlar

Son olarak highlights (sprite'ımızdaki en parlak noktalar), detaylar (küpeler, perçinler, yaralar) ekleyebilir ve mutlu olana kadar ayarlamalar yapmaya devam edebiliriz.

Kontrol Teknikleri

• Yatay çevirme: Dijital sanatta güçlü bir numara — orantı ve gölgelemede hataları sıklıkla ortaya çıkarır
• Doygunluk sıfırlama: Sanat eserinizden rengi çıkararak (saturation = 0) gölgelemenin hâlâ iyi okunup okunmadığını görün

13. Küçük Sprite: 32x32

96x96 büyük sprite'ta pixel art hâlâ çizim ve boyama gibi hissettiriyordu. Sprite küçüldükçe, temsil etmesi gereken şeye daha az benzer ve her pikselin sorumluluğu artar.

Mario Dersi

Super Mario Bros.'da Mario'nun gözü sadece iki piksel birbiri üstüne konmuş. Ve yaratıcısı Shigeru Miyamoto, bıyığının burnunu yüzünün geri kalanından ayırt etmek için gerekli olduğunu açıkladı. Yani Mario'nun en ikonik özelliklerinden biri sadece karakter tasarımı değil, pragmatik bir karardı!

32x32 Adımları

• Temel adımlar aynı: eskiz → renk → gölge → cilalama
• Fark: İlk eskiz için outline yerine renkli şekiller kullanmak — bu boyutta renk, outline'dan daha fazla karakteri tanımlar
• Mario'ya tekrar bakın — outline'ı yok! Bıyığı, favorileri, kolları, tulumu tüm vücudunu anlaşılır kılar

Ödün Verme Sanatı

Küçük sprite yapmak ödün vermektir. Outline eklerseniz gölgeleme alanı daralır. Kol ve bacaklar iyi tanımlanmışsa, yer açmak için kafa küçülmek zorunda kalır.

14. Yaygın Hatalar

Sanatın en zor kısımlarından biri öz eleştiridir — çoğu zaman sanatımıza objektif bakamayacak kadar yakınız. Başka sanatçılardan düzenleme şeklinde geri bildirim istemek, göremediğiniz sorunları aydınlatmanın harika bir yoludur.

Hata 1: Çok Fazla Benzer Renk

Her rengin mümkün olduğunca fazla iş görebilmesi için kendi kimliğine sahip olmasını istiyoruz. Çözüm: Renk sayısını azaltın, kontrastı artırın.

Hata 2: Pillow Shading

Pillow shading: Dıştan içe doğru gölgeleme — "yastık" etkisi yaratır. Bu tür gölgeleme gerçek hayatta neredeyse hiç oluşmaz. Çözüm: Tek ışık kaynağı belirleyin, formları basit geometrik şekillere indirgeyin.

Hata 3: Karton Tasarımlar

Grid üzerinde çalışmak bizi düz çizgiler boyunca tasarlamaya zorlar. "Chunky Pixels Rule": Tek piksel kalınlığında çıkıntılar yapmaktan kaçının — gölgelemesi ve 3B form hissi vermesi zor olur. Çözüm: Nesnelerin kişiliklerini çıkarın, hareket ediyorlarmış gibi düşünün, kalın formlar kullanın.

15. Dosya Formatları

Herhangi bir pixel sanatçısının belini ürpertecek görüntü — JPG olarak kaydedilmiş pixel art!

Sanat eserinizi JPG olarak kaydettiğinizde olan şey: JPG kayıplı (lossy) bir dosya formatıdır — kaydettiğinizde dosya boyutunu küçültmek için sıkıştırma yapılır ve veri kaybedilir. Güzel, keskin pixel art'ınız bulanık görünür.

16. Unity'de Sprite Kullanımı

Sprite Import Ayarları

Kaynak: Unity Learn — Importing 2D Assets

1. PNG sprite'ı Assets klasörüne sürükleyin
2. Inspector'da Texture Type = "Sprite (2D and UI)" seçin
3. Filter Mode = "Point (no filter)" — piksel keskinliğini korur!
4. Compression = "None" — kalite kaybı olmasın
5. Pixels Per Unit (PPU): 32x32 sprite için PPU=32 iyi bir başlangıç
6. Pivot: Yerde duran karakterler için Bottom, genel amaç için Center

Pixel Perfect Camera — Kritik Ayar!

1. Package Manager → Unity Registry → "2D Pixel Perfect" paketini kurun
2. Main Camera'ya Pixel Perfect Camera component'i ekleyin
3. Assets PPU: Sprite'larınızın PPU değeriyle aynı olmalı
4. Reference Resolution: Oyununuzun mantıksal çözünürlüğü (ör: 320×180 piksel)
5. Upscale Render Texture: İşaretleyin — temiz upscale

// Pixel Perfect Camera ayarı (C#)
using UnityEngine.U2D;
var ppc = Camera.main.GetComponent<PixelPerfectCamera>();
ppc.assetsPPU = 16;
ppc.refResolutionX = 320;
ppc.refResolutionY = 180;

Sprite Sheet & Animasyon

1. Tüm animasyon frame'lerini tek bir PNG dosyasına yan yana dizin
2. Unity'de Sprite Mode = "Multiple" seçin
3. Sprite Editor → "Slice" ile frame'lere bölün (Automatic, Grid By Cell Size, Grid By Cell Count)
4. Animator Controller ile state machine animasyonu oluşturun
5. Sprite Atlas: Birden fazla sprite'ı tek texture'a paketleyerek draw call azaltma

Tilemap Sistemi — Level Tasarımı

• Tilemap: Grid tabanlı level editörü
• Tile Palette: Sprite'lardan "fayans paleti" oluşturun, Paint gibi boyayarak level tasarlayın
• Rule Tile: Komşuluk kurallarıyla otomatik tile seçimi
• Tilemap Collider 2D: Tile'lara otomatik fizik/çarpışma ekler
• Sorting Layer & Order in Layer: Arka plan, zemin, ön plan katmanlarını ayırma

C# ile Sprite Kontrolü

// Sprite'ı runtime'da değiştirme
SpriteRenderer sr = GetComponent<SpriteRenderer>();
sr.sprite = newSprite;  // Sprite swap
sr.flipX = true;        // Yatay çevirme
sr.color = new Color(1f, 0.5f, 0.5f); // Kırmızımsı tint
sr.sortingOrder = 10;

// Animator ile animasyon state geçişi
Animator anim = GetComponent<Animator>();
anim.SetBool("isRunning", true);
anim.SetTrigger("attack");

2D Light (Universal Render Pipeline)

• Point Light 2D: Meşale, ateş, sihir efektleri
• Global Light 2D: Genel sahne aydınlatması (gece/gündüz döngüsü)
• Sprite Lit material: Sprite'ın ışığa tepki vermesini sağlar
• Normal map'lerle pixel art sprite'lara derinlik duygusu ekleyin

17. Çizim Yeteneği Olmayanlar İçin

Herkesin sanatsal yönü kuvvetli olmayabilir — ama oyun projeniz için pixel art elde etmenin birçok yolu var!

Yol 1: Hazır Asset Kullanma

Site	Lisans	Açıklama
itch.io Game Assets	Değişken	Binlerce pixel art sprite paketi
OpenGameArt.org	CC0, CC-BY, GPL	Açık lisanslı oyun grafikleri arşivi
Kenney.nl	CC0 (Public Domain)	Yüksek kalite, tutarlı stil. Hiçbir atıf gerektirmez
CraftPix.net	Ücretsiz & Premium	Oyun için hazır 2D asset'ler

Yol 2: Mevcut Görselden Pixel Art'a Çevirme

GIMP'i zaten biliyorsunuz — fotoğrafları pixel art'a dönüştürmek için:

1. Image → Scale Image: küçültün (ör: 64x64 veya 32x32)
2. Image → Mode → Indexed Color: renk sayısını sınırlayın (16 veya 32)
3. Filters → Blur → Pixelize ile piksel efekti
4. Elle düzenleme yaparak kaliteyi artırın

Yol 3: Basit Şekillerden Başlama

Basit geometrik şekillerden (dikdörtgen, daire) başlayarak sprite oluşturabilirsiniz. Mario'nun bile bıyığı pragmatik bir tasarım kararıyla doğduğunu unutmayın!

18. AI & Modern Araçlarla Pixel Art

AI Görsel Üretimi

• DALL-E, Midjourney, Stable Diffusion: "pixel art style, 32x32, limited palette" prompt'larıyla pixel art benzeri çıktılar üretebilir
• Retrodiffusion: Pixel art'a özel eğitilmiş AI model
• PixelLab: Özel pixel art üretimi için tasarlanmış AI araç

Hibrit Workflow — En İyi Yaklaşım

1. AI ile hızlı konsept/referans oluşturun
2. Çıktıyı LibreSprite/Aseprite/GIMP'e aktarın
3. Piksel grid'ine oturtun, gereksiz renkleri temizleyin
4. Elle AA, selout, dithering uygulayın
5. Palet sınırlaması yapın (Indexed Color)

19. p5.js ile Pixel Art

Sprite Yükleme & Pixel-Perfect Görüntüleme

// p5.js ile sprite yükleme
let sprite, spriteSheet;
let frameW = 32, frameH = 32, currentFrame = 0;

function preload() {
  sprite = loadImage('hero.png');
  spriteSheet = loadImage('hero_walk.png');
}

function setup() {
  createCanvas(512, 512);
  noSmooth();  // KRİTİK: Pixel-perfect rendering!
}

function draw() {
  background(30);
  image(sprite, 50, 50, 256, 256);

  // Sprite sheet'ten frame okuma
  let sx = currentFrame * frameW;
  let frame = spriteSheet.get(sx, 0, frameW, frameH);
  image(frame, 320, 50, 128, 128);

  if (frameCount % 8 === 0) currentFrame = (currentFrame + 1) % 6;
}

Piksel Düzeyinde Manipülasyon

// Nearest-color palette mapping
function applyPalette(img, palette) {
  img.loadPixels();
  for (let i = 0; i < img.pixels.length; i += 4) {
    let r = img.pixels[i], g = img.pixels[i+1], b = img.pixels[i+2];
    let closest = findClosestColor(r, g, b, palette);
    img.pixels[i] = closest[0];
    img.pixels[i+1] = closest[1];
    img.pixels[i+2] = closest[2];
  }
  img.updatePixels();
}

function findClosestColor(r, g, b, palette) {
  let minDist = Infinity, best = palette[0];
  for (let c of palette) {
    let d = (r-c[0])**2 + (g-c[1])**2 + (b-c[2])**2;
    if (d < minDist) { minDist = d; best = c; }
  }
  return best;
}

p5.js ile Yapabileceğiniz Şeyler

• loadPixels() / pixels[]: Dithering algoritmalarını kodlayın (Floyd-Steinberg vb.)
• Palet uygulama: Fotoğraflara programatik renk sınırlama
• Mini pixel editör: createGraphics() ile kendi editörünüzü yapın
• Sprite sheet animasyonu: Frame bazlı animasyon sistemi
• Prosedürel içerik: Rastgele ağaç, bina, uzay gemisi sprite'ları üretimi

20. Paylaşım & Topluluk

Pixel art'ınızı sosyal medyada paylaşmak geri bildirim almanın ve diğer pixel sanatçılarıyla tanışmanın harika bir yolu. #pixelart hashtag'ini kullanmayı unutmayın!

Paylaşım İpuçları

Platform	İpucu
Twitter/X	PNG kalması için: <256 renk VEYA en uzun kenar <900px. En az 512x512'ye upscale edin. Nearest Neighbor ile temiz katlarla büyütün.
Instagram	512x512+ upscale görüntüyü iyileştirir.
GIF Animasyon	Twitter için <15MB. En az 800x800px, döngü 3 kere tekrar.

Topluluklar

• Lospec Gallery & Discord — 107K+ üye
• Reddit r/PixelArt — 100K+ üye
• PixelJoint — 2004'ten beri, en büyük pixel art galerisi
• Pixelation — derinlemesine pixel art tartışmaları

21. Önerilen İş Akışı

#	Adım	Araç / Detay
1	Referans toplama	Lospec, Pinterest, oyun screenshot'ları — stil belirle
2	Palet seçimi	Lospec Palette List → GIMP/LibreSprite'a import
3	Kaba eskiz	LibreSprite / Piskel / GIMP — Pencil tool
4	Outline temizleme	Jaggies minimize et — tutarlı segment uzunlukları
5	Renklendirme	Paint Bucket + seçilen palet
6	Gölgeleme	Tek ışık kaynağı, hue shifting, hacimli formlar
7	AA & Selout	Yumuşatma, dış çizgi renklendirme
8	Dithering & detaylar	Gerekirse dithering, highlights, detaylar
9	Kontrol	Yatay çevir, doygunluk sıfırla → kontrol et
10	Export	PNG olarak kaydet (asla JPG değil!)
11	Unity Import	Point filter, No compression, doğru PPU

22. Kaynaklar & Bağlantılar

📝 Dönem Projesi: 2D Pixel Art Oyun

Proje Gereksinimleri

Gereksinim	Açıklama
Orijinal Sprite'lar	En az 3 orijinal pixel art sprite (karakter, düşman, nesne, NPC vb.)
Animasyon	En az 1 animasyonlu sprite (yürüme döngüsü, saldırı, patlama vb.)
Tilemap / Arka Plan	Oyun dünyası için tile set veya arka plan tasarımı
Çalışan Prototip	Sprite'ları kullanan oynanabilir bir demo
Platform	Unity, p5.js veya Godot — birini seçin

AI Kullanımı

Değerlendirme Kriterleri

Kriter	Ağırlık	Açıklama
Sprite Kalitesi	%30	Teknik yeterlilik: jaggies, gölgeleme, renk kullanımı, tutarlılık
Süreç Dokümantasyonu	%25	Aşamaların gösterilmesi, sorunların açıklanması
Çalışan Prototip	%20	Sprite'ların oyun içinde kullanılması, temel mekanik çalışıyor olmalı
Yaratıcılık	%15	Özgün oyun fikri, ilginç karakter tasarımı
Sunum	%10	Net, organize ve anlaşılır sunum

Örnek Proje Fikirleri