BAB IV PERANCANGAN
Pada Bab IV ini, akan dijelaskan hasil perancangan XGate2D berdasarkan hasil analisis pada Bab III. Hasil perancangan yang akan dibahas meliputi arsitektur XGate2D, rancangan modul-modul yang membentuk XGate2D, diagram kelas dan struktur data yang membentuk masing-masing modul, aksi yang perlu dilakukan oleh pengguna XGate2D untuk setiap fiturnya, dan perancangan algoritma yang relatif kompleks sehingga dirasa perlu untuk dijelaskan pada bab ini.
4.1 Arsitektur Game Engine
Gambar IV-1 Arsitektur XGate2D
Seperti judul Tugas Akhir ini, XGate2D dibangun di atas XNA framework. Dengan kata lain, XGate2D memanfaatkan beberapa fitur yang disediakan oleh XNA framework. XNA framework sendiri menggunakan DirectX sebagai graphic API untuk melakukan IV-1
IV-2
penggambaran sprite (Gambar IV-1). Adapun fitur-fitur XNA framework yang digunakan oleh XGate2D adalah sebagai berikut: 1. Content Pipeline Seperti yang telah dijelaskan pada Bab II, content pipeline digunakan untuk melakukan konversi content yang formatnya tidak kompatibel dengan game agar menjadi kompatibel dan langsung dapat digunakan pada game. XGate2D menggunakan fitur ini untuk me-load file gambar dan suara yang akan digunakan pada suatu game. 2. Rendering XGate2D menggunakan kelas SpriteBatch XNA untuk menggambar sprite dan teks ke layar. 3. Input XGate2D menggunakan kelas input yang disediakan XNA untuk menangani input dari keyboard, mouse, dan game pad. 4. Audio XGate2D menggunakan kelas AudioEngine, WaveBank, dan SoundBank, untuk menambahkan suara pada game.
4.2 Rancangan Modul Mengacu pada hasil analisis pada Bab III, dilakukan pengelompokkan kelas, interface, dan enumerasi berdasarkan fitur dan keterkaitan fungsionalitas masing-masing fitur menjadi beberapa modul. Tabel pengelompokkan ini dapat dilihat pada Tabel IV-1. Tabel IV-1 Pengelompokkan Kelas pada Setiap Fitur terhadap Modul XGate2D No. 1. 2. 3. 4. 5. 6. 7. 8.
Nama Fitur Input Handler Animasi GUI Collision Detection Physics Particle System Tiling Engine Audio
Modul XGate2DCore XGate2DGraphic XGate2DUserInterface XGate2DPhysic XGate2DPhysic XGate2DGraphic XGate2DGraphic XGate2DCore
Modul-modul yang teridentifikasi ini berhubungan satu sama lain, dan diagram keterhubungan modul-modul ini dapat dilihat pada Gambar IV-2.
IV-3
Gambar IV-2 Rancangan Modul XGate2D
Penjelasan masing-masing modul: 1. XGate2DCore Modul ini merupakan modul inti XGate2D yang bertugas mengatur jalannya game yang dibangun di atas XGate2D dan menangani beberapa hal yang umum terdapat pada game, seperti input, audio, dan sebagainya. Modul ini dapat dibagi lagi menjadi beberapa sub-modul yang lebih kecil, sebagai berikut: a.
Base Modul ini bertugas mengatur jalannya game yang dibangun di atas XGate2D
dan
mengelola
objek-objek
yang
digunakan
untuk
menggambarkan sprite ke layar. b.
Interface Modul ini berisi interface yang harus diimplementasi oleh semua game yang dibangun menggunakan XGate2D.
c.
Input Modul ini bertugas menangani input dari input device keyboard, mouse, dan game pad Xbox360.
IV-4
d.
Font Modul ini bertugas melakukan load dan embed suatu jenis huruf dari suatu file .spritefont ke dalam XGate2D atau ke dalam game yang dibangun menggunakan XGate2D.
e.
Control Modul ini bertugas menangani dan membuat representasi objek yang dapat memegang kontrol atau memegang fokus input. Contoh: text box.
f.
Audio Modul ini bertugas me-load, play, pause, dan stop semua suara dan musik yang ada pada game yang dibangun menggunakan XGate2D.
g.
Debug Modul ini bertugas mengelola objek-objek yang digambarkan pada layar, bersama dengan game, ketika game sedang dalam mode debug. Contoh objek ini adalah penghitung FPS (Frame per Second), penghitung memory usage, dan sebagainya.
2. XGate2DGraphic Modul ini bertugas mengelola semua objek yang digambarkan ke layar dan membuat representasi dunia pada game yang dibangun menggunakan XGate2D. Modul ini dapat dibagi lagi menjadi beberapa sub-modul yang lebih kecil, sebagai berikut: a. Base Modul ini berisi kelas dasar yang merepresentasikan objek yang digambar ke layar. Dengan kata lain, pada XGate2D semua objek yang digambarkan ke layar merupakan turunan dari kelas yang terdapat pada modul ini. b. Sprite Modul ini bertugas merepresentasikan objek sprite standar yang dapat digambarkan ke layar. c. Animation Modul ini bertugas merepresentasikan objek sprite yang memiliki animasi sehingga seolah-olah dapat bergerak.
IV-5
d. Particle Modul ini bertugas merepresentasikan sistem partikel sebagai model dari objek-objek abstrak, seperti asap, ledakan, dan sebagainya. e. TilingEngine Modul ini bertugas merepresentasikan objek “besar” yang dibentuk oleh sebuah objek “kecil” yang digambar berulang-ulang. f. Scene Modul ini bertugas merepresentasikan dunia pada game yang dibangun menggunakan XGate2D. 3. XGate2DPhysic Modul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objekobjek pada game. Modul ini memiliki sebuah sub-modul Collision yang bertugas merepresentasikan objek yang dapat “bertabrakan” dengan objek lainnya, dengan cara mendeteksi adanya tabrakan pada objek-objek tersebut. 4. XGate2DUserInterface Modul ini berisi objek-objek yang biasanya terdapat pada user interface program, seperti label dan button. Karena sifatnya yang cukup spesifik, modul ini tidak dibagi lagi menjadi sub-modul.
4.3 Rancangan Kelas, Interface, dan Enumerasi Pada bagian ini, akan dijelaskan rancangan kelas, interface, dan enumerasi untuk masing-masing modul XGate2D. Pembagian modul dapat dilihat pada sub-bab 4.2. Untuk setiap modul, akan diberikan tabel berisi daftar kelas, interface, dan enumerasi yang terdapat pada modul tersebut, dan penjelasan rinci masing-masing kelas, interface, dan enumerasi tersebut akan dijelaskan pada sub-bagian modul tersebut. Perlu diketahui bahwa terdapat kelas-kelas tambahan pada tahap perancangan yang tidak terdapat pada rancangan kelas analisis. Ini disebabkan karena pendekatan perancangan kelas pada tahap analisis dan perancangan agak berbeda, yaitu jika pada tahap analisis, identifikasi kelas dilakukan melalui pendekatan fitur, sedangkan pada tahap perancangan, identifikasi kelas dilakukan selain dengan menggunakan rancangan
IV-6
kelas analisis, juga mempertimbangkan aspek non-fungsionalitas sistem sebagai sebuah game engine. 4.3.1 XGate2DCore Pada Tabel IV-2 terdapat daftar kelas yang terdapat pada modul XGate2DCore beserta deskripsi singkat untuk masing-masing kelas. Tabel IV-2 Daftar Kelas pada Modul XGate2DCore No. 1.
Nama Kelas XGate2DSystem
2.
XGate2DRenderer
3.
IGame
4.
XGate2DInput
5.
XGate2DInputManager
6.
XGate2DFont
7.
XGate2DFontManager
8.
XGate2DControlObject
9.
XGate2DControlManager
10.
XGate2DAudioManager
11.
IProfilerObject
12.
XGate2DProfiler
13.
XGate2DFPSCounter
Deskripsi Kelas singleton yang mengatur penciptaan dan inisialisasi objek game yang sedang dijalankan dan titik awal dari game loop. Kelas ini tidak terdapat pada rancangan kelas analisis, karena kelas ini bertugas untuk membentuk game loop pada game, yang kurang cocok dijadikan sebagai sebuah fitur Kelas yang mengelola objek-objek yang digunakan untuk menggambarkan semua objek ke layar. Kelas ini tidak terdapat pada rancangan kelas analisis, karena fungsi kelas ini kurang cocok untuk dijadikan sebuah fitur, namun sangat diperlukan oleh sebuah game Interface yang berisi fungsi-fungsi yang harus diimplementasi oleh kelas representasi game yang dibangun menggunakan XGate2D Kelas yang merupakan representasi dari input device game pad Xbox360 Kelas yang mengelola semua input device: keyboard, mouse, dan game pad Xbox360 Kelas yang merupakan representasi dari font yang dapat digunakan pada game yang dibangun menggunakan XGate2D. Kelas ini tidak terdapat pada rancangan kelas analisis, karena fungsi kelas ini kurang cocok untuk dijadikan fitur, namun sangat diperlukan oleh sebuah game Kelas yang mengelola semua instance kelas XGate2DFont. Kelas ini tidak terdapat pada rancangan kelas analisis, karena fungsi kelas ini kurang cocok untuk dijadikan fitur, namun sangat diperlukan oleh sebuah game Kelas yang merupakan representasi dari objek yang dapat menerima kontrol atau fokus input user Kelas yang mengelola semua instance kelas XGate2DControlObject Kelas yang mengelola semua file suara yang dibutuhkan oleh game yang dibangun menggunakan XGate2D Interface yang berisi fungsi-fungsi yang harus diimplementasi oleh semua objek yang ingin dituliskan oleh programmer ke layar untuk keperluan debugging. Interface ini dan kelas implementasinya tidak terdapat pada rancangan kelas analisis karena berfungsi untuk memenuhi kebutuhan non-fungsional dari game engine, yaitu debugging Kelas yang mengelola objek-objek yang ingin dituliskan oleh programmer ke layar untuk keperluan debugging Kelas yang digunakan untuk menghitung jumlah frame per second pada game, merupakan implementasi dari IProfilerObject
IV-7
Diagram kelas, interface, dan enumerasi untuk modul XGate2DCore dapat dilihat pada Gambar IV-3.
Gambar IV-3 Diagram Kelas Modul XGate2DCore
IV-8
IV-9
4.3.2 XGate2DGraphic Pada Tabel IV-3 terdapat daftar kelas yang terdapat pada modul XGate2DGraphic beserta deskripsi singkat untuk masing-masing kelas. Tabel IV-3 Daftar Kelas pada Modul XGate2DGraphic No. 1.
Nama Kelas XGate2DDrawable
2. 3. 4. 5. 6. 7.
XGate2DSprite EAnimationLoop EAnimationState XGate2DAnimationInfo XGate2DAnimatedSprite XGate2DParticle
8.
XGate2DParticleSystem
9.
XGate2DTiles
10.
XGate2DSceneManager
11. 12.
XGate2DWorld XGate2DCamera
Deskripsi Kelas abstrak dasar untuk semua objek yang dapat digambar ke layar Kelas representasi sprite standar yang digambar ke layar Enumerasi yang menyatakan jenis-jenis loop animasi Enumerasi yang menyatakan state pada animasi Kelas yang mengelola informasi terkait animasi Kelas representasi sprite yang dapat memiliki animasi Kelas yang berisi atribut, properti, dan fungsi yang dimiliki sebuah partikel yang menjadi bagian sistem partikel Kelas abstrak yang mengatur gerakan partikel-partikel yang dikelolanya Kelas representasi objek sprite besar yang dibentuk oleh sprite kecil yang digambar berulang-ulang Kelas yang mengelola instance kelas turunan XGate2DDrawable dan menggambarkannya ke layar Kelas representasi dunia dalam sebuah game Kelas representasi kamera yang menentukan bagian mana dari dunia yang sedang disorot, yakni yang digambarkan ke layar
Diagram kelas, interface, dan enumerasi untuk modul XGate2DGraphic dapat dilihat pada Gambar IV-4.
IV-10
Gambar IV-4 Diagram Kelas Modul XGate2DGraphic
IV-11
4.3.3 XGate2DPhysic Pada Tabel IV-4 terdapat daftar kelas yang terdapat pada modul XGate2DPhysic beserta deskripsi singkat untuk masing-masing kelas. Tabel IV-4 Daftar Kelas pada Modul XGate2DPhysic No. 1.
Nama Kelas ICollidableObject
2.
XGate2DRectangleCollidableObject
3.
XGate2DCircleCollidableObject
4.
XGate2DPerPixelCollidableObject
5.
XGate2DPhysicObject
Deskripsi Interface yang mendefinisikan method yang harus dimiliki oleh objek yang dapat bertabrakan dengan benda lain Kelas yang merepresentasikan objek berbentuk bujur sangkar yang dapat bertabrakan dengan objek lain Kelas yang merepresentasikan objek berbentuk lingkaran yang dapat bertabrakan dengan objek lain Kelas yang merepresentasikan objek yang dapat bertabrakan dengan objek lain dengan metode per pixel Kelas yang merepresentasikan objek yang memiliki sifat fisika sederhana
Diagram kelas, interface, dan enumerasi untuk modul XGate2DPhysic dapat dilihat pada Gambar IV-5.
IV-12
Gambar IV-5 Diagram Kelas Modul XGate2DPhysic
4.3.4 XGate2DUserInterface Pada terdapat daftar kelas yang terdapat pada modul XGate2DUserInterface beserta deskripsi singkat untuk masing-masing kelas. Tabel IV-5 Daftar Kelas pada Modul XGate2DUserInterface No. 1.
Nama Kelas XGate2DLabel
2.
XGate2DTextBox
3.
EButtonState
4.
XGate2DButton
5.
XGate2DCheckBox
Deskripsi Kelas yang merepresentasikan label berisi teks yang dapat digambar Kelas yang merepresentasikan text box yang dapat menerima fokus input dari user Enumerasi yang menyatakan state yang dimiliki oleh XGate2DButton Kelas yang merepresentasikan button yang dapat ditekan oleh kursor mouse Kelas yang merepresentasikan check box yang dapat dipilih
Diagram kelas, interface, dan enumerasi untuk modul XGate2DUserInterface dapat dilihat pada Gambar IV-6.
Gambar IV-6 Diagram Kelas Modul XGate2DUserInterface
IV-13
IV-14
4.4 Rancangan Penggunaan Fitur Pada sub-bab ini akan dijelaskan bagaimana cara game programmer menggunakan fitur-fitur XGate2D melalui kelas-kelas yang telah dijelaskan pada sub-bab sebelumnya. 4.4.1 Input Handler Kelas utama yang terkait dengan fitur input handler adalah XGate2DInputManager, pada sub-modul Input modul XGate2DCore. Programmer tidak perlu membuat instance dari kelas XGate2DInputManager, melainkan cukup melakukan invokasi method statik yang disediakan oleh kelas tersebut untuk mendapatkan informasi dari input device. Method statik yang disediakan oleh kelas XGate2DInputManager dapat dilihat pada bagian Lampiran A. 4.4.2 Animasi Kelas utama yang terkait dengan fitur animasi adalah XGate2DAnimatedSprite dan XGate2DAnimationInfo. Berikut adalah langkah-langkah yang perlu dilakukan programmer untuk membuat suatu sprite yang memiliki animasi: 1. Membuat instance kelas XGate2DAnimatedSprite 2. Menambahkan
informasi
animasi
dengan
menggunakan
method
AddAnimation(animationInfo:XGate2DAnimationInfo) 3. Menjalankan animasi dengan indeks tertentu dengan menggunakan method PlayAnimation(animationIdx:integer) 4.4.3 GUI Kelas utama yang terkait dengan fitur GUI adalah XGate2DLabel, XGate2DTextBox, XGate2DButton, XGate2DCheckBox, dan EButtonState. Berikut adalah langkahlangkah yang perlu dilakukan programmer untuk membuat elemen GUI: 1. Membuat instance kelas XGate2DLabel, XGate2DTextBox, XGate2DButton, atau XGate2DCheckBox 2. Melakukan invokasi method update pada instance GUI
IV-15
4.4.4 Collision Detection Kelas
utama
yang
terkait
dengan
fitur
collision
detection
adalah
XGate2DRectangleCollidableObject dan XGate2DPerPixelCollidableObject. Berikut adalah langkah-langkah yang perlu dilakukan programmer untuk membuat collidable object: 1. Membuat kelas yang memiliki objek turunan ICollidableObject sebagai atribut 2. Melakukan pendeteksian tabrakan dengan menggunakan method yang didefinisikan pada interface ICollidableObject 4.4.5 Physics Kelas utama yang terkait dengan fitur physics adalah XGate2DPhysicObject. Berikut adalah langkah-langkah yang perlu dilakukan programmer untuk membuat objek yang memiliki sifat fisika: 1. Membuat kelas yang memiliki objek XGate2DPhysicObject sebagai atribut 2. Melakukan invokasi method yang berhubungan dengan perhitungan fisika yang terdapat pada kelas XGate2DPhysicObject 4.4.6 Particle System Kelas utama yang terkait dengan fitur particle system adalah XGate2DParticle dan XGate2DParticleSystem. Berikut adalah langkah-langkah yang perlu dilakukan programmer untuk membuat objek yang bentuknya abstrak dan dapat direpresentasikan sebagai sebuah sistem partikel: 1. Membuat kelas turunan dari kelas abstrak XGate2DParticleSystem 2. Melakukan override method pada XGate2DParticleSystem, baik method yang abstrak maupun method yang non-abstrak 3. Assign semua nilai atribut pada XGate2DParticleSystem yang menentukan perilaku dari sistem partikel yang diinginkan 4. Membuat instance dari kelas tersebut 5. Membuat objek partikel baru setiap selang waktu tertentu 6. Melakukan invokasi method update pada sistem partikel untuk meng-update nilai-nilai atribut yang menentukan gerakan partikel-partikel 7. Melakukan invokasi method draw pada sistem partikel untuk menggambar sistem partikel
IV-16
4.4.7 Tiling Engine Kelas utama yang terkait dengan fitur tiling engine adalah XGate2DTiles. Berikut adalah langkah-langkah yang perlu dilakukan programmer untuk membuat objek tiles: 1. Membuat instance dari kelas XGate2DTiles 2. Melakukan invokasi terhadap method update pada tiles untuk melakukan update terhadap nilai-nilai atribut 3. Melakukan invokasi terhadap method draw pada tiles untuk menggambar tiles 4.4.8 Audio Kelas utama yang terkait dengan fitur audio adalah XGate2DAudioManager. Berikut adalah langkah-langkah yang perlu dilakukan programmer untuk memainkan data audio: 1. Melakukan inisialisasi terhadap kelas XGate2DAudioManager dengan masukan berupa path file setting, wave bank, dan sound bank 2. Memainkan data audio dengan melakukan invokasi method statik yang didefinisikan pada kelas XGate2DAudioManager
