33 4.1Implementasi
Setelah melewati tahap analisis dan perancangan pada bab 3, tahap selanjutnya yaitu tahap implementasi dan pengujian. Pada tahap ini terdiri dari spesifikasi kebutuhan sistem, dari segi perangkat keras (hardware) dan perangkat lunak (software), implementasi kode program, dan implementasi perancangan antar muka.
Langkah-langkah yang dilakukan dalam membuat aplikasi adalah sebagai berikut:
a. Persiapan bahan yang akan digunakan
Bahan yang digunakan untuk membuat aplikasi antara lain: komputer atau laptop dengan OS Windows, Adobe Flash untuk membuat antar muka aplikasi, FlashDevelop untuk membuat kode program, dan library CollisionDetectionKit.
b. Pembuatan antar muka aplikasi
Antar muka aplikasi dibuat menggunakan Adobe Flash. Terdapat empat antar muka, yaitu: antar muka halaman utama, halaman game, halaman score, dan halaman credit.
c. Pembuatan kode program
Kode program dibuat menggunakan FlashDevelop. Pada halaman game diperlukan kode program untuk gameplay dan kode program untuk motion detection. Untuk kode program motion detection dibutuhkan library CollisionDetectionKit. Untuk halaman lainnya hanya dibutuhkan kode program untuk antar muka.
d. Pengujian aplikasi
Pengujian dilakukan untuk mengetahui apakah aplikasi sudah berjalan dengan baik dan sesuai dengan harapan, baik dari sisi antar muka maupun gameplay. Metode yang digunakan menggunakan pengujian Black Box.
e. Evaluasi aplikasi
Evaluasi bertujuan untuk mengidentifikasi error yang terjadi sehingga dapat segera dilakukan perbaikan sampai aplikasi siap diimplementasikan. f. Implementasi aplikasi
Setelah aplikasi berjalan dengan baik dan sesuai dengan harapan, maka aplikasi akan diterapkan ke komputer atau laptop.
4.1.1 Spesifikasi Sistem
Spesifikasi perangkat keras (hardware) antara lain: a. Processor Intel Core 2 Duo
b. RAM 2 GB DDR3 c. Hardisk 320 GB d. Webcam
Spesifikasi perangkat lunak (software) antara lain: a. Windows 7 32 Bit
b. FlashDevelop 4.0 c. Adobe Flash CS6
4.1.2 Implementasi Antar Muka
Implementasi antar muka adalah tahap lanjutan setelah perancangan antar muka yang telah dijelaskan pada bab sebelumnya. Tahap ini menjelaskan implementasi antar muka pada halaman utama, halaman game, halaman score, dan halaman credit.
4.1.2.1Implementasi Antar Muka Halaman Utama
Halaman utama adalah halaman yang pertama kali muncul saat user menjalankan program. Pada halaman ini terdapat dua menu, “PRESS TO PLAY” untuk masuk ke halaman game, dan “CREDIT” untuk melihat credit.
Gambar 4.1 Implementasi Antar Muka Halaman Utama
4.1.2.2Implementasi Antar Muka Halaman Game
Halaman game adalah halaman dimana user akan bermain game. Pada halaman ini terdapat bata (Brick), bola (Ball), Life, Score, Time. User akan menggerakkan bola dengan gerakan tubuh yang direkam oleh webcam.
Gambar 4.2 Implementasi Antar Muka Halaman Game
4.1.2.3Implementasi Antar Muka Halaman Score
Halaman score muncul setelah user selesai bermain game. Pada halaman ini akan menampilan score yang diperoleh user dalam bermain game.
4.1.2.4Implementasi Antar Muka Halaman Credit
Gambar 4.4 Implementasi Antar Muka Halaman Credit
4.1.3 Implementasi Kode Program
4.1.3.1Implementasi Kode Program Halaman Utama
Potongan kode program pada halaman utama. /**
* jika klik play, masuk ke halaman game * jika klik credit, masuk ke halaman credit */
private function onMouseEventHandler(e:MouseEvent):void { switch (e.type){ case MouseEvent.CLICK: removeListener(playbtn); removeListener(creditbtn); if (e.target == playbtn) { select = 0; }else if(e.target==creditbtn){ select = 1; } Music.ButtonSound(); timeline.reverse();
break;
case MouseEvent.MOUSE_OVER:
TweenLite.to(e.target, .3, { scaleX:1.1, scaleY:1.1, ease:Back.easeOut } ); break;
case MouseEvent.MOUSE_OUT:
TweenLite.to(e.target, .3, { scaleX:1, scaleY:1, ease:Linear.easeNone } ); break;
} }
4.1.3.2Implementasi Kode Program Halaman Game
Pada halaman game terdapat dua kode program utama. Kode program pertama berfungsi untuk gameplay. Seperti memeriksa benturan bola dengan bata, bola dengan dinding, menampilkan bola, menampilkan bata, menampilkan waktu, menampilkan life, dan menjalankan backsound. Kode program kedua berfungsi untuk motion detection, yaitu memeriksa benturan bola dengan obyek bergerak yang direkam oleh kamera.
Potongan kode program gameplay pada halaman game. /**
* memeriksa benturan bola dengan bata
* jika bola membentur bata bonus, bola tambah 1, point tambah 5 dan bata hilang * jika bola membentur bata, point tambah 5 dan bata hilang
*/
private function updateBall():void { checkCollisionCdk();
for each (var b:Bola in balls) { b.update();
}
for each (b in balls){
for (var i:int = 0; i < bricks.length; i++){ if (b.checkCollisionBriks(bricks[i])) { if (isBonus(bricks[i])) { trace("This Bonus"); addBall(b.x, b.y); }else{ point += 5; } Music.CollisionSound(); removeBrik(i) } } }
for (var j:int = 0; j < balls.length; j++){
if (balls[j].y > (stage.stageHeight + balls[j].height / 2)) { removeBall(j);
} }
} /**
* memeriksa benturan bola dengan bata/dinding
* jika bola membentur bata/dinding atas/bawah, akan memantul ke arah sebaliknya (x * -1) * jika bola membentur bata/dinding kanan/kiri, akan memantul ke arah sebaliknya (y * -1) */
public function checkCollisionBriks(t:DisplayObject):Boolean { var result:Boolean = false;
var top:Point = new Point(x, y - (this.width / 2)); var right:Point = new Point(x + (this.width / 2), y); var bottom:Point = new Point(x, y + (this.height / 2)); var left:Point = new Point(x - (this.width / 2), y);
if (t.hitTestPoint(top.x, top.y, true) || t.hitTestPoint(bottom.x, bottom.y, true)) { vy *= -1;
result = true;
}else if (t.hitTestPoint(right.x, right.y, true) || t.hitTestPoint(left.x, left.y, true)) { vx *= -1;
result = true; }
return result; }
Potongan kode program motion detection pada halaman game. //memanggil fungsi dari library CollisionDetectionKit (CollisionGroup dan CollisionList) private var collisionGroup:CollisionGroup;
private var collisionList:CollisionList; private function createColision():void{
collisionList = new CollisionList(map); collisionList.excludeColor(0x000080, 255, 0,0,0); }
/**
* memeriksa benturan bola dengan obyek bergerak
* jika bola membentur obyek bergerak, maka bola memantul ke atas (y = -1)) */
private function checkCollisionCdk():void{
var collisions:Array = collisionList.checkCollisions(); for(var i:int=0; i < collisions.length; i++){
var collision:Object = collisions[i]; var angle:Number = collision.angle;
var overlap:int = collision.overlapping.length; if (isBall(collision.object1)) {
var ball:Bola = collision.object1; if (ball.vy > 0) { ball.vy = -ball.speed; } } } }
4.1.3.3Implementasi Kode Program Halaman Score
Potongan kode program pada halaman score. //menampilkan halaman score
public function Score(targetNilai:int = 0 ) {
addEventListener(Event.ADDED_TO_STAGE, init); TargetNilai = targetNilai; TextNilai = 0; judul.alpha = 0; judul.scaleX = judul.scaleY = .3; }
4.1.3.4Implementasi Kode Program Halaman Credit
Potongan kode program pada halaman credit //menampilkan halaman credit
public function Creditscreen(){
addEventListener(Event.ADDED_TO_STAGE, init); }
private function init(e:Event):void {
removeEventListener(Event.ADDED_TO_STAGE, init); interval = setInterval(endcredit, 7000);
addEventListener(MouseEvent.CLICK, onMouseClick); }
private function onMouseClick(e:MouseEvent):void{ endcredit();
4.2 Pengujian
Pada tahap pengujian dijelaskan mengenai skenario pengujian, hasil pengujian dan analisis hasil pengujian.
4.2.1 Skenario Pengujian Black Box
Skeneario pengujian pada aplikasi Brick Breaker Motion Detection meliputi pengujian software terhadap fungsionalitas game yang berfungsi untuk menguji kesesuaian terhadap proses yang terjadi dalam sistem.
Pengujian aplikasi Brick Breaker Motion Detection menggunakan metode black box. Metode ini lebih berfokus pada kebutuhan fungsi dari aplikasi Brick Breaker Motion Detection. Pengujian dilakukan dengan cara memberikan sejumlah masukan (input) pada program yang kemudian diproses sesuai dengan kebutuhan fungsionalnya untuk melihat keluaran (output) yang dihasilkan program. Jika output yang dihasilkan sesuai dengan spesifikasi yang diharapkan, maka program berfungsi dengan benar. Tetapi, jika output yang dihasilkan tidak sesuai spesifikasi yang diharapkan, maka masih terdapat kesalahan pada program dan belum berfungsi dengan benar.
4.2.1.1Skenario Pengujian Halaman Utama
Tabel 4.1 Skenario Pengujian Halaman Utama No. Deskripsi
Fungsional Kasus Uji Hasil yang diharapkan
1.
Tombol
“PRESS TO PLAY”
Melakukan klik pada tombol “PRESS TO PLAY” Program menampilkan halaman game 2. Tombol “CREDIT”
Melakukan klik pada tombol “CREDIT”
Program menampilkan halaman credit
4.2.1.2Skenario Pengujian Halaman Game
Tabel 4.2 Skenario Pengujian Halaman Game No. Deskripsi
Fungsional Kasus Uji Hasil yang diharapkan
1. Bola
User menyentuh Bola Bola memantul ke atas Bola menyentuh batas
samping Bola memantul ke atas
Bola jatuh Life berkurang satu
Bola menyentuh Bata
Bola memantul ke bawah, Bata hancur,
Score bertambah
2. Bata Bata habis
Game Over kemudian menampilkan halaman score
3. Life Life habis
Game Over kemudian menampilkan halaman score
4. Waktu Waktu habis
Game Over kemudian menampilkan halaman score
4.2.1.3Skenario Pengujian Halaman Score
Tabel 4.3 Skenario Pengujian Halaman Score No. Deskripsi
Fungsional Kasus Uji Hasil yang diharapkan 1. Score Menampilkan Score pada
halaman score
Program menampilkan Score pada halaman score 2. Tombol “Enter” Melakukan klik pada
tombol “Enter”
Program menampilkan halaman utama
4.2.1.4Skenario Pengujian Halaman Credit
Tabel 4.4 Skenario Pengujian Halaman Credit No. Deskripsi
Fungsional Kasus Uji Hasil yang diharapkan
1. Credit Menampilkan Credit pada halaman credit
Program menampilkan Credit pada halaman credit
2. Tombol “Enter” Melakukan klik pada tombol “Enter”
Program menampilkan halaman utama
4.2.2 Hasil Pengujian Black Box
Pada tahap ini menjelaskan hasil yang didapat apakah sudah sesuai dengan hasil yang diharapkan pada skenario pengujian.
4.2.2.1Hasil Pengujian Halaman Utama
Tabel 4.5 Hasil Pengujian Halaman Utama No. Deskripsi
Fungsional Kasus Uji
Hasil yang
diharapkan Hasil Uji
1.
Tombol “PRESS TO PLAY”
Melakukan klik pada tombol “PRESS TO PLAY”
Program menampilkan
halaman game Sukses
2. Tombol “CREDIT”
Melakukan klik pada tombol “CREDIT”
Program menampilkan
4.2.2.2Hasil Pengujian Halaman Game
Tabel 4.6 Hasil Pengujian Halaman Game No. Deskripsi
Fungsional Kasus Uji
Hasil yang
diharapkan Hasil Uji
1. Bola
User menyentuh Bola Bola memantul ke atas Sukses Bola menyentuh batas
samping Bola memantul ke atas Sukses Bola jatuh Life berkurang satu Sukses
Bola menyentuh Bata
Bola memantul ke bawah,
Bata hancur, Score bertambah
Sukses
2. Bata Bata habis
Game Over kemudian menampilkan halaman score
Sukses
3. Life Life habis
Game Over kemudian menampilkan halaman score
Sukses
4. Waktu Waktu habis
Game Over kemudian menampilkan halaman score
Sukses
4.2.2.3Hasil Pengujian Halaman Score
Tabel 4.7 Hasil Pengujian Halaman Score No. Deskripsi
Fungsional Kasus Uji
Hasil yang
diharapkan Hasil Uji
1. Score Menampilkan Score pada halaman score
Program menampilkan Score pada halaman score
2. Tombol “Enter”
Melakukan klik pada tombol “Enter”
Program menampilkan
halaman utama Sukses
4.2.2.4Hasil Pengujian Halaman Credit
Tabel 4.8 Hasil Pengujian Halaman Credit No. Deskripsi
Fungsional Kasus Uji
Hasil yang
diharapkan Hasil Uji
1. Credit Menampilkan Credit pada halaman credit
Program menampilkan Credit pada halaman credit
Sukses
2. Tombol “Enter”
Melakukan klik pada tombol “Enter”
Program menampilkan
halaman utama Sukses
4.2.3 Analisis Hasil Pengujian
Berikut ini adalah hasil analisa aplikasi Brick Breaker Motion Detection berdasarkan uraian yang telah dijelaskan pada tabel-tabel hasil pengujian:
Aplikasi Brick Breaker Motion Detection berjalan dengan baik sesuai dengan penerapan teori yang telah disampaikan pada perkuliahan.
