Metlivi Blog

Küçük Boyutlardaki Dört Yönlü Piksel Sprite'ların Net Bir Şekilde Okunabilir Olması Nasıl Sağlanır?

Dört yönlü bir piksel sprite'ın okunabilir olmasını sağlamak için ön, arka, sol ve sağ görünümleri, oyuncuların gerçekten göreceği boyutta dört ayrı şekil olarak tasarlayıp kontrol edin. Her görünüm için tutarlı bir gövde kaplama alanı ve net bir silüetle işe başlayın; ardından ön ve arkayı ayırt etmek için birkaç belirgin renk bloğu ve yöne özgü ipuçları kullanın. Minik ayrıntıları, yalnızca görünümler oyun ölçeğinde bakıldığında tanınabilir kalmaya devam ediyorsa ekleyin.

15 Ekim 20267 dakikalık okumaYazan: Metlivi Editorial Team
Bölüm 1

Çizime başlamadan önce oyun içi boyutu belirleyin

Sprite hücresini, geleneksel olduğu için rastgele bir tuval boyutu seçmek yerine hedeflenen oyuna uyacak şekilde ayarlayın. 16×16 boyutundaki bir hücre, iç detaylar için çok az alan bırakır; 32×32 boyutundaki bir hücre ise giysiler ve aksesuarlar için daha fazla alan sunar. Bunlar birer kural değil, kullanışlı başlangıç noktalarıdır: asıl önemli kısıtlama, karakterin ekranda beklenen boyutunda kaç pikselin görünür kalacağıdır. Pinnguaq tarafından hazırlanan bir eğitim içeriği 32×32 boyutunda bir karakterin oluşturulmasını gösterirken, boyutlara göre karakter rehberi ise 16×16 ve 32×32 boyutlarındaki farklı ayrıntı sınırlarını açıklamaktadır. (Pinnguaq, “Pixel Power: Sprite Creation”; Pixnote, “How to Draw Pixel Art Characters”)

Çalışırken yerel piksel ızgarasında çizin ve hedeflenen ekran ölçeğinde önizleme yapın. Oyun sprite'ları büyütüyorsa, büyütülmüş görüntüyü oyunun kullanacağı ölçeklendirme yönteminin aynısıyla inceleyin; oyun bunları yerel çözünürlükte görüntülüyorsa, %100 oranında inceleyin. Yakınlaştırılmış bir düzenleyici görünümü pikselleri yerleştirmeye yardımcı olur ancak tek piksellik bir aksesuarın oyunda seçilip seçilemeyeceğini size söyleyemez. Bir oyun sprite'ı rehberi, okunabilirliği gerçek boyutta kontrol etmeyi ve bu ölçekte belirsizleşen ayrıntıları kaldırmayı önermektedir. (Wayline, “Making a game-ready sprite”)

Bölüm 2

Dört görünümün tümü için ortak bir kaplama alanı bloklayın

Kostüm ayrıntılarını çizmeden önce, her yön için basit bir kılavuz hücre oluşturun. Görünüm değiştikçe karakterin yaklaşık boyunu, yere temasını ve kütle merkezini tutarlı tutun. Anahatlar doğal olarak farklılık gösterecektir: yandan görünüm önden görünüme göre daha dardır ve arkadan görünüm önden görünen özellikleri gizleyebilir. Ancak karakter, sırf oyuncu yön değiştirdi diye zıplıyor veya küçülüyormuş gibi görünmemelidir.

Bunu oluşturmanın pratik bir yolu, her hücreye bir merkez çizgisi ve bir zemin çizgisi çizmek, ardından bu kılavuzlara göre kabaca baş, gövde ve ayak bloklarını yerleştirmektir. Bloklanan dört şekli yan yana karşılaştırın. Çizim vücudun etrafında şeffaf boşluk bıraksa bile hücre boyutlarını sabit kabul edin; bu, pozları karşılaştırmayı ve daha sonra bunları sıralar halinde düzenlemeyi kolaylaştırır. Aseprite'ın sprite belgelerinde, görüntünün bir piksel boyutuna ve süreleri olan animasyon karelerine sahip olduğu belirtilir; bu da boyutları ve kareleri çalışan varlığın açık parçaları olarak ele almayı destekler. (Aseprite belgeleri, “Sprite structure”)

