IV-1
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-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. Nama Fitur Modul
1. Input Handler XGate2DCore
2. Animasi XGate2DGraphic
3. GUI XGate2DUserInterface
4. Collision Detection XGate2DPhysic
5. Physics XGate2DPhysic
6. Particle System XGate2DGraphic
7. Tiling Engine XGate2DGraphic
8. Audio XGate2DCore
Modul-modul yang teridentifikasi ini berhubungan satu sama lain, dan diagram keterhubungan modul-modul ini dapat dilihat pada Gambar IV-2.
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
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.
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 objek-objek 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. Nama Kelas Deskripsi
1. XGate2DSystem 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
2. XGate2DRenderer 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
3. IGame Interface yang berisi fungsi-fungsi yang harus diimplementasi oleh kelas representasi game yang dibangun menggunakan XGate2D
4. XGate2DInput Kelas yang merupakan representasi dari input device game pad Xbox360
5. XGate2DInputManager Kelas yang mengelola semua input device: keyboard, mouse, dan game pad Xbox360
6. XGate2DFont 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
7. XGate2DFontManager 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
8. XGate2DControlObject Kelas yang merupakan representasi dari objek yang dapat menerima kontrol atau fokus input user
9. XGate2DControlManager Kelas yang mengelola semua instance kelas XGate2DControlObject
10. XGate2DAudioManager Kelas yang mengelola semua file suara yang dibutuhkan oleh game yang dibangun menggunakan XGate2D
11. IProfilerObject 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
12. XGate2DProfiler Kelas yang mengelola objek-objek yang ingin dituliskan oleh programmer ke layar untuk keperluan debugging
13. XGate2DFPSCounter Kelas yang digunakan untuk menghitung jumlah frame per second pada game, merupakan implementasi dari
Diagram kelas, interface, dan enumerasi untuk modul XGate2DCore dapat dilihat pada Gambar IV-3.
IV-8
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. Nama Kelas Deskripsi
1. XGate2DDrawable Kelas abstrak dasar untuk semua objek yang dapat digambar ke layar
2. XGate2DSprite Kelas representasi sprite standar yang digambar ke layar 3. EAnimationLoop Enumerasi yang menyatakan jenis-jenis loop animasi 4. EAnimationState Enumerasi yang menyatakan state pada animasi 5. XGate2DAnimationInfo Kelas yang mengelola informasi terkait animasi 6. XGate2DAnimatedSprite Kelas representasi sprite yang dapat memiliki animasi 7. XGate2DParticle Kelas yang berisi atribut, properti, dan fungsi yang dimiliki
sebuah partikel yang menjadi bagian sistem partikel 8. XGate2DParticleSystem Kelas abstrak yang mengatur gerakan partikel-partikel yang
dikelolanya
9. XGate2DTiles Kelas representasi objek sprite besar yang dibentuk oleh sprite kecil yang digambar berulang-ulang
10. XGate2DSceneManager Kelas yang mengelola instance kelas turunan XGate2DDrawable dan menggambarkannya ke layar 11. XGate2DWorld Kelas representasi dunia dalam sebuah game
12. XGate2DCamera 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
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. Nama Kelas Deskripsi
1. ICollidableObject Interface yang mendefinisikan method yang harus dimiliki oleh objek yang dapat bertabrakan dengan benda lain
2. XGate2DRectangleCollidableObject Kelas yang merepresentasikan objek berbentuk bujur sangkar yang dapat bertabrakan dengan objek lain
3. XGate2DCircleCollidableObject Kelas yang merepresentasikan objek berbentuk lingkaran yang dapat bertabrakan dengan objek lain
4. XGate2DPerPixelCollidableObject Kelas yang merepresentasikan objek yang dapat bertabrakan dengan objek lain dengan metode per pixel
5. XGate2DPhysicObject 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. Nama Kelas Deskripsi
1. XGate2DLabel Kelas yang merepresentasikan label berisi teks yang dapat digambar
2. XGate2DTextBox Kelas yang merepresentasikan text box yang dapat menerima fokus input dari user
3. EButtonState Enumerasi yang menyatakan state yang dimiliki oleh XGate2DButton
4. XGate2DButton Kelas yang merepresentasikan button yang dapat ditekan oleh kursor mouse
5. XGate2DCheckBox Kelas yang merepresentasikan check box yang dapat dipilih
Diagram kelas, interface, dan enumerasi untuk modul XGate2DUserInterface dapat dilihat pada Gambar IV-6.
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 langkah-langkah yang perlu dilakukan programmer untuk membuat elemen GUI:
1. Membuat instance kelas XGate2DLabel, XGate2DTextBox, XGate2DButton, atau XGate2DCheckBox
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
