Pengembangan Game Engine 2D pada XNA Framework LAPORAN TUGAS AKHIR Disusun sebagai syarat kelulusan tingkat sarjana oleh: Shieny Aprilia / 13505089 PROGRAM STUDI TEKNIK INFORMATIKA SEKOLAH TEKNIK ELEKTRO DAN INFORMATIKA INSTITUT TEKNOLOGI BANDUNG 2009
Lembar Pengesahan Program Studi Sarjana Teknik Informatika Pengembangan Game Engine 2D pada XNA Framework Tugas Akhir Program Studi Sarjana Teknik Informatika ITB oleh: Shieny Aprilia / 13505089 Telah disetujui dan disahkan sebagai laporan Tugas Akhir di Bandung, pada tanggal 4 September 2009 Pembimbing Achmad Imam Kistijantoro S.T., M.Sc., Ph.D. NIP 132320559 i
ABSTRAK Pada Tugas Akhir ini, telah dikembangkan sebuah game engine 2D pada XNA framework yang bernama XGate2D. XGate2D mempunyai 8 fitur, yaitu input handler, animasi, Graphical User Interface (GUI), collision detection, physics, particle system, tiling engine, dan audio. XGate2D dapat digunakan untuk membangun game 2D pada PC. Keberadaan XGate2D sangatlah penting, karena pembangunan game pada XNA membutuhkan pengetahuan mendalam mengenai framework tersebut, sedangkan game engine 2D XNA yang baik dan mudah masih jarang ditemukan. Selain itu, pembuatan game pada XNA langsung akan membuat beberapa kebutuhan umum game 2D akan diimplementasi berulang-ulang pada setiap pembuatan game. Sedangkan jika menggunakan XGate2D, kebutuhan umum tersebut dapat langsung digunakan saja dengan mudah. XGate2D terdiri dari 4 modul, yaitu XGate2DCore, XGate2DGraphic, XGate2DPhysic, dan XGate2DUserInterface. XGate2DCore adalah modul inti XGate2D yang bertugas mengatur jalannya game yang dibangun di atas XGate2D. XGate2DGraphic adalah modul yang bertugas mengelola semua objek yang digambarkan ke layar. XGate2DPhysic adalah modul yang bertugas mengatur sifat-sifat fisika pada game. XGate2DUserInterface adalah modul yang berisi objek-objek yang biasanya terdapat pada user interface program. Setelah pengembangan game engine, pengujian unit, dan pengujian sistem dilakukan, dapat ditarik kesimpulan bahwa XGate2D memudahkan pengembangan game 2D, karena kebutuhan-kebutuhan umum game 2D sudah disediakan oleh XGate2D dan dapat langsung digunakan pada pembuatan game. Kata kunci: game, game engine, XNA framework ii
KATA PENGANTAR Puji syukur kepada Tuhan Yang Maha Esa, karena berkat kasih dan bimbingan-nya, penulis dapat menyelesaikan Tugas Akhirnya yang berjudul Pengembangan Game Engine 2D pada XNA Framework dengan baik. Penulis ingin mengucapkan terima kasih sebesar-besarnya kepada : 1. Papa, Mama, dan Koko tercinta yang selalu mendukung, menyemangati, dan menemani penulis di saat suka maupun duka 2. Bapak Achmad Imam Kistijantoro S.T., M.Sc., Ph.D. sebagai dosen pembimbing Tugas Akhir yang selalu membimbing penulis dengan sabar selama pengerjaan Tugas Akhir 3. Ibu Yani Widyani, S.T., M.T. sebagai dosen penguji pada presentasi proposal, seminar, dan prasidang Tugas Akhir yang telah memberikan saran dan kritik membangun kepada penulis 4. Bapak Riza Satria Perdana, S.T., M.T. sebagai dosen penguji pada sidang Tugas Akhir yang telah memberikan saran dan kritik membangun kepada penulis 5. Semua teman-teman di Agate Studio yang selalu menyemangati dan menemani penulis di saat suka maupun duka, memberikan banyak ilmu berharga baik teknis maupun non-teknis kepada penulis, mengijinkan aset gambarnya untuk dijadikan Tugas Akhir penulis, dan menjadi inspirasi topik Tugas Akhir ini 6. Seluruh dosen S1 Teknik Informatika ITB yang telah dengan sabar membimbing dan memberikan banyak ilmu baik akademis dan non-akademis kepada penulis 7. Semua teman-teman di Teknik Informatika ITB, khususnya angkatan 2005, yang menjadi teman seperjuangan dalam menyelesaikan studi S1 iii
iv Penulis berharap Tugas Akhir ini dapat bermanfaat bagi banyak orang dan penulis mengharapkan kritik dan saran mengenai Tugas Akhir ini, karena Tugas Akhir ini masih sangat jauh dari sempurna. Terima Kasih. Bandung, 4 September 2009 Penulis
DAFTAR ISI Lembar Pengesahan Program Studi Sarjana Teknik Informatika... i ABSTRAK... ii KATA PENGANTAR... iii DAFTAR ISI... v DAFTAR TABEL... viii DAFTAR GAMBAR... x DAFTAR KODE... xii BAB I PENDAHULUAN... I-1 1.1 Latar Belakang... I-1 1.2 Rumusan Masalah... I-2 1.3 Tujuan... I-2 1.4 Batasan Masalah... I-3 1.5 Metodologi... I-3 BAB II DASAR TEORI... II-1 2.1 Game... II-1 2.1.1 Pengertian Game... II-1 2.1.2 Sejarah Singkat Game... II-2 2.1.3 Jenis Game... II-4 2.1.4 Genre Game... II-5 2.2 Teori Grafika 2D... II-7 2.2.1 Representasi Gambar... II-8 2.2.2 Sprite... II-8 2.3 Game Engine... II-10 2.3.1 Input Handler... II-11 2.3.2 Animasi... II-11 2.3.3 Graphical User Interface... II-12 2.3.4 Collision Detection... II-12 2.3.5 Physics... II-14 2.3.6 Particle System... II-16 v
vi 2.3.7 Tiling Engine... II-16 2.3.8 Scripting... II-17 2.3.9 Isometric Scene Manager... II-17 2.3.10 Particle Editor... II-18 2.3.11 Level Editor... II-19 2.3.12 Audio... II-20 2.4 XNA Framework... II-20 2.4.1 XNA Content Pipeline... II-20 2.4.2 2D pada XNA... II-21 2.4.3 Siklus Game pada XNA... II-22 BAB III ANALISIS... III-1 3.1 Analisis Pengertian Game... III-1 3.2 Dunia dan Objek 2D... III-1 3.3 Analisis Fitur XGate2D... III-3 3.3.1 XG-F-01 - Input Handler... III-4 3.3.2 XG-F-02 - Animasi... III-5 3.3.3 XG-F-03 - Graphical User Interface (GUI)... III-8 3.3.4 XG-F-04 - Collision Detection... III-10 3.3.5 XG-F-05 - Physics... III-12 3.3.6 XG-F-06 - Particle System... III-13 3.3.7 XG-F-07 - Tiling Engine... III-14 3.3.8 XG-F-08 - Audio... III-15 BAB IV PERANCANGAN... IV-1 4.1 Arsitektur Game Engine... IV-1 4.2 Rancangan Modul... IV-2 4.3 Rancangan Kelas, Interface, dan Enumerasi... IV-5 4.3.1 XGate2DCore... IV-6 4.3.2 XGate2DGraphic... IV-9 4.3.3 XGate2DPhysic... IV-11 4.3.4 XGate2DUserInterface... IV-12 4.4 Rancangan Penggunaan Fitur... IV-14 4.4.1 Input Handler... IV-14
vii 4.4.2 Animasi... IV-14 4.4.3 GUI... IV-14 4.4.4 Collision Detection... IV-15 4.4.5 Physics... IV-15 4.4.6 Particle System... IV-15 4.4.7 Tiling Engine... IV-16 4.4.8 Audio... IV-16 BAB V IMPLEMENTASI DAN PENGUJIAN... V-1 5.1 Implementasi... V-1 5.1.1 Lingkungan Implementasi... V-1 5.1.2 Batasan Implementasi... V-1 5.1.3 Implementasi Modul... V-2 5.1.4 Implementasi Kelas, Interface, dan Enumerasi... V-2 5.2 Pengujian... V-4 5.2.1 Pengujian Unit... V-4 5.2.2 Pengujian Sistem... V-12 BAB VI KESIMPULAN DAN SARAN... VI-1 6.1 Kesimpulan... VI-1 6.2 Saran... VI-3 DAFTAR PUSTAKA... xiii LAMPIRAN A Rincian Kelas Perancangan XGate2D... 1
DAFTAR TABEL Tabel III-1 Kelas Analisis XGate2D pada Representasi Dunia dan Objek 2D... III-3 Tabel III-2 Fitur XGate2D... III-4 Tabel III-3 Kelas XNA pada fitur XG-F-01 Input Handler... III-5 Tabel III-4 Kelas Analisis XGate2D pada fitur XG-F-01 Input Handler... III-5 Tabel III-5 Kelas XNA pada fitur XG-F-02 - Animasi... III-7 Tabel III-6 Kelas Analisis XGate2D pada fitur XG-F-02 Animasi... III-8 Tabel III-7 Properti dan Event Elemen GUI XGate2D... III-8 Tabel III-8 Kelas Analisis XGate2D pada fitur XG-F-03 GUI... III-9 Tabel III-9 Kelas Analisis XGate2D pada fitur XG-F-04 Collision Detection... III-11 Tabel III-10 Kelas Analisis XGate2D pada fitur XG-F-05 Physics... III-13 Tabel III-11 Kelas Analisis XGate2D pada fitur XG-F-06 Particle System... III-14 Tabel III-12 Kelas Analisis XGate2D pada fitur XG-F-07 Tiling Engine... III-15 Tabel III-13 Kelas XNA pada fitur XG-F-08 Audio... III-16 Tabel III-14 Kelas Analisis XGate2D pada fitur XG-F-08 - Audio... III-17 Tabel IV-1 Pengelompokkan Kelas pada Setiap Fitur terhadap Modul XGate2D... IV-2 Tabel IV-2 Daftar Kelas pada Modul XGate2DCore... IV-6 Tabel IV-3 Daftar Kelas pada Modul XGate2DGraphic... IV-9 Tabel IV-4 Daftar Kelas pada Modul XGate2DPhysic... IV-11 Tabel IV-5 Daftar Kelas pada Modul XGate2DUserInterface... IV-12 Tabel V-1 Implementasi Modul pada XGate2D... V-2 Tabel V-2 Implementasi Kelas pada Modul XGate2DCore... V-2 Tabel V-3 Implementasi Kelas pada Modul XGate2DGraphic... V-3 Tabel V-4 Implementasi Kelas pada Modul XGate2DPhysic... V-3 Tabel V-5 Implementasi Kelas pada Modul XGate2DUserInterface... V-3 Tabel V-6 Hasil Pengujian Modul XGate2DCore... V-10 Tabel V-7 Hasil Pengujian Modul XGate2DGraphic... V-10 Tabel V-8 Hasil Pengujian Modul XGate2DPhysic... V-11 Tabel V-9 Hasil Pengujian Modul XGate2DUserInterface... V-11 Tabel V-10 Pemetaan Fitur XGate2D dengan Implementasinya pada Ring Catcher V-13 viii
Tabel V-11 Hasil Pengujian Sistem XGate2D... V-14 ix
DAFTAR GAMBAR Gambar II-1 Contoh Game 2D... II-2 Gambar II-2 Contoh Game 3D... II-2 Gambar II-3 Contoh Gambar Objek Beranimasi... II-11 Gambar II-4 Contoh Antarmuka pada Game... II-12 Gambar II-5 Rectangle Collision Detection... II-13 Gambar II-6 Circle Collision Detection... II-13 Gambar II-7 Polygon Collision Detection... II-14 Gambar II-8 Per Pixel Collision Detection... II-14 Gambar II-9 Efek Partikel Ledakan... II-16 Gambar II-10 Contoh Penggunaan Tiling Engine... II-17 Gambar II-11 Contoh Scene Isometrik... II-18 Gambar II-12 Contoh Particle Editor... II-19 Gambar II-13 Contoh Level Editor... II-20 Gambar II-14 Sistem Kordinat 2D XNA pada Layar dengan Resolusi 1024x768... II-22 Gambar II-15 Diagram Alir Siklus Game pada XNA... II-23 Gambar III-1 Representasi Dunia dan Objek 2D... III-2 Gambar III-2 Diagram Kelas Analisis Representasi Dunia dan Objek 2D... III-3 Gambar III-3 Diagram Kelas Analisis Fitur XG-F-01 Input Handler... III-5 Gambar III-4 Representasi Objek Beranimasi... III-6 Gambar III-5 Diagram Kelas Analisis Fitur XG-F-02 Animasi... III-7 Gambar III-6 Diagram Kelas Analisis Fitur XG-F-03 GUI... III-9 Gambar III-7 Representasi Objek Collidable... III-11 Gambar III-8 Diagram Kelas Analisis Fitur XG-F-04 Collision Detection... III-11 Gambar III-9 Representasi Objek Fisika... III-12 Gambar III-10 Diagram Kelas Analisis Fitur XG-F-05 Physics... III-13 Gambar III-11 Diagram Kelas Analisis Fitur XG-F-06 Particle System... III-14 Gambar III-12 Diagram Kelas Analisis Fitur XG-F-07 Tiling Engine... III-15 Gambar III-13 Diagram Kelas Analisis Fitur XG-F-08 Audio... III-16 Gambar IV-1 Arsitektur XGate2D... IV-1 x
xi Gambar IV-2 Rancangan Modul XGate2D... IV-3 Gambar IV-3 Diagram Kelas Modul XGate2DCore... IV-8 Gambar IV-4 Diagram Kelas Modul XGate2DGraphic... IV-10 Gambar IV-5 Diagram Kelas Modul XGate2DPhysic... IV-12 Gambar IV-6 Diagram Kelas Modul XGate2DUserInterface... IV-13 Gambar V-1 Prototype Game Ring Catcher... V-13
DAFTAR KODE Kode V-1 Pengujian Modul XGate2DCore... V-5 Kode V-2 Pengujian Modul XGate2DGraphic (1)... V-6 Kode V-3 Pengujian Modul XGate2DGraphic (2)... V-7 Kode V-4 Pengujian Modul XGate2DPhysic... V-8 Kode V-5 Pengujian Modul XGate2DUserInterface... V-9 xii