Membuat game dengan App Inventor dan Kodular

Berjumpa lagi dengan saya, kali ini saya akan memberikan tutorial cara membuat game berbasis android dengan App Inventor dan kodular. Banyak orang yang menyukai game yang berbentuk multimedia, karena game yang berbentuk multimedia ini memiliki tampilan game yang cukup menarik. Game biasanya digunakan oleh banyak orang sebagai cara untuk mendapatkan kepuasan batin demi menghilangkan stress ataupun bosan. Oleh karena itu banyak sekali para developer game yang berlomba-lomba untuk membuat aplikasi game yang dapat membuat penggunanya merasa senang dan puas.

Membuat game dengan App Inventor dan Kodular ini tidaklah sulit, kita hanya memerlukan ide dan kreatifitas yang tinggi agar dapat membuat sebuah permainan yang menyenangkan bagi si pengguna. Dengan dukungan bahasa pemrograman berbasis visual blok pada App Inventor dan Kodular tentunya proses membuat aplikasi game android menjadi lebih mudah.

Pada tutorial kali ini saya akan membuat aplikasi game sederhana, aplikasi itu adalah game mengingat gambar. Game ini dapat melatih kemampuan daya ingat bagi pengguna dengan mengingat gambar yang sebelumnya terbuka dan mencari gambar lainnya yang sama untuk mencocokan gambar tersebut.

Pada postingan kali ini saya membuat gamenya di App Inventor, kamu juga bisa menggunakan kode program ini di Kodular. Baiklah berikut adalah tahapannya..

Cara membuat game dengan App Inventor dan Kodular

Masuk ke App Inventor

Login terlebih dahulu ke App Inventor untuk membuat aplikasi game mengingat gambar berbasis android, setelah login selanjutnya adalah membuat project baru. Kamu bebas memberikan nama untuk project yang akan dibuat, namun disini saya memberikan nama projectnya sesuai dengan nama game yang akan dibuat.

Desain Aplikasi Game

Pada tahap ini kamu akan melakukan perancangan tampilan pada aplikasi game yang akan dibuat, tentunya ini perlu dilakukan agar hasil dari aplikasi game yang dibuat menjadi lebih menarik. Berikut adalah desain yang saya buat untuk aplikasi game mengingat gambar.

untuk desain yang saya buat ini hanya desain kasar tidak banyak gambar ataupun penggunaan warna pada aplikasi game yang dibuat, jadi kamu bisa membuat desain yang lebih menarik lagi yang menurut kamu suka.

Pada gambar diatas saya menggunakan komponen “TableArrangement” untuk membuat tampilan tabel, dimana nantinya di setiap tabel akan di isi button yang akan menampilkan gambar. Untuk jumlah kolom pada tabel yang dibuat berjumlah 4 dan jumlah pada baris pada tabel berjumlah 4. Komponen TableArrangement bisa kamu temui di bagian Layout.

Kemudian untuk komponen “Button” disini saya menggunakan 16 button untuk menampilkan gambar dan 1 button reset untuk mengulangi permainan. 16 button ditempatkan pada komponen TableArrangement, kamu bisa memasukkan satu persatu Button di setiap field-nya.

Adapun juga komponen lainnya yang perlu ditambahkan pada aplikasi game mengingat gambar ini, komponen tersebut yaitu komponen “Notifier” dan komponen “Clock”. Komponen Notifier berguna sebagai notifikasi pada aplikasi game, komponen Notifier bisa ditemui di bagian UserInterface.

Kemudian untuk Komponen “Clock” selain digunakan sebagai timer, komponen ini juga bisa digunakan sebagai waktu untuk delay. Pada aplikasi yang dibuat ini clock digunakan untuk mendelay aplikasi pada saat akan menampilkan hasil notifikasinya. Komponen clock dapat kamu temui di bagian Sensor.

Pada proses desain aplikasi jangan lupa untuk menambahkan gambar yang akan digunakan pada aplikasi game mengingat gambar. Gambar dapat dimasukkan melalui media seperti yang saya lingkari pada gambar diatas. Gambar ini akan ditampilkan di setiap button yang ditempatkan pada TableArrangement.

Disini saya menggunakan 8 icon gambar makanan, kamu bisa mendapatkan gambar-gambar untuk keperluan membuat aplikasi di Flaticon. Kamu bisa mencari icon gambar pada situs tersebut yang nantinya bisa dipakai pada aplikasi game ini.

Setelah selesai menemukan icon gambar mana yang akan digunakan pada game, selanjutnya adalah memasukkan gambar tersebut ke App Inventor dengan cara mengupload gambarnya melaui menu media.

Membuat Kode Program

