Sistem koordinat apa yang digunakan untuk menangani UI 2D?

Menyusul dari pertanyaan rasio aspek , saya tertarik untuk mendengar apa yang orang lain gunakan ketika bekerja pada sistem UI 2D (kemungkinan besar solusi buatan sendiri). Secara khusus, bagaimana Anda menangani sistem koordinat. Menurut saya ada tiga pilihan:

1. Koordinat dengan kode keras (mis .: 0 -> 720, 0 -> 576)
2. Koordinat yang dinormalisasi (0,0 -> 1,0, 0,0 -> 1,0), dipetakan ke dalam koordinat nyata sebelum rendering
3. Koordinat virtual (mis: 0 -> 1600, 0 -> 1000), dipetakan ke dalam koordinat nyata sebelum dirender

Hard-coded jelas hanya berguna jika Anda berada di platform tetap dan tahu apa koordinat ruang layar Anda di muka, atau jika Anda siap untuk membuat layout layar untuk setiap set dimensi layar yang mungkin.

Koordinat yang dinormalisasi bagus, tetapi menderita ambiguitas ketika rasio aspek layar tidak diperbaiki (mis. 0,75 peta ke koordinat fisik yang berbeda saat berjalan di layar lebar daripada di 4: 3). Juga, bagi penulis, itu benar-benar berlawanan dengan intuisi untuk menyatakan elemen UI menjadi (0,2 x 0,2), hanya untuk menemukan itu tidak benar-benar persegi ketika dirender.

Koordinat virtual tidak ambigu, tetapi mengalami masalah yang sama dengan koordinat yang dinormalisasi pada tahap pembuatan ulang: perbedaan desimal kecil dapat mengakibatkan kesalahan off-by-one yang berarti bahwa elemen UI yang seharusnya ubin sekarang memiliki celah di antara mereka.

Demikian pula, ketika Anda memiliki layar resolusi tetap, baik koordinat dinormalisasi maupun virtual berarti sangat sulit untuk menjamin pemetaan 1: 1 antara piksel yang dibuat dengan baik oleh artis Anda di gambar UI, dan piksel di layar, yang berarti Anda menanggung risiko artefak penskalaan jahat (dengan anggapan Anda merender sebagai paha depan bertekstur di layar).

Kami telah menggunakan pendekatan koordinasi virtual, khususnya untuk menghindari ambiguitas tentang rasio aspek. Jadi ketika merender ke layar 16:10, ruang UI adalah (0,0) -> (1600,1000), tetapi ketika merender ke 4: 3, ruang UI yang dapat digunakan sebenarnya (133,0) -> (1467 , 0).

Apakah ada solusi yang lebih baik yang tidak saya sadari? Apakah ada strategi yang baik untuk meminimalkan masalah yang dimiliki ketiga pendekatan ini?

Saya pikir saya setuju bahwa koordinat yang dinormalkan tidak benar-benar memetakan dengan baik untuk hal-hal UI.

Apa yang biasanya saya lakukan untuk tata letak 2D, pada dasarnya adalah ruang koordinat "virtual" Anda, tetapi saya memilih ruang yang memetakan 1: 1 dengan resolusi target pilihan saya (1280x720, misalnya). Itu tidak diperbaiki, tetapi intuitif untuk berurusan dengan dan saya tahu bahwa dalam 90% kasus itu akan terlihat tepat. Jelas sangat penting untuk tidak berpuas diri, dan untuk benar-benar memeriksa resolusi yang berbeda sering.

Untuk kerenyahan saat memetakan ulang resolusi, saya akan meminjam beberapa tips dari rendering font, dan memberikan informasi petunjuk. Jadi pastikan bahwa hal-hal yang perlu kontinu ditandai dengan beberapa cara, sementara juga melakukan pembulatan ke piksel yang tepat di mana penyelarasan yang tajam diperlukan.

