Anda di halaman 1dari 21

Android Tutorial

8-Puzzle Game

2014
Definisi 8-Puzzle Game
Pada dasarnya, 8-puzzle merupakan sebuah game yang dimainkan pada
sebuah petak berukuran 3x3 dengan 8 buah kotak yang bertuliskan angka
dari 1 sampai 8 dan sebuah kotak kosong. Kotak-kotak tersebut tersusun
secara acak, dan kita sebagai player diminta untuk menyusun kembali
kotak-kotak tersebut sehingga angka-angkanya berurutan.

Pada tutorial ini, kita akan membuat 8-puzzle game pada android dengan menggunakan
potongan-potongan gambar sebagai pengganti angkanya.

8-Puzzle Game | Android Tutorial


Step 1: Membuat Project Android Baru
Dalam membuat aplikasi ini, kita membutuhkan beberapa activity class beserta layout-nya.
Berikut ini daftar class dan layout yang akan kita buat:

Activity class Activity Layout


 Main  main
 Game  game
 Help  help
 pic_spinner

Detailnya akan dijelaskan pada step-step berikut.

Step 2: Menambahkan Gambar


Dalam aplikasi ini, kita akan membutuhkan banyak gambar. Berikut ini gambar-gambar
utama yang nantinya digunakan sebagai gambar puzzle:

panda1.png panda2.png panda3.png

panda.png
panda4.png panda5.png panda6.png

panda7.png panda8.png

preview_panda.png

8-Puzzle Game | Android Tutorial


owl1.png owl2.png owl3.png

owl.png
owl4.png owl5.png owl6.png

owl7.png owl8.png

preview_owl.png

Gambar-gambar berikut digunakan untuk mempercantik interface dari aplikasi:

go.png about.png exit.png lamp.png refresh.png

icon_panda.png icon_owl.png
small_tiles.png
n_puzzle.png
bg.png

8-Puzzle Game | Android Tutorial


Step 3: Membuat Desain Halaman Awal
Hasil akhir dari halaman awal (main.xml) nanti akan tampak sebagai berikut.

Berikut ini langkah-langkahnya:

Pada blank activity, gunakan LinearLayout dan atur property-nya sebagai berikut:

Didalam LinearLayout tersebut, tambahkan sebuah TextView sebagai judul bertuliskan


“n-Puzzle” dengan property sebagai berikut:

NOTE: Teks yang akan ditampilkan diambil dari file strings.xml yang terdapat dalam
folder values.

8-Puzzle Game | Android Tutorial


Berikutnya, tambahkan sebuah LinearLayout lagi yang berfungsi sebagai penampung
content-nya. Atur property-nya sebagai berikut:

Didalamnya, tambahkan sebuah TextView yang berfungsi sebagai label bertuliskan “Select
image”.

Dibawahnya, tambahkan sebuah Spinner yang berfungsi untuk memberikan pilihan


gambar apa saja yang tersedia.

Setelah itu, tambahkan Button bertuliskan “PLAY” dengan icon dari file gambar go.png
disisi kanan. Aku yakin kamu pasti sudah tahu kegunaannya.

Diluar LinearLayout diatas, tambahkan sebuah LinearLayout lagi sebagai


penampung Button.

Didalamnya, tambahkan sebuah Button yang berfungsi untuk menampilkan data diri.
Untuk yang satu ini tidak terlalu penting, jadi kamu bisa lewati code yang satu ini. 6

8-Puzzle Game | Android Tutorial


Tambahkan lagi sebuah Button yang berfungsi untuk keluar aplikasi.

Step 4: Membuat Desain Item untuk Spinner


Agar lebih menarik, kita akan membuat sebuah Spinner yang menampilkan icon kecil dari
gambar puzzle yang dipilih oleh player. Untuk itu, kita akan menggunakan file layout dengan
nama pic_spinner.xml yang sebelumnya sudah kita buat. Berikut ini code yang
dituliskan didalamnya:

Gunakan LinearLayout sebagai layout utamanya.

