20171030

Pixel Art'a Girişiyoruz


Bugün sizlerle pixel art yapmak için gerekli en beleş ortamı hazırlıyoruz, sonra da ufak bir karakter çiziyoruz.

Türlü türlü görüntü editörleri mevcut, halk arasında fotoşap (sana margarini der gibi) diye adlandırılan bu programlar arasından pixel art için basit bir şeyler bize yeterli olacaktır.

Manyağım ya da puristim diyorsanız MS Paint ile girişebilirsiniz. Fakat katmanlı (layer) çizim gibi bir nimetten mahrum kalacaksınız.

İşleri bir nebze kolaylaştırmak için bugün size Paint.NET (www.getpaint.net) denen arkadaştan bahsedeceğim. Ücretsiz, akarı kokarı olmayan bir yazılımdır. Bu yazı piksel art'tan çok Paint.NET dersi kıvamında, benim kullandığım araç var zaten diyorsanız aşağıdaki bir şeyler çiz başlığına atlayın hemen.

Adobe Potoshop tabii ki kullanılabilir, ama aynı birazdan anlatacağım gibi Paint.NET için yapacağınız ayarlara PS'de de dikkat etmeniz lazım olacak. PS kullanacaklar da şu aşağıyı okuyuversin, benzer ayarları uygulayabilirsiniz.

Bir de Asperite diye de bir uygulama var. O da popüler ve sırf pixel art için özel yazılmış ama ben çok hakim değilim, bununla uğraşacağınıza ona da bakabilirsiniz. Neyse hadi, ben anlatmaktan vazgeçmeden gidin Paint.NET'i kurun gelin, bekliyorum.

... (bekliyorum, hadi, indirme linkini bulamadıysanız <şurada> tam olarak) ...

Ayarları Verelim

Şimdi pixel art'ın doğası gereği mozaik gibi tek tek işleme yapacağımızdan pikseller üzerindeki kontrolümüzü arttıracak bir takım ayarlar yapacağız.

Paint.NET'in garip bir özelliği aletlerin ayarlarının ortak olması. Açıyoruz hemen sağ üstten "ayarları"


Burada kontrolümüz dışında piksel hesabı yapacak şeyleri kapatıyoruz, amacımız kalemimizde ne renk seçili ise direk o rengi istediğimiz piksele işlemek. Bu amaçta anti-aliasing ya da yumuşatma gibi işlemleri kapatıyoruz. Kısacası ayarları aşağıdaki gibi yapıyoruz, onların ne olduğunu açıklayacağım birazdan, takılmayın:

Bana Ayırdığın Bu Kalbin Kadar Temiz Sayfa için Teşekkür Ederim

Pixel art'ın geçmişi oyun grafikleri olduğundan genelde çizimler belli bir "tile" (kutu kutululuk, kutucuklar, fayans döşeme?) ölçeğinde yapılır. Mecburi değil tabi ama oyunumsu bir iş çıkarmak istiyorsanız öncelikle bir tile (kutu desek iyi) boyutu seçiyorsunuz. Bu boyutlar piksel biriminde olacak. Eski bilgisayarlarda hafıza optimizasyonu için resimler 2'nin katları (2 üzeri x) boyutlarda saklanırdı. Biz şimdi yaygın olan 16x16 piksel ile devam edeceğiz.

Öncelikle yeni bir sayfa açalım, 16x16'lık bir ölçeğimiz olacağından 16'nın bir katı ile (128) sayfa açalım. Sadece Width ve Height'ı pixel birimi ile ayarlamanız yeterli, diğer ayarlar önemli değil.

Şimdi Yerlere Fayans Döşüyoruz

Şimdi çizim için kendimize bir kutu kutu arkaplan hazırlayalım, çizimlerimizde 16x16'yı görelim.
Önce boş bir layer açalım; Layers penceresinden sol altındaki tuşa basıp Add New Layer diyelim.