Mungkin juga mempertimbangkan untuk menjadikan hal-hal lebih relatif. Jadi, alih-alih semuanya "posisi objek 1 pada absolut X, Y", Anda dapat menentukan "posisi kiri bawah objek 2 pada beberapa offset dari kanan bawah objek 1". Lebih mudah untuk mengubah skala dan / atau memindahkan berbagai hal, tanpa kehilangan hubungan penting.

Sistem koordinat CEGUI tampaknya dipikirkan dengan sangat baik. Ini bersatu sistem koordinat campuran posisi mutlak dengan posisi relatif. Anda dapat menentukan lokasi seperti:

• di tengah layar
  UDim(0.5,0)
• lima piksel di sebelah kiri tepi kanan
  UDim(1.0,-5)
• dua widget di tengah tetapi dipisahkan oleh 10 piksel
  HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

Jika ragu, mengapa tidak menggunakan model kotak CSS, atau penyederhanaannya?

Anda dapat menentukan posisi dalam persentase atau piksel. Anda mungkin memposisikan kontainer dengan persentase tetapi menempatkan item di dalamnya dengan piksel, misalnya.

Saya suka menggunakan koordinat virtual, tetapi didasarkan pada resolusi target umum (lebih disukai salah satu resolusi tertinggi yang Anda harapkan untuk dijalankan di game.

Saat ini, pilihan yang baik mungkin 1920x1080.

Semua karya seni dan tiruan layar dapat dibuat pada resolusi itu, dan membuatnya mudah untuk mengukur posisi / jarak dalam piksel.

Jika berjalan pada rasio aspek yang berbeda dengan koordinat virtual, Anda dapat memilih bagaimana menyesuaikannya dengan layar (letterboxing, memotong sisi, atau sedikit dari keduanya)

Saat coding, saya menemukan 'berpikir dalam piksel' jauh lebih mudah daripada berpikir dalam koordinat dinormalisasi! - Saya ingin teks setinggi '50 (virtual) piksel 'daripada' 0,0463 unit '

Ini benar-benar tergantung pada jenis GUI yang Anda miliki, tetapi seringkali game memiliki hal-hal yang berlabuh di sepanjang tepi layar dan di sudut, dan kemudian mereka mungkin memiliki kotak di tengah layar untuk dialog modal atau sesuatu.

Jika itu yang terjadi untuk Anda, maka mungkin saya sarankan menggunakan skema di mana Anda menentukan jangkar dan offset (x, y)? Ini akan mirip dengan BorderLayout Java (tapi mungkin dengan empat sudut, empat middle edge, dan satu tengah layar). Jadi misalnya, Anda dapat menentukan offset (0,0) dari sudut kiri atas; maka elemen tersebut akan berlabuh persis di sudut layar. Dan apa pun resolusi, rasio aspek, dll., Anda akan memiliki indikator kesehatan di sudut layar. Tetapi jika Anda melabuhkan elemen ke sudut kanan atas, elemen tersebut secara alami akan berlabuh relatif terhadap titik kanan atas (alih-alih kiri atas), jadi sekali lagi itu akan berlabuh secara otomatis ke sudut layar tidak peduli resolusi.

Saya pasti merekomendasikan terhadap koordinat 0,0-1.0 dinormalisasi; ini dapat bervariasi berdasarkan akurasi floating-point. GUI harus dipetakan ke piksel, kecuali jika Anda memiliki GUI 3D.

Banyak hal tergantung pada jenis permainan dan situasinya. Untuk prototipe cepat dan kotor, saya lebih suka merencanakan UI pada kertas grafik, menuliskan daftar koordinat numerik untuk ukuran jendela tetap, dan meng-hardcode semuanya - lebih mudah dan lebih cepat bagi saya. Tetapi untuk proyek "nyata" di mana Anda ingin ukuran jendela resizable atau resolusi layar alternatif, itu jelas tidak ideal, dan beberapa jenis solusi yang memungkinkan untuk penskalaan di kedua arah akan lebih baik.