sTutorial kali ini masih tentang App Inventor, yaitu membuat game sederhana dengan nama Sentuh Bola. Gameplaynya sangat simpel, Bola akan bergerak secara random kemudian ketika kita berhasil tap pada objek bola tersebut maka akan dihitung sebagai score, namun jika gagal maka akan dihitung sebagai miss. Langsung saja buat project baru pada App Inventor dengan nama terserah Anda, seperti biasa pertama-tama kita akan membuat dulu layoutnya.
Tambahkan 4 komponen HorizontalArrangement pada screen1. Kemudian tambahkan juga Sound dan Clock. Drag-n-drop pada Screen1.
Tambahkan komponen-komponen pendukung lainnya seperti Canvas, Button, Label dan Sprite. Rename susuai kebutuhan. Misal Sprite saya kasih nama Bola. Begitu juga valuenya pada panel properties. Isi sesuai kebutuhan. Isi width dan height Canvas1 menjadi 300px X 200px Untuk komponen-komponen yang lainnya silahkan sesuaikan dengan tampilan pada gambar. Untuk Clock1 dan Sound1 biarkan saja default untuk sementara. Oke, saya anggap layouting telah selesai, sekarang langsung saja ke bagian Blocks Editornya. Pertama buat definisi baru seperti berikut :
Saya jelaskan darimana blok-blog terseut didapat :
MoveBall : Built-in > Definition > Procedurwithresult, kemudian ganti nama menjadi MoveBall. Berfungsi untuk membuat sebuah prosedur atau dalam konsep pemrograman membuat sebuah method.
bola.MoveTo : My Blocks > Bola > pilih bola.MoveTo. Ini adalah sebuah fungsi untuk memindahkan / menggerakan sebuah sprite terhadap sumbu x dan y.
random integer : Built-in > Math > random integer. berfungsi untuk menampilkan / mengisi sebuah angka random. random integer ini dikonesikan dengan bagian x dan y pada bola.MoveTo, sehingga nilai x dan y nya akan terisi angka random setiap kali posedur dipanggil.
number 0 : Built-in > Math > Number. Dalam hal ini berfungsi sebagai nilai awal dari range random integer.
operasi - :built-in > Math > -. Berfungsi sebagai operator pengurang yang akan digunakan untuk assign value max dari range random integer.
Canvas1.width & Canvas1.Height : My blocks > Canvas1 > Canvas1.width / Canvas1.height. Berfungsi untuk mengambil nilai panjang dan lebar canvas yang akan dikalkulasi lewat operator pengurang dan akan dijadikan nilai max dari random integer.
Bola.heght & Bola.width : My Blocks > Bola > Bola.width bola.height. Berfungsi untuk mengambil nilai panjang dan tinggi dari sprite Bola.
Blok diatas adalah definisi dari sebuah prosedur yang berfungsi untuk memindahkan bola ke sumbu x dan y secara random.
Kita telah membuat sebuah prosedur atau metod yang kita berinama MoveBall. Selanjutnya kita panggil fungsi tersebut saat pertama kali Screen1 di inisialisasi.
Screen1.Initialize : My Blocks > Screen1 > Screen1.Intialize.
MoveBall : MoveBall.
Kita sudah menggerakan bola secara random pada saat inisialisasi screen1 tadi,, namun karena MoveBall disimpan pada once event, yaitu inisialisasi screen1, maka otomatis bolapun hanya bergerak satu kali saja. Supaya bola dapat bergerak secara realtime terhadap waktu, maka kita bisa menyimpan prosedur bola tersebut pada komponen timer. Setiap kali timer bergerak, maka prosedur MoveBall akan dipanggil, sehingga akan menghasilkan objek bola yang berpidah-pindah. Untuk mengatir kecepatan timernya bisa di set di properties pada komponen clock.
Clock1.Timer : My Blocks > Clock1 > Clock1.Timer.
Saya jelaskan terlebih dahulu darimana blok-blok tersebut didapat :
Canvas1.Touched : My Blocks > Canvas1 > Canvas1.Touched. Ini adalah event ketika bagian canvas disentuh.
name x & name y : Built-in > .name > rename menjadi x dan y. Mendefinisikan koordinat x dan y. Maksudnya koordinat mana saja dapat disentuh aslkan didalam Canvas1.
touchedSprite : Built-in > name > rename menjadi touchedSprite. Mendifinisikan sebuah value.
ifelse : Built-in > control > ifelse. Berfungsi sebagai control atau kondisi apabila sprite disentuh atau tidak.
(value) touchedSprite : My Blocks > My definition > value touchedSprite. Kita tadi telah mendifinisikan sebuah value pada bagian touchedSprite di Canvas1. Conrol membutuhkan value sebagai nilai kondisinya. Maka, value touchedSprite ini sebagai nilainya. Dalam hal ini berarti jika setiap sprite dala Canvas1 disentuh, maka do something.
Set HitsCount.Text : My Blocks > Hitscount > set HitsCount.Text. Jika sprite disentuh, maka akan kita set sebuah nilai pada label HitsCount.
Operasi + : Built-in > Math > +. Berfungsi menambahkan text dari Hitscount.Text.
Sehingga yang terjadi adalah : Ketika setiap sprite disentuh dalam setiap koordinat x dan y dalam komponen canvas, label HitsCount akan ditambah 1. Kemudian ini disebut sebagai poin. Kondisi sebaliknya juga berlaku untuk MissCount, nilai MissCount ditambah 1 jika tidak behasil menyentuh sprite (bola).
Terakhir, membuat fungsi untuk tombol reset. Panggil event ResetButton.click pada My Blocks > ResetButton, kemudian set MissCount.Text dan HitsCount.Text menjadi 0 dengan memanggil fungsi text. Call kebali prosedur MoveBall untuk memberikan efek reset pada movement sprite. Kemudian Coba jalankan pada emulator, maka hasilnya akan seperti berikut :
Oiya, untuk komponen Sound1 belum kita beri fungsi. Silahkan Anda masukan fungsinya sendiri pada kondisi berhasl disentuh. Selamat Mencoba.
Post a Comment