Sonra Tools'un en altından Shapes seçelim. Seçili aracın özellikleri üst barın altında gözükecek. Oradan dikdörtgen (Rectangle) ve içi dolu çizimi (Draw Filled Shape) seçelim.


Sonra güzel bir renk seçip shift'e basılı tutup (shift'e basılı tutmak boyu ve eni eşitler) ilk karemizi çiziyoruz. Basılı tutarken sağ alt köşeye bakarsanız karenin piksel boyutunu göreceksiniz. 16x16 olduğunda sürüklemeyi bırakıyoruz.


Rengi biraz değiştirip ikinci bir kareyi dibine çiziyoruz. Ctrl + Mouse tekeri ile görüntüyü yaklaştırabilirsiniz. İkinci kareyi çizdikten sonra Tools'ta sol üstten Rectangle Select adıdnaki seçim aracını açıyoruz. iki kareyi tam olarak içine alacak şekilde seçim yapıyoruz.



Bu seçimi tüm resmin en üst köşesine taşıyoruz. Hazır iki kutumuz seçili iken Ctrl+C ve Ctrl+V ile kopyala yapıştır yapıyoruz. Yapıştrımayı tekrar edip yeni gelen parçaları yan yana dizerek ilk satırımızı elde ediyoruz. Son parçanın alana cuk oturduğuna dikkat edin, 16 x 8 = 128 hesap hatası olmasın. Şöyle bir durum olacak en son:



Şimdi bu satırı kopyalayıp ikinci satırı yapcağız, Layer penceresinden Duplicate Layer diyelim:



Sonra bu yeni Layer seçili iken Tools'da sağ üstteki mavi ok ile (Move Selected Pixels) bu yeni satırı aşağı ve bir yana olacak şekilde kaydıralım. Bu işlemden sonra kareleri dizerken bir hata yapıp yapmadığınız ortaya çıkar, çizgiler muntazam mı ona bakın. (muntazam dedim, evet)



İlk kareyi yaptığımız gibi baştaki boşluğa bir kare daha çizin. (İlk rengi geri bulmak için Color Picker aracını kullanabilirsiniz.) Layer penceresinde ortadaki "Merge Layer Down" tuşu ile son katman ile bir altındakini birleştirin. Bundan sonra önceden yaptığımız gibi ilk iki satırı kopyala yapıştır ve aşağıya oynat işlemleri ile ekranı doldurun. Sonuç olarak şöyle bir şey olacak: (burada hazır yapılmışı var)



Esas çalışmanız için yeni bir katman açın, bu (Grid) katmanınız çalışmalarınız boyunca arkada dursun böyle. Gerektiği zaman Layer ayarlarından grid'in opaklığını değiştirerek silinik hale getirebilir, dikkat dağıtmasını azaltabilirsiniz. Bir de bunun altında düz beyaz bir layer (Adı Background olan) kalsın, onu silmeyin.

Hadi Sıkıldım, Bir Şeyler Çiz

Evet, eğlenceli kısma geldik. Shapes aracını seçelim, seçeneklerden Rounded Rectangle ve Corner Size 2px seçelim. Hemen buradayken pixel-art'ta anti-aliasing'i (AA) neden sevmiyoruz onu da göstereyim. Çizdiğimiz küçük bir şeklin AA kapalı (solda) ve AA açık (sağda) hallerini aşağıda görebilirsiniz:



AA açık iken yumuşatma amaçlı köşelerde ara renklerde silik doldurmalar oluyor. Biz bunu istemiyoruz. Neyse çizime dönersek. Öncelikle çizmek istediğimiz şeklin silüeti ile başlayalım, koyu bir gri seçelim. Fanus kafalı basit bir karakter çizeceğiz. Karakterler için iki Tile alan planlayalım. 16x32 px alanımız olsun. Pencil aracını 1px kalınlığında seçip silüetimizin vücudunu çizelim:



Hemen de taşırdık, neyse. Bir koyu renk ile biraz hacim verelim. Bu esnada silmek istediğimiz pikselleri de silgi aracı ile siliyoruz fakat silginin Hardness değerinin %100 olduğuna dikkat edin, yoksa pikseli tam olarak silemezsiniz, AA'daki gibi silik, gözle görülmeyen ama sonra sorun çıkaracak pikselleriniz kalır ortalıkta.



Şimdi o taşan kolları içeri sokalım. Select aracı ile kolu seçelim, seçimi bırakmadan mavi ok aracını seçelim (move selected pixels) ve seçimin yanındaki yuvarlaktan tutup sola sürüklerek kolu küçültelim.


Bunu yaparken de ayarlarda "Nearest Neighbor (NN)" diye bir şey seçmiştik, ona değinelim. Bu seçenek uygulamanın boyutlandırma işlemlerini nasıl yapacağıdır. NN yerine Bilinear (Smooth diye de geçer bazı yerlerde) gibi bir şey seçseydik boyutlandırmada yine AA'da olduğu gibi istenmeyen piksel yumuşatmaları olacaktı. NN bu yumuşatmayı engelliyor. Örnek, solda NN ile, sağda da Bilinear ile resize ettik, yarı saydam garip garip pikseller oldu aralarda:


Diğer kolu da resize edip biraz temizlik yapalım. Şu altta temizlik konusunda güzel bir referans var, bizim yöntem çizgi değil, hacim üzerine ama mantık yakın.


Bizimki de ilk temizlikten sonra şu şekilde, ani kesilen gölge hattı olmamasına, yalnız kalan pikseller olmamasına dikkat ediyoruz, biraz da detay ekliyoruz:



Biraz renk atalım, karakterin farklı bölümlerini ortaya çıkaralım. Önce Adjustments menüsünde Sepia atalım ki nostalji bi hava versin, şaka bir yana Sepia'nın gerçekten işe yaradığı nadir bir adımdır, gri çalışmamıza bir renk katıp daha sonra kullanacağımız Hue aracı için renk zemini hazırlıyor.

Sepia ile karakteri gri'den kahve tonlarına çevirdikten sonra Seçim aracı ile kafayı seçelim. Shift'e basılı tutup seçimimize eklemeler, alt'a basılı tutup çıkartmalar yapabiliriz. Böylece sadece dikdörtgen seçmemiz gerekmez. Ayrıca Lasso Select ile de seçeceğimiz yeri çizerek belirtebiliriz. Kafayı ve biraz altını seçtikten sonra yine Adjsutments menüsünden Hue/Saturation penceresini açıyoruz. Burada Hue renk seçimi, Saturation da o rengi ne kadar uygulayacağımızı seçer. Lightness değerine çok dokunmamanızı öneririm, böylece karakterin genel renk Value'su belli bir uyum içinde kalacaktır. Value dengesi ne diyorsanız iyi bir şey, lazım.



Dokunmayın dedim ama kollarda Lightness değiştirdim. Kıyafetten farklı bir vurguda olacağı için sorun olmadı. Şöyle bir şey elde ettik:



Bundan sonrası deneme yanılmalar ile detaylar ekleme üzerine gideceğiz. Yakın çalışıp (%1000) arada genel duruma bakmak için %300'e geri zoom out yaparak kontrol edin. (Ctrl+Mouse Tekeri)


Detayları çalışırken bacakları da tamir ettim. Dengeyi sağlamak için, iki bacakta aynı satırda denk gelen kesitlerin eşit pikselde olmasına dikkat ettik. nano piksel art (space invaders gibin) uygulayarak tişörte detay iliştirdik, bir de "gariplik unsuru" olması için kafasına anten taktık. Gariplik unsuru pixel art için önemlidir. Benim teorim bu, yeni uydurdum ama mantıklı aslında biraz düşünürseniz.



20170103

Seni Piksellerine Ayıracağım!

