Bagaimana Anda menangani rasio aspek yang berbeda dalam platformer 2d?

Dahulu, 4: 3 adalah satu-satunya rasio apect yang Anda temukan di PC. Saat ini yang paling umum adalah 16:10, tetapi kebanyakan monitor baru (terutama laptop) adalah 16: 9

Saya sedang menulis platformer 2D, dan saya tidak bisa memutuskan bagaimana saya harus menangani semua rasio yang berbeda.

Berikut ini beberapa ide:

1. 4: 3 mendapatkan lebih banyak konten, layar lebar dipotong di bagian atas dan bawah
2. 16: 9 mendapatkan lebih banyak konten, yang lain terpotong kiri dan kanan
3. Permainan ini dalam 16: 9 dengan bar horisontal hitam untuk AR lainnya
4. Permainan ini dalam 4: 3 dengan bar vertikal hitam untuk AR lainnya

Jika Anda tidak memiliki alasan kuat untuk membuat gim Anda "luas" (dalam hal ini gunakan pendekatan 3) atau sempit (dalam hal ini gunakan pendekatan 4), gunakan kombinasi 1 dan 2 (atau mungkin 3 dan 4 jika Anda ingin sembunyikan sesuatu di luar layar).

Pilih rasio aspek kompromi (16:10 adalah yang baik, atau bahkan 16:11). Jika pengguna pada 16: 9 memberi mereka lebih banyak konten ke samping, dan jika mereka pada 4: 3 memberi mereka lebih banyak konten di bagian atas dan bawah.

Dalam hal apa pun - saya merasa terbaik untuk mengimplementasikannya dengan sesuatu seperti ini di kelas kamera Anda:

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

Pada titik mana Anda bisa bereksperimen dengan ukuran dunia nominal yang berbeda (yaitu: ukuran kamera dalam satuan dunia) dan cukup memilih yang terbaik.

Nah, sebagai sedikit saran dasar, pada PC saya akan mengatakan "jangan menganggap pengguna Anda ingin menjalankan layar penuh". Dan dalam mode berjendela, pilih rasio ideal Anda dan gunakan saja secara langsung.

Pengguna yang saya pikir secara umum menerima bilah hitam ketika disajikan dengan konten layar penuh. Jadi strategi 3 dan 4 dapat diterima, jika tidak ideal. Mereka memiliki keuntungan bahwa Anda selalu tahu berapa banyak konten yang Anda render: yaitu tidak ada bug yang hanya terjadi saat berjalan di layar lebar.

Jika Anda mencoba menjadi adaptif, dan mendeteksi rasio pengguna melalui resolusi layar dan menampilkan konten sebanyak mungkin, maka Anda harus mempertimbangkan konten prioritas tinggi dan rendah secara berbeda. Konten prioritas tinggi adalah hal-hal yang benar-benar harus dilihat oleh pengguna di layar, jika tidak di layar, game gagal. Jadi ini adalah hal-hal seperti elemen HUD dan UI, dan avatar pemain dan apa pun yang mereka berinteraksi. Konten berprioritas rendah adalah hal-hal yang jika itu di layar maka itu bagus, tetapi jika itu offscreen itu bukan masalah besar. Contoh: Gambar latar dan hal-hal yang cukup jauh dari avatar.

Dengan asumsi Anda memiliki UI / HUD yang ditumpangkan di atas dunia 2D 'fisik', maka ini cukup mudah. Item berprioritas rendah mudah, Anda hanya perlu memastikan bahwa viewport 4: 3 berpusat pada hal-hal yang menarik, kemudian menggambar barang-barang dengan prioritas rendah sebanyak yang Anda bisa ke kiri atau kanan. Hal-hal prioritas tinggi di dunia 2D (mis. Karakter Anda, musuh yang diperangi karakter Anda secara langsung) harus selalu disimpan dalam viewport 4: 3. Yaitu tidak memiliki kode permainan Anda memperbesar kamera untuk mengambil keuntungan dari real estat layar tambahan, karena Anda akan memiliki kode permainan bertindak berbeda di layar lebar vs tidak. Buatlah kode permainan menganggap bahwa dunia sedang dirender dalam 4: 3, dan biarkan kode rendering Anda menyadari bahwa sebenarnya ada lebih dari itu yang terlihat.

