Saya mendapat banyak jawaban untuk pertanyaan ini, tetapi semuanya generik dan umumnya tidak terlalu berguna. Tak satu pun dari tutorial berbicara tentang rasio aspek dan berurusan dengan perangkat mobile dan ada banyak cara untuk melakukannya, semua tampaknya punya gotcha dan kekurangan.
Saya benar-benar ingin tahu game apa yang berhasil digunakan untuk menangani rasio aspek berbeda di iOS dan Android tanpa membuat miliaran aset dengan ukuran berbeda.
Saya benar-benar berbicara mobile, bukan desktop, khususnya dengan Unity dan saya tidak peduli dengan UI, saya hanya peduli dengan kanvas gameplay.
Masalah yang ada dalam pikiran saya adalah ketika ada hal-hal penting yang harus ada di tempat-tempat tertentu dan tidak dapat jatuh dari layar. Menggunakan bilah hitam di bagian atas atau bawah tidak dapat diterima hari ini.
sumber
Jawaban:
Apa yang Anda inginkan adalah membatasi viewport kamera pada potret atau lanskap (tergantung pada kebutuhan Anda), dengan menghitung
camera.orthographicSize
properti, sehingga Anda dapat membangun adegan 2d Anda terlepas dari rasio aspek dan resolusi:Jika Anda memerlukan info lebih lanjut tentang ini, silakan bertanya dan saya akan membalas. ;) Salam dan tepuk tangan.
PEMBARUAN: Gunakan skrip penahan objek Eliot Lash bersamaan dengan yang ini untuk menempatkan objek pada posisi kunci di layar jika diperlukan (relatif terhadap sudut / batas layar). Jika ya, ubah nama "CameraFit" menjadi "ViewportHandler".
Pratinjau mensimulasikan berbagai layar rasio aspek:
sumber
GetComponent<Camera>().orthographicSize = UnitSize / 2f;
untuk potrait / mendefinisikan satuan ketinggianAnda biasanya tidak memerlukan ukuran aset yang berbeda - tekstur dan sprite yang diimpor dengan peta mip yang dibuat secara otomatis akan terlihat bagus ketika ditampilkan pada ukuran apa pun yang kurang dari atau sama dengan ukuran piksel asli gambar.
Tata letak adegan adalah tantangannya. Salah satu pendekatan yang baik adalah sebagai berikut (dan FYI saya menggunakan kamera 3D melihat konten 2D yang diposisikan pada z = 0):
Dalam bentuk kode:
sumber
Jika Anda menggunakan bilah-bilah itu sebenarnya cukup sederhana untuk diterapkan (saya memposting ini meskipun OP menyatakan pendapatnya bahwa itu tidak dapat diterima karena memiliki manfaat tidak terlalu buruk di ponsel dan ini adalah solusi sederhana yang tidak memerlukan kode apa pun)
Camera.orthographicSize
adalah variabel dalam kamera orto (yang digunakan sebagian besar game 2D) yang sesuai dengan jumlah unit game yang diukur secara vertikal di layar ( dibagi 2 ) ( sumber ). Jadi, pilih rasio aspek yang sesuai dengan sebagian besar perangkat (saya memilih 16: 9 karena sebagian besar layar yang saya teliti adalah 16: 9, 16:10, 3: 2) dan tambahkan topeng yang menutupi itu pada rasio.Contoh :
Dalam permainan saya (tidak tercantum di sini karena ini bukan iklan, dapat meminta komentar jika diinginkan) kami menggunakan mode potret. Untuk melakukan 16: 9 sederhana yang bagus, saya membuat kamera Ortho saya pada ukuran 16. Ini berarti kamera akan mengadaptasi 32 unit permainan tinggi (y: 16 hingga -16 dalam kasus saya) ke dalam vertikal layar perangkat.
Saya kemudian menempatkan topeng hitam dengan permainan antara -9 dan +9. Voila, layar game terlihat sama persis di semua perangkat dan sedikit lebih kurus pada perangkat yang sedikit lebih lebar. Saya sama sekali tidak punya umpan balik negatif tentang topeng. Untuk melakukan landscape cukup membalikkan nilai-nilai itu dan kemudian Anda akan membuat kamera ukuran 9. Ubah nilai agar sesuai dengan apa pun yang Anda putuskan adalah skala unit game Anda.
Satu-satunya tempat kami mengamati bilah hitam untuk muncul secara signifikan adalah di iPad pada 3: 2. Meski begitu, saya tidak punya keluhan.
sumber
Saya melakukan ini dalam permainan yang saat ini saya kerjakan. Saya memiliki gambar latar belakang yaitu 1140x720. Bit yang paling penting (yang tidak boleh dipotong) terdapat di area tengah 960x640. Saya menjalankan kode ini pada fungsi awal kamera saya:
Saya juga menentukan ukuran selain ukuran font untuk tombol dan semacamnya. Ini bekerja dengan baik pada setiap aspek rasio yang saya uji. Sudah lama sejak saya mengaturnya, jadi saya mungkin kehilangan langkah. Beri tahu saya jika itu tidak berfungsi seperti yang diharapkan dan saya akan melihat apakah saya meninggalkan sesuatu.
sumber
Jawaban dan kode Marcel sangat bagus dan membantu saya memahami apa yang sedang terjadi. Itu jawaban yang pasti. Hanya berpikir seseorang mungkin juga menemukan berguna apa yang akhirnya saya lakukan untuk kasus spesifik saya: karena saya ingin sesuatu yang benar-benar sangat sederhana, satu sprite selalu ada di layar, saya membuat beberapa baris ini:
Saya menambahkan ini ke kamera dan menyeret sprite saya (ini adalah latar belakang saya) ke satu-satunya properti skrip. Jika Anda tidak menginginkan bilah hitam (horizontal atau vertikal), Anda dapat menempatkan latar belakang yang lebih besar di belakang ...
sumber
Ada beberapa cara untuk mengatasi masalah ini, dan belum ada solusi yang sempurna (setidaknya saya belum menemukannya) dan jenis solusi yang Anda gunakan akan sangat bergantung pada jenis permainan yang Anda gunakan. mengembangkan.
Apa pun yang Anda lakukan, Anda harus memulainya dengan memilih resolusi serendah mungkin yang ingin Anda dukung dan membangun sprite Anda ke resolusi itu. Jadi, jika Anda tertarik mengembangkan iOS, menurut http://www.iosres.com/ resolusi perangkat iOS terendah adalah 480x320.
Dari sana, Anda dapat mulai meningkatkan sprite untuk memenuhi resolusi yang lebih tinggi. Peringatan untuk ini adalah bahwa Anda pada akhirnya akan mulai melihat sprite mulai mengaburkan semakin jauh skala Anda, dalam hal ini Anda dapat beralih ke set sprite lain yang dibuat untuk resolusi yang lebih tinggi.
Atau, Anda dapat mengabaikan penskalaan sepenuhnya, dan hanya memutuskan untuk menampilkan lebih banyak layar game untuk resolusi yang lebih tinggi (saya percaya ini adalah bagaimana Terraria melakukannya, misalnya). Namun, untuk banyak game, ini tidak tepat; game kompetitif misalnya.
Apakah itu? Banyak game yang ingin memaksakan rasio aspek 4: 3 melakukan ini. Karena Anda menggunakan Unity, Anda dapat menggunakan skrip AspectRatioEnforcer untuk membantu ini.
sumber
Ada beberapa cara untuk menangani masalah ini, itu tergantung pada gim Anda dan apa yang akan bekerja paling baik. Misalnya, di game kami Tyrant Unleashed, kami hanya membuat peta lebar dengan detail yang tidak penting di sisinya, sehingga tidak apa-apa untuk memotong sisi pada perangkat yang lebih sempit. Namun permainan lain mungkin lebih baik dengan pendekatan di mana Anda benar-benar menggeser tombol atau sesuatu agar sesuai dengan layar lebih baik.
(juga bagian dari pendekatan kami juga menjaga ketinggian yang konsisten pada semua perangkat, hanya memvariasikan lebar. Ini tentu membuat hidup lebih mudah bagi kami, tapi sekali lagi ini mungkin atau mungkin tidak ada gunanya untuk permainan spesifik Anda. Tidak masalah dalam gaya seni kami jika gambar diskalakan sedikit pada layar yang berbeda, sedangkan ini mungkin penting untuk sesuatu seperti seni pixel. Pada dasarnya, ini adalah pendekatan "biarkan Unity menanganinya")
sumber
Saya menggunakan skrip berikut yang menambahkan
targetAspect
parameter ke kamera dan menyesuaikannyaorthographicSize
sehubungan dengan rasio layar (lebih detail dalam posting blog ini ):sumber
Metode saya sebagian besar mirip dengan solusi yang diberikan oleh orang lain :) Saya akan mencoba menjelaskan secara rinci pendekatan yang saya ambil untuk membuat game independen dari ukuran layar.
Orientasi layar
Bergantung pada orientasi layar (Lanskap atau Potret), Anda perlu mempertimbangkan apakah kamera akan menskala dengan ketinggian tetap atau lebar tetap. Sebagian besar saya memilih lebar tetap untuk game berorientasi lanskap dan tinggi tetap untuk game berorientasi potret.
Penskalaan Kamera
Seperti yang dibahas ini dapat berupa ketinggian tetap atau lebar tetap.
Fixed Height : Area vertikal game akan selalu pas dengan ketinggian layar. Dan saat rasio aspek layar berubah, akan ada ruang tambahan yang ditambahkan ke kiri dan kanan layar. Untuk menerapkan ini Anda tidak perlu kode apa pun, itu adalah perilaku default kamera persatuan.
Fixed Width : Area horizontal game akan selalu pas dengan lebar layar. Dan ruang ekstra akan ditambahkan ke atas dan bawah saat rasio aspek layar berubah. Untuk mengimplementasikan ini, Anda perlu menulis sepotong kecil kode. Kemudian pastikan Anda menghapus fungsi pembaruan bentuk kode, dan tempatkan di tempat terjaga.
Di editor Anda dapat mengubah targetWidth untuk menentukan area ruang dunia yang ingin Anda tampilkan. Kode ini dijelaskan dalam video berikut bersama dengan banyak praktik lainnya untuk game 2D :)
Unite 2014 - Praktik Terbaik 2D Dalam Persatuan
Rasio Aspek
Mengikuti rasio aspek yang terdaftar dari terluas ke tersempit, mencakup hampir semua ukuran layar untuk Android dan iOS
Saya biasanya mengatur semua rasio aspek ini dalam urutan yang diberikan di bawah jendela permainan, karena berguna saat menguji ukuran layar yang berbeda :)
Area yang Dapat Terjangkau
Ini adalah area yang ditambahkan ke layar ke samping atau atas / bawah tergantung pada skala kamera yang telah Anda pilih.
Untuk ketinggian tetap, semua elemen permainan sebaiknya sesuai dengan rasio 16: 9 yang merupakan yang tersempit. Dan latar belakang harus diperluas hingga mencakup rasio 5: 4. Yang memastikan bahwa gim Anda tidak pernah memiliki strip hitam ke samping.
Untuk lebar tetap hampir sama tetapi di sini elemen harus sesuai dengan rasio 5: 4 dan BG harus diperpanjang hingga 16: 9.
Batas
Kadang-kadang kita tidak bisa menggunakan pendekatan area yang dapat dibuang karena kita perlu memanfaatkan seluruh layar yang tersedia untuk bermain game.
Misalnya, perhatikan permainan potret dengan ketinggian tetap, menangkap koin yang jatuh dari langit. Dalam hal ini kita perlu memberi pemain kemampuan untuk bergerak secara horizontal di atas lebar layar yang tersedia.
Karenanya kita membutuhkan batasan kamera dalam hal koordinat dunia untuk mengetahui di mana tepatnya kiri, kanan, atas atau bawah klip kamera di posisi dunia.
Kami juga dapat menggunakan batas ini untuk menambatkan elemen permainan atau UI ke sisi kamera yang diinginkan.
Menggunakan Camera.ViewportToWorldPoint kita bisa mendapatkan bounds.Viewport space dinormalisasi dan relatif terhadap kamera. Kiri bawah kamera adalah (0,0); kanan atas adalah (1,1). Posisi z berada di unit dunia dari kamera. Untuk 2D / ortografis, z tidak masalah.
UI
Untuk UI kami dapat menerapkan konsep yang sama yang kami gunakan untuk elemen game. Setelah pengenalan Unity5 UI dan ketersediaan plugin seperti NGUI ini tidak akan menjadi masalah :)
sumber
Saya membuat Unity Asset 'Resolution Magic 2D' untuk menyelesaikan masalah ini (iklan: Anda bisa mendapatkannya dari Unity Asset Store, atau lihat detail selengkapnya di grogansoft.com).
Cara saya mengatasi masalah adalah sebagai berikut ...
Tentukan area layar yang harus selalu terlihat terlepas dari aspek rasio / resolusi, dan gunakan transformasi persegi panjang sederhana untuk 'stencil out' wilayah ini. Ini adalah bentuk layar ideal Anda. Dengan menggunakan algoritma sederhana, saya kemudian memperbesar kamera sampai wilayah yang diblokir oleh persegi panjang sebesar mungkin sementara masih 100% terlihat oleh kamera.
Maka area permainan utama Anda selalu mengambil layar sebanyak mungkin. Dan selama ada cukup konten 'ekstra' (misalnya latar belakang Anda) di luar area persegi panjang yang Anda tetapkan sebelumnya, pemain yang layarnya tidak memiliki rasio aspek yang sama dengan persegi panjang 'ideal' Anda akan melihat konten tambahan di mana bar hitam seharusnya pergi.
Aset saya juga mencakup beberapa logika untuk menempatkan UI, tetapi itu sebagian besar sudah usang karena sistem UI baru Unity.
Aset saya menyediakan ini di luar kotak dengan pengaturan minimal, dan berfungsi dengan sangat baik di semua platform.
Jika Anda menggunakan teknik ini (atau aset saya), pastikan Anda mendesain game Anda agar memiliki ruang 'opsional' untuk mengakomodasi layar yang lebih lebar atau lebih tinggi dari ideal Anda (untuk menghindari bilah hitam).
Saya pribadi tidak membuat game 3D, jadi saya tidak tahu apakah ini akan berhasil dalam 3D (atau bahkan jika itu diperlukan).
Sangat sulit untuk dijelaskan tanpa gambar, jadi silakan kunjungi situs web saya ( Resolution Magic 2D )
sumber
Solusi terbaik bagi saya adalah dengan menggunakan teorema garis berpotongan sehingga tidak ada potongan di sisi maupun distorsi dari tampilan permainan. Itu berarti bahwa Anda harus mundur atau maju tergantung pada rasio aspek yang berbeda.
sumber
Saya membuat ekstensi AssetStore yang memungkinkan untuk beralih aspek yang lebih mudah disebut AspectSwitcher . Ini menyediakan sistem untuk memungkinkan Anda dengan mudah menentukan properti yang berbeda untuk aspek yang berbeda. Biasanya ada dua metode yang kebanyakan orang gunakan untuk berganti aspek. Pertama adalah menyediakan objek permainan yang berbeda untuk setiap aspek. Yang lainnya adalah membuat kode khusus yang mengubah properti dari satu objek game berdasarkan aspek saat ini. Itu umumnya membutuhkan banyak pengkodean khusus. Perpanjangan saya berusaha untuk meringankan banyak rasa sakit itu.
sumber