BAB IV IMPLEMENTASI DAN PENGUJIAN

BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Setelah melakukan analisa dan perancangan sistem pada bab 3 terhadap aplikasi Games Hijaiyah Dasar yang akan dibuat, tahapan selanjutnya adalah implementasi dan pengujian aplikasi game. Pada tahap implementasi meliputi proses pengkodean pada struktur frame beserta layer, tampilan aplikasi game dan hal-hal yang mendukung penelitian ini. 4.1.1 Tampilan Aplikasi Game Aplikasi game dibuat menggunakan Adobe Flash Professional CS5 dengan resolusi layar 800 x 500 pixel dan frame rate 20 fps menggunakan bahasa pemrograman ActionScript 3.0. Tampilan pada aplikasi game diatur berurutan pada tiap frame dengan nama label yang terdiri dari beberapa layer, pada tiap frame terdapat beberapa animasi movie clip yang digerakan dengan script dan teknik motion tween yaitu teknik untuk membuat gambar atau objek bergerak secara otomatis. 4.1.1.1 Tampilan Loading Pada Tampilan Loading di frame 1 dengan animasi loading game menggunakan script yang secara otomatis akan menuju ke tampilan Home jika animasi loading telah mencapai 100%. Pada frame ini terdapat script untuk variabel efek suara yang digunakan pada game. Tabel 4.1 Layer Tampilan Loading Layer Keterangan ActionScript 3.0 Terdapat ActionScript pada frame 1 Loading Terdapat text, gambar dan animasi loading game 47

48 Gambar 4.1 Tampilan Loading Pada layer ActionScript 3.0 di frame 1 terdapat actionscript untuk animasi loading game sebagai berikut : stage.addeventlistener(event.enter_frame, loading); function loading(ev:event) Mouse.hide(); var A = LoadingFill_mc.width; var B = 5.72; var T:int; T = A / B; Logo.persen.text = String(T); if(t > 100) stage.removeeventlistener(event.enter_frame, loading); gotoandstop("home"); 4.1.1.2 Tampilan Home Pada tampilan Home di frame 6 terdapat animasi nama game yaitu Games hijaiyah Dasar dan karakter utama dengan background pemandangan pantai pagi hari. Selain itu, terdapat 5 button yang menuju ke frame tertentu yaitu button Play menuju ke tampilan Pre Level 1 (frame 36), button Option menuju ke tampilan Option (frame 16), button Score menuju ke tampilan Score (frame 66), button Help menuju ke tampilan Help (frame 26) dan button Exit menampilkan tampilan Exit yang berada pada tampilan Home.

49 Gambar 4.2 Tampilan Home Tabel 4.2 Layer Tampilan Home Layer ActionScript 3.0 Content Background Keterangan Terdapat ActionScript dan membuat nama label HOME pada frame 6 Terdapat animasi nama game, button Play, Option, Score, Help dan Exit Terdapat movieclip background dan karakter utama Pada layer ActionScript 3.0 di frame 6 terdapat actionscript sebagai berikut : Actionscript untuk button Play menuju ke Pre Level 1. _.Play_btn.addEventListener(MouseEvent.CLICK, formplay); function formplay(ev:mouseevent) gotoandstop("pre Level 1"); Actionscript untuk button Option menuju ke tampilan Option. _.Option_btn.addEventListener(MouseEvent.CLICK, formoption); function formoption(ev:mouseevent) gotoandstop("option");

50 Actionscript untuk button Score menuju ke tampilan Score. _.Score_btn.addEventListener(MouseEvent.CLICK, formscore); function formscore(ev:mouseevent) gotoandstop("score"); Actionscript untuk button Help menuju ke Tampilan Help. _.Help_btn.addEventListener(MouseEvent.CLICK, formhelp); function formhelp (ev:mouseevent) gotoandstop("help"); Actionscript untuk button Exit menuju ke Tampilan Exit. _.Exit_btn.addEventListener(MouseEvent.CLICK, formexit); function formexit(ev:mouseevent) addchild(exit); Exit.x = 291.10; Exit.y = 140.55; addchild(yes); Yes.x = 322.45; Yes.y = 230; addchild(no); No.x = 415.95; No.y = 230; 4.1.1.3 Tampilan Option Pada Tampilan Option di frame 16 terdapat button On dan Off untuk mengatur pilihan musik, suara dan tampilan fullscreen aplikasi On atau Off. Gambar 4.3 Tampilan Option

