SEARCH
banner the journal
CATEGORIES
CALENDAR
Mart 2021
P S Ç P C C P
1234567
891011121314
15161718192021
22232425262728
293031  
Text Widget

Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.

About Us
In condimentum facilis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci acerty euismod semper, magna diamert porttitor mauris, quis sollicitudin sapien justo in libero. Mei iriure dignissim ad, prompta.
Genel

Daha İyi Oyunlar İçin iOS Ekranlarda Çözünürlük

By
on
2 Şubat 2021

Bu yazı da iPhone uygulamalarında farklı çözünürlülüklü cihazlar arasında geçişlerdeki bir sorun tarif edilmekte, buna dair bir çıkarım yapılmakta ve en son bir çözüm tavsiyesi sunulmaktadır.

iOS için yazılım geliştirirken uygulamanın ne yaptığının yanında önemli konulardan birisi de, uygulamanın ekranda nasıl göründüğü, kullanıcının nasıl bir deneyim yaşadığı ile ilgilidir. Apple uygulamalarda kullanılan tasarım öğelerinin kullanıcının en iyi şekilde deneyimlemesi ve insan ergonomisine uygunluğu için İnsan Arayüzü Yönergesi yayınlamaktadır. Renk, boyut, öğeler arası boşluklar gibi bir çok unsur bu yönergede gösterilmekte ve tavsiye değerleri aktarılmaktadır.

Görsel tasarım unsurları için önemli bir değer de ekranın çözünürlüğü ve uygulamanın kullanıcıya gösterdiği öğelerin bu çözünürlükte en doğru şekilde sunulmasıdır. Her ne kadar Apple ilk 29 Haziran 2007 tarihinde pazara sunulan orjinal iPhone çözünürlüğünü baz alıp bir çarpan modeli ile standardizasyona gidip, bunu da ayrıca görsellerin görünüş oranları (aspect ratio) ile desteklese de yine de halen ufak sorunlar bulunmaktadır. Normal uygulamalarda daha az hissedilse de, özellikle oyun yazan geliştiriciler için çözünürlük çok iyi ele alınması gereken bir husustur. Örneğin oyundaki arka plan, piksel pikseline o anki cihaza uyumlu olmalıdır. Ancak bunun yerine genellikle tercih edilen yöntem tek bir arka planı o an uygulamanın çalıştığı cihazın ekran boyutuna göre büyütülüp küçültülmesidir, ancak bu yöntem ya görüntü kaybına neden olur ya da görüntünün bozulmasına.

Apple’ın Çarpan Çözümü @2x

Ekran çözünürlüğü, ekranı oluşturan yatayda ve dikeyde sıralanmış piksel isimli noktaların adedidir. Orjinal iPhone dikeyde 480 yatayda da 320 piksel çözünürlüğe sahipti. Bir başka deyişle toplamda 480×320 = 153,600 pikselden oluşmaktaydı.

iPhone 3, 3G ve 3GS modelleri 480×320 görüntü

Sonrasında 3G ve 3GS modellerinde herhangi bir değişiklik olmadı. Bu cihazlarda örneğin ekrana 480×320 piksel’lik bir geri plan resmi konulduğunda, tam olarak sağdan sola ve yukarıdan aşağıya resmi tam tamına kenarlara değecek şekilde göstermekteydi.

Ancak sonraki yıl sunulan iPhone 4 modeli ile birlikte ekran çözünürlüğü bir anda iki katına çıktı, dikeyde 480 yerine 960, yatayda 320 yerine 640 piksel. Toplamda da 960×640 = 460,800 piksele erişti. Tam dört katı daha fazla piksele Retina ekran denildi.

iPhone 4 960×640 görüntü (Bir üstteki görüntüye göre 2 kat daha fazla detay)

Bu aşamada uygulamalarda bir sorun oluştu. Bir önceki cihazlarda ekranı tam tamına kaplayan 480×320’lik bir arka plan artık ekranın sadece dörtte birini kapsıyordu. Arka planda olduğu gibi eski cihazlarda örneğin 96×64 lük bir düğme (button) dörtte biri oranında daha küçük görünmekte ve basmak için parmak ucu ile denk getirmek çok zorlaşmıştı. Ya tüm uygulamalar geçersiz olacaktı ya da Apple dahice bir çözüm geliştirecekti. Beklenen oldu ve Apple harika basitlikte bir çözüm geliştirdi. Pikselin yanına bir de nokta yani point koordinat sistemi getirildi. iPhone 3 serisi de iPhone 4 de, 480’e 320 noktadır kabul edildi. iPhone 3 serisinde bir nokta bir pikselden oluşurken iPhone 4 serisinde bir nokta dikeyde 2 yatayda 2 olmak üzere 4 pikselden oluştu. Yazılım geliştiriciler örneğin bir resmin standart halini eski 3 serileri için yüklerlerken, aynı resmin 4 kat daha yüksek halini @2x eklentisi ile yazılıma koydular. Uygulama geliştirme platformu XCode bunları akıllıca ele alarak konuyu çözdü. Uygulama eski 3 serisi cihazlarda normal resimleri gösterirken iPhone 4 de @2x halini göstermekteydi. Örnek vermek gerekirse 3 serisi cihazda mesela 120×94 olarak gösterilen resim, iPhone 4 için 240×188 olarak da yüklendi ve uygulama çalıştığı cihaza göre ilgili resmi gösterdi, bu sayede ekranda aynı boyutta gözüktüler.

