Sudah bukan rahasia lagi bahwa pengembang aplikasi mobile harus memperhitungkan berbagai display yang digunakan di smartphone dan tablet. Ada berbagai pendekatan untuk menyelesaikan masalah ini untuk tampilan antarmuka aplikasi seluler yang benar pada layar dengan resolusi dan proporsi yang berbeda.
Saya ingin membawa perhatian Anda pada perjalanan saya, yang saya gunakan saat mengembangkan aplikasi game dalam orientasi lanskap.
Jika Anda melihat tren beberapa tahun terakhir, produsen smartphone memilih layar untuk model mereka, maka mudah untuk melihat keinginan untuk meningkatkan ketinggian tampilan. Ini memiliki kernel rasional sendiri. Menjadi jauh lebih nyaman bagi pengguna untuk bekerja dengan banyak aplikasi dalam orientasi potret, lebih mudah untuk menelusuri situs. Berkat layar memanjang, lebih banyak informasi ditempatkan di atasnya dan kebutuhan untuk sering menggulir konten ke atas atau ke bawah berkurang.
Tetapi ada kategori aplikasi yang cukup besar yang membutuhkan orientasi lansekap layar, misalnya, banyak aplikasi game. Dalam hal ini, upaya tambahan harus dilakukan untuk membuat game terlihat benar di layar dengan proporsi berbeda.
Saat ini, format tampilan 16: 9 mungkin yang paling umum, tetapi itu bukan satu-satunya. Ada banyak model di pasaran yang menggunakan layar dengan rasio aspek 18: 9, produk-produk baru Apple dilengkapi dengan layar 19.5: 9. Tapi ini bukan batasnya, di awal tahun, Sony memperkenalkan smartphone dengan layar 21: 9. Dan baru-baru ini, perusahaan China Xaiomi mengumumkan produk baru dengan layar 22.5: 9. Pada saat yang sama, Anda tidak dapat mengabaikan kehadiran sejumlah besar model tablet dengan layar 4: 3. Jika format yang terakhir disajikan sebagai 12: 9, maka mudah untuk melihat fitur yang menarik: dalam orientasi lanskap, ketinggian layar dengan proporsi berbeda adalah kelipatan 9, dan rasio horizontal mereka dapat berbeda hampir setengahnya.
Dalam mencari solusi optimal untuk masalah ini, saya menemukan proposal untuk menempatkan elemen-elemen permainan utama di area yang sesuai dengan layar dengan lebar relatif terkecil dalam orientasi lanskap. Jelas bahwa dengan pendekatan ini, Anda harus fokus pada format 4: 3. Saat memulai gim di smartphone dengan format tampilan lain, diusulkan untuk mengisi ruang tambahan dengan gambar latar belakang.
Pendekatan ini cukup masuk akal, tetapi hanya dengan perbedaan kecil dalam proporsi layar. Misalnya, jika game dibuat untuk layar 16: 9, maka untuk tampilan 18: 9 ini akan berfungsi. Tetapi sudah dalam kasus, katakanlah, 22.5: 9 dan 4: 3 hampir tidak.
Saya juga bertemu dengan proposal untuk menggunakan tata letak “karet”, di mana ukuran elemen permainan disesuaikan dengan ukuran tampilan. Tapi ini juga bukan pilihan, dalam banyak kasus bentuk elemen seperti itu akan menjadi terdistorsi.
Pendekatan saya terhadap tata letak
Setelah serangkaian percobaan, saya menemukan sendiri pendekatan yang sangat bagus dalam praktik. Mungkin saya menemukan "sepeda", tetapi saya tidak dapat menemukannya.
Saya ulangi, solusi yang saya usulkan dikembangkan untuk tugas-tugas khusus dan bukan fakta bahwa itu universal.
Game
Leaping Dodgem , yang saya lakukan menggunakan
kerangka LibGDX , menggunakan proyeksi ortogonal kamera ke tengah layar. Oleh karena itu, diputuskan untuk menggunakan titik ini sebagai titik referensi tunggal ketika menempatkan semua elemen game. Tapi ini bukan dogma, beberapa elemen terikat pada batas layar, jadi ternyata lebih nyaman dan memberikan hasil visual yang lebih baik.
Selama pengembangan, format 16: 9 yang banyak digunakan dengan resolusi 1920 × 1080 dipilih sebagai ukuran dasar layar permainan. Sebagian besar elemen gim terletak dari tengah layar dengan lekukan relatif dengan tanda plus dan minus.
Gambar tersebut secara skematis menggambarkan prinsip penempatan seperti itu pada contoh dua tombol untuk kontrol permainan dan label dengan posisi tetap.
Tetapi metode yang diusulkan hanya prinsip, dalam praktiknya, pendekatan ini tidak selalu dibenarkan. Atau, Anda dapat menyatukan pemilihan koefisien lekukan relatif dengan menetapkan konstanta yang telah ditentukan. Katakanlah kita ingin tepi tombol tidak mencapai batas layar pada jarak 5% dari lebar dan tinggi. Jika formula tetap tidak berubah untuk bagian kiri layar, maka untuk bagian kanan ukuran tombol itu sendiri perlu diperhitungkan.
Pendekatan ini memungkinkan untuk menempatkan elemen-elemen game dengan benar di layar dengan proporsi berbeda. Misalnya, tangkapan layar game saya di layar yang berbeda. Untuk kejelasan, screenshot 4: 3 diambil dari emulator model kuno dengan tampilan 320x240.
Pada tangkapan layar pertama 4: 3, artefak di sisi kanan layar khusus kiri. Tombol kanan atas dan bawah ditempatkan berdasarkan pada koefisien perpindahan relatif dari tengah layar. Seperti yang Anda lihat, tombol atas "gagal". Ini karena perhitungan ulang ukuran gambar asli tombol, dengan mempertimbangkan resolusi layar. Jika Anda tidak memasukkan koefisien ini, maka tepi kanan tombol di bagian layar ini akan merangkak keluar. Tetapi karena ukuran tombol menurun, dan asal dari outputnya tetap tidak berubah, sehingga secara visual “gagal”.
Dalam tangkapan layar ini, masalahnya diselesaikan dengan menggunakan koefisien lekukan relatif dari batas layar.
Sekarang beberapa tangkapan layar untuk layar dengan proporsi berbeda
Rasio 16: 9, layar 1920x1080
Rasio 18: 9, layar 2880x1440
Rasio 19.5: 9 layar 2688x1242Offset awal titik output dari sebagian besar elemen gim dalam tangkapan layar yang disajikan dilakukan seperti yang dijelaskan di atas, melalui indentasi relatif dari tengah layar. Tetapi untuk lima tombol kontrol harus melakukan sedikit berbeda, sehingga mereka selalu di posisi mereka. Bagi mereka, padding relatif Kpadding sepanjang sumbu X dan Y dari batas layar telah ditetapkan. Karena gim ini dibuat untuk resolusi dasar 1920x1080, untuk tampilan yang benar pada layar dengan resolusi yang berbeda, faktor penskalaan khusus dihitung berdasarkan ukuran layar aktual dan resolusi dasar. Koefisien ini diperhitungkan saat menghitung perpindahan absolut elemen game dan ukurannya yang ditampilkan.
Saya harap artikel ini membantu pengembang game pemula dan menghemat banyak waktu.