Responsive UI di Construct 2

Pembelajaran lengkap dari pembuatan game menggunakan Construct 2 dapat anda pelajari lebih mendalam di Dicoding Academy Belajar Membangun Game HTML5 menggunakan Construct 2 : https://www.dicoding.com/academies/16

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 Sekarang

Setting 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 :

0001

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.

0002

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.

0003

Hasilnya akan seperti gambar dibawah ini, game akan tampil memenuhi window tanpa ada block hitam.

0004

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.

0005

Hal ini dapat dengan mudah kita lakukan dengan cara mengubah opsi Unbounded scrolling pada Layout Properties menjadi Yes. Sekarang perhatikan perubahan yang terjadi.

0006

Hasilnya, tampilan game akan menjadi berada ditengah window browser seperti dibawah ini.

0007

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.

0008

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.

0009


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

0010

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

0011

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

0012

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.

0013

Silahkan ubah ukuran window browser kalian dan refresh untuk melihat semua object akan selalu berada di posisi yang diharapkan.

0014


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.

0015

Silahkan ubah ukuran window browser kalian dan refresh untuk melihat semua object akan selalu berada di posisi yang diharapkan tepat pada ujung anchor.

0016

Apabila ingin melakukan perubahan posisi setiap saat kita bisa modifikasi sedikit dengan menggunakan event Every tick seperti berikut.

0017

Hasilnya semua object akan selalu berada pada posisinya setiap saat, tanpa kita harus melakukan refresh browser.

0018

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.


Belajar Pemrograman Gratis
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.