Meletakkan elemen UI / HUD dapat didekati dengan satu dari dua cara:

1. Penentuan posisi dinamis: Tetapkan semua elemen Anda relatif terhadap tepi layar (mis. Tidak semua relatif terhadap 0,0). Bergantung pada rasio aspek Anda, elemen akan lebih dekat atau lebih jauh dari pusat layar. Pro: Memungkinkan Anda untuk menghubungkan berbagai hal ke sudut-sudut dan membuatnya 'hanya berfungsi'. Cons: Sulit untuk membuat tata letak bekerja dengan baik di tengah, dan risiko elemen tumpang tindih
2. Penentuan posisi statis konservatif: Letakkan semua elemen Anda dalam 4: 3, dan cukup imbang ketika berjalan di layar lebar. Kelebihan: logika tata letak / koordinat sederhana. Cons: meninggalkan ruang mati visual di kiri dan kanan kontrol UI Anda, di mana Anda akan melihat dunia 2D di latar belakang tetapi tidak ada UI.

Mana yang paling tepat untuk gim Anda? Jika Anda membuat Canabalt (yaitu gim yang bergantung pada kecepatan horizontal), rasio aspek lebar dengan bilah hitam (# 3) pada aspek yang lebih sempit akan ideal untuk menyoroti gerakan lateral. Di sisi lain, jika Anda memiliki permainan yang lebih aerial seperti Super Smash Brothers, layar yang lebih tinggi (# 2 atau # 4) akan menjadi yang terbaik. Saya akan mendasarkan keputusan saya pada apa yang paling cocok untuk permainan ini.

Saya setuju dengan responden lain bahwa kehati-hatian harus dilakukan berkaitan dengan elemen yang mungkin terlihat pada satu layar tetapi tidak pada yang lain.

Castle Crashers tampaknya menggunakan sedikit # 2 dan sedikit # 3 - Anda mendapatkan bilah hitam pada layar 4: 3, dan juga area yang terlihat sedikit lebih kecil - tetapi Anda harus selalu memiliki "area aman" di tepinya di mana Anda tidak meletakkan apa pun yang penting (untuk layar seperti CRT TV yang memotong tepi)

Ada opsi lain. Anda dapat membingkai untuk rasio menengah, dan melakukan pemangkasan dan pengembangan (atau berbatasan) pada kedua resolusi normal.

Saya percaya pembuatan film TV dibingkai dengan cara ini, sehingga layar lebar terlihat ok (semua orang tidak berkerumun di tengah-tengah adegan), sedangkan memotong untuk 4: 3 tidak begitu drastis dan ada sedikit panning.

Berikut adalah posting blog tentang penanganan beberapa ukuran layar pada perangkat seluler, dan di sini bagian kedua cara pendekatan ini dikodekan di Jawa menggunakan libgdx . Ini sedikit mirip dengan jawaban Andrew tetapi dapat membantu orang lain.

Posting blog mencakup tiga pendekatan utama:

1. Hidup dengan bar hitam di atas atau di samping.
2. Gunakan viewport virtual.
3. Gunakan elemen mengambang, seperti yang akan Anda temukan di tata letak flexbox halaman web.

No. 1 cukup jelas.

Untuk menggambarkan no. 2, misalkan Anda ingin mendukung tiga perangkat yang berbeda dengan tiga rasio aspek yang berbeda. Buka gambar dalam editor gambar. Untuk perangkat pertama, gambar persegi panjang terbesar pada rasio aspek perangkat yang sesuai dengan gambar Anda. Lakukan hal yang sama untuk perangkat kedua dan perangkat ketiga. Area Anda yang dapat digunakan, atau viewport virtual, adalah persimpangan dari ketiga persegi panjang itu. Apa pun di luar viewport itu tidak dapat dijamin terlihat.

No. 3 melibatkan penempatan objek pada layar yang serupa dengan cara Anda menempatkan elemen pada halaman web menggunakan flexbox atau float. Misalnya, Anda akan menempatkan tombol jeda 5 piksel dari atas dan 5 piksel dari kanan. Apa pun rasio aspek perangkatnya, tombol pause akan selalu berada di sudut kanan atas.