Birden fazla form faktörü ve ekran boyutu desteklenir

Android cihazlar çeşitli form faktörlerinde ve ekran boyutlarında sunulur. Yaygın kategoriler şunlardır:

• Cep telefonları
• Tabletler
• Televizyonlar ve televizyon set üstü kutular
• Android için Chrome Çalışma Zamanı'na sahip dizüstü bilgisayarlar

Bu çeşitlilik, oyununuzun genellikle farklı en boy oranlarına sahip farklı ekran çözünürlükleriyle karşılaşacağı anlamına gelir. Örneğin:

• 19:9 en boy oranına (2280x1080) sahip yatay yönlü bir telefon
• 20:9 en boy oranına (3200x1400) sahip yatay yönde farklı bir telefon
• 16:9 en boy oranına (1920x1080) sahip 1080p HD TV
• 4:3 en boy oranına sahip bir tablet (2048x1536)

Oyununuzun tasarımında, ekran çözünürlüğünden ve cihazın en boy oranından bağımsız olarak doğru sunumu sağlamak için bu farklılıklar dikkate alınmalıdır.

Projeksiyon modlarını daralt

Defold projesinin yapılandırılabilir temel çözünürlüğü vardır. Bu çözünürlük, game.project dosyasında Ekran kategorisindeki Genişlik ve Yükseklik alanları kullanılarak ayarlanır.

Şekil 1. Görüntülü reklam projesi ayarları

Defold'un varsayılan davranışı, temel çözünürlükte oluşturmak ve ardından elde edilen görüntüyü hedef cihazın gerçek çözünürlüğüne göre ölçeklendirmektir. Katlama, bu modu uzatma projeksiyonu olarak ifade eder. Uzatım projeksiyonu, orijinal en boy oranını korumaz. Bazı oyunlarda bu varsayılan değer görsel olarak kabul edilebilir. Standart Defold oluşturma komut dosyası, temel en boy oranını koruyan iki ek projeksiyon seçeneği içerir: sabit sığdırma projeksiyonu ve sabit projeksiyon.

Aşağıdaki örnekte, 480x272 temel bir çözünürlük temel alınarak tasarlanmış ve Katlama düzenleyicisinde görüntülenen örnek bir proje gösterilmektedir.

Bu örnekte:

• Temel çözünürlüğün kenarlıklarının çevresine bir çerçeve çizmek için karo haritası nesnesi kullanılır.
• Taban çözünürlüğün sınırlarının içinde iki imge nesnesi ve bir metin nesnesi yer alıyor.
• Taban çözünürlüğün sınırlarının dışında, sırasıyla yukarı, aşağı, sol ve sağa konumlandırılmış dört imge nesnesi var.

Şekil 2. Örnek proje nesne düzeni

960x544 ekran çözünürlüğünde (temel çözünürlüğün tam 2 katı) çalıştırıldığında proje aşağıdaki gibi görüntülenir:

Şekil 3. Varsayılan uzatma projeksiyonu kullanılan, 2 temel çözünürlükteki örnek proje

Projeksiyonu uzatma

Aşağıdaki örneklerde, en boy oranının korunmadığı varsayılan uzatma projeksiyonuyla pencerenin yeniden boyutlandırılmasının sonuçları gösterilmektedir:

Şekil 4. Örnek proje, uzatma projeksiyonu kullanılırken yatay olarak sıkıştırıldı

Şekil 5. Örnek proje, esneme projeksiyonu kullanılırken yatay olarak esnetildi

Sabit uyumlu projeksiyon

