Çeşitli ekran ebatlarını destekleme

Favourite 402 favourites
Tutorial written by AshleyOriginally published on 29th, October 2011 - 19 revisions

Translation Team:

1 revision

Esas itibariyle her oyun farklı ekran boyutlarında çalışmalıdır. Farklı ekran boyutlarında telefonlar olabilir ve ekran boyutları aynı araçların farklı versiyonlarında da farklılaşabilir, IPhone 4S veya IPhone 5 gibi farklı tablet ekranları olabilir, tarayıcılar ekran görüntüsünü farklı boyutlara değiştirebilir, ekran çözünürlükleri farklı olabilir, çeşitli sebeplerden farklılaşmalar olabilir. Internet sayfalarında sabitlenmiş oyunun ekranının boyutları tam ekran boyutuna döndürülebilir, bu da bu oyunlarında farklı ekran görüntülerinin desteklenmesi gerektiğini göstermektedir.

Bu, oyunlar ister sadece masaüstü ister telefonlar için tasarlanmış olsun tasarımcının oyun için çoklu ekran boyutlarını destekleyecek bir yol bulması gerektiği manası ortaya çıkar. Bu rehber çoklu erken boyutlarını desteklemeye yardımcı olabilecek temel konuları içermektedir.

Kısa versiyon: tek çözünürlüğü hedeflemeyin

Yaygın yapılan bir yanlışta 1280x720 gibi, özel bir çözünürlüğü hedeflemek gerektiği yönündeki yanlış varsayımdır. Çünkü dışarıda pek çok farklı çözünürlükler kullanılırken bir tanesini almak gülünç olmaktadır. Bir görüntü oranı (aspect ratio) almak ve sonra oyunu buna uyacak şekilde oranlamak daha iyidir. Örnek vermek gerekirse, 1280x780 yerine, 16:9 görüntü oranını hedefleyin. (Sadece proje özelliklerinde pencere boyutu için her hangi bir 16:9 çözünürlüğünü girin.). Tarayıcıda tam ekran (Fullscreen-in-browser) kısmında sinemaskop oranlama (letterbox scale)’ı aktif hale getirin, ve böylece oyununuz her hangi bir 16:9 çözünürlüklü ekranda doğru olarak görülecektir. Eğer ekran 16:9 değilse, alt kenarlarda siyah barlar görünecektir, bunlar leveller veya menü ekranlarının fazla kısımlarının kazara görünmesi durumlarıyla karşılaşmama konusunda yardım etmektedir. Not etmek gerekirki piksellenmiş retro-tipi oyunlar tasarlıyorsanız, bunun yerine Sinemaskop bütün(tamsayı) oranlama (Letterbox integer scale)’yı kullanmak isteyebilirsiniz.

Bu rehberin kalan kısmı kullanabileceğiniz diğer araçları daha detaylı olarak aktarmaktadır. Yukarıdaki çabuk çözüm işinize yarasa bile aşağıdakileri okumaya değecektir. Eğer oyununuzu daha dikkatli tasarlamak, üstüne daha fazla emek vermek istiyorsanız,farklı görüntü oranlarını destekleyebilirsiniz .

Tam Ekran Modunu Kullanmak

Proje Özellikleri (Project Properties) kısmında, Tarayıcıda Tam Ekran ( Fullscreen in Browser) modlarından birini seçin.

Off modu seçildiğinde, oyun Pencere boyut (Window size) ‘nda ne verilmişse bir HTML sayfasına gömülü olarak görüneceektedir. Bununla birlikte, bu seçim hiçbir farklı ekran boyutunu desteklememektedir. Eğer tarayıcınızın Tam ekranı çağır faaliyetini kullanırsanız, her halükarda farklı ekran boyutlarını desteklemeye ihtiyacınız olacaktır.

Kırpma modu

Kırpma modunda görüntü aynı oranda kalır ve basitçe pencere boyutuna bağlı olarak çalışma sayfasının (layout) az veya çoğunu gösterir. Aşağıdaki resimler crop ( kırp) modundaki görüntüyü göstermektedir. Oyuncu aynı boyutta görünmektedir ancak oyun alanının, çalışma sayfasının, ( layout) az bir kısmı görülmektedir.

Fullscreen in crop mode.
Pencere daha büyük bir boyuta getirilirse, oyun alanının daha büyük bir kısmı görülebilir olacaktır. Pencerenin nasıl daha büyük olduğunu fark edin, oyuncu daha uzaktaki canavarlara nişan alabilmektedir.

Fullscreen in crop mode.


