2D kullanıcı arayüzünü işlemek için hangi koordinat sistemi kullanılır?


20

En- boy oranı sorusundan sonra , 2D UI sistemleri (büyük olasılıkla kendi evde üretilen çözümler) üzerinde çalışırken diğer insanların ne kullandığını duymakla ilgileniyorum. Özellikle, koordinat sistemlerini nasıl ele alırsınız? Bana göre üç seçenek var:

  1. Sabit kodlu koordinatlar (örn: 0 -> 720, 0 -> 576)
  2. Normalize edilmiş koordinatlar (0.0 -> 1.0, 0.0 -> 1.0), oluşturulmadan önce gerçek koordinatlara eşlenir
  3. Oluşturmadan önce gerçek koordinatlara eşlenen sanal koordinatlar (örneğin: 0 -> 1600, 0 -> 1000)

Sabit kodlu, yalnızca sabit bir platformdaysanız ve ekran alanı koordinatlarınızın önceden ne olduğunu biliyorsanız veya olası her ekran boyutu kümesi için ekran düzenleri hazırlamaya hazırsanız kesinlikle yararlıdır.

Normalize edilmiş koordinatlar güzeldir, ancak ekranın en boy oranı sabit olmadığında belirsizliğe maruz kalır (örn. Geniş ekranda çalışırken 4: 3'te olduğundan farklı bir fiziksel koordinatla 0,75 eşlenir). Ayrıca, yazarlar için, bir UI öğesini (0.2 x 0.2) olarak ilan etmek gerçekten mantıksızdır, sadece işlendiğinde gerçekten kare olmadığını bulmak için.

Sanal koordinatlar açıktır, ancak yeniden eşleme aşamasında normalleştirilmiş koordinatlarla aynı sorunlardan muzdariptir: küçük bir ondalık tutarsızlık, tek tek hatalara neden olabilir;

Benzer şekilde, sabit çözünürlüklü bir ekranınız olduğunda, hem normalleştirilmiş hem de sanal koordinatlar, sanatçının sanatçının UI görüntüsündeki ince hazırlanmış pikselleri ve ekrandaki pikselleri arasında 1: 1 eşlemeyi garanti etmenin çok zor olduğu anlamına gelir. kötü ölçekleme eserleri (ekranda dokulu dörtlü olarak işlediğiniz varsayılarak).

Özellikle en-boy oranları konusundaki belirsizliği önlemek için sanal koordinat yaklaşımına geçtik. Dolayısıyla, bir 16:10 ekrana dönüştürürken UI alanı (0,0) -> (1600,1000), ancak 4: 3'e dönüştürürken kullanılabilir UI alanı aslında (133,0) -> (1467) , 0).

Farkında olmadığım daha iyi çözümler var mı? Bu 3 yaklaşımın sorunlarını en aza indirmek için iyi stratejiler var mı?

Yanıtlar:


5

Bence normalleştirilmiş koordinatların kullanıcı arayüzleriyle gerçekten eşleşmediğine katılıyorum.

2B düzenler için tipik olarak yaptığım temelde sizin "sanal" koordinat alanınızdır, ancak tercih edilen hedef çözünürlüğümle (örneğin 1280x720) 1: 1'i eşleyen bir alan seçerim. Sabit değil, ama başa çıkmak sezgisel ve vakaların% 90'ında doğru görüneceğini biliyorum. Açıkçası kayıtsız kalmamak ve farklı kararları sık sık kontrol etmek önemlidir .

Çözünürlükleri yeniden eşlerken netlik için yazı tipi oluşturma işleminden bazı ipuçları ödünç alıp ipucu bilgileri sağlarım. Bu nedenle, sürekli olması gereken şeylerin bir şekilde etiketlendiğinden emin olun ve aynı zamanda net hizalamanın gerekli olduğu tam piksellere yuvarlama yapın.

Belki de işleri daha göreli yapmayı düşünün. Bu nedenle, her şey "nesne 1'i mutlak X, Y'de konumlandır" yerine, "nesne 2'nin sol alt tarafını nesne 1'in sağ alt kısmından bazı konumda konumlandırabilirsiniz". Önemli ilişkileri kaybetmeden bir şeyleri yeniden ölçeklendirmek ve / veya taşımak daha kolaydır.


5

CEGUI koordinat sistemi gerçekten iyi düşünülmüş görünüyor. Var koordinat sistemi birleşik karışımlar, göreceli konumlandırma ile mutlak konumlandırma. Şunlar gibi konumları belirleyebilirsiniz:

  • ekranın ortasında
    UDim(0.5,0)
  • sağ kenarın solundaki beş piksel
    UDim(1.0,-5)
  • ortada iki widget, ancak 10 pikselle ayrılmış
    HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

2

Şüpheniz varsa, neden CSS kutu modeline veya basitleştirilmesine gitmiyorsunuz?

Konumları yüzde veya piksel cinsinden belirleyebilirsiniz. Yüzdeleri kapları konumlandırabilir, ancak içindeki öğeleri piksel olarak konumlandırabilirsiniz.


1

Sanal koordinatları kullanmayı seviyorum, ancak ortak bir hedef çözümüne (tercihen oyunun çalışmasını beklediğiniz en yüksek çözünürlüklerden birine) dayanıyorum.

Bugünlerde, iyi bir seçim 1920x1080 olabilir.

Tüm resimler ve ekran maketleri bu çözünürlükte oluşturulabilir ve konumların / mesafelerin piksel cinsinden ölçülmesini kolaylaştırır.

Sanal koordinatlardan farklı bir en boy oranında çalışıyorsa, ekrana nasıl sığacağını seçebilirsiniz (sinemaskop, kenarları kırpmak veya her ikisinden de biraz)

Kodlama yaparken, 'piksel olarak düşünmeyi' normalleştirilmiş koordinatlarda düşünmekten çok daha kolay buluyorum! - Metnin '0,0463 birim yüksek' yerine '50 (sanal) piksel yüksekliğinde' olmasını istiyorum


0

Tamamen ne tür bir GUI'ye sahip olduğunuza bağlıdır, ancak çoğu zaman oyunların ekranın kenarları boyunca ve köşelerde sabitlenmiş şeyleri vardır ve daha sonra modal bir diyalog veya başka bir şey için ekranın ortasında bir kutuya sahip olabilirler.

Sizin için durum buysa, bir çapa ve bir ofset (x, y) belirttiğiniz bir şema kullanmanızı önerebilir miyim? Bu, Java'nın BorderLayout'una benzer (ancak dört köşesi, dört orta kısmı ve bir ekran merkezi ile). Örneğin, sol üst köşeden (0,0) ofseti belirtebilirsiniz; öğe tam olarak ekranın köşesine sabitlenir. Ve sonra, hangi çözünürlük, en boy oranı vb. Olursa olsun, ekranın köşesinde sağlık göstergesi bulunur. Ancak daha sonra bir öğeyi sağ üst köşeye tutturursanız, öğe doğal olarak sağ üst noktasına göre (sol üst yerine) sabitlenir, bu nedenle çözünürlük ne olursa olsun ekranın köşesine otomatik olarak sabitlenir.

Kesinlikle normal 0.0-1.0 koordinatlarına karşı öneriyorum; bunlar kayan nokta doğruluğuna göre değişebilir. 3D GUI'niz yoksa GUI'lerin piksellerle eşlenmesi gerekir.


Göreceli konumlandırma ve çapaları kullanmak, her türlü UI sistemi için hemen hemen bir verili. Özellikle farklı bileşenler arasındaki ölçümlerle daha fazla ilgileniyorum. Ve bu tür bir şey için, 3D / 2D GUI ayrımı biraz puslu: özellikle rastgele boyutta görüntüler almak ve bunları UI alanınıza ölçeklendirmek / konumlandırmak için dokulu ekran alanı dörtlüleri kullanırken.
MrCranky

0

Çok şey oyunun türüne ve duruma bağlıdır. Hızlı ve kirli prototipler için, kullanıcı arayüzünü grafik kağıdında planlamayı, sabit pencere boyutu için sayısal koordinatların bir listesini yazmayı ve her şeyi sabit kodlamayı tercih ederim - benim için daha kolay ve daha hızlı. Ancak, yeniden boyutlandırılabilir pencereler veya alternatif ekran çözünürlükleri istediğiniz "ideal" bir proje için, bu ideal olmayacaktır ve her iki yönde ölçeklendirmeye izin veren bir tür çözüm daha iyi olacaktır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.