Flutter’da piksel sanat neden bulanıklaşır ve nasıl çözülür

Piksel sanat kullanan bir oyunu farklı cihazlarda açtığınızda kenarların yumuşadığını görüyorsanız, sorun genellikle üç yerden birinde.

Ölçeklendirme filtresi

Varsayılan doğrusal filtreleme, komşu pikselleri harmanlayarak yumuşak bir görüntü üretir. Fotoğrafta istediğimiz budur, piksel sanatta tam tersi. En yakın komşu filtresine geçmek ilk adımdır.

Tam sayı olmayan ölçek

Görseli 2,37 kat büyüttüğünüzde kaynak pikseller hedef piksellere tam oturmaz ve kenarlarda kayma oluşur. Ölçeği yalnızca tam sayı katlarına izin verecek şekilde sınırlamak gerekir: 2x, 3x, 4x. Ekranda kalan boşluk, arka plan veya kenar çerçevesiyle doldurulur.

Cihaz piksel oranı

Mantıksal piksel ile fiziksel piksel arasındaki oran cihazdan cihaza değişir. Düzeni mantıksal piksele göre kurarsanız, yüksek yoğunluklu ekranlarda yine kesirli ölçek elde edersiniz. Ölçek hesabını fiziksel piksel üzerinden yapmak sorunu kökten çözer.

Pratikte ne yaptık

Yadara’da tüm arayüzü sabit bir taban çözünürlük üzerine kurduk ve ekrana yerleştirirken yalnızca tam sayı katlarını kullandık. Bileşen kütüphanesi bu kuralı kendi içinde uyguladığı için ekran geliştirirken kimsenin ayrıca düşünmesi gerekmiyor.