Bu mod kendinizin oranı kontrol etmenize olanak sağlar daha doğrusu oranlamayı basitçe yok sayar. Ancak, bu mod oyunlar için genelde iyi değildir. Fiziksel olarak aynı ekran boyutuna sahip IPhone ve Ipad olduğunu düşünelim, fakat bunların nesillerine bağlı olarak farklı çözünürlükleri olduğunu varsayalım. Crop (Kırp) modu hiçbir oranlama yapmadığı için, bu seçim oyunu yüksek çözünürlüklü cihazlarda garip bir şekilde küçük görünümlü yapabilir.

Sinemaskop mod (Letterbox scale mode)

Sinemaskop ölçeklendirme (letterbox scale) modu basitçe pencereye uyacak şekilde oyunu oranlar. Eğer görünüm oranı uymazsa, pencerenin kenarlarında ve altında siyah barlar görünecektir. Aşağıda iki örnek görülmektedir:

Letterbox scale example 1
Letterbox scale example 2
Siyah barların kenarların dışında görülmesi sayesinde, ekran dışında olmasını varsaydığımız içeriklerin kazara görünme probleminden bizleri korumaktadır. Bununla beraber, bu modun dezavantajı bu siyah barlar yüzünden bazı kullanıcılar görünüm alanlarının bir kısmını kaybetmesidir. Buna rağmen, sinemaskop ölçeklendirme modu (Letterbox scale mode) neredeyse her oyuna uygulanabilir ve her halükarda doğru bir şekilde çalışmasını sağlar, böylece bu yol farklı görüntü oranları için oyunu değiştirmeden farklı ekran boyutlarını desteklemek için hızlı ve kolay bir yöntemdir.

Sinemaskop tam ölçeklendirme ( Letterbox integer scale)

Sinemaskop tam ölçeklendirme modu Sinemaskop ölçeklendirme modu ile görüntü oranını korumak yönüyle aynı olmakla birlikte bu mod yakınlaştırma yalnız tamsayı oranında yapılmaktadır. Örnek vermek gerekirse, bu modda ölçeklendirme sadece 1x, 2x, 3x, 4x vb. oranlarında olacaktır ve asla 2.5x gibi bir oran kullanılmayacaktır. Bu Point (nokta) örnekleme kullanan ( genelde retro tipli) oyunlarda önemli bir özelliktir zira böylece oyun tekrar boyutlandırılırken mükemmel piksel bütünlüğü korunmaktadır. Bu aynı zamanda siyah barların yukarı ve aşağı kenarların ikisinde de görüneceği manasına da gelir.

Letterbox integer scale example 1
Letterbox integer scale example 2

Dış oran modu ( Scale outer mode)

Dış oran modu (Scale outer ) görüntüyü pencere boyutuna uyacak şekilde sığdırır, tıpkı Sinemaskop tam ekran modunun yaptığı gibi. Ancak, siyah barlar göstermek yerine, bu tam göstermeyi kullanır ve oyun alanının daha fazlasını gösterir. Bu modun bazen pencere büyüklüğünden daha fazlasıyla oyun alanını göstermek gibi yan etkileri vardır. Bu oyunda boş alanların görüneceği veya ekran dışında tuttuğunuz bazı objelerin ekranın alt kenarlarında görünmesi gibi durumlara yol açabilir eğer ki oyununuzu bu moda göre tasarlamadıysanız.

Oyunun küçük pencerede nasıl oranlandığına dikkat edin, siyah barların görünmediğini fark edin:

Fullscreen in scaling mode.
Ancak oyun alışılmamış oranlara ayarlanırsa, oyun doğru olmayan bir şekilde görülecektir:

Scale mode with bad aspect ratio.
Oyun doğru bir şekilde oranlandı fakat çalışma sayfasının doğru kenarını geçip görünür hale gelerek kötü bir hal alabilir. Sadece bu değil oyuncu ayrıca daha önce görmediği canavarları görebilir, bu aynı zamanda hile gibi görülebilir. Sinemaskop tam ekranla siyah ekranla buralar kaplanmaktadır, bu yüzden sinemaskop (letterbox mode) modu tercih edilmektedir.
Ancak pencerelerinin boyutu değiştirilemeyen özel araçları hedefliyorsanız, farklı görüntü oranlarını destekleyen bu modu kullanabilirsiniz. Ancak yukarıdaki problemler hala vardır; belli görüntüler boşluklar görünmemesini sağlamak için arka görüntüleri pencere görüntüsünden büyük tutun ve istenmeyen durumlar ve görüntüler ortaya çıkmaması için oyunu çeşitli boyutlarda test edin.

Daha fazla bilgi için, aşağıdaki ikinci bölüme *Genel kavrayış –Görüntü oranlarına” göz atın

İçe Ölçeklendirme Modu ( Scale inner Mode)