Bölüm 3

Her silüetin farklı bir görünümü ifade etmesini sağlayın

Bloklanan her karakter şeklini tek bir düz renkle doldurun ve dört görünümü birlikte inceleyin. Şunları sorun: Hangi uç kafa? Ön görünümü arka görünümden ayırt edebiliyor muyum? Profil, dar bir ön görünüm yerine yandan bir görünüm olarak okunabiliyor mu? Cevap göz piksellerine veya kıyafet parlamalarına bağlıysa, önce büyük şekilleri revize edin. Önce silüeti oluşturma iş akışı, Wayline ve Pixnote'un oyun sprite'ı rehberlerinde de önerilen sıradır. (Wayline, “Making a game-ready sprite”; Pixnote, “How to Draw Pixel Art Characters”)

Yönü netleştirmek için görünüme özgü bir veya iki büyük ipucu kullanın. Örneğin, ön görünüm bir yüzü veya göğüs işaretini gösterebilir, arka görünüm bir kapüşon dikişini veya sırt çantasını gösterebilir ve yan görünümler bir burnu, at kuyruğunu veya taşınan bir eşyayı ortaya çıkarabilir. Bu ipuçlarını hedef ölçekte kaybolmayacak kadar büyük tutun. Şapka kenarı veya omuz aksesuarı gibi belirgin bir anahat şekli, silüette görünür kalması nedeniyle birkaç iç pikselden çok daha fazla yardımcı olabilir.

Bölüm 4

Vücut bölümlerini ayıran renk blokları ekleyin

Her yön bir şekil olarak netleştiğinde, en büyük iç bölgeleri ekleyin: baş veya saç, gövde, kollar ve bacaklar. Komşu bölgeleri birbirinden ayrı tutan değerler seçin. Bir sprite küçük bir palet kullanabilir, ancak neredeyse aynı açıklığa sahip iki bitişik parça, sprite kısa bir an görüldüğünde veya kalabalık bir sahneye karşı bakıldığında birbirine karışabilir. Sprite'ı olası birkaç arka plan rengi üzerinde kontrol edin; Pinnguaq'ın eğitim içeriği, sprite'lar birden fazla arka planda görünebileceğinden kontrastın değerlendirilmesini özellikle tavsiye eder. (Pinnguaq, “Pixel Power: Sprite Creation”)

Kasıtlı bir görünüm değişikliği aksini gerektirmedikçe, ışık ve gölge düzenini tüm yönlerde tutarlı tutun. Karakter döndüğünde aniden yön değiştiren bir gölge, kıyafetlerin farklı bir malzemeymiş gibi görünmesine veya vücudun şekil değiştirmiş gibi algılanmasına neden olabilir. Renk kodlamasını da işlevsel tutun: ayırt edici bir atkı, saç rengi veya kemer, arkadan ve yandan bakıldığında tahmin edilebilir bir yerde kalmalıdır. Parçaları ayırmak için yalnızca renk tonuna güvenmeyin; parlaklık veya anahat farkının da bu ayrımı sağlayıp sağlamadığını kontrol edin.

Bölüm 5

Yan görünümü ne zaman aynalayacağınıza karar verin

Sola bakan bir sprite'ı aynalayarak sağa bakan görünümü oluşturmak, karakter ve ekipman simetrik olduğunda çizim süresinden tasarruf sağlayabilir. Aynalama; tek taraflı bir çanta, rozet, saç ayrımı, silah veya ışığa bakan bir ayrıntı gibi önemli bir asimetriyi tersine çevirdiğinde uygun değildir. Aynalanan sonucu benimsemeden önce tasarımla karşılaştırın. Karakterin kimliği bu asimetriye bağlıysa, iki görünümü ayrı ayrı çizin ve ayarlayın.

Simetrik tasarımlar bile aynalamadan sonra küçük düzeltmelere ihtiyaç duyabilir. Bir tarafta dengeli görünen piksel kümeleri, özellikle yüz, ayaklar veya çıkıntılı bir aksesuar çevresinde ters yönde garip görünebilir. Aynalamayı bir başlangıç noktası olarak ele alın, ardından her iki profili de hedef boyutta inceleyin ve silüetin veya boşlukların dengesiz hissettirdiği yerlerdeki pikselleri değiştirin. Bu pratik bir tasarım önerisidir: kaynaklar silüet ve ölçek kontrollerini desteklerken, asimetrinin ne zaman önemli olduğu kararı karaktere ve oyuna bağlıdır.

