BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin...

16
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

Transcript of BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin...

Page 1: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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

Page 2: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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.

Page 3: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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.

Page 4: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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.

Page 5: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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 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

Page 6: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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 IProfilerObject

Page 7: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

IV-7

Diagram kelas, interface, dan enumerasi untuk modul XGate2DCore dapat dilihat

pada Gambar IV-3.

Page 8: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

IV-8

Gambar IV-3 Diagram Kelas Modul XGate2DCore

Page 9: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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. 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.

Page 10: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

IV-10

Gambar IV-4 Diagram Kelas Modul XGate2DGraphic

Page 11: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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. 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.

Page 12: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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.

Page 13: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

IV-13

Gambar IV-6 Diagram Kelas Modul XGate2DUserInterface

Page 14: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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

2. Melakukan invokasi method update pada instance GUI

Page 15: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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

Page 16: BAB IV PERANCANGAN - · PDF fileModul ini bertugas mengatur sifat-sifat fisika yang mungkin dimiliki oleh objek-objek pada game. Modul ini memiliki sebuah sub-modul Collision yang

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