Pada artikel kali ini kita akan membahas mengenai responsive UI di Construct 2. Sering sekali ada pertanyaan dari rekan developer mengenai berapa ukuran layar yang tepat untuk membuat mobile game. Sayangnya ukuran layar mobile device sangat beragam akan sangat merugikan apabila kita hanya mensupport salah satu ukuran layar saja. Kali ini kita akan membagikan trik membuat responsive UI untuk game engine Construct 2.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangSetting Project
Sebagai contoh kita mulai dengan membuka sample game sederhana yang sudah dipersiapkan. Kalian bisa unduh file sample.cpx di link berikut.
Setelah diunduh silahkan dibuka dan coba dimainkan game sederhana ini :
Sering kali jika kita membuat project game dengan ukuran yang tidak sesuai dengan ukuran screen device akan muncul block hitam yang mengisi ruang sisa dari project kita. Nah sebagai permulaan kita akan melakukan setting khusus agar tampilan game dapat mengisi screen device tanpa ada block hitam.
Pada Configuration Screen kita ubah opsi Fullscreen in browser menjadi Scale Outer, jika sebelumnya apabila ukuran screen atau window lebih besar akan ditampilkan warna block hitam maka dengan setting ini yang ditampilkan adalah sisi luar dari layout yang kita buat.
Hasilnya akan seperti gambar dibawah ini, game akan tampil memenuhi window tanpa ada block hitam.
Namun saat ini game menjadi tidak berada tepat ditengah-tengah window, akan kita perbaiki di tahap selanjutnya.
Setting Layout
Seperti yang sudah kita lihat hasil dari setting project sebelumnya, tampilan layout akan rata ke kiri. Tentunya hal ini akan terasa aneh apabila tampilan game kita condong ke sebelah kiri, nah sekarang kita ubah sedikit setting dari layout agar tampilan layout menjadi rata ketengah.
Pertama pilih Layout pada Project Panel.
Hal ini dapat dengan mudah kita lakukan dengan cara mengubah opsi Unbounded scrolling pada Layout Properties menjadi Yes. Sekarang perhatikan perubahan yang terjadi.
Hasilnya, tampilan game akan menjadi berada ditengah window browser seperti dibawah ini.
Perlu diperhatikan, jangan lupa untuk mengubah opsi Unbounded scrolling pada setiap layout yang dibuat.
Mengisi Ruang Sisa
Dengan 2 setting diatas kita sudah bisa membuat game mobile yang akan selalu fullscreen diberbagai ukuran layar. Sedikit tips tambahan untuk menghasilkan tampilan yang menarik, selalu tambahkan background art pada sisi kanan dan kiri layout kalian jika game kalian Potrait (atau pada sisi atas dan bawah layout jika game kalian Landscape). Hal ini akan member kesan bahwa game kalian selalu terisi dengan background yang diinginkan. Contohnya seperti game dibawah ini.
Hasilnya bisa diperhatikan pada gif dibawah ini, bagian gambar yang berlebih akan tertutup saat ukuran layar atau window browser lebih kecil. Dan saat window browser lebih besar makan akan terlihat.
Menempatkan UI
Setelah berhasil membuat game yang bisa fullscreen disemua ukuran screen kita akan lanjut dengan tip penempatan UI. Untuk menjaga kualitas visual dari game yang kita buat tentunya kita ingin selalu bisa menempatkan elemen-elemen UI sesuai dengan posisi yang kita inginkan. Seperti saat button sudah tepat berada di pojok kanan atas pada layar dengan perbandingan rasio 16:3 namun menjadi tidak berada dipojok saat berada di layar dengan perbandingan rasio lainnya.
Silahkan buka Layout InGame dan perhatikan gif dibawah ini
Untuk mengatasi hal tersebut kita bisa menggunakan tips berikut ini. Kita ambil nilai posisi atas, bawah, kanan dan kiri screen dengan menggunakan :
- ViewportLeft(0) untuk mendapatkan titik paling kiri dari screen
- ViewportRight(0) untuk mendapatkan titik paling kanan dari screen
- ViewportTop(0) untuk mendapatkan titik paling atas dari screen
- ViewportBottom(0) untuk mendapatkan titik paling bawah dari screen
Nilai 0 dalam tanda kurung adalah nomer layer yang ingin diukur, secara default gunakan 0 namun jika ingin mengukur titik pada layer lain silahkan ubah nomer index layer yang diinginkan.
Setelah bisa mendapatkan nilai titik-titik tadi kita bisa memindahkan posisi object sesuai dengan keinginan kita
- Object di pojok kanan atas screen maka menggunakan ViewportRight dan ViewportTop
- Object di pojok kiri bawah screen maka menggunakan ViewportLeft dan ViewportBottom
- Dan seterusnya
Jika ingin menempatkan object pada center atau tengah screen bisa menggunakan nilai dari OriginalWindowHeight/2 untuk nilai vertical center atau OriginalWindowWidth/2 untuk mendapatkan nilai horizontal center.
Berikut adalah contoh penempatan Button_Exit di kanan atas dan Text_Nilai di kiri atas.
Silahkan ubah ukuran window browser kalian dan refresh untuk melihat semua object akan selalu berada di posisi yang diharapkan.
Sentuhan Terakhir
Dari hasil diatas bisa kita lihat semua object sudah sesuai posisinya namun posisi anchornya masih tetap ditengah-tengah object, yang perlu kita lakukan adalah memindahkan posisi anchor sesuai dengan posisi yang kita inginkan. Lakukan pengubahan posisi anchor pada semua object.
Silahkan ubah ukuran window browser kalian dan refresh untuk melihat semua object akan selalu berada di posisi yang diharapkan tepat pada ujung anchor.
Apabila ingin melakukan perubahan posisi setiap saat kita bisa modifikasi sedikit dengan menggunakan event Every tick seperti berikut.
Hasilnya semua object akan selalu berada pada posisinya setiap saat, tanpa kita harus melakukan refresh browser.
Berikut tadi adalah penjelasan mengenai beberapa Responsive UI di Construct 2 yang sering digunakan jika mengembangkan game menggunakan Construct 2. Semoga penjelasannya bermanfaat dan bisa membantu teman-teman developer untuk mengembangkan karya terbaiknya.
Masih banyak pembahasan menarik di Dicoding Academy Belajar Membangun Game HTML5 menggunakan Construct 2 yang belum kita bahas di sini, untuk pembahasan lebih jauh silakan kunjungi Academy (Belajar Membangun Game HTML5 menggunakan Construct 2). Jika ada pertanyaan, saran atau masukan jangan sungkan untuk menuliskannya di kolom komentar.
Selamat belajar, semoga bermanfaat, dan nantikan tutorial pembuatan game menggunakan Construct 2 selanjutnya.