Piksel art, düşük çözünürlükte olan bir ekranda mümkün olduğunca anlamlı şekiller elde etmek için her bir pikselin yerinin önemli olduğu bir çizim tekniğidir. Eski sistemlerde çözünürlük kısıtının yanında renk paleti de kısıtlıdır. Bu kısıtlamalar zamanında yaratıcılığın sınırlarını zorlamış ve günümüzde biraz da nsotalji etkisiyle hala keyif aldığımız bir görsel tarzın oluşmasına sebep olmuştur. Kısıtlı alanda yapılan akıllı desenler detaysevicilerin ilgisini çekmektedir.

Bu yazıda pek sevgili Bonkraşır arkadaşımızın dürtmesi ile gaza gelip piksel art bazlı oyun sistemlerindeki farkları elimden geldiğince sizlere açıklamaya çalışacağım. Öncelikle sık kullanılacak bir kaç terimi açıklayarak başlayalım:

Sprite: Tek bir nesneye ait olan görsele denir. Oyun ekranı çizilirken önce bir ya da daha fazla arkaplan çizilir, sonra arkaplan nesnelerinin (duvarlar, binalar, yollar, vb.) sprite'ları çizilir. Bunun üzerine hareketli nesnelerin sprite'ları (karakterler, hareketli nesneler, vb.) çizilir. Birden fazla sprite'ı hafızada saklamak için dizildikleri görsel dosyasına da spritesheet denir.

Renk Paleti: Sistemin gösterebileceği tüm renklere denir. Fakat bu bir oyun ekranında tüm paleti aynı anda görebileceğimiz anlamına gelmez. Hafıza sınırlamalarından dolayı her yüklenen sahnede (oyunu tamamı yada bir bölüm olabilir) bu palet içinden kısıtlı bir renk seti gösterilebilmektedir.

Piksel artın gelişmesinde sistemlerin teknik kısıtlamaları yön verdiğinden biraz teknik kaçabilir bundan sonrası ama korkmayın, resimler ekledim.

Atari 2600

160x192 px, 128 renk (NTSC Formatında)

