Membuat Game Sederhana Menggunakan App Inventor(2)

Saya akan melanjutkan postingan sebelumnya. 

Game yang kedua ini adalah game sentuh gambar.

Tahapan pembuatan nya sama seperti yang sebelumnya, akan tetapi ada perbedaan dari segi design maupun blocks nya.

Langsung saja..

-- Tahapan Design --

1. Kita membutuhkan empat buah horizontalarrangement. Drag horizontalarrangement dari palette layout ke screen.

2. Drag canvas dan imageSprite dari palette Drawing and Animation ke horizontalarrangement1. 

- Set ukuran canvas menjadi 300*200 (w*h). 

- Upload sebuah gambar untuk imageSprite.

- Set ukuran gambar yang telah di-upload menjadi 50*50 (w*h).

- Rename imageSprite (sesuai keinginan).

3. Drag button ke horizontalarrangement2. Kemudian rename menjadi ResetButton.

4. Drag dua buah label ke horizontalarrangement3.

- Rename label1 menjadi HitsLabel. Pada kolom properties ubah text menjadi "Hit".

- Rename label2 menjadi HitsCountLabel. Pada kolom properties ubah text menjadi 0.

5. Drag dua buah label ke horizontalarrangement4.

- Rename label3 menjadi MissesLabel. Pada kolom properties ubah text menjadi "Misses".

- Rename label4 menjadi MissesCountLabel. Pada kolom properties ubah text menjadi 0.

6. Drag sound dari palette media.

7. Drag clock dari palette sensors. Pada kolom properties set timerinterval.

Design telah selesai. Berikut adalah contoh screen shoot dari design yang telah dibuat :

-- Tahapan Pembuatan Blocks --

1. Pengaturan gerakan dari imageSprite sesuai dengan koordinat x dan y canvas.

Caranya :

a. klik Procedures, pilih to procedure do. Ubah nama procedure sesuai dengan yang diinginkan.

b. klik imageSprite, pilih call image.MoveTo x y

c. klik Math, pilih random integer from .. to..

untuk value from isikan 0 dan untuk value to, klik Math, pilih yang pengurangan. Lalu klik canvas1, pilih canvas.width. Kemudian klik imageSprite pilih yang image.width. Lakukan sebaliknya untuk height.

Gabungkan puzzle seperti gambar dibawah ini :

2. Pengaturan ketika screen aplikasi baru dibuka.

Caranya:

a. klik screen1, pilih when screen.initialize do.

b. klik Procedures, pilih call procedure.

Gabungkan puzzle seperti gambar dibawah ini :

3. Pengaturan timer. 

Caranya :

a. klik Clock, pilih when clock1.Timer do.

b. klik Procedures, pilih call procedure.

Gabungkan puzzle seperti gambar dibawah ini :

4. Pengaturan score. Ketika imageSprite disentuh atau diklik maka score HintsCountLabel akan bertambah, sebaliknya ketika sasaran tidak tepat maka score MissesCountLabel yang bertambah.

Caranya :

a. klik canvas1, pilih when canvas1.Touched do.

b. klik Control, pilih if then else.

c. klik Variables, pilih get, kemudian set touchedSprite.

d. klik HintsCountLabel, pilih set HitsCountLabel.Text to.

e. klik Math, pilih pertambahan. Untuk value yang pertama klik HitsCountLabel pilih HitsCountLabel.Text. Untuk value yang kedua klik Math dan pilih report the number shown isikan 1. Lakukan hal yang sama untuk MissesCountLabel.

Gabungkan puzzle seperti gambar dibawah ini :

5. Pengaturan reset button. Button ini berfungsi untuk mengembalikan score menjadi 0.

Caranya :

a. klik ResetButton, pilih when ResetButton.Click do.

b. klik HitsCountLabel, pilih set HitsCountLabel.Text to.

c. klik Math, pilih report the number shown, isikan value nya 1.

Lakukan hal yang sama untuk MissesCountLabel.

Gabungkan puzzle seperti gambar dibawah ini :

6. Pengaturan vibrate. Hal ini merupakan efek ketika kita memainkan game tersebut di android.

Caranya :

a. klik imageSprite, pilih when image.Touched do.

b. klik sound1, pilih call sound1.Vibrate milisecs.

c. klik Math, pilih report the number shown set value nya 100.

Gabungkan puzzle seperti gambar dibawah ini :

Pembuatan Blocks telah selesai.

Klik Connect --> Emulator

Maka tampilan android nya adalah seperti berikut ini :