Tambahkan sebuah TextView kosong dengan pengaturan property sebagai berikut.

Hasil dari penulisan code diatas memang kosong, karena kita baru akan menambahkan
isinya pada pembahasan berikutnya.

8-Puzzle Game | Android Tutorial


Step 5: Membuat Desain Halaman Game
Hasil akhir dari halaman game (game.xml) nanti akan tampak sebagai berikut.

Berikut ini langkah-langkahnya:

Gunakan LinearLayout sebagai layout utamanya.

Tambahkan sebuah FrameLayout sebagai gamespace-nya.

Didalamnya, tambahkan sebuah AbsoluteLayout yang berfungsi sebagai penampung


puzzle-nya. Dalam tutorial ini memang digunakan AbsoluteLayout yang statusnya sudah
8
deprecated (usang). 

8-Puzzle Game | Android Tutorial


Didalam AbsoluteLayout, tambahkan sebuah Button sebagai kepingan puzzle pertama.

Tambahkan lagi Button sebagai kepingan puzzle kedua.

Tambahkan lagi Button sebagai kepingan puzzle ketiga.

Tambahkan lagi Button sebagai kepingan puzzle keempat.

8-Puzzle Game | Android Tutorial


Tambahkan lagi Button sebagai kepingan puzzle kelima.

Tambahkan lagi Button sebagai kepingan puzzle keenam.

Tambahkan lagi Button sebagai kepingan puzzle ketujuh.

Tambahkan lagi Button sebagai kepingan puzzle kedelapan.

Berikutnya, diluar AbsoluteLayout namun masih dalam FrameLayout, tambahkan


ImageView yang digunakan untuk menampilkan gambar utuhnya. 10

8-Puzzle Game | Android Tutorial


Kemudian, diluar FrameLayout, tambahkan sebuah LinearLayout sebagai penampung
informasi jumlah movement yang telah dilakukan oleh player.

Didalamnya, tambahkan sebuah TextView sebagai labelnya.

Tambahkan lagi sebuah TextView untuk menampilkan jumlah movement-nya.

Diluar LinearLayout diatas, tambahkan TextView untuk menampilkan pesan selama


game berlangsung.

11
Berikutnya, tambahkan lagi sebuah LinearLayout untuk menampung Button.

8-Puzzle Game | Android Tutorial


Tambahkan Button yang berfungsi untuk menampilkan bantuan.

Tambahkan sebuah Button lagi yang berfungsi sebagai tombol restart.

Step 6: Membuat Desain Halaman Bantuan


Hasil akhir dari halaman bantuan (help.xml) nanti akan tampak sebagai berikut.

12
Berikut ini langkah-langkahnya:

Gunakan LinearLayout sebagai layout utamanya.

8-Puzzle Game | Android Tutorial


Tambahkan sebuah TextView sebagai judulnya dengan icon dari file gambar lamp.png
diletakkan disisi kiri.

Tambahkan sebuah FrameLayout yang didalamnya berisi ImageView yang menampilkan


gambar utuh dari puzzle yang sedang dimainkan.

Diluar FrameLayout diatas, tambahkan sebuah Button yang berfungsi untuk kembali ke
halaman sebelumnya.

13

8-Puzzle Game | Android Tutorial


Step 7: Menuliskan Code pada Class Awal
Setelah semua desain sudah siap, kita bisa mulai menuliskan code untuk masing-masing
activity layout tersebut. Berikut ini code yang dituliskan pada Main.java:

Tuliskan code berikut pada bagian awal class yang berisi variabel-variabel yang umum
digunakan dalam class tersebut.

Kita perlu membuat sebuah subclass bernama PictureAdapter yang berfungsi sebagai
adapter yang mengacu ke file pic_spinner.xml yang sebelumnya sudah kita buat.

Didalam method onCreate(), tuliskan code berikut yang berfungsi sebagai pengaturan
awal Spinner, dimana item-nya diambil dari layout pic_spinner.xml.

14

8-Puzzle Game | Android Tutorial