Sabit sığdır projeksiyon modu, temel çözünürlük en boy oranını korur. En boy oranı korunduğundan, ölçeklendirilen temel çözünürlüğün kapsamadığı ek ekran alanı olacaktır. En boy oranı farkının ana eksenine bağlı olarak bu ekstra alan, temel çözünürlüğün üst ve alt kısmında veya sol ve sağında bulunur. Sabit sığdırma projeksiyonu, temel çözünürlüğü bu alanı hesaba katacak şekilde değiştirir. Bu değişiklik, oyun sahnesinde temel çözünürlük bölgesinin dışında ek alanlar oluşturulmasına neden olur. Ortaya çıkan resim daha sonra ekran çözünürlüğüne ölçeklendirilir.

Aşağıdaki örneklerde, 480x272 temel çözünürlüğünden farklı bir en boy oranına sahip bir ekran çözünürlüğüne sabit uyumlu projeksiyon oluşturma gösterilmektedir:

Şekil 6. Sabit uyumlu projeksiyon kullanırken temel en boy oranından daha uzun bir en boy oranına sahip ekrandaki örnek proje

Şekil 7. Sabit ekran projeksiyonu kullanılırken temel en boy oranından daha geniş bir en boy oranına sahip ekran üzerinde gösterilen örnek proje

Sabit projeksiyon

Sabit projeksiyon modu, temel çözünürlük en boy oranını korur ve temel çözünürlüğü belirtilen bir yakınlaştırma faktörüne göre ölçeklendirir. Ekran çözünürlüğüne ve yakınlaştırma faktörüne bağlı olarak, temel çözünürlük alanının bir alt kümesi veya üst kümesi görüntülenebilir.

Aşağıdaki örneklerde sırasıyla 644x408 ve 2x yakınlaştırma faktörleriyle ekran çözünürlüğü kullanılan sabit projeksiyon modu gösterilmektedir:

Şekil 8. 1x yakınlaştırma faktörüne sahip sabit projeksiyon kullanılırken 644x408 ekran çözünürlüğünde örnek proje

Şekil 9. 2x yakınlaştırma faktörüne sahip sabit projeksiyon kullanılırken 644x408 ekran çözünürlüğünde örnek proje

Projeksiyon modlarını değiştirme

Etkin projeksiyon modu, oluşturucuya uygun mesaj gönderilerek çalışma zamanında değiştirilebilir. Bu mesajlar, standart Defold mesaj sistemi kullanılarak gönderilir. Tüm projeksiyon modu mesajları, yakın ve uzak düzlem Z değerlerini belirten parametreleri içerir.

Not: Sabit projeksiyon mesajında, yakınlaştırma düzeyini belirten ek bir parametre bulunur.

-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })

-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })

Oluşturma komut dosyalarını geliştirme

Defold oluşturma davranışı, oluşturma komut dosyası adı verilen özel bir komut dosyası tarafından kontrol edilir. Diğer Defold Engine komut dosyaları gibi oluşturma komut dosyası da Lua programlama dilinde yazılır. Proje oluşturulurken varsayılan bir oluşturma komut dosyası eklenir, ancak bunu özel bir oluşturma komut dosyasıyla da değiştirebilirsiniz.

Uzatılmış, sabit sığdırma ve sabit projeksiyon modları, varsayılan oluşturma komut dosyasının özellikleridir. Bu modlardan biri kullanılırken, oluşturma komut dosyası oyun nesnelerini oluşturmada kullanılmak üzere bir 2D ortografik projeksiyon matrisi oluşturur. Bu matrisin yapılandırması, kullanılan projeksiyon moduna bağlı olarak değişiklik gösterir.

Projeksiyon matrisinin yapılandırmasını genişletmek veya değiştirmek için özel bir oluşturma komut dosyası kullanabilirsiniz. Özel oluşturma komut dosyalarıyla, farklı en boy oranları için sinemaskoplar veya dikey kenarlıklar gibi varsayılan komut dosyasının desteklemediği işlevler de uygulanabilir.

Açık kaynak geliştiriciler, varsayılan Geliştirme komut dosyalarından daha fazla özellik sunan oluşturma komut dosyası ve kamera paketleri oluşturmuştur. Yaygın olarak kullanılan iki paket RenderCam ve Defold-Orthography'dir.

