Yüksek Çözünürlüklü Piksel Sanatı Bulanıklık Olmadan Küçük Bir Ekrana Nasıl Uyarlanır?

Yüksek çözünürlüklü bir kaynak, hedefin gösterebileceğinden daha fazla piksel içerir. Yeniden boyutlandırma işlemi, kaynak bilgileri birleştirmek veya gözden çıkarmak zorundadır. Çift doğrusal enterpolasyon (bilinear interpolation) gibi yumuşatma filtreleri, çıktı renklerini yakındaki piksellerden hesaplar; bu da net renk sınırlarını yumuşatabilir. En yakın komşu (nearest-neighbor) örneklemesi ise bir kaynak pikseli seçip diğerlerini yok sayar; böylece karışık renkleri engeller ancak ince ayrıntıları atlayabilir veya çizgileri düzensizleştirebilir. Godot'nun görsel referansı her iki etkiyi de açıklamaktadır ve MDN, tarayıcı ölçeklendirme davranışının seçilen işleme moduna bağlı olduğunu belirtmektedir. Godot: Image MDN: image-rendering

Bu nedenle net görünen bir sonuç elde etmek, yalnızca "bulanıklık olmasın" seçeneğini işaretlemekten ibaret değildir. Hedef boyutlara, çizimdeki piksel şekillerine ve aralıklarına ve son görselin nasıl görüntülendiğine bağlıdır. Küçük sürümü, ana çalışmanın mekanik bir küçültmesi olarak değil, bir tasarım uyarlaması olarak ele alın.

Çizimin görüntüleneceği ekran alanını piksel cinsinden ölçün ve kaynak en boy oranını koruyun. Orijinal 1200 × 800 piksel ve hedef 300 × 200 ise, ölçek her iki yönde de 1:4'tür. Dört piksel genişliğindeki her kaynak bölge, bir hedef piksele düzgün bir şekilde eşlenir; oran elverişlidir, ancak bu boyutta ince ayrıntılar yine de kaybolur.

320 × 180 gibi bir hedef için, önce görseli uzatmadan bu sınırlar içine sığdırın. En boy oranları farklıysa kırpmayı, kenarlara siyah çubuklar eklemeyi (letterbox) veya yerleşimi yeniden düzenlemeyi seçin. Görseli kutuyu dolduracak şekilde sıkıştırmayın: bu, piksel şekillerini değiştirir ve yüzleri, silüetleri ve desenleri bozabilir. Farklı en boy oranları net bir çerçeveleme tercihi gerektirir; hem Godot hem de Unity, ekran uyumsuzluklarını yönetme yöntemleri olarak kırpmayı veya siyah çubukları belgelerinde sunmaktadır. Godot: Multiple resolutions Unity: Pixel Perfect Camera reference

Kaynağın bir kopyasını oluşturun ve yeniden boyutlandırmadan önce ayrıntıları azaltın. Hedef boyutta birleşerek gürültüye dönüşen tek piksellik yalıtılmış vurguları, dar hatları, minik metinleri ve doku kümelerini kaldırın. Silüeti güçlendirin ve önemli renk alanlarını belirgin tutun. Bir özellik anlam taşıyorsa —örneğin bir göz, sembol veya nesne sınırı gibi— küçültme işleminin onu koruyacağına güvenmek yerine hedef boyutta yeniden çizin.

Faydalı bir kontrol yöntemi, hedef boyuttaki önizlemeyi %100 oranında görüntülemek ve önemli her özelliğin hâlâ ayırt edilebilir olup olmadığını sorgulamaktır. Yakınlaştırma yapmak piksel kenarlarını incelemeye yardımcı olur ancak çizimin amaçlanan fiziksel boyutunda okunup okunamayacağını gösteremez. Tam çözünürlüklü ana kopyayı saklayın, böylece küçük bir ekran için yapılan basitleştirme diğer kullanım alanlarının üzerine yazılmaz.

Çizimin katı bir paleti ve keskin kenarlı piksel bloklarını koruması gerektiğinde en yakın komşu (nearest-neighbor) yöntemini kullanın, ardından kaybolan ayrıntılar ve düzensiz çizgi kalınlıkları olup olmadığını dikkatlice inceleyin. Komşu renkleri karıştırmak yerine yakındaki bir kaynak pikseli seçtiği için çift doğrusal filtrelemeyle ilişkili yumuşatılmış geçişleri önler. Bunun bedeli ise kaynak ayrıntıların çoğunu feda edebilmesidir. Pillow: Filters

Kaynak görselin genelini daha pürüzsüz temsil etmesi gereken daha küçük bir görsel için, Lanczos gibi yüksek kaliteli bir alt örnekleme filtresini daha basit bir alan veya kutu tarzı küçültmeyle karşılaştırın. Bu yöntemler, birden fazla kaynak pikselden gelen bilgileri birleştirir; bu da geniş şekilleri koruyabilir ancak net kenarların etrafında ara renkler oluşturabilir. Godot, Lanczos'u özellikle küçültme işlemleri için yüksek kaliteli bir seçenek olarak tanımlar; Pillow ise farklı filtrelerin örnekleme yaklaşımlarını belgeler. Adayları köşegenler, ince çizgiler ve yüksek kontrastlı bir kenar içeren kırpılmış bir alanda test edin, ardından gerçek boyuttaki sonuca bakarak tercihinizi yapın. Godot: Image Pillow: Filters