Dışa Oranlama gibi, bu mod görüntüyü ölçeklendirir ve tam görüntü sağlar. Ancak, görüntü oranlamasını farklı halleder: Dışa ölçeklendirme oyun alanını görüntü oranından farklı olarak daha fazla alan gösterirken, içe ölçeklendirme daha az alan gösterir. Çünkü görüntü parçalarını kesmeyi tercih eder, kazara pencere dışında kalan alanları asla göstermez… ancak bu aksi problemlere yol açar – bu seferde görmek istediğiniz kısımların bir kısmını keser ve bu alanlar görünmeye bilir!

Aşağıda hizalı oranlandığında oyun görünümünün doğru olduğu bir örnek:

Scale Inner mode
Eğer, ‘dışa ölçeklendirme’ modunda yaptığımız gibi alışık olmadığımız oranlar kullanırsak, içeriye nasıl odaklandığını görün ve fazla yerleri göstermek yerine görüntünün belli kısımlarını nasıl kestiğine dikkat edin:

Scale Inner mode
Dışa ölçeklendirme modundan daha iyi sonuçlar vermektedir, ancak bazı pencere boyutlarının oyunun belli parçalarından kesildiğinin farkında olmanız gerekir. Yukarıdaki örnekte sadece oyunun pencere boyundan dar bir bar kadarlık kısmı görünmektedir. İşe yarar bir teknik 16:9 görüntü oranları ile oyunları tasarlamak ancak 4:3 oranında gösterildiğinde kenarları kesen bir teknik kullanmak yararlı olabilir. Bazı film yapımcıları filmlerde bu tekniği kullanmaktadır.

Genel bir kavrayış – Görüntü oranları

Sinemaskop ölçeklendirme veya Sinemaskop tam ölçeklendirme, çok fazla iş yapmaya gerek olmadan oyununuzun ekran boyutlarının büyük kısmında çalışmasını sağlayacaktır. Ancak, dezavantaj olarak siyah barlar görülecektir. Bu küçük ekranlara sahip olan mobil kullanıcılar için kızdırıcı olabilir ve onlar görüntünün gerektiğinden daha küçük olmasını istemiyor olabilir. Ek olarak, oyununun görüntü oranı ile cihazın görüntü oranının farklı olması profosyonel görülmez – ince siyah barlar kenarlarda görünür, görünmesi gereksizdir- kullanıcı “neden görüntü tam alanı kaplamıyor” diye merak edebilir.

Thin black bars in letterbox mode.
Tam görüntüyü destekleyecek durumlar oluşturmak için, sinemaskop ölçeklendirme (letterbox scale) yerine Scale outer( Dışa ölçeklendirme) veya Scale inner (içe ölçeklendirme) kullanmanız gerekir. Bu farklı görüntü oranlarını desteklemeniz gerektiği manasına gelir.

Bu problem TV üreticilerinin hepsinin karşılaştıklarının aynısıdır. Piyasada 4:3,16:9 ve 16:10 görüntü oranlarını kullanan pek çok TV bulunmaktadır. Eğer bir üretici bir TV şovunu sadece 4:3 oranı ile filme alırsa ve bu film 16:9 TV de gösterilirse, kenarlarda boşluklar olacaktır, veya hiç istenmeyen set görüntüleri ve arkada çalışanların görüntüleri ekrana yansıyacaktır! Benzer şekilde, eğer arkaplan görüntünüzü tek bir görüntüye tamamen uyacak şekilde ayarlarsanız, sonra da bunu dış ölçeklendirme ( scale outer) modu seçili olarak biraz farklı görüntü oranı olan bir ekranda çalıştırırsanız, kenarlarda boşluklar görülecek veya çalışma sayfasının dışındaki içerikler görünür olacaktır. Bu durum IPhone gibi cihazlardaki durum çubuklarının olduğu durumları hesaba almamış olduğunuzda da olabilir.

Bu problemi çözmek için iki yol vardır:

1) Dışa ölçeklendir ( Scale outer) modunu kullanın ve arka planınızı pencere boyutundan daha geniş tutun ( veya konuma göre daha uzun tutun), görünen kenarları geçin, cihaz görüntü oranından bağımsız olarak hiçbir boşluk olmamasını sağlamak için.

2) İçe ölçeklendirmeyi (Scale inner) modunu kullanın ve *kenarlara yakın önemli hiçbir şeyin olmamasına emin olun, çünkü farklı görüntü boyutlarında kenarları kesebileceği konusundan her zaman şüphe edin, uyanık olun.

İki teknikte de bir oyunu doğru bir şekilde tasarlamak her zaman kolay değildir. Ancak bunlar oyunlarınızı tam ekranda gösterebilmenizi sağlar ki bunlar siyah barlardan daha güzel görünür.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.