GUI sistemini geliştirin

Defold, GUI sahne dosyası konseptine dayalı bir GUI sistemi içerir. GUI sahne dosyalarında, resimler veya metin gibi bağımsız kullanıcı arayüzü öğelerini tanımlayan, düğüm adı verilen nesneler bulunur.

GUI sahne dosyaları, Defold oyun nesnesine bileşen olarak eklenebilir. GUI sahneleri ve içerdikleri düğümleri ayrı olarak oluşturulur ve normal oyun nesnelerinden biraz farklı çalışır. Bu farklılıklar nedeniyle, GUI sahneleriyle birden fazla ekran çözünürlüğünün desteklenmesi, GUI sistem koordinatları ve GUI düğüm özetleri ve çapalarıyla ilgili dikkat edilmesi gereken ek noktaları içerir.

GUI sistem koordinatları

Normal Katlanmış oyun nesneleri, dünya uzayında koordinatlarını belirtir. Kamera nesnesi, dünyadaki alanı ekran alanına çevirir ve kameranın o anki sanal görünümü içinde dökülen oyun nesnelerini görüntüler. GUI sistemi kendi ayrı kamerasını kullanır. Bir GUI sahnesine ait olan düğümler, dünya uzay koordinatları yerine ekran alanı koordinatlarını kullanır. Ekran çözünürlüğü, GUI düğümlerini yerleştirmek için kullanılan proje temel çözünürlüğünden farklı olduğunda, bu durum düğümlerin ekran kenarlarına veya bir üst düğümün kenarlarına göre farklı kenar boşluklarına sahip olmasına neden olabilir. Defold, ekran çözünürlüğündeki farklılıkları dikkate almak amacıyla GUI düzeni ayarlamaları yapmak için birden fazla seçeneğe sahiptir.

GUI düğüm ekseni ve çapalar

GUI düğümleri, X Sabitleme ve Y Sabitleme özellikleri kullanılarak dikey ve/veya yatay kenarlara sabitlenebilir.

• Bir düğümün üst düğümü varsa, bağlayıcı üst düğümün kenarlarında yer alır.
• Bir düğümün üst düğümü yoksa, bağlayıcı ekranın kenarlarında yer alır.

Aşağıda, iki GUI düğümü olan örnek bir sahne gösterilmektedir. Sol alt ve sağ üst köşedeki kumanda simgeleri. Her iki düğümde de X Anchor ve Y Anchor None olarak ayarlanmıştır:

Şekil 10. GUI öğeleri içeren örnek bir sahne

Ekran sabitleyici olmadan yeniden boyutlandırıldığında kumanda simgelerinin konumlarını temel çözünürlüğe göre korur:

Şekil 11. Sabitleri None olarak ayarlanmış GUI öğelerinin bulunduğu, yeniden boyutlandırılan örnek sahne

Sol alt düğümün Y Sabitlemesi Bottom, sağ üst düğümün Y Sabitlemesi ise Top olarak ayarlandığında GUI düğümleri uygun ekran kenarlarına sabitlenir:

Şekil 12. Sabitleri Edges olarak ayarlanmış GUI öğelerinin bulunduğu, yeniden boyutlandırılan örnek sahne

Bir GUI düğümünün Pivot özelliği, düğümün sınır dikdörtgeninde, ekran alanı koordinatı Konum özelliğine karşılık gelen noktayı belirtir. GUI düğümleri varsayılan olarak Center ayarını kullanır ve Konum noktası, sınırlar dikdörtgeninin tam merkezine yerleştirilir. Diğer olası Pivot ayarları, dört ana yön ve dört köşegeni içerir. Pivot özelliği, X Sabitleme ve Y Sabitleme özellikleriyle birlikte kullanıldığında kenar boşluklarının spesifikasyonunu basitleştirebilir.

