Membuat Game Sederhana Menggunakan App Inventor (1)

Hallooooo ^,^

Pada tulisan kali ini saya akan share tentang pembuatan game sederhana menggunakan App Inventor.

Game sederhana yang pertama yaitu game tebak gambar.

Sama dengan postingan sebelumnya saya menggunakan app inventor secara online.

Tahap pembuatan nya adalah sebagai berikut :

Akses halaman ai2.appinventor.mit.edu. Kita diharuskan login menggunakan account google terlebih dahulu. Setelah login maka akan muncul tampilan seperti berikut ini :

Lalu buat project baru dengan cara klik Start New Project

Kemudian isi kan Project Name

-- Tahapan Design -- 

1. Drag horizontalarrangement dari palette layout sebanyak tiga buah. Lakukan pengaturan letak horizontalarrangement dengan cara : pada kolom components klik Screen1 lalu ubah Align Horizontal menjadi center

2. Drag image dari palette user interface ke horizontalarrengement yang pertama. Lakukan upload gambar dengan cara : klik image1 pada kolom components lalu pada kolom properties klik text field picture lalu klik upload file. Pilih file yang akan digunakan. Kita juga dapat mengatur ukuran width dan height dari gambar tersebut, dengan mengatur nya pada kolom properties.

3. Drag label dari palette user interface ke bagian screen antara horizontalarrangement1 dengan horizontalarrangement2. Pada kolom properties hapus text label tersebut.

4. Drag textbox dan button dari palette user interface ke horizontalarrangement2. Textbox digunakan untuk input jawaban dan button digunakan untuk submit jawaban. Pada kolom properties ubah text button menjadi Submit.

5. Drag button dari palette user interface ke horizontalarrangement2. Button ini berfungsi untuk pindah ke pertanyaan berikutnya apabila di klik. Pada kolom properties ubah text button menjadi Next.

6. Drag sebuah label ke bawah horizontalarrangement3. Label tersebut berfungsi sebagai notif apakah jawaban yang diinput benar atau salah.

Tahapan design telah selesai. Screen shoot design dari game tebak gambar lebih kurang seperti berikut ini :

-- Tahapan Pembuatan Blocks --

1. Klik Blocks pada bagian atas sebelah kanan

2. Inisiasi list pertanyaan dan jawaban nya.

   Cara nya :

   a.Klik pada Variables, pilih initialize global. Ubah namanya          dengan QuestionsList untuk daftar pertanyaan dan AnswersList        untuk daftar jawabannya.

   b. Klik pada Lists, pilih make a list.

   c. Klik Text, pilih yang memiliki string quotes.

   Satukan puzzle seperti gambar dibawah ini :

3. Inisiasi Index Question

   Caranya :

   a. Klik Variabels, pilih initialize global. Ubah nama nya menjadi       CurrentQuestionIndex.

   b. Klik Math, pilih yang pertama dan isi kan value nya 1.

   Satukan puzzle seperti gambar dibawah ini :

4. Mengatur ketika screen awal ditampilkan maka pertanyaan pertama      muncul.

   Caranya :

   a. Klik screen1, pilih when screen.initialize.

   b. Klik label1, pilih set label.text.

   c. Klik Lists, pilih select list item list index.

   d. Klik Variabels, pilih get, lalu pilih global                         CurrentQuestionIndex.

   e. Klik Math, lalu isikan value nya 1.

   Satukan puzzle seperti gambar dibawah ini :

5. Pengaturan button next untuk pindah pertanyaan.

   Caranya :

   a. klik button2, pilih when button.click do.

   b. klik Variables, pilih set dan pilih global                           CurrentQuestionIndex. Lalu pilih get dan pilih global               CurrentQuestionIndex. 

   c. klik Math, pilih yang pertambahan dan report the number shown       set value nya 1.

   d. klik Control, pilih if then. 

   e. klik Math, pilih > dan report the number shown set value nya         2.

   f. klik Variables, pilih get, pilih global CurrentQuestionIndex.       pilih juga set, pilih global CurrentQuestionIndex.

   g. klik Math, pilih report the number shown set value nya 1.

   h. klik label1, pilih set label.text.

   i. klik Lists, pilih select list item list index.

   j. klik Variables, pilih get lalu pilih global QuestionsList.           Pilih get satu lagi dan pilih global CurrentQuestionIndex.

   Satukan puzzle seperti gambar dibawah ini :

6. Pengaturan submit jawaban. Kondisi pertama yaitu ketika jawaban      benar maka pada label2    maka muncul "Benar" dan ketika jawaban    salah maka muncul "Salah". Kondisi kedua, ketika jawaban benar,      maka langsung berpindah ke jawaban selanjutnya tanpa klik tombol    next.

   Caranya :

   a. klik button1, pilih when button.click do.

   b. klik Control, pilih if then.

   c. klik Math, pilih equal.

   d. klik textbox1, pilih textBox1.text.

   e. klik Lists, pilih select list item list index.

   f. klik Variables, pilih get 2 buah. dan set masing-masing global       AnswersList dan global CurrentQuestionIndex.

   g. klik label2, pilih set label2.text.

   h. klik Text, pilih text string dan isikan value Benar.

   i. klik Variables, pilih set dan pilih global                           CurrentQuestionIndex.

   j. klik Math, pilih yang pertambahan dan report the number shown       set value nya 1.

   k. klik Variables, pilih get dan pilih global                           CurrentQuestionIndex.

   l. klik label1, pilih set label.text.

   m. klik Lists, pilih select list item list index.

   n. klik Variables, pilih 2 buah get. atur masing-masing value nya       global QuestionsList dan global CurrebtQuestionIndex.

   o. klik label2, pilih set label.text sebanyak 2 kali.

   p. klik Text, pilih text string sebanyak 2 buah. Set masing-           masing value nya null dan "Salah".

      Satukan puzzle seperti gambar dibawah ini :

  Tahapan Blocks telah selesai.

Klik Connect --> Emulator

Tampilannya akan seperti gambar dibawah ini :