Görünüm Oranı : Insta’cılar Bilir

Uygulama içerisinde gösterilecek fotoğraf ve grafikler için belirli alan ayrılır. Örneğin popüler Instagramda fotoğrafların gösterileceği alanın belirli bir büyüklüğü vardır. Siz bir fotoğraf çekip koyacağınızda Instagram size, o alanda fotoğrafınızı gösterirken nasıl göstereceğini sorar. Size fotoğrafı yanlara (veya fotoğrafı yatay çektiyseniz üste ve alta) siyah alanlar ekleyip tam göstermeyi mi ya da fotoğrafın belirli bir kısmını kesip o alana tam doldurmayı mı istediğinizi sorar.

Uygulama geliştirmede bunun adı Görünüm Oranı (Aspect Ratio)’dır. Her resmin yatayda ve dikeyde ekranda gösterilecek hali olmadığından, görünüm oranı ile bu sorun çözüldü. Bu halde görünüm oranı .aspectfill (tam doldurma) veya .aspectfit (siyah alan ekleyip tam uydurma) yapılarak tasarım öğeleri boyutlara yakınlaştırıldı. Örneğin ekranda 200’e 300 olarak gösterilecek bir resim sisteme 900’e 1200 olarak yüklendi ise bu resmi 900’ü 200’e mi ya da 1200 tarafını 300’e mi oranlanacağı konusu bu şekilde çözülmekteydi.

Oyunbozan iPhone 5

Eskilerin deyişi “demir çıktı mertlik bozuldu” gibi iPhone 5 çıktığında Apple’ın @2x çözümü bir anda sorunlu oldu. Çünkü iPhone 5 de çözünürlük yine arttı ancak yatayda 640 piksel 640 piksel olarak kalırken, dikeyde 960 piksel 1136 piksele çıktı. Diğer bir değişle iPhone 3’lerde 480/320 = 1.5 ya da iPhone 4’lerdeki 960/640 = 1.5 oranı bir anda 1136/640 = 1.78’e çıktı.