Aşağıdaki örnekte, sol alt kısımdaki denetleyici simgesi GUI düğümünün Konumu 0,0 ve Pivot Center olarak ayarlanmıştır.

Şekil 13. Pivot'un Center olarak ayarlanmış bir GUI düğümü

Pivot'u South West olarak değiştirmek, aşağıdaki düzenlemeyle sonuçlanır:

Şekil 14. Pivot'un South West olarak ayarlanmış bir GUI düğümü

GUI düğüm ayarlama modları

Ekran çözünürlüğü, temel projenin çözünürlüğünden farklı olduğunda GUI düğümleri yeniden boyutlandırılabilir. Düzenleme Modu özelliği, düğüm içeriğinin ölçekleme davranışını kontrol eder. Ayarlama Modu üç ayara sahiptir: Fit, Zoom ve Stretch.

Not: Kök GUI sahne nesnesinin bir Adjust Reference özelliği vardır. Bu özellik Disabled değerine ayarlanırsa sahnedeki tüm GUI düğümlerinin Adjust Mode özellikleri yoksayılır. Adjust Reference (Referansı Düzenle) seçeneği Disabled olarak ayarlandığında GUI düğümleri, ekran çözünürlüğündeki değişiklikleri hesaba katacak şekilde yeniden boyutlandırılmaz veya yeniden konumlanmaz.

Fit

Fit ayarı, düğüm içeriğinin en boy oranını korur. İçerik, düğümün yeniden boyutlandırılan sınırları dikdörtgeninin genişliği veya yüksekliğiyle eşleşecek şekilde ölçeklendirilir. Seçilen eksen, daha küçük farka sahip olan eksendir. Bu, içeriğin orijinal en boy oranında sınırlar dikdörtgen içine sığmasını sağlar.

Yakınlaştırma

Zoom ayarı, düğüm içeriğinin en boy oranını da korur. Fit ayarında olduğu gibi Zoom, içeriği düğümün yeniden boyutlandırılan sınır dikdörtgeninin genişliği veya yüksekliğiyle eşleşecek şekilde ölçeklendirir. Fit işlevinin aksine Zoom, eşleme hedefi olarak orijinal boyuttan daha büyük farka sahip ekseni kullanır. Bu, ölçeklendirilen içeriğin sınırlardaki dikdörtgenden taşabileceği anlamına gelir.

Aşağıda, farklı Düzenleme Modu ayarlarına sahip iki GUI düğümüne örnek gösterilmektedir. Sol alttaki kumanda simgesinde Ayarlama Modu Fit iken sağ üstteki kumanda simgesinde Ayar Modu Zoom şeklindedir.

Şekil 15. Farklı Düzenleme Modu ayarlarına sahip iki GUI düğümü

Esneme

Stretch ayarı, düğüm içeriğini düğümün yeniden boyutlandırılan dikdörtgeniyle tam olarak eşleşecek şekilde ölçeklendirir. Orijinal en boy oranı korunmaz.

GUI düzenleri

Defold, GUI düzenlerini farklı ekran çözünürlüklerine uyarlamak için alternatif bir yönteme sahiptir: Layouts. Varsayılan GUI düğüm özelliklerini geçersiz kılmak için bir GUI sahnesine düzenler eklenebilir. Düzen, belirli bir ekran çözünürlüğüyle ilişkilendirilir. Birden çok Düzen mevcut olduğunda, Defold gerçek ekran çözünürlüğüne en yakın Düzen'i seçer. Bir GUI düğümü tarafından kullanılan varsayılan konum, boyut, ölçek veya grafik kaynağı, Layout tarafından geçersiz kılınabilir.

Ek kaynaklar

• Kılavuzu Genişletme - Oluşturma ardışık düzeni
• Yapılandırmayı Kaldırma Kılavuzu - GUI Sahneleri
• Yapılandırmayı Kaldırma Kılavuzu - GUI Düzenleri