Atari 2600 sistemi aslında sınırlı bir çizim kabiliyetine sahip ve yayın formatına göre bu değişkenlik gösterir. En yaygını olan NTSC formatını ele alalım. Bu formatta elde edilebilen 128lik renk paleti şu şekildedir:
Atari2600 NTSC palette.png
NTSC Renk Paleti
Dikkat ederseniz genişlik olarak daha düşük çözünürlüğe sahip, fakat görüntü yatay eksende uzatılarak ekrana sığdırıldığından dolayı temel pikselleri 2x1 boyutunda görmektesiniz. Atari tarzı piksel art yapacaksanız kaleminizin ucunu (fotoşop brush'u) ona göre ayarlayınız.

Nesneler genellikle tek renkten oluşur, kahraman spriteları nadiren 4 renge kadar çıkabilir ama bu daha yeni Atari sistemlerinde mümkün olduğundan daha nadirdir.

Önemli bir ayrıntı olarak; bu sistem her satırda en fazla dört renk çizebilmektedir: Arkaplan, oyunalanı ve iki hareketli nesne için (oyuncular, vs). Her satırda bu dört renk değiştirilebilir. Bu kısıtlamadan dolayı Atari görsellerinin genelinde yatay çizgiler hakimdir.

Image result for atari 2600 screenshot

Ekran Görüntüsü Analizi:
Arkaplan: Üstte açık yeşil, aşağıda siyah.
Oyun Alanı: Ağaçlar (Koyu yeşil, kahverengi - satırlarda tek renge dikkat), Zemin (Sarı, turuncu)
Spritelar: Yazılar, Kütükler, Delik, Oyuncu Karakteri (Çok renkli ama satırlarda tek renk), Akrep

NES (Nintendo Entertainment System)

256x224 px, 64 renk (Aynı anda en fazla 25 renk gösterilmekte)

NES, 8-bit işlemci kullanır. Bu sistemde bir pikselde 6 bit renk tanımlamak için kullanıldığından; 2= 64 renk vardır. Aslında NES sistemi 256x240 çözünürlüğü desteklemektedir fakat yaygın televizyon sistemlerinde çizilebilen alan 256x224 olduğundan oyunlar üretilirken o dikey eksendeki fark kullanılmamıştır. emülatörler bile bu düşük çözünürlüğü kullanmaktadır.

NES sistemi aşağıdaki 64 renkli paleti desteklemekte, fakat bir ekranda en fazla bu renklerden 25'ini gösterebilmektedir.
NES palette.png
NES Renk Paleti
Satırda renk sınırı olmadığından NES sistemlerinde kompleks desenli görseller görebiliriz. Tarz olarak da spritelarda temel bir rengin tonları (Donatello'nun yeşili, April'in turuncuları) ve dekoratif olarak az miktarda ikinci bir renk (Donatello'nun mor kuşakları, April'in siyah outline ve kemeri) kullanılmaktadır.


Ekran Görüntüsü Analizi:
Arkaplan: Duvarlar, yer, penceere ve mobilyalar Kırmızı tonları, siyah ve mavi tonları kullanılmış
Spritelar: April, Donatello, Rocksteady (Gri tonları ana renk, turuncu detaylar) ve taşıyıcı modülü (Gri tonları)
Önplan: Aşağıda görünen alevler

SNES (Super NES)

512x448 px, 32768 renk (Aynı anda en fazla 256 renk gösterilmekte)

16-Bit işlemci dönemine geçilmiştir. 215 = 32768 renkli bir palete sahiptir, fakat ekranda aynı anda 256 renk gösterilebilmektedir (Var ama bana kadar var).

File:RGB 15bits palette color test chart.png
15-Bit Renk Paleti
SNES dönemi ile birlikte renk sınırlaması büyük oranda ortadan kalkmıştır (256 boru değil), daha kompleks desenler, gerçekçi renkler, sprite'lar üzerinde detaylı gölgelendirmeler elde edilebilir hale gelmiştir.


Ekran Görüntüsü Analizi:
SNES zamanında JPRG tarzı oyunların patlaması ile top-down açı popüler olmuştur. Bu açıyı özetlersek, nesnelerin bize bakan yüzü ve üst kısmı görünmektedir.

Amiga 1200

640x512 (PAL) 640x480 (NTSC), 224 renk (Aynı anda en fazla 256 renk gösterilmekte)

Amiga esnek bir sistem olduğundan renkten kısma gibi yöntemler ile daha yüksek çözünürlükler de elde edilebilmekte. Ama genel olarak 640x480 çözünürlükte, 24-bit paletten 256 renkli görselleri Amiga standartı olarak alabiliriz. 24 bit palet insan gözünün ayırt edebildiğinden fazla renk içerdiği için artık palet konusunda doyum noktasına gelindi diyebiliriz. Yine de o ekranda aynı anda 256 renk olması sınırı duruyor tabi, onu unutmayın.

Görsel tarzı olarak Nintendo sistemlerinin yaygın tıknaz 2B sprite'lı karakterlerinden çok sinematik ön planda olan daha gerçekçi oranlarda karakterleri görüyoruz. Bir de bu dönemde yoğun olarak görülen izometrik açı da karşılaştığımız Amiga görselleri arasında yoğunlukta.


Ekran Görüntüsü Analizi:
SNES ile kıyasla daha gerçekçi boyutlar, şekiller ve renkler. Büyük fark yaratan dramatik ışıklandırma mevcut. Oyunlar daha büyük yaş oyunculara hitap edecek şekilde.

Erken Dönem Windows Oyunları

WIP (Belki bi ara yazarım burayı)


Kaynaklar

https://en.wikipedia.org/wiki/List_of_video_game_console_palettes
http://www.thealmightyguru.com/Games/Hacking/Wiki/index.php/NES_Palette
http://nesdev.com/NESTechFAQ.htm
https://en.wikipedia.org/wiki/Amiga_1200#Graphics_and_sound
https://en.wikipedia.org/wiki/Amiga_Advanced_Graphics_Architecture