Masih didalam method onCreate(), tambahkan code berikut untuk membaca setiap
Button yang terdapat dalam layout main.xml.

Diluar method onCreate(), tambahkan code berikut yang berfungsi untuk mengatur hal-
hal apa saja yang terjadi apabila player menekan salah satu tombol.

Step 8: Menuliskan Code pada Class Game


Berikut ini code yang dituliskan pada Game.java:

Mendeklarasikan variabel-variabel yang umum digunakan pada class Game.

Tambahkan juga variabel-variabel array untuk menyimpan gambar-gambar yang nantinya


digunakan sebagai puzzle.

15

8-Puzzle Game | Android Tutorial


Kemudian, buat lagi variabel-variabel untuk menentukan current state dan goal state.

Didalam method onCreate(), isi nilai dari variabel current state.

Berikutnya, inisialisasi nilai.

Setelah itu, tambahkan code untuk membaca setiap Button yang terdapat dalam layout
game.xml.

Diluar method onCreate(), tambahkan code berikut untuk menentukan fungsi dari tiap-
tiap Button.

Kembali lagi ke method onCreate(), lakukan pemanggilan method lain dan lakukan
pengaturan pada setiap potongan puzzle-nya.

16

8-Puzzle Game | Android Tutorial


Tambahkan sebuah method baru dalam class Game bernama findButtons() yang
berfungsi untuk membaca setiap Button yang ada.

Tambahkan lagi sebuah method baru bernama fillGridById() yang berfungsi untuk
mengisi tiap-tiap petak sesuai dengan current state yang sebelumnya telah ditentukan.

Sambungan dari code sebelumnya.

Sambungan dari code sebelumnya.

17

8-Puzzle Game | Android Tutorial


Sambungan dari code sebelumnya.

Tambahkan lagi sebuah method baru bernama makeMove() yang berfungsi untuk
menentukan movement apa saja yang bisa dilakukan oleh player.

Sambungan dari code sebelumnya.

Sambungan dari code sebelumnya.

18

Sambungan dari code sebelumnya.

8-Puzzle Game | Android Tutorial


Sambungan dari code sebelumnya. Code berikut ini berfungsi untuk menentukan pesan yang
akan ditampilkan selama game berlangsung.

Tambahkan lagi sebuah method baru bernama findPosition() yang berfungsi untuk
mendapatkan posisi/index.

Tambahkan sebuah method lagi bernama showResult() yang berfungsi untuk


menampilkan hasil akhir apabila player berhasil menyelesaikan puzzle.

19

8-Puzzle Game | Android Tutorial


Step 9: Menuliskan Code pada Class Bantuan
Berikut ini code yang dituliskan pada Help.java:

Tuliskan code berikut didalam method onCreate() yang berfungsi untuk membaca
ImageView yang terdapat dalam layout help.xml.

Tambahkan code berikut untuk membaca Button yang terdapat dalam layout help.xml.

Step 10: Mengubah Manifest dari Aplikasi


Langkah terakhir, kita lakukan sedikit pengubahan pada file AndroidManifest.xml dari
aplikasi ini. Ubah code yang terdapat pada manifest menjadi seperti berikut:

Ubah versi minimal SDK-nya menjadi 13. Hal ini ditujukan karena kita akan menggunakan
tema yang tidak menggunakan action bar.

Ubah code pada bagian application menjadi seperti berikut.

20

8-Puzzle Game | Android Tutorial


Kesimpulan
Akhirnya aplikasi 8-Puzzle kita sudah selesai! Aplikasi ini sudah berjalan dengan baik meski
masih banyak sekali kelemahannya dibandingkan dengan aplikasi 8-Puzzle yang beredar saat
ini. Salah satunya, tidak adanya fungsi random untuk melakukan pengacakan puzzle. Tentu
saja hal itu bisa diatasi dengan belajar lebih dalam lagi tentang android. Lambat laun kita
pasti bisa, selama ada niat untuk terus mencoba.
Terima kasih.

21

8-Puzzle Game | Android Tutorial