51 Tabel 4.3 Layer Tampilan Option Layer Keterangan ActionScript 3.0 Terdapat ActionScript dan Membuat nama label Option pada frame 16 Content Terdapat gambar, movieclip, button On, Off dan Home Background Terdapat gambar background Pada layer ActionScript 3.0 di frame 16 terdapat actionscript sebagai berikut : Actionscript untuk button On dan Off untuk musik, suara dan tampilan fullscreen. SoundOn_btn.addEventListener(MouseEvent.CLICK, soundon); SoundOff_btn.addEventListener(MouseEvent.CLICK, soundoff); function soundon(ev:mouseevent) statsound = true; sound.play(); SoundOn_mc.visible = true;//movie clip sound on terlihat SoundOn_mc.play();//movie clip sound on di mainkan function soundoff(ev:mouseevent) statsound = false; SoundOff_mc.visible = true;//movie clip sound off terlihat SoundOff_mc.play(); MusicOn_btn.addEventListener(MouseEvent.MOUSE_UP, musicon); MusicOn_btn.addEventListener(MouseEvent.MOUSE_DOWN, musicoff1); MusicOff_btn.addEventListener(MouseEvent.CLICK, musicoff); function musicon(ev:mouseevent) kontrolmusik = musik.play(); statmusic = true; MusicOn_mc.visible = true; MusicOn_mc.play(); function musicoff1(ev:mouseevent) kontrolmusik.stop(); statmusic = false; function musicoff(ev:mouseevent) kontrolmusik.stop(); statmusic = false; MusicOff_mc.visible = true; MusicOff_mc.play(); FullsceneOn_btn.addEventListener(MouseEvent.CLICK, fullscreenon); FullsceneOff_btn.addEventListener(MouseEvent.CLICK, fullscreenoff); function fullscreenon(ev:mouseevent) fscommand("fullscreen","true"); FullsceneOn_mc.visible = true; FullsceneOn_mc.play(); function fullscreenoff(ev:mouseevent) fscommand("fullscreen","false"); FullsceneOff_mc.visible = true; FullsceneOff_mc.play();

52 Actionscript untuk button Home menuju ke Tampilan Home. Home.addEventListener(MouseEvent.CLICK, backhomeoption);function backhomeoption(ev:mouseevent) removechild(cursor); gotoandstop("home"); 4.1.1.4 Tampilan Help Pada Tampilan Help di frame 26 terdapat 2 button yang akan memainkan animasi dan menampilkan informasi kepada user jika button ditekan, yaitu : button Control untuk menjelaskan cara bermain game dengan menekan tombol pada keyboard dan button About menampilkan informasi versi game dan pembuat aplikasi game tersebut. Gambar 4.4 Tampilan Help Tabel 4.4 Layer Tampilan Help Layer Keterangan ActionScript 3.0 Terdapat ActionScript dan membuat nama label Help pada frame 26 Content Terdapat text, gambar, movieclip dan button Control, Story, About dan Home Background Terdapat gambar background

53 Gambar 4.5 Tampilan Control Help Gambar 4.6 Tampilan About Help