Tam sayı oranları, tamamlanmış küçük görseli ekranda görüntülemek için ölçeklendirirken veya kaynak boyutlar hedefe tam bölündüğünde son derece kullanışlıdır. Böylece her kaynak piksel, aynı tam sayıda çıktı pikselini kaplar. Kesirli ölçeklendirme pikselleri düzensiz dağıtabilir; Godot'nun örneği, 2 kat ölçeklenerek 1280 × 720 yapılan 640 × 360 boyutundaki bir temel görseli, düzensiz piksel boyutları üreten kesirli bir ölçekle karşılaştırmaktadır. Godot: Multiple resolutions

Net bir tam sayı oranıyla uyuşmayan küçük bir ekran için en boy oranını koruyun ve uzlaşmayı bilinçli olarak seçin: kullanılmayan kenar boşlukları bırakın, biraz kırpın veya yerleşime özel bir sürüm hazırlayın. Tam sayı ölçeklendirme kenarlarda çubuklar bırakabilir veya ekran alanını daha az kullanabilir. Özellikle kaynak ve hedef boyutlar tam olarak bölünmediğinde, büyük bir ana kopyayı küçültmek için evrensel bir çözüm değildir.

Hedef piksel boyutlarında dışa aktarın, ardından dışa aktarılan dosyayı gerçek uygulamada, tarayıcıda veya cihazda hedeflenen boyutta görüntüleyin. Net bir şekilde dışa aktarılmış bir görsel, ikinci bir aşamada yumuşatılarak ölçeklendirilirse bulanıklaşabilir. Tarayıcı tuvali (canvas) çizimlerinde yumuşatma varsayılan olarak etkindir; MDN, ölçeklenen görsellerin sert kenarları koruması istendiğinde imageSmoothingEnabled özelliğinin kapatılmasını belgeler. CSS'teki image-rendering: pixelated kuralı da görüntülenen görselleri etkileyebilir ancak MDN, kesirli cihaz-piksel oranlarının yine de piksellerin düzensiz görünmesine neden olabileceği konusunda uyarır. MDN: imageSmoothingEnabled MDN: Crisp pixel art look

Gerçek boyutta üç unsuru inceleyin: önemli ayrıntıların tanımlanabilir kalıp kalmadığı, köşegenlerin ve dış hatların tutarlı görünüp görünmediği ve görselin dışa aktarıldıktan sonra tekrar uzatılıp uzatılmadığı veya yeniden örneklenip örneklenmediği. Hedef ekranın yakınlaştırma veya ölçeklendirme ayarlarını da kontrol edin; tarayıcı yakınlaştırması ve tam sayı olmayan cihaz ölçeklendirmesi piksel tekdüzeliğini etkileyebilir. Kenarlar yumuşak görünüyorsa, görseli yeniden değiştirmeden önce kaynaktan ekrana kadar olan tüm yolu izleyin ve yumuşatmanın nerede gerçekleştiğini belirleyin.

1. Hedef genişliği ve yüksekliği belirleyin ve olası en boy oranı farklarının nasıl ele alınacağına karar verin.
2. Bir çalışma kopyası oluşturun ve bu boyuta sığamayacak ayrıntıları basitleştirin.
3. Karşılaştırma yapmak için bir en yakın komşu sürümü ve bir yumuşatma filtresi sürümü dışa aktarın; ince ayrıntıları ve köşegenleri içeren bir kırpma dahil edin.
4. Her ikisini de gerçek ekran boyutunda inceleyin, ardından kaybolan veya çamurlu hale gelen temel özellikleri yeniden çizin.
5. Uygulamanın veya tarayıcının istenmeyen ikinci bir yeniden boyutlandırma uygulamadığından emin olun ve son sürümü hedeflenen boyutlarda kaydedin.

Katı sert kenarlar ve uygun şekilde hizalanmış bir oran için en yakın komşu yöntemini seçin; yalnızca orijinal palet renklerini korumaktan ziyade genel şekilleri korumak daha önemli olduğunda yumuşak bir alt örnekleme filtresi seçin. İki sürüm de net bir şekilde okunmuyorsa, çizimi veya çerçevelemeyi hedef boyutta değiştirin. Yeniden örnekleme ayrıntıları yeniden dağıtabilir, ancak daha büyük bir görseldeki her bir özelliği daha az sayıda pikselin içinde tutamaz.

• Godot Engine: Multiple resolutions
• Godot Engine: Image
• MDN: image-rendering
• Pillow: Concepts — Filters
• Unity: Pixel Perfect Camera reference
• MDN: CanvasRenderingContext2D.imageSmoothingEnabled
• MDN: Crisp pixel art look with image-rendering