iPhone 4’de gayet güzel görünen bir üstteki fotoğraf iPhone 5’de aşağıdaki gibi gözükmeye başladı. (Fotoğrafta iPhone 8 vardır, ancak iPhone 5, 6, 7, 8 serilerinde (Plus modelleri dahil) bu oran değişmemiştir

Resimdeki oranlar bozuldu, genişlik aynı kalırken yükseklik uzadı. Aynı çözünürlük gibi. Dolayısıyla resimleri köşesinden tutup büyütme devri bitti. Bu şekilde yapıldığında yukarıda görüntü oranında bahsedilen sorun nedeniyle ya yataydan ya dikeyden görsel içeriği kaybedildi. iPhone 5 çıktığında çoğu uygulama geliştirici, iPhone 4 deki hali değiştirmeyip ilave gelen dikey piksellere ya reklam gösterdiler, ya da boş bıraktılar. Uzun yıllar süresinde yazılım geliştiriciler 6, 7, 8 serilerinde bu yeni orana uyum sağladılar ve fotoğrafların yeni çözünürlüğe uygun halini de yükleyip eski telefonlarda görüntü oranı ile olabildiğince iyi sonuç vermeye çalıştılar. Aynı fotoğrafın 1.78 oran uyumlu hali aşağıda gösterilmiştir. (Sağ tarafında da farkı rahatça görmeniz için bozuk oranlı hali gösterilmiştir).

iPhone 3 ve iPhone 4’de dikey uzunluğun yatay uzunluğa oranı (point veya piksel fark etmeyecek şekilde) 1.5 du. iPhone 5 de bu değer yaklaşık 1.78’e çıktı. Daha sonraki yıllarda iPhone 6, iPhone 7 ve iPhone 8’de hep bu 1.78 değeri korundu. Çözünürlük arttı, daha çok piksel geldi ancak oran hiç değişmedi.

Plus modellerinin çıkması ile birlikte pikseller çok arttığında Apple @3x sürümünü de devreye soktu. Artık büyük telefonlarda kullanıcının en iyi deneyimi yaşaması için fotoğrafların 3 halinin yüklenmesi gerekiyor. Ancak günümüzde 5 öncesi telefonlar artık kullanımda olmadığından sadece @2x ve @3x halleri kullanılıyor.

iPhone X : Apple Çıtayı Tekrar Yükseltti

iPhone X olağanüstü OLED ekranı ile çözünülüğü hem yukarı taşıdı hem de oran tekrar değişti. iPhone 3 ve 4’de 1.5, iPhone 5, 6, 7 ve 8 de 1.78 olan oran iPhone X ile birlikte bu oran 2.17’ye geldi. Bu yazının yazıldığı tarihte en yeni sürüm iPhone 12’lerde halen bu 2.17 oranı geçerli.

Unutmadan bunca yıl içerisinde içerisinde cihazlara iPad katıldı. Uzunca bir süre 1.33 lük oran kullansa da sonrasında 1.43 lük iPad lerde kullanıma girdi. Böylece iPhone’larda 3, iPad’lerde 2 oran olmak üzere toplam da 5 farklı fotoğraf oranı bulunmakta.

Aşağıdaki örnekte solda yeni 2.17 oranında bir fotoğrafın bu orandaki iPhone 12’de, sağda ise 1.78 lik orana sahip iPhone 8 Plus cihazında bu fotoğrafın görünümü yer almakta. Yeni fotoğraf yeni cihazda güzel, eski cihazda güzel görünmemekte bu oranla.

Tersine bakarsak, yani eski 1.78 lik oranlı bir fotoğrafı yanyana iki cihaza koyarsak da bu seferde bir önceki iPhone 5 örneğinde olduğu gibi eski oranlı fotoğraf yeni oranlı cihazda uzamakta. Solda kendi oranındaki bir fotoğrafı gösteren iPhone 8Plus güzel görünürken, sol tarafa bu eski oranlı fotoğrafı gösteren iPhone 12 Pro Max fotoğrafı bozmakta.

Çıkarım

Her farklı orana sahip cihazda, kendi oranındaki fotoğraf en güzel görünür. Uygulama da böyle olmalıdır.

Oranlar ve Cihaz Grupları

Tablo kolonlarında ilk Y ve G Mantıksal nokta sistemindeki yükseklik ve genişlik iken, Oran Yükseklik bölü genişlik oranıdır. Yf ve Gf fiziki, gerçekte cihazın üzerinde bulunan piksellerin yüksekliği ve genişliğidir. PPI bir inç (yaklaşık 2.54 cm) fiziki uzunlukta kaç pikselin yer aldığı anlamına gelir) Son kolon Ç ise kullanılan Çarpan Oranıdır.

İlk kolon G ise bu yazının asıl konusudur. Tüm iOS cihazları Y/G oranına göre gruplanabilir. Aynı gruptaki cihazlar için yazılımcı resmi bir köşesinden tutup büyütebilir, tabi bunu “scale” veya “size” komutlarıyla yapacaktır. Diğer taraftan eğer uygulamanın mükemmel pixel doğruluğunda olmasını istiyor ise bu 5 farklı grup için görselleri hazırlamalıdır. iPhone 5 öncesi cihazlar artık pek kullanımda olmadığı için aslında 3 numaralı grup için uğraşmaya pek gerek kalmaz.

GrupCihazYGOranYfGfPPIÇ
1iPhone 128443902,16253211704603
1iPhone 12 Mini7803602,17234010805763
1iPhone 12 Pro Max9264282,16277812844583
1iPhone 12 Pro8443902,16253211704603
1iPhone 118964142,1617928283262
1iPhone 11 Pro8123752,17243611254583
1iPhone 11 Pro Max8964142,16268812424583
1iPhone XR8964142,1617928283262
1iPhone XS Max8964142,16268812424583
1iPhone XS 8123752,17243611254583
1iPhone X8123752,17243611254583
2iPhone SE 2nd gen6673751,7813347503262
2iPhone 8 Plus7364141,78220812424013
2iPhone 86673751,7813347503262
2iPhone 7 Plus7364141,78220812424013
2iPhone 7 Plus6673751,7813347503262
2iPhone SE 1st gen5683201,7811366403262
2iPhone 6S Plus7364141,78220812424013
2iPhone 6S 6673751,7813347503262
2iPhone 6 Plus7364141,78220812424013
2iPhone 66673751,7813347503262
2iPhone 5C5683201,7811366403262
2iPhone 5S5683201,7811366403262
2iPhone 55683201,7811366403262
3iPhone 4S4803201,509606403262
3iPhone 44803201,509606403262
3iPhone 3GS4803201,504803201631
3iPhone 3G4803201,504803201631
3iPhone 4803201,504803201631

