tutorial android - 8-puzzle game
Post on 28-Feb-2018
238 Views
Preview:
TRANSCRIPT
-
7/25/2019 Tutorial Android - 8-Puzzle Game
1/24
Android Tutorial
2014
-
7/25/2019 Tutorial Android - 8-Puzzle Game
2/24
2
Defnisi 8-Puzzle GamePada dasarnya, 8-puzzle merupakan sebuah game yangdimainkan pada sebuah petak berukuran 3x3 dengan 8buah kotak yang bertuliskan angka dari 1 sampai 8 dansebuah kotak kosong. otak-kotak tersebut tersusunse!ara a!ak, dan kita sebagai player diminta untukmenyusun kembali kotak-kotak tersebut sehingga angka-angkanya berurutan.
Pada tutorial ini, kita akan membuat 8-puzzle game pada android denganmenggunakan potongan-potongan gambar sebagai pengganti angkanya.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
3/24
2
Step 1: Membuat Project Android
Baru&alam membuat aplikasi ini, kita membutuhkan beberapa activity classbeserta layout -nya. 'erikut ini da(tar class dan layout yang akan kita buat)
Activity class Activity Layout *ain"ame+elp
maingamehelppi! spinner
&etailnya akan di elaskan pada step-step berikut.
Step : Menamba!"an Gambar&alam aplikasi ini, kita akan membutuhkan banyak gambar. 'erikut inigambar-gambar utama yang nantinya digunakan sebagai gambar puzzle )
panda.png
pre ie/ panda.png
panda1.png panda2.png
panda4.png panda .png
panda .png panda8.png
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
4/24
2
o/l.png
pre ie/ o/l.png
o/l1.png
o/l4.png
o/l .png
"ambar-gambar berikut digunakan untuk memper!antik interface dariaplikasi)
go.png about.png exit.png lamp.png re(resh.png
small tiles.png
n puzzle.png
i!on panda.png
i!on o/l.png
bg.png
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
5/24
2
Step #: Membuat Desain $alaman
A%al+asil akhir dari halaman a/al main.xml nanti akan tampak sebagaiberikut.
'erikut ini langkah-langkahnya)
Pada blank activity , gunakan inear ayout dan atur property -nya sebagaiberikut)
&idalam inear ayout tersebut, tambahkan sebuah %ext5ie/ sebagai udulbertuliskan 6 n-Puzzle 7 dengan property sebagai berikut)
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
6/24
2
&'T( ) %eks yang akan ditampilkan diambil dari le strings.xml yangterdapat dalam (older values .
'erikutnya, tambahkan sebuah inear ayout lagi yang ber(ungsi sebagaipenampung content -nya. $tur property -nya sebagai berikut)
&idalamnya, tambahkan sebuah %ext5ie/ yang ber(ungsi sebagai labelbertuliskan 6 Select image 7.
&iba/ahnya, tambahkan sebuah 9pinner yang ber(ungsi untukmemberikan pilihan gambar apa sa a yang tersedia.
9etelah itu, tambahkan 'utton bertuliskan 6 PLAY 7 dengan icon dari legambar go.png disisi kanan. $ku yakin kamu pasti sudah tahukegunaannya.
&iluar inear ayout diatas, tambahkan sebuah inear ayout lagi sebagai
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
7/24
2
penampung 'utton.
&idalamnya, tambahkan sebuah 'utton yang ber(ungsi untukmenampilkan data diri. :ntuk yang satu ini tidak terlalu penting, adikamu bisa le/ati code yang satu ini.
%ambahkan lagi sebuah 'utton yang ber(ungsi untuk keluar aplikasi.
Step ): Membuat Desain *tem
untu" Spinner$gar lebih menarik, kita akan membuat sebuah 9pinner yangmenampilkan icon ke!il dari gambar puzzle yang dipilih oleh player . :ntukitu, kita akan menggunakan le layout dengan nama pi! spinner.xml yangsebelumnya sudah kita buat. 'erikut ini code yang dituliskan didalamnya)
"unakan inear ayout sebagai layout utamanya.
%ambahkan sebuah %ext5ie/ kosong dengan pengaturan property sebagaiberikut.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
8/24
2
+asil dari penulisan code diatas memang kosong, karena kita baru akanmenambahkan isinya pada pembahasan berikutnya.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
9/24
2
Step +: Membuat Desain $alaman
Game+asil akhir dari halaman game game.xml nanti akan tampak sebagaiberikut.
'erikut ini langkah-langkahnya)
"unakan inear ayout sebagai layout utamanya.
%ambahkan sebuah ;rame ayout sebagai gamespace -nya.
&idalamnya, tambahkan sebuah $bsolute ayout yang ber(ungsi sebagaipenampung puzzle -nya. &alam tutorial ini memang digunakan
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
10/24
2
$bsolute ayout yang statusnya sudah deprecated usang .
&idalam $bsolute ayout, tambahkan sebuah 'utton sebagai kepingan puzzle pertama.
%ambahkan lagi 'utton sebagai kepingan puzzle kedua.
%ambahkan lagi 'utton sebagai kepingan puzzle ketiga.
%ambahkan lagi 'utton sebagai kepingan puzzle keempat.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
11/24
2
%ambahkan lagi 'utton sebagai kepingan puzzle kelima.
%ambahkan lagi 'utton sebagai kepingan puzzle keenam.
%ambahkan lagi 'utton sebagai kepingan puzzle ketu uh.
%ambahkan lagi 'utton sebagai kepingan puzzle kedelapan.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
12/24
2
'erikutnya, diluar $bsolute ayout namun masih dalam ;rame ayout,tambahkan
-
7/25/2019 Tutorial Android - 8-Puzzle Game
13/24
2
&iluar inear ayout diatas, tambahkan %ext5ie/ untuk menampilkanpesan selama game berlangsung.
'erikutnya, tambahkan lagi sebuah inear ayout untuk menampung'utton.
%ambahkan 'utton yang ber(ungsi untuk menampilkan bantuan.
%ambahkan sebuah 'utton lagi yang ber(ungsi sebagai tombol restart .
Step ,: Membuat Desain $alamanBantuan+asil akhir dari halaman bantuan help.xml nanti akan tampak sebagaiberikut.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
14/24
2
'erikut ini langkah-langkahnya)
"unakan inear ayout sebagai layout utamanya.
%ambahkan sebuah %ext5ie/ sebagai udulnya dengan icon dari legambar lamp.png diletakkan disisi kiri.
%ambahkan sebuah ;rame ayout yang didalamnya berisi
-
7/25/2019 Tutorial Android - 8-Puzzle Game
15/24
2
&iluar ;rame ayout diatas, tambahkan sebuah 'utton yang ber(ungsiuntuk kembali ke halaman sebelumnya.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
16/24
2
Step : Menulis"an .ode pada
.lass A%al9etelah semua desain sudah siap, kita bisa mulai menuliskan code untukmasing-masing activity layout tersebut. 'erikut ini code yang dituliskanpada *ain. a a)
%uliskan code berikut pada bagian a/al class yang berisi ariabel- ariabelyang umum digunakan dalam class tersebut.
ita perlu membuat sebuah sub!lass bernama Pi!ture$dapter yangber(ungsi sebagai adapter yang menga!u ke le pi! spinner.xml yangsebelumnya sudah kita buat.
&idalam method on=reate , tuliskan code berikut yang ber(ungsi sebagaipengaturan a/al 9pinner, dimana item -nya diambil dari layout pi! spinner.xml.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
17/24
2
*asih didalam method on=reate , tambahkan code berikut untukmemba!a setiap 'utton yang terdapat dalam layout main.xml.
&iluar method on=reate , tambahkan code berikut yang ber(ungsi untukmengatur hal-hal apa sa a yang ter adi apabila player menekan salah satutombol.
Step 8: Menulis"an .ode pada
.lass Game8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
18/24
2
'erikut ini code yang dituliskan pada "ame. a a)
*endeklarasikan ariabel- ariabel yang umum digunakan pada class"ame.
%ambahkan uga ariabel- ariabel array untuk menyimpan gambar-gambar yang nantinya digunakan sebagai puzzle .
emudian, buat lagi ariabel- ariabel untuk menentukan current state dangoal state .
&idalam method on=reate , isi nilai dari ariabel current state .
'erikutnya, inisialisasi nilai.
9etelah itu, tambahkan code untuk memba!a setiap 'utton yang terdapat
dalam layout game.xml.
&iluar method on=reate , tambahkan code berikut untuk menentukan(ungsi dari tiap-tiap 'utton.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
19/24
2
embali lagi ke method on=reate , lakukan pemanggilan method lain danlakukan pengaturan pada setiap potongan puzzle -nya.
%ambahkan sebuah method baru dalam class "ame bernamand'uttons yang ber(ungsi untuk memba!a setiap 'utton yang ada.
%ambahkan lagi sebuahmethod
baru bernama ll"rid'y
-
7/25/2019 Tutorial Android - 8-Puzzle Game
20/24
2
9ambungan dari code sebelumnya.
9ambungan dari code sebelumnya.
%ambahkan lagi sebuah method baru bernama make*o e yangber(ungsi untuk menentukan movement apa sa a yang bisa dilakukan oleh
player .
9ambungan dari code sebelumnya.
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
21/24
2
9ambungan dari code sebelumnya.
9ambungan dari code sebelumnya.
9ambungan dari code sebelumnya. Code berikut ini ber(ungsi untukmenentukan pesan yang akan ditampilkan selama game berlangsung.
%ambahkan lagi sebuah method baru bernama ndPosition yangber(ungsi untuk mendapatkan posisi> index .
%ambahkan sebuah method lagi bernama sho/?esult yang ber(ungsiuntuk menampilkan hasil akhir apabila player berhasil menyelesaikan
puzzle .
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
22/24
2
8-Puzzle "ame # $ndroid %utorial
-
7/25/2019 Tutorial Android - 8-Puzzle Game
23/24
2
Step /: Menulis"an .ode pada
.lass Bantuan'erikut ini code yang dituliskan pada +elp. a a)
%uliskan code berikut didalam method on=reate yang ber(ungsi untukmemba!a
-
7/25/2019 Tutorial Android - 8-Puzzle Game
24/24
2
3esimpulan$khirnya aplikasi -Puzzle kita sudah selesai@ $plikasi ini sudah ber alandengan baik meski masih banyak sekali kelemahannya dibandingkandengan aplikasi 8-Puzzle yang beredar saat ini. 9alah satunya, tidakadanya (ungsi random untuk melakukan penga!akan puzzle . %entu sa ahal itu bisa diatasi dengan bela ar lebih dalam lagi tentang android.
ambat laun kita pasti bisa, selama ada niat untuk terus men!oba. %erima kasih.
top related