Bagaimana Anda mendekati independensi resolusi dalam konten grafis berbasis raster?

32

Gim-gim yang tidak cukup beruntung untuk dijalankan pada platform yang dikunci, seperti handheld, perlu dijalankan di berbagai format resolusi dan rasio aspek.

Dalam gim 3D, Anda mungkin memiliki HUD atau GUI menu berdasarkan grafik raster, dan dalam gim 2D Anda mungkin memiliki banyak paha depan yang merupakan wadah untuk sprite.

Jadi pertanyaan saya adalah, bagaimana Anda mendekati merancang dan mengoperasikan konten di berbagai resolusi dan rasio aspek? Mari kita asumsikan Anda memiliki karakter sprite yaitu 300x400 piksel sprite dan dikelilingi oleh level yang terbuat dari ubin. Pada resolusi / rasio aspek yang berbeda, Anda akan melihat FOV yang berbeda sama sekali. Atau jika Anda memiliki menu HUD atau GUI, Anda ingin menyimpan beberapa barang pada posisi yang sama dan ukuran yang relatif sama dengan layar. Namun, sumber grafis adalah bitmap raster, bukan vektor.

Jelas, masalah telah diatasi beberapa kali. Saya tertarik mendengar beberapa pendekatan yang berhasil untuk Anda sejauh ini. Apakah Anda menyimpan unit 'piksel' agnostik dimensi sewenang-wenang yang secara ajaib Anda ubah menjadi dimensi yang dibutuhkan melalui rumus berdasarkan resolusi dan rasio aspek atau pendekatan lain?

edit:

Jadi, kesimpulannya adalah untuk menghitung rasio aspek Anda. Kombinasi terendah dari aspek: resolusi adalah yang Anda gunakan untuk mendesain hal-hal penting. Area aman jika Anda mau. Rasio aspek yang sama, tetapi resolusi yang lebih tinggi adalah masalah penskalaan sederhana. Konten seni dirancang untuk resolusi tertinggi. Rasio aspek yang lebih besar hanya menunjukkan lebih banyak level / FOV dengan informasi yang disajikan yang tidak kritis seperti yang ada di daerah aman. Sesuatu seperti di gambar ini saya buat . teks alternatif

2d sprites gui Bingkai kunci
sumber
1
Saya tidak melihat bagaimana Anda beralih dari jawaban dalam pertanyaan ini ke kesimpulan yang Anda buat setelah " edit: ". IMO, jawaban ini tidak memadai dan Anda seharusnya tidak menerimanya. EG: Jawaban Anda yang diterima hanya berbicara tentang sepotong pertanyaan (penskalaan sprite), bukan seluruh masalah. Apa yang Anda katakan setelah " edit: " lebih berguna daripada jawaban di sini, IMO. Tapi, saya tidak benar-benar "mendapatkannya" dengan cukup baik untuk mengimplementasikannya. Sayangnya, jika saya meminta elaborasi dalam pertanyaan baru, itu akan ditandai sebagai duplikat.
Daniel Kaplan

Jawaban:

7

Jika resolusi Anda mirip satu sama lain, Anda bisa menggunakan seni yang sama di semua dari mereka dengan mungkin beberapa downscaling saat runtime untuk layar yang lebih kecil. Jika mereka berbeda lebih dari katakan faktor 2x, Anda harus membuat (atau setidaknya memiliki tweak artis) aset yang terpisah untuk resolusi yang berbeda.

Dengan 2D, resolusi memiliki pengaruh besar pada bagaimana Anda mendesain gambar. Sprite yang terlihat sangat detail dan realistis pada resolusi tinggi akan menjadi berlumpur dan tidak dapat diuraikan. Demikian juga, sprite yang bersih dan tajam pada resolusi rendah akan terlihat murah dan terlalu sederhana pada resolusi tinggi.

banyak sekali
sumber
Rasio aspek membuat saya khawatir. Sebagai contoh, ini bukan lompatan besar dari 1080p ke 720p karena aspeknya sama, kami mempelajari dengan penskalaan sederhana. Apa yang terjadi ketika Anda mengatakan 1080p vs 1680x1050. Apakah saya menunjukkan lebih banyak level, FOV yang lebih luas pada aspek yang lebih besar, semacam margin? Seperti, desain untuk aspek yang lebih luas dengan area aman tempat semua konten penting berjalan, agar tidak terpotong layar pada aspek yang lebih sempit.
Keyframe
Saya akan memperbarui pertanyaan dengan presentasi visual dari solusi ini. Sepertinya tidak ada cara lain.
Keyframe
4