5
iPad Air 411808201,44



4iPad Pro 4 12.9″136610241,33273220482642
5iPad Pro 4 11″11948341,43238816682642
4
iPad 810808101,33216016202642
4iPad 710808101,33216016202642
4iPad Mini 510247681,33204815363262
4iPad Air 311128341,33222416682642
4iPad Pro 3 12.9″136610241,33273220482642
5iPad Pro 3 11″11948341,43238816682642
4iPad 610247681,33204815362642
4iPad Pro 2 12.9″136610241,33273220482642
4iPad Pro 2 10.5″11128341,33222416682642
4iPad 510247681,33204815362642
4iPad Pro 12.9″136610241,33273220482642
4iPad Pro 9.7″10247681,33204815362642
4iPad Mini 410247681,33204815363262
4iPad Air 210247681,33204815363262
4iPad Mini 310247681,33204815362642
4iPad Mini 210247681,33204815363262
4iPad Air10247681,33204815362642
4iPad 410247681,33204815362642
4iPad Mini10247681,3310247681631
4iPad 310247681,33204815362642
4iPad 210247681,3310247681321
4iPad10247681,3310247681321
2iPod Touch 65683201,7811366403262
2iPod Touch 55683201,7811366403262
3iPod Touch 44803201,509606403262
3iPod Touch 34803201,504803201631
3iPod Touch 24803201,504803201631
3iPod Touch 4803201,504803201631

Bu grupları aslında cihaz tipi olarak belirleyebilir, örneğin şu şekilde isimlendirebiliriz :

  • Çok eski iPhone (iPhone 5 öncesi 1.5 oran)
  • Eski iPhone (iPhone 5,6,7,8 ve Plus modelleri 1.78 oran)
  • Modern iPhone (iPhone X ve sonrası 2.16 oran)
  • Standart iPad (1.33 oran)
  • Yeni iPad (1.44 oran)

Yazılım Geliştirme

Bu kadar uzun yazıda buraya kadar geldiğiniz için teşekkürler. Şimdi bahsedilen bu sorun uygulamada en az yaşamak için neler yapmak gerek bunun üzerinde duralım.

İlk olarak ekran oran gruplarını Swift kodunda bir enum olarak tanımlayabiliriz.

enum CihazTipi {
    case çokEskiIPhone
    case eskiIPhone
    case modernIPhone
    case standartIPad
    case yeniIPad
    case tanımsız
}

Sonrasında ekranın yüksekliği ve genişliğini alıp oranı kontrol etmeliyiz. Bunun için ilk olarak ekran genişliği ve yüksekliğini şu şekilde öğrenebilir ve bir struct a atayabiliriz.

struct EkranBoyutu {
    static let genişlik = UIScreen.main.bounds.size.width
    static let yükseklik = UIScreen.main.bounds.size.height
}

Uygulamanın üzerinde çalıştığı cihaz tipini anlayıp, buna göre kullanacağımız arka plan ve diğer görseller içinde alttaki kodu kullanabiliriz.

func cihazTipiniAl() -> CihazTipi {

    let ekranOranı: CGFloat = max(EkranBoyutu.yükseklik, EkranBoyutu.genişlik) / min(EkranBoyutu.yükseklik,  EkranBoyutu.genişlik)

    var sonuç: CihazTipi?
    
    switch UIDevice.current.model {
    case "iPhone":
        switch ekranOranı {
            case 0..<1.7 : sonuç = .çokEskiIPhone
            case 1.7..<2 : sonuç = .eskiIPhone
            case 2..<2.8 : sonuç = .modernIPhone
            default: sonuç = .tanımsız
        }
    case "iPad":
        switch ekranOranı {
            case 0..<1.36 : sonuç = .standartIPad
            case 1.37..<2 : sonuç = .yeniIPad
            default: result = .tanımsız
        }
    default:
        sonuç = .tanımsız
    }
    return sonuç ?? .tanımsız
}

Ekran yükseklik bölü genişlik oranı hesaplanırken telefonu dikey de tutabileceğimiz gibi yatay da tutabileceğimiz için yükseklik daima genişlikten büyük olduğundan her iki sayının büyüğünü seçmekteyiz.

Cihaz tipini öğrendiğinizde artık tek yapmanız gereken bu orana uygun fotoğraf ve grafik boyutlarını uygulama içinde kullanmaktır.

TAGS
RELATED POSTS

LEAVE A COMMENT