2d platformlarda farklı en boy oranlarını nasıl ele alırsınız?

Uzun zaman önce, 4: 3 bir PC'de bulabileceğiniz tek apect oranıydı. Bugün en yaygın olanı 16:10, ancak çoğu yeni monitör (özellikle dizüstü bilgisayarlar) 16: 9

2B platform oluşturuyorum ve tüm farklı oranları nasıl kullanmam gerektiğine karar veremiyorum.

İşte bazı fikirler:

1. 4: 3 daha fazla içerik alır, geniş ekranlar üstte ve altta kesilir
2. 16: 9 daha fazla içerik alır, diğerleri sola ve sağa kesilir
3. Oyun diğer AR'ler için siyah yatay çubuklarla 16: 9'da
4. Oyun diğer AR'ler için siyah dikey çubuklarla 4: 3'te

Oyununuzu "geniş" (bu durumda, yaklaşım 3'ü kullanın) veya daraltmak (bu durumda, yaklaşım 4'ü kullanın) yapmak için zorlayıcı bir nedeniniz yoksa , 1 ve 2 (ya da muhtemelen 3 ve 4'ün kombinasyonunu kullanın) şeyleri ekrandan gizleme).

Bir uzlaşma boy oranı seçin (16:10 iyi, hatta 16:11). Eğer kullanıcı 16: 9’da ise, yanlarına daha fazla içerik verir ve 4: 3’de ise üst ve alt kısımlarına daha fazla içerik verir.

Her durumda - kamera sınıfınızda böyle bir şeyle uygulamanın en iyi yolu olduğunu düşünüyorum:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

Bu noktada farklı nominal dünya boyutlarını (yani: dünya birimlerinde kameranın boyutu) deneyebilir ve sadece en iyisini seçin.

Temel bir öneri olarak, PC'de "kullanıcının tam ekran çalıştırmak istediğini varsayma" derim. Pencereli modda, ideal oranınızı seçin ve sadece doğrudan kullanın.

Bence kullanıcılar, tam ekran içeriği ile sunulduğunda genellikle siyah çubuklar kabul ediyorlar. Bu nedenle, ideal değilse, 3. ve 4. stratejiler kabul edilebilir. Ne kadar içerik oluşturduğunuzu her zaman bilme avantajınız vardır: yani yalnızca geniş ekranlarda çalışırken sinsi böcekler oluşmaz.

Uyarlanabilir olmaya çalışıyorsanız ve kullanıcıların oranını ekran çözünürlüğü aracılığıyla tespit edip mümkün olduğunca fazla içerik gösteriliyorsa, yüksek ve düşük öncelikli içeriği farklı şekilde hesaba katmanız gerekir. Yüksek öncelikli içerik, ekranın dışındaysa, oyun başarısız oluyorsa, kullanıcının kesinlikle ekranda görmesi gereken şeylerdir. Demek HUD ve UI elemanları gibi şeyler ve oyuncu avatarı ve etkileşime girdikleri her şey. Düşük öncelikli içerik, ekranda eğer o zaman iyidir, ancak ekran dışıysa önemli değil. Örn: Arkaplan grafikleri ve avatardan oldukça uzak olan şeyler.

Bazı 'fiziksel' 2D dünyasının üstüne bindirilmiş bir UI / HUD'ye sahip olduğunuzu varsayarsak, o zaman bu yeterince basit. Düşük öncelikli öğeler kolaydır, yalnızca 4: 3 görünümünün ilginç şeyler üzerine odaklandığından emin olun, ardından sola veya sağa mümkün olduğunca düşük öncelikli şeyler çizin. 2B dünyadaki yüksek öncelikli şeyler (örneğin, karakteriniz, karakterinizin doğrudan savaşmakta olduğu düşmanlar) her zaman 4: 3 görünüm alanında tutulmalıdır. Başka bir deyişle, ekstra kodlu emlaktan faydalanmak için oyun kodunuzu kamerayı büyütmeyin, çünkü daha sonra geniş ekrana karşı farklı şekilde hareket eden oyun kodunuz olur. Oyun kodunun dünyanın 4: 3'te oluşturulduğunu varsaymasını sağlayın ve yalnızca oluşturma kodunuzun görünenden daha fazlası olduğunun farkında olmasına izin verin.

UI / HUD öğelerinin düzenlenmesi iki yoldan biriyle ele alınabilir:

1. Dinamik konumlandırma: Tüm elemanlarınızı ekran kenarlarına göre belirtin (yani tümü 0,0'a göre değil). En boy oranınıza bağlı olarak, öğeler ekranın ortasından daha yakın veya daha uzak olacaktır. Artıları: Bir şeyleri köşelere bağlamanıza ve “sadece çalışmasını” sağlar. Eksileri: Merkezde düzenin düzgün çalışmasını sağlamak ve elemanların üst üste gelme riski var
2. Muhafazakar statik konumlandırma: Tüm elemanlarınızı 4: 3'e yerleştirin ve geniş ekranda çalışırken onları dengeleyin. Artıları: basit, açık bir düzen mantığı / koordinatları. Eksileri: Kullanıcı arayüzü kontrollerinizin solunda ve sağında görsel ölü boşluk bırakıyor, burada 2B dünyayı arka planda görüyorsunuz, ancak kullanıcı arayüzü yok.

Oyununuz için en uygun hangisi? Canabalt'ı (yani yatay hıza bağlı bir oyun) yapıyorsanız, daha dar yönlerde siyah çubuklarla (# 3) geniş bir en boy oranı, yanal hareketi vurgulamak için ideal olacaktır. Öte yandan, Super Smash Brothers gibi daha hava oyunlarınız varsa, uzun boylu bir ekran (# 2 veya # 4) en iyisidir. Kararımı oyun için en iyi olan şeylere dayandırırdım.

Diğer cevaplayıcılarla, bir ekranda görünebilecek, diğerinde görünmeyebilecek unsurlara dikkat edilmesi gerektiği konusunda hemfikirim.

Castle Crashers biraz # 2 ve biraz da # 3 kullanıyor gibi görünüyor - 4: 3 ekranda siyah çubuklar ve ayrıca biraz daha küçük görünen bir alan alıyorsunuz - ancak her zaman kenarlarında "güvenli bir alana" sahip olmalısınız Zaten hayati bir şey atmadığınız (kenarları kırpan CRT TV'ler gibi ekranlar için)

Başka bir seçenek var. Bir ara oran için çerçeve oluşturabilir ve her iki normal çözünürlükte hem kırpma hem de genişletme (veya kenarlaştırma) yapabilirsiniz.

TV filmlerinin bu şekilde çerçevelenmiş olduğuna inanıyorum, geniş ekran iyi görünüyor (herkes sahnenin ortasında değil), oysa ki 4: 3 için kırpma yapmak çok sert değil ve minimum kaydırma var.

İşte mobil cihazlarda birden fazla ekran boyutunu kullanma hakkında bir blog yazısı ve burada ikinci bölümde libgdx kullanarak bu yaklaşımın Java'da nasıl kodlandığı . Bu biraz Andrew'un cevabı gibi ama başka birine yardımcı olabilir.

Blog yazısı üç ana yaklaşımı kapsar:

1. Üstte veya yanlarda siyah çubuklarla yaşayın.
2. Sanal bir görünüm penceresi kullanın.
3. Bir web sayfası flexbox düzeninde bulacağınız gibi, kayan elemanları kullanın.

No 1 oldukça açıklayıcıdır.

Hayır göstermek için. 2, üç farklı en boy oranına sahip üç farklı cihazı desteklemek istediğinizi varsayalım. Görüntüyü bir görüntü düzenleyicide açın. İlk cihaz için, en büyük dikdörtgeni, görüntünüzün içine sığacak en boy oranına çizin. İkinci cihaz ve üçüncü cihaz için aynısını yapın. Kullanılabilir alanınız veya sanal görünüm alanı, bu üçgenin üçünün kesiştiği yerdir. Bu görünüm çerçevesinin dışında hiçbir şeyin görünür olduğu garanti edilemez.

No. 3, ekranlara flexbox veya float kullanarak bir web sayfasına nasıl yerleştirdiğinize benzer şekilde nesnelerin yerleştirilmesini içerir. Örneğin, duraklatma düğmesini yukarıdan 5 piksel ve sağdan 5 piksel yerleştirirsiniz. Cihazın boy oranı ne olursa olsun, duraklatma düğmesi her zaman sağ üst köşede olacaktır.