Bölüm 6

Dört görünümlü bir okunabilirlik kontrolü yapın

Dört hareketsiz (idle) görünümü yerel oyun ölçeğinde, düz ve orta değerde bir arka plan üzerinde yan yana getirin, ardından bu işlemi temsil edici açık ve koyu sahnelerde tekrarlayın. Önce düz silüetlerini karşılaştırın. Ardından yakınlaştırma yapmadan renkli sprite'ları karşılaştırın. Son olarak, bir oyuncunun döneceği sırayla aralarında göz gezdirin: ön, yan, arka, yan. Bu genel bakış (contact-sheet) kontrolü; uyumsuz boyu, belirsiz yönü veya kaybolan bir aksesuarı, büyütülmüş sprite'ları tek tek incelemeye kıyasla çok daha kolay fark etmenizi sağlar.

Bir görünüm belirsiz hissettirdiğinde şu kısa teşhis adımlarını kullanın:

  • Ön ve arka birbirine benziyorsa yüz, saç, kapüşon veya sırt eşyası gibi görünüme özgü bir ipucunu büyütün veya basitleştirin.
  • Bir profil şekilsiz bir leke gibi görünüyorsa başı, gövdeyi ve taşınan eşyayı daha net bir kontur veya değer farkıyla ayırın.
  • Kıyafetler arka planda kayboluyorsa anahatları veya dış renk bloklarının parlaklığını ayarlayın.
  • Dönüş hareketi karakterin yukarı aşağı sallanıyormuş gibi görünmesine neden oluyorsa zemin temas satırını ve vücut yerleşimini yönler arasında karşılaştırın.
  • Bir ayrıntı yalnızca yakınlaştırıldığında görünüyorsa onu kaldırın veya daha büyük bir şekille değiştirin.

Bu kontroller geçme-kalma kurallarından ziyade birer teşhistir. Bir tasarım kasıtlı olarak arka görünümü önden daha sade tutabilir; yine de hedeflenen kullanım için yönü ve kimliği anlaşılır kılması gerekir. Sprite daha sonra canlandırılacaksa eşit boyutlu hücreler kullanın ve hareketi eklemeden önce dinlenme pozlarını karşılaştırın. Aseprite, kareleri ve süreleri sprite yapısının bir parçası olarak belgeler; Pixnote'un sprite sayfası rehberi ise kareleri aynı boyutta tutmayı ve ayakları tek bir satıra hizalamayı anlatır. (Aseprite belgeleri, “Sprite structure”; Pixnote, “How to Draw Pixel Art Characters”)

Bölüm 7

En küçük işlevsel ayrıntıyla tamamlayın

İnce detayları yalnızca silüet, yön ipuçları ve ana renk bölgeleri dört görünümün tümünde başarıyla çalıştıktan sonra ekleyin. Her bir ayrıntı için bunun karakteri tanımlamaya, yönü okumaya veya iki parçayı birbirinden ayırmaya yardımcı olup olmadığını sorgulayın. Oyun ölçeğinde bunların hiçbirini yapmıyorsa sprite'ı okuyan kişiye hiçbir fayda sağlamadan gereksiz piksel tüketiyor demektir. Oyun sprite'ı rehberliği de benzer şekilde küçük ayrıntıların en son eklenmesini ve yalnızca gerçek boyutta seçilebilenlerin tutulmasını tavsiye eder. (Wayline, “Making a game-ready sprite”)

Faydalı bir tamamlanma noktası; sabit bir boy ve zemin konumunu paylaşan, belirgin ön, arka ve profil silüetlerine sahip olan ve ilgili her görünümde ana tanımlayıcı özelliğini koruyan dört sprite'a ulaşmaktır. Projede yan yana son bir önizleme bulundurun; böylece daha sonra yapılacak düzenlemeler aynı ölçeğe ve arka planlara göre kontrol edilebilir. Bu basit karşılaştırma, revizyonları somut bir soruya dönüştürür: Bu piksel, yönün veya karakterin daha net anlaşılmasını sağladı mı?

Bölüm 8

Kaynaklar

İlgili okumalar

Bu konuyu keşfetmeye devam et