Pada tahap ini dilakukan setelah proses perancangan desain pada aplikasi yang dibuat telah selesai, kamu dapat masuk ke tampilan pembuatan program dengan cara klik block. Setelah masuk ke halaman block, lanjutkan untuk membuat programnya.

Kode Program Inisialisasi

Untuk membuat game dengan App Inventor dan Kodular ini kode program yang harus dibuat adalah kode program inisialisasi. Kode program inisialisasi adalah kode program awalan dimana ketika aplikasi berjalan pertama kali apa yang harus dilakukan oleh aplikasi tersebut. Berikut adalah kode programnya.

Pada gambar diatas saya menggunakan 5 komponen variabel yang saya deklarasikan dalam bentuk list kosong. 5 variabel tersebut saya buat menjadi bentuk list button, list gambar, lis hasil acak gambar, list cek klik 1, list cek klik 2. Fungsi dari pembuatan list tersebut digunakan untuk menampung data.

Selanjutnya adalah kode blok program “when screen1 initialize” saya isikan dengan memanggil prosedur fungsi inisialisasi. Maksud dari kode blok program tersebut adalah ketika aplikasi terbuka hal yang harus dilakukan apa? nah saya disini menambahkan prosedur fungsi inisialisasi jadi nantinya ketika aplikasi pertama kali terbuka akan mengerjakan kode program inisialisasi.

Untuk kode blok program pada button reset “when reset klik” saya juga menambahkan prosedur fungsi inisialisasi, maksudnya yaitu ketika button reset di klik maka tampilan game harus balik lagi seperti keadaan awal, kode blok program untuk mengembalikan ke keadaan awal adalah prosedur inisialisasi.

Untuk kode blok yang berwarna ungu ini disebut dengan prosedur, pada prosedur inisialisai didalamnya saya membuat perintah untuk membuat list pada variabel list button dan memasukkan data button-button yang akan digunakan dalam game.

kemudian buat variabel hasil acak gambar, cek klik 1, dan cek klik 2 menjadi “create empty list”. Ini maksudnya ialah ketika tombol reset di klik maka akan mengulang kembali ke keadaan awal game, untuk mengosongkan list yang ada pada variabel acak gambar, cek klik1 dan cek klik 2.

Setelah itu dilanjutkan membuat perintah untuk mengatur lebar dan tinggi button pada button yang ada di TabelArrangement. Setelah selesai mengatur Button dilanjutkan dengan membuat list gambar dan membuat program untuk pengacakan gambar.

Kode Program Timer dan Proses

Komponen Clock disini saya gunakan untuk membuat delay pada saat akan menampilkan notifikasi ketika kedua botton sudah di klik. Berikut adalah kode programnya.

Dalam membuat game dengan App Inventor dan Kodular ini ada satu kode program utama agar aplikasi game mengingat gambar ini dapat berjalan dengan baik, kode tersebut ialah kode proses. Seperti pada gambar diatas bahwa prosedur proses akan melakukan pengecekan pada variabel cek klik 1 dan cek klik 2.

Apabila data gambar button pada variabel cek klik 1 dan variabel cek klik 2 sama maka akan menampilkan notifikasi “Good”, kemudian apabila kedua vatiabel tersebut berbeda maka notifikasi akan memberikan pesan “Bad”. Kemudian ketika button telah terbuka semua menjadi gambar maka notifikasi akan memberikan pesan “Finish”.

Kode Program Button

Ini adalah kode blok program yang terakhir. Berikut adalah kode program button

Pada kode program button diatas akan menampilkan gambar dari list hasil acak gambar ketika gambar di klik dan kemudian akan memasukkan data gambar button ke list cek klik 1 ataupun cek klik 2.

Setelah selesai membuat program selanjutnya kamu dapat build aplikasi agar bisa dijadikan dalam bentuk apk. Apabila kamu ingin menambahkan admob kamu bisa membuat game mengingat gambar ini dengan menggunakan Kodular. Karena App Inventor tidak menyediakan monetize aplikasi admob.

Jika kamu baru pertama dalam menggunakan App Inventor ataupun Kodular, kamu bisa mencoba membuat aplikasi sederhana terlebih dahulu dengan App Inventor.

Bagaimana mudah bukan membuat game dengan App Inventor dan Kodular?? Perlu diingat bahwa tidak semua game dapat dibuat dengan App Inventor ataupun Kodular, karena pada App Inventor dan Kodular sangat terbatas untuk membuat aplikasi game android dibandingkan dengan game engine lainnya seperti Unity dan lain-lain yang memang khusus untuk membuat game.

Adapun file aia membuat game dengan app inventor ini saya lampirkan, sebagai bahan ajaran yang dapat mempermudah dalam memahami block program dari aplikasi yang dibuat.

Baiklah sekian dari postingan kali ini jika ada yang ingin ditanyakan silahkan tulis di komentar. 🙂