Salah satu caranya adalah dengan membuat aset gambar dalam format vektorial (SVG, Illustrator, dll) dan mengubahnya menjadi gambar raster sesuai kebutuhan oleh versi permainan yang berbeda.

Matias Valdenegro
sumber
Tentu, tapi saya lupa menyebutkan bahwa itu bukan pilihan. Masalah utama adalah bahwa pembuatan konten raster dan vektor sama sekali berbeda (raster jauh lebih baik untuk artis). Salah satu opsi adalah membuat beberapa aset raster, tetapi saya sangat yakin harus ada solusi yang lebih baik. Misalnya, membuat aset untuk rasio aspek / dukungan terbesar yang didukung dan menurunkan dalam versi runtime res yang lebih rendah dengan cepat atau sesuatu seperti itu. Positioning masih menjadi masalah.
Keyframe
Ya, itu juga pilihan, jika Anda dapat menanggung masalah kualitas dan kinerja yang hilang.
Matias Valdenegro
8
Saya tidak yakin benar bahwa "raster lebih baik untuk artis". Artis grafis saya menggunakan Illustrator karena alasan-alasan ini. Ketika tiba saatnya untuk memperbarui ke resolusi 2X iPhone 4, itu masalah sederhana baginya untuk hanya mengekspor semuanya lagi. Raster mungkin lebih baik untuk seniman Photoshop yang tidak ingin melatih kembali diri mereka sebagai seniman vektor, tetapi dalam jangka panjang mereka mungkin lebih baik menjadi ahli dalam grafik berbasis vektor. Platform fisik berubah terlalu cepat untuk berpikir dalam piksel.
Chris Garrett
4

Ketika mempertahankan layar penuh pada resolusi yang berbeda, jika Anda menginginkan pixel-perfection (yaitu "Saat artis memproduksinya"), maka masalahnya adalah tidak ada cara yang sepenuhnya otomatis untuk skala sprite naik atau turun (atau untuk memutarnya) yang tidak t membutuhkan persetujuan manusia. Pada akhirnya itu karena penempatan piksel adalah hal yang subyektif. Algoritma rendering melakukan beberapa penskalaan, atau rotasi, dan harus menggunakan beberapa teknik perkiraan untuk melakukan ini, misalnya. penyaringan bilinear. Jika Anda masih ingin tepi keras pada piksel untuk memiliki bahwa "pixel kesempurnaan" (yaitu tidak menggunakan AA atau BF), maka Anda akan harus menerima bahwa skala oleh beberapa non-power-of-2 derajat akan ke menghasilkan beberapa artefak yang tidak diinginkan.

Pendekatan menarik untuk masalah serupa ditemukan di RotSprite , aplikasi / algoritma yang dirancang untuk melakukan rotasi "otomatis" sprite. Maksud saya, itu menghasilkan sejumlah hasil akhir yang mungkin diinginkan setelah pemrosesan intensif, untuk dipilih oleh operator manusia. Sprite yang dipilih sendiri akhirnya masuk ke dalam game, artinya ini adalah langkah pembuatan konten, dan bukan runtime.

Satu jawaban yang memungkinkan untuk pertanyaan "pixel agnostik dimensi arbitrer" Anda: OpenGL (yang mungkin ingin Anda gunakan jika Anda akan lintas platform) bekerja dengan cara yang sama sekali berbeda dari renderer raster perangkat lunak. Ini mempertimbangkan lebar dan tinggi layar dalam rentang floating-point 0,0-> 1,0, dan memetakan piksel sesuai pada GPU. Tentu saja ini dapat dengan sendirinya menghasilkan artefak, kecuali misalnya. BF dihidupkan untuk tekstur (yang merupakan sprite Anda di OpenGL).

Insinyur
sumber
Ini salah datar. Anda dapat menggunakan komposisi dan elemen yang berulang (alih-alih ubin) alih-alih menskalakan agar pikselnya tetap sempurna pada rasio aspek apa pun. Tentu saja jika elemen-elemen kecil pada resolusi yang lebih tinggi akan semakin kecil. jadi Anda akan membutuhkan penskalaan 2X atau aset resolusi berbeda.
adrix89