APLIKASI BRICK BREAKER MOTION DETECTION Laporan Tugas Akhir Diajukan Untuk Melengkapi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer Oleh : MUHAMMAD IMAM MUKHSIN 41508110013 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER UNIVERSITAS MERCU BUANA JAKARTA 2014
ii
iii
KATA PENGANTAR Puji syukur Alhamdulillah kehadirat Allah SWT yang telah melimpahkan segala rahmat dan karunianya, sehingga penulis dapat menyelesaikan laporan tugas akhir yang merupakan salah satu persyaratan untuk menyelesaikan program studi strata satu (S1) pada Jurusan Teknik Informatika Universitas Mercu Buana. Penulis menyadari bahwa laporan tugas akhir ini masih jauh dari sempurna. Karena itu, kritik dan saran akan senantiasa penulis terima dengan senang hati. Dengan segala keterbatasan, penulis menyadari pula bahwa laporan tugas akhir ini takkan terwujud tanpa bantuan, bimbingan, dan dorongan dari berbagai pihak. Untuk itu, dengan segala kerendahan hati, penulis menyampaikan ucapan terima kasih kepada : 1. Bapak Tri Daryanto.,S.Kom., MT, selaku pembimbing tigas akhir dan Kepala Program Studi pada Jurusan Teknik Informatika Universitas Mercu Buana. 2. Bapak Sabar Rudiarto S. Kom.,M.Kom, selaku Koordinator Tugas Akhir pada Jurusan Teknik Informatika Universitas Mercu Buana. 3. Orang tua tercinta yang telah mendukung penulis baik spirit maupun materi. 4. Saudara dan sahabat-sahabatku terutama Kawan-kawan Angkatan 2008 yang telah memberikan dukungan moral untuk terus meyelesaikan tugas akhir ini. Semoga Allah SWT membalas kebaikan dan selalu mencerahkan taufik serta hidayahnya, Amin. Jakarta, Februari 2014 Penulis iv
ABSTRACT Development of information technology, especially the gaming controller, makes the player requires more interaction to control the game. One of gaming controller has developed is for Brick Breaker game. Brick Breaker is a classic game in which player must smash a wall of brick by deflecting a bouncing ball. However, Brick Breaker Motion Detection does not use a mouse or keyboard as a game controller. To give more interaction between players and games, the keyboard and mouse will be replaced with a webcam. To bounce the ball, the player only needs to move a hand or other body part. The method used to control the game is to detect motion recorded by the camera. basic theory which used to make this game are digital image processing and computer vision. This game was built using Flash and requires Flash Player to run the game. Game interface is built using 2D object in order to make game running smoothly. This game is able to capture the movement well. The ball is touched by the player will bounce responsive. This game can be developed further so that it becomes more interactive and interesting, such as using 3D interface, adding themes, adding difficult level, and develop game features. Key Word: Breaker, Brick, Detection, Motion xi+47 pages; 20 figures; 13 tables Bibliography: 15 (1995-2011) v
ABSTRAK Perkembangan teknologi informasi, terutama alat kendali game, membuat pemain membutuhkan lebih banyak interaksi untuk mengendalikan permainan. Salah satu alat kendali yang dikembangkan adalah untuk game Brick Breaker. Brick Breaker adalah game klasik dimana pemain harus menghancurkan dinding bata dengan membelokkan bola yang memantul. Namun, Brick Breaker Motion Detection tidak menggunakan mouse ataupun keyboard sebagai kontrol game. Untuk memberikan lebih banyak interaksi antara pemain dan game, keyboard dan mouse akan diganti dengan webcam. Untuk memantulkan bola, pemain hanya perlu menggerakkan tangan atau anggota tubuh lainnya. Metode yang digunakan untuk kontrol game adalah dengan mendeteksi gerakan yang direkam oleh kamera. Landasan teori yang digunakan untuk membuat game ini adalah Digital Image Processing dan Computer Vision. Game ini dibuat menggunakan Flash dan membutuhkan Flash Player untuk menjalankan game. Antar muka game dibangun menggunakan objek 2D supaya permainan berjalan lancar. Game ini mampu menangkap pergerakan dengan baik. Bola yang disentuh pemain akan memantul dengan responsif. Game ini dapat dikembangkan lagi sehingga menjadi lebih interaktif dan menarik, seperti menggunakan antarmuka 3D, menambahkan tema, menambahkan tingkat kesulitan, dan mengembangkan fitur-fitur permainan. Kata Kunci: Breaker, Brick, Detection, Motion xi+47 halaman; 20 gambar; 13 tabel Daftar Acuan: 15 (1995-2011) vi
DAFTAR ISI Halaman LEMBAR PERNYATAAN... ii LEMBAR PERSETUJUAN... iii KATA PENGANTAR... iv ABSTRACT... v ABSTRAK... vi DAFTAR ISI... vii DAFTAR GAMBAR... x DAFTAR TABEL... xi BAB I PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Perumusan Masalah... 1 1.3 Tujuan dan Manfaat... 2 1.4 Batasan Masalah... 2 1.5 Metode Penelitian... 2 1.5.1 Metode Pengumpulan Data... 2 1.5.2 Metode Pengembangan Multimedia... 3 1.5.3 Metode Pengujian Sistem... 3 1.6 Sistematika Penulisan... 4 BAB II LANDASAN TEORI... 5 2.1 Brick Breaker... 5 2.2 Digital Image Processing... 5 2.2.1 Jenis Citra... 6 2.2.2 Pattern Recognition... 8 2.3 Computer Vision... 9 2.3.1 Image Acquisition... 10 2.3.2 Image Enhancement... 10 vii
2.3.3 Image Segmentation... 11 2.3.4 Feature Extraction... 14 2.3.5 Operasi binary image... 14 2.4 Analisa dan Perancangan Berorientasi Obyek... 15 2.4.1 Use Case Diagram... 16 2.4.2 Activity Diagram... 17 2.4.3 Sequence Diagram... 19 2.4.4 Class Diagram... 20 2.4.5 Pengujian Black Box... 20 2.5 Teknologi Pendukung... 21 2.5.1 FlashDevelop... 21 2.5.2 Adobe Flash... 21 BAB III ANALISIS DAN PERANCANGAN... 23 3.1 Analisis Aplikasi... 23 3.2 Perancangan Aplikasi... 23 3.2.1 Usecase Diagram... 23 3.2.1.1 Usecase Diagram Memainkan Game... 24 3.2.1.2 Usecase Diagram Melihat Credit... 24 3.2.2 Activity Diagram... 25 3.2.2.1 Activity Diagram Motion Detection... 25 3.2.2.2 Activity Diagram Pemilihan Credit... 27 3.2.3 Sequence Diagram... 28 3.2.3.1 Sequence Diagram Memainkan Game... 28 3.2.3.2 Sequence Diagram Pemilihan Credit... 28 3.2.4 Class Diagram... 29 3.3 Perancangan Antar Muka... 29 3.3.1 Perancangan Antar Muka Halaman Utama... 29 3.3.2 Perancangan Antar Muka Halaman Game... 30 3.3.3 Perancangan Antar Muka Halaman Score... 31 3.3.4 Perancangan Antar Muka Halaman Credit... 31 3.4 Pengumpulan Bahan... 32 viii
BAB IV IMPLEMENTASI DAN PENGUJIAN... 33 4.1 Implementasi... 33 4.1.1 Spesifikasi Sistem... 34 4.1.2 Implementasi Antar Muka... 34 4.1.2.1 Implementasi Antar Muka Halaman Utama... 35 4.1.2.2 Implementasi Antar Muka Halaman Game... 35 4.1.2.3 Implemnetasi Antar Muka Halaman Score... 36 4.1.2.4 Implemnetasi Antar Muka Halaman Credit... 37 4.1.3 Implementasi Kode Program... 37 4.1.3.1 Implementasi Kode Program Halaman Utama... 37 4.1.3.2 Implementasi Kode Program Halaman Game... 38 4.1.3.3 Implementasi Kode Program Halaman Score... 40 4.1.3.4 Implementasi Kode Program Halaman Credit... 40 4.2 Pengujian... 41 4.2.1 Skenario Pengujian Black Box... 41 4.2.1.1 Skenario Pengujian Halaman Utama... 41 4.2.1.2 Skenario Pengujian Halaman Game... 42 4.2.1.3 Skenario Pengujian Halaman Score... 42 4.2.1.4 Skenario Pengujian Halaman Credit... 43 4.2.2 Hasil Pengujian Black Box... 43 4.2.2.1 Hasil pengujian Halaman Utama... 43 4.2.2.2 Hasil Pengujian Halaman Game... 44 4.2.2.3 Hasil Pengujian Halaman Score... 44 4.2.2.4 Hasil Pengujian Halaman Credit... 45 4.2.3 Analisis Hasil Pengujian... 45 BAB V PENUTUP... 46 5.1 Kesimpulan... 46 5.2 Saran... 46 DAFTAR PUSTAKA... 47 ix
DAFTAR GAMBAR Halaman 1. Gambar 2.1 Game Brick Breaker... 5 2. Gambar 2.2 Koordinat Citra Digital... 6 3. Gambar 2.3 Citra Grayscale... 7 4. Gambar 2.4 8 Bit Truecolor... 7 5. Gambar 2.5 16 Bit Highcolor... 8 6. Gambar 3.1 Use Case Diagram Brick Breaker Motion Detection.. 23 7. Gambar 3.2a Activity Diagram Motion Detection... 25 8. Gambar 3.2b Activity Diagram Motion Detection... 26 9. Gambar 3.3 Activity Diagram Pemilihan Credit... 27 10. Gambar 3.4 Sequence Diagram Memainkan Game... 28 11. Gambar 3.5 Sequence Diagram Pemilihan Credit... 28 12. Gambar 3.6 Class Diagram Brick Breaker Motion Detection... 29 13. Gambar 3.7 Perancangan Antar Muka Halaman Utama... 30 14. Gambar 3.8 Perancangan Antar Muka Halaman Game... 30 15. Gambar 3.9 Perancangan Antar Muka Halaman Score... 31 16. Gambar 3.10 Perancangan Antar Muka Halaman Credit... 32 17. Gambar 4.1 Implementasi Antar Muka Halaman Utama... 35 18. Gambar 4.2 Implementasi Antar Muka Halaman Game... 36 19. Gambar 4.3 Implementasi Antar Muka Halaman Score... 36 20. Gambar 4.4 Implementasi Antar Muka Halaman Credit... 37 x
DAFTAR TABEL Halaman 1. Tabel 2.1 Jenis diagram UML... 15 2. Tabel 2.2 Notasi Use Case Diagram... 16 3. Tabel 2.3 Notasi Activity Diagram... 18 4. Tabel 2.4 Notasi pemodelan Sequence Diagram... 19 5. Tabel 3.1 Pengumpulan Bahan... 32 6. Tabel 4.1 Skenario Pengujian Halaman Utama... 41 7. Tabel 4.2 Skenario Pengujian Halaman Game... 42 8. Table 4.3 Skenario Pengujian Halaman Score... 42 9. Table 4.4 Skenario Pengujian Halaman Credit... 43 10. Table 4.5 Hasil Pengujian Halaman Utama... 43 11. Table 4.6 Hasil Pengujian Halaman Game... 44 12. Table 4.7 Hasil Pengujian Halaman Score... 44 13. Table 4.8 Hasil Pengujian Halaman Credit... 45 xi