54 Pada layer ActionScript 3.0 di frame 26 button Control, Story dan About terdapat actionscript sebagai berikut : Control_btn.addEventListener(MouseEvent.CLICK, control); Story_btn.addEventListener(MouseEvent.CLICK, story); About_btn.addEventListener(MouseEvent.CLICK, about); Home.addEventListener(MouseEvent.CLICK, backhomehelp); function control(ev:mouseevent) Help_mc.gotoAndPlay(35); function story(ev:mouseevent) Help_mc.gotoAndPlay(50); function about(ev:mouseevent) Help_mc.gotoAndPlay(65); function backhomehelp(ev:mouseevent) removechild(cursor); gotoandstop("home ); 4.1.1.5 Tampilan Exit Pada Tampilan Exit berada pada tampilan Home untuk peringatan keluar game terdapat 2 button yaitu : button Yes untuk keluar game/aplikasi dan button No untuk membatalkan keluar game lalu kembali pada tampilan Home. Gambar 4.7 Tampilan Exit

55 Pada layer ActionScript 3.0 di frame 6 button Yes dan No terdapat actionscript sebagai berikut : Yes.addEventListener(MouseEvent.CLICK, exityes); No.addEventListener(MouseEvent.CLICK, exitno); function exityes(ev:mouseevent) fscommand("quit"); function exitno(ev:mouseevent) removechild(exit); removechild(yes); removechild(no); 4.1.1.6 Tampilan Pre Level 1 Pada Tampilan Pre level 1 di frame 36 terdapat movieclip untuk memberikan informasi target yang harus dicapai kemudian muncul button Mulai untuk menuju ke tampilan Level 1 jika ditekan. Gambar 4.8 Tampilan Pre Level 1 Tabel 4.5 Layer Tampilan Pre Level Layer Keterangan ActionScript 3.0 Terdapat ActionScript dan membuat nama label Pre Level 1 pada frame 36 Pre Level Terdapat text, gambar, animasi dan Button Mulai

56 Pada layer ActionScript 3.0 di frame 36 button Mulai terdapat actionscript sebagai berikut : var klikboolean:boolean = false; stage.addeventlistener(event.enter_frame, frameprelevel1); PreLevel1.Start.addEventListener(MouseEvent.CLICK, go1); function frameprelevel1(ev:event) if(klikboolean) PreLevel1.alpha -= 0.01; if(prelevel1.alpha <= 0.01) stage.removeeventlistener(event.enter_frame, frameprelevel1); gotoandstop("level 1"); function go1(ev:mouseevent) klikboolean = true; 4.1.1.7 Tampilan Level 1 Pada Tampilan Level 1 di frame 46 game dimulai kemudian karakter harus cepat menemukan 28 huruf hijaiyah, mengambil objek koin untuk menambah skor, objek hati untuk menambah nyawa karakter, objek waktu untuk menambah waktu, menghidari musuh dan jangan sampai waktu habis sebelum menemukan objek Finish untuk menyelesaikan game. Selain itu, terdapat button Pause untuk menghentikan game yang terdapat pilihan button resume, restart dan home. Gambar 4.9 Tampilan Level 1

57 Tabel 4.6 Layer Tampilan Level 1 Layer Keterangan ActionScript 3.0 Terdapat ActionScript dan membuat nama label Level 1 pada frame 46 Content Terdapat text, gambar, movieclip dan Button pause Background Terdapat background gambar Tabel 4.7 Letak 28 Huruf Hijaiyah pada Level 1 Alif Ba Ta Tsa Jim Kha

58 Tabel 4.7 Letak Target 28 Huruf Hijaiyah (lanjutan) Kho Dal Dzal Ra Zai Sin Syin Shod

59 Tabel 4.7 Letak Target 28 Huruf Hijaiyah (lanjutan) Dhod Tho Dhlo Ain Ghoin Fa Qof Kaf

60 Tabel 4.7 Letak Target 28 Huruf Hijaiyah (lanjutan) Lam Mim Nun Wawu Ha Ya Pada layer ActionScript 3.0 di frame 36 button Pause terdapat actionscript sebagai berikut : Pause_btn.addEventListener(MouseEvent.CLICK, PAUSE); function PAUSE(ev:MouseEvent) addchild(pauseform); addchild(resume); addchild(restart); addchild(home); pauseform.x = -100; pauseform.y = 0; Resume.x = 293.6; Resume.y = 170; Restart.x = 294.55; Restart.y = 246.95; HOME.x = 294.55; HOME.y = 326.95;

61 4.1.1.8 Tampilan Pause Pada tampilan Pause berada pada tampilan Level 1 di frame 46 terdapat 3 button yaitu : button resume untuk kembali ke tampilan Level 1, button restart untuk memulai game dari awal yang akan menuju tampilan Pre Level 1 dan button Home untuk kembali ke tampilan Home. Gambar 4.10 Tampilan Pause Pada layer ActionScript 3.0 di frame 46 button resume, restart dan home terdapat actionscript sebagai berikut : Resume.addEventListener(MouseEvent.CLICK, resume); Restart.addEventListener(MouseEvent.CLICK, restart); HOME.addEventListener(MouseEvent.CLICK, home); function resume(ev:mouseevent) timer.start(); removechild(pauseform); removechild(resume); removechild(restart); removechild(home); function restart(ev:mouseevent) removechild(pauseform); removechild(resume); removechild(restart); removechild(home); gotoandstop("pre Level 1"); function home(ev:mouseevent) removechild(pauseform); removechild(resume); removechild(restart); removechild(home); gotoandstop("home");

62 4.1.1.9 Tampilan Game Over Pada tampilan Game Over di frame 56 menandakan bahwa game telah berakhir dengan kemungkinan waktu yang telah habis, variabel Life (nyawa) pada karakter telah habis atau karakter yang telah mencapai akhir dan menumukan objek Finish sebelum waktu habis. Kemudian, terdapat animasi Game Over dan nilai akhir yang telah dicapai oleh user lalu user akan mengisikan nama untuk menempatkan nama dan nilainya pada tabel top skor game di Tampilan Score dengan menekan button OK. Tabel 4.8 Layer ActionScript 3.0 Content Gambar 4.11 Tampilan Game Over Layer Tampilan Game Over Keterangan Terdapat ActionScript dan membuat nama label Game Over pada frame 56 Terdapat text, gambar, animasi dan Button OK Pada layer ActionScript 3.0 di frame 56 button OK terdapat actionscript sebagai berikut : OK_btn.addEventListener(MouseEvent.CLICK, OK); function OK(ev:MouseEvent) gotoandstop( Score );

63 4.1.1.10 Tampilan Score Pada tampilan Score di frame 66 terdapat daftar nama dan nilai pemain game yang secara default sudah ada dengan diurutkan pada nilai yang tertinggi berada paling atas dan terdapat button home untuk kembali ke tampilan Home. Gambar 4.12 Tampilan Score Tabel 4.9 Layer Tampilan Score Layer Keterangan ActionScript 3.0 Terdapat ActionScript dan membuat nama label Score pada frame 66 Content Terdapat text, gambar, animasi dan button OK Background Terdapat background Score Pada layer ActionScript 3.0 di frame 66 button Home terdapat actionscript sebagai berikut : Home.addEventListener(MouseEvent.CLICK, backhomescore); function backhomescore(ev:mouseevent) gotoandstop("home");

64 4.2 Pengujian Dalam perancangan aplikasi Games Hijaiyah Dasar perlu dilakukan pengujian aplikasi game sebagai bentuk verifikasi atas sistem yang telah dibuat. Pengujian dilakukan secara berulang-ulang dan bertahap untuk mengetahui kemungkinan terjadinya kesalahan dan juga memastikan fungsi-fungsi yang terdapat pada aplikasi game berjalan dengan baik. Apabila dalam melakukan pengujian ditemukan kesalahan pada aplikasi game, maka akan dilakukan perbaikan kesalahan sampai aplikasi game berjalan dengan baik. Pengujian aplikasi Games Hijaiyah Dasar dilakukan dengan menggunakan metode alpha test dan beta test. Tahap pertama adalah melakukan pengujian menggunakan metode alpha test yaitu metode pengujian yang dilakukan oleh pembuat aplikasi game dari sisi pengguna dengan merekam semua kesalahan fungsional dan masalah pengguna. Tujuannya untuk mengidentifikasi dan menghilangkan sebanyak mungkin masalah yang terjadi sebelum akhirnya sampai kepada pengguna akhir. Setelah tahap pertama selesai, tahap kedua adalah melakukan pengujian menggunakan metode beta test yaitu metode pengujian yang dilakukan oleh satu atau lebih pengguna akhir (user) dalam lingkungan yang sebenarnya. Pengguna akhir (user) dipilih oleh pembuat aplikasi game yang memberitahukan prosedur evaluasi lalu merekam semua masalah yang ditemukan selama pengujian dan melaporkan kepada pembuat aplikasi game. Dalam tahap pengujian ini meliputi perangkat sistem pengujian, skenario pengujian, hasil pengujian dan kesimpulan hasil pengujian yang akan dijelaskan sebagai berikut : 4.2.1 Perangkat Sistem Pengujian Berikut ini adalah tabel spesifikasi perangkat yang digunakan dalam pengujian sistem aplikasi game yang dibuat :

65 Tabel 4.10 Processor Memory Harddisk drive VGA Spesifikasi Perangkat Keras (hardware) Intel(R) Core(TM) i5-2450m CPU @2.50GHz (4 CPU) 4096 MB RAM 500 GB Mobile Intel HD Graphics 1 GB Tabel 4.11 Spesifikasi Perangkat Lunak (software) Sistem Operasi Microsoft Windows 7 Ultimate 32-bit Adobe Flash Profesional CS5 Tools Adobe Ilustrator CS5 Audacity 4.2.2 Pengujian Alpha Test dan Beta Test Alpha test adalah metode pengujian yang dilakukan oleh pembuat aplikasi game dari sisi pengguna dengan merekam semua kesalahan fungsional dan masalah pengguna, sedangkan beta test adalah pengujian yang dilakukan oleh pengguna akhir (user) yang dipilih oleh pembuat aplikasi game dalam lingkup kategori sebagai berikut: fungsi-fungsi yang tidak benar atau hilang, kesalahan dalam tampilan dan kesalahan proses. Skenario pengujian dengan menggunakan metode alpha test dan beta test ini diperlukan untuk menentukan keberhasilan suatu aplikasi game yang dilakukan oleh pembuat maupun pengguna akhir (user). Skenario pengujian dapat dilihat pada tabel dibawah berikut ini :

66 Tabel 4.12 Skenario Pengujian No. Tampilan Aplikasi Skenario Pengujian Hasil yang diharapkan Animasi loading game dapat 1 Loading Animasi loading game berjalan sampai 100% dan menampilkan tampilan Home Pilih tombol Play Menampilkan tampilan Pre Level 1 Pilih tombol Option Menampilkan tampilan Option 2 Home Pilih tombol Score Menampilkan tampilan Score Pilih tombol Help Menampilkan tampilan Help Pilih tombol Exit Menampilkan tampilan Exit Pilih tombol On/Off pada Music Background musik pada game dapat play atau tidak 3 Option Pilih tombol On/Off pada Sound Efek suara pada game dapat bersuara atau tidak. Pilih tombol On/Off pada Fullscreen Tampilan jendela pada game dapat fullscreen atau tidak Pilih tombol Home Kembali ke tampilan Home Menampilkan urutan nama dan nilai Tampilan pada Score 4 Score pemain pada Score Pilih tombol Home Kembali ke tampilan Home Pilih tombol Control Menampilkan informasi cara bermain Pilih tombol Story Menampilkan informasi game 5 Help Menampilkan informasi tentang Pilih tombol About versi game dan pembuatnya Pilih tombol Home Kembali ke tampilan Home 6 Exit Pilih tombol Yes Keluar dari game Pilih tombol No Kembali Ke Home

67 Tabel 4.12 Skenario Pengujian (lanjutan) Pre Level 7 1 8 Level 1 9 Pause Game 10 Over 11 Score Animasi target Menampilkan informasi target yang harus dicapai oleh karakter Pilih tombol Mulai Menampilkan tampilan Level 1 Dapat menggerakan karakter Pilih tombol A, D dan berjalan kekiri jika ditekan A, spasi pada keyboard kekanan jika ditekan D dan lompat jika ditekan spasi Waktu habis Menampilkan tampilan Game Over Pilih tombol Pause Menampilkan tampilan Pause Pilih tombol Resume Kembali ke tampilan Level 1 Pilih tombol Restart Kembali ke tampilan Pre Level 1 Pilih tombol Menu Kembali ke tampilan Home Hasil Score dan nama Menampilkan hasil skor game dan untuk top score nama untuk top score Menampilkan tampilan Score dan Pilih tombol Ok hasil skor game dan nama yang baru saja dimainkan Daftar nama dan nilai Menampilkan daftar nama dan nilai game game Pilih tombol Home Kembali ke tampilan Home

68 4.2.3 HASIL PENGUJIAN Berikut hasil pengujian aplikasi Games Hijaiyah dasar berdasarkan skenario pengujian yang telah dilakukan pada tabel dibawah berikut ini : Tabel 4.13 Hasil pengujian No. Tampilan Aplikasi 1 Loading 2 Home 3 Option 4 Score Menu 5 Help Skenario Pengujian Hasil yang diharapkan Hasil Animasi loading game dapat Animasi loading berjalan sampai 100% dan game menampilkan tampilan Home Pilih tombol Play Menampilkan tampilan Pre Level 1 Pilih tombol Option Menampilkan tampilan Option Pilih tombol Score Menampilkan tampilan Score Pilih tombol Help Menampilkan tampilan Help Pilih tombol Exit Menampilkan tampilan peringatan keluar game Pilih tombol On/Off Background musik pada game pada Music dapat play atau tidak Pilih tombol On/Off Efek suara pada game dapat pada Sound bersuara atau tidak. Pilih tombol On/Off Tampilan jendela pada game pada Fullscreen dapat fullscreen atau tidak Pilih tombol Home Kembali ke tampilan Home Tampilan pada Score Menampilkan urutan nama dan nilai pemain pada Score Pilih tombol Home Kembali ke tampilan Home Pilih tombol Control Menampilkan informasi cara bermain Pilih tombol Story Menampilkan informasi game

69 Tabel 4.13 Hasil pengujian (lanjutan) 6 Exit Pre Level 7 1 8 Level 1 9 Pause Game 10 Over 11 Score Pilih tombol About Menampilkan informasi tentang versi game dan pembuatnya Pilih tombol Home Kembali ke tampilan Home Pilih tombol Yes Keluar dari game Pilih tombol No Kembali ke tampilan Home Menampilakan informasi target Animasi target yang harus dicapai oleh karakter Pilih tombol Mulai Menampilkan tampilan Level 1 Dapat menggerakan karakter Pilih tombol A, D berjalan kekiri jika ditekan A, dan spasi pada kekanan jika ditekan D dan keyboard lompat jika ditekan spasi Waktu habis Menampilkan tampilan Game Over Pilih tombol Pause Menampilkan tampilan Pause Pilih tombol Resume Kembali ke tampilan Level 1 Pilih tombol Restart Kembali ke tampilan Pre Level 1 Pilih tombol Menu Kembali ke tampilan Home Hasil Score dan Menampilkan hasil skor game nama untuk top score dan nama untuk top score Pilih tombol Ok Menampilkan tampilan Score dan hasil skor game dan nama yang baru saja dimainkan Daftar nama dan Menampilkan daftar nama dan nilai game nilai game Pilih tombol Home Kembali ke tampilan Home

70 4.2.4 Kesimpulan Hasil Pengujian Analisa hasil pengujian yang telah dilakukan dengan memberikan penilaian aplikasi game secara keseluruhan terhadap semua hasil pengujian, maka dapat disimpulkan bahwa : 1. Button pada tiap tampilan dapat berfungsi dengan baik dan sesuai. 2. Efek suara pada game berjalan dengan baik. 3. Tiap tampilan dapat menampilkan teks, gambar, movieclip dan button sesuai dengan yang diharapkan. 4. Karakter pada tampilan Level 1 dapat digerakan dengan baik melalui input dari keyboard. 5. Karakter dapat mengambil objek Coin, Time, Life dan huruf Hijaiyah. 6. Tampilan Score, Waktu, Target dan Life pada Level 1 berjalan dengan baik. 7. Musuh pada Level 1 dapat mengurangi Score dan Life.