Membuat Game Dengan XNA Game Studio

5/14/2018 Membuat Game Dengan XNA Game Studio - slidepdf.com

http://slidepdf.com/reader/full/membuat-game-dengan-xna-game-studio 1/49

s



KATA PENGANTAR

Video game. Sudah banyak sekali orang di dunia ini yang tergila-gila dengan benda yang satu ini. Seiring deng

semakin canggihnya teknologi komputer, semakin menggila juga teknologi game. Impian masa kecil kita tenta

game, sekarang sudah menjadi barang yang umum di sekitar kita. Banyaknya game juga sudah tak terhitung la

jumlahnya, sehingga semakin banyak pula pemain game di dunia ini. Hampir semua orang yang termasuk ke d

usia produktif sekarang, pasti pernah bermain game.

Di antara para pemain game itu (mungkin termasuk Anda), pasti banyak di antaranya yang ingin menjadi seor

game developer agar ia dapat membuat game impiannya sendiri. Namun, banyak yang merasa tidak mampu

tidak mempunyai latar belakang pendidikan yang memadai atau yang berhubungan dengan game developme

Bahkan, seseorang dengan latar pendidikan TI (teknologi informasi) yang pasti mempunyai pengetahuan

pemrograman dasar, mungkin merasa tidak mampu untuk masuk ke dunia impiannya, dunia game developme

karena tidak pernah sama sekali mendapat kesempatan untuk membuat game.

Oleh karena itu, dengan adanya framework canggih yang sangat membantu seseorang untuk memprogram ga

seperti XNA Framework, kami tergerak untuk mendokumentasikan pengetahuan dasar XNA Framework dan

langkah awal pembuatan game dengan menggunakan XNA Framework.

Ucapan terima kasih sebesar-besarnya dari kami untuk Ronald Rajagukguk dan Narenda Wicaksono, yang tela

menjadi inspirasi kami dalam membuat e-book ini ^^; Vincentius Hening W. Ismawan (Wiwied), yang telah

membuatkan kami cover e-book yang oke punya ^^; dan semua crew Agate Studio yang senantiasa menduku

kami dalam pembuatan e-book ini.

Kami harap melalui e-book ini, semakin banyak orang yang menggali kembali mimpi masa kecilnya untuk men

seorang game developer !☺

Happy game developing, everyone! ^^

Shieny Aprilia & Arief Widhiyasa



DAFTAR ISI

Kata Pengantar ........................................................................................................................................................

Daftar Isi ...................................................................................................................................................................

1. Sekilas Tentang Dunia Game Development .....................................................................................................

2. Pengantar XNA Game Studio ......................................................................... .................................................

3. Persiapan Penggunaan XNA Game Studio ......................................................................................................

3.1. Kebutuhan Perangkat Keras ....................................................................................................................

3.2. Kebutuhan Perangkat Lunak ...................................................................................................................

3.3. Instalasi XNA Game Studio 3.0 ................................................................................................................

3.4. Menguji Hasil Instalasi XNA Game Studio 3.0 .........................................................................................

3.5. Membuat Game dengan Project Starter kit .............................................................................................

4. Let’s Start Making Game ☺ ..............................................................................................................................

5. The First Step… .................................................................................................................................................

5.1. Membuat Project Game PC dengan XNA Game Studio 3.0 ....................................................................

5.2. Komponen-komponen Project ................................................................................................................

5.3. Menambahkan Aset Game ........................................................................... ..........................................

5.4. Menentukan Resolusi Game ........................................................................ ...........................................

5.5. Menampilkan Background Game ............................................................................................................

6. Objek-objek game ...........................................................................................................................................

6.1. Membuat Kapal .......................................................................................................................................

6.2. Menambahkan Kapal ke Game .................... ...........................................................................................



6.3. Menggerakkan Kapal dengan Input Device..............................................................................................

6.4. Membuat Peluru .....................................................................................................................................

6.5. Membuat Kapal yang Dapat Menembakkan Peluru ..................................................... ..........................

7. Interaksi antar objek ................................................................................................................................ .......

7.1. Deteksi Tabrakan antara Peluru dan Kapal ........................................................ .....................................

7.2. Membuat Tambahan Objek Penghalang (Obstacle) ...............................................................................

7.3. Menambahkan Objek Penghalang ke Game ...........................................................................................

8. Menampilkan Graphical User Interface Score .................................................................................................

9. Sound & Music ..................................................................................................................................................

9.1. Membungkus File Audio menjadi File Aset Game dengan Microsoft XACT ...........................................

9.2. Menambahkan Suara ke Game ...............................................................................................................

10. The Game is Done!☺....................................................................................................................................

Penutup ....................................................................................................................................................................

Referensi ..................................................................................................................................................................



1. SEKILAS TENTANG DUNIA GAME DEVELOPMENT

Game development adalah sebuah proses pembuatan perangkat lunak yang keluarannya berupa video game.

yang terlibat dalam proses game development disebut game developer . Peran-peran yang ada pada sebuah p

game development antara lain, producer (yang bertugas mengelola tim, jadwal, progress, alokasi anggota tim

designer (yang bertugas merancang konsep game, gameplay , struktur game, dan aturan dalam game), artist (

bertugas membuat aset visual game dan bertanggung jawab terhadap aspek visual game), programmer (yang

bertugas membuat perangkat lunak dari konsep dan aset yang telah dibuat oleh designer dan artist ), level des

(yang bertugas membuat atau merancang level, tantangan, atau misi pada game), sound engineer (yang bertu

membuat aset audio game dan bertanggung jawab terhadap aspek audio game), dan tester (yang bertugas m

kecacatan pada game sebagai sebuah perangkat lunak).

Sebuah proses game development melibatkan tahap-tahap sebagai berikut:

1. Pre-production

Tahap ini adalah tahap perencanaan proyek yang fokus pada ide dan konsep dan pembuatan game de

document (dokumen perancangan game). Tujuan dari pengembangan konsep adalah untuk menghas

dokumen yang jelas dan mudah dimengerti. Game design document inilah yang menjadi pedoman da

proses produksi game sampai akhir.

2. Production

Tahap ini adalah tahap utama pada proses game development , di mana hasil akhirnya berupa aset da

source code game. Secara umum, tahap ini dapat dibagi menjadi 3:

a. Design : tahap merancang isi dan aturan game

b. Programming : tahap memprogram game sehingga menghasilkan source code game

c. Art Production : tahap membuat aset visual game sehingga siap dipakai untuk game

Di antara tahap-tahap pada game development, tahap yang memiliki aspek reusability 1 yang paling tinggi, ad

tahap programming. Sehingga, tahap programming yang paling mungkin untuk ditingkatkan produktivitasnya

antara lain dengan penggunaan game engine, library , atau framework yang sudah membungkus kegiatan-keg

umum yang dilakukan oleh programmer game ketika membuat game.

Salah satu game framework yang fiturnya paling banyak dan sudah banyak digunakan oleh para game develop

dunia adalah Microsoft XNA Framework. Selain fiturnya yang sudah cukup lengkap dan sangat membantu par

game programmer , XNA juga cross-platform framework , sehingga game untuk PC hanya cukup dikompilasi ul

1 Reusability : penggunaan ulang apa yang telah dibuat sebelumnya, misalnya kode tertentu di game A, digunakan kemba

game B



untuk ditaruh di platform lain, misalnya Xbox360 dan Zune. Microsoft XNA Framework adalah bagian dari XNA

Game Studio, yaitu tools tambahan pada Microsoft Visual Studio untuk membuat game menggunakan XNA. M

kita lihat XNA Game Studio lebih dekat di bagian selanjutnya☺



2. PENGANTAR XNA GAME STUDIO

Seperti yang telah dijelaskan pada bagian sebelumnya, XNA Game Studio adalah tools tambahan pada

Microsoft Visual Studio yang menyediakan kerangka game XNA untuk para developer , sehingga para

developer hanya tinggal melakukan kustomisasi dan mengembangkan kerangka tersebut untuk

membuat game mereka sendiri dengan menggunakan XNA.

Kerangka game XNA yang dihasilkan secara otomatis ketika kita membuat proyek game XNA baru di

Visual Studio yang sudah ter-install dengan XNA Game Studio adalah sebuah kelas Game1 yang

merupakan turunan dari kelas Microsoft.Xna.Framework.Gamedan memiliki atribut dan fungsi-

fungsi sebagai berikut:

1. graphics

Atribut bertipe GraphicsDeviceManageryang memungkinkan developer untuk mengakses

kartu grafis PC, Xbox360, atau Zune (tergantung pada platform apakah game kita akan ditaruh).

Kelas GraphicsDeviceManagermemiliki properti GraphicsDevice yang

merepresentasikan kartu grafis mesin kita yang sebenarnya. Karena properti ini adalah

perantara game XNA kita dengan GPU (Graphics Processing Unit ) pada kartu grafis kita, apapun

yang kita lakukan pada layar game XNA kita, akan melalui properti ini.

2. spriteBatch

Atribut ini merupakan instansiasi dari kelas SpriteBatch. Ini adalah objek utama yang

digunakan untuk menggambar sprite. Sprite adalah gambar 2D atau 3D yang diintegrasi dengan

suatu adegan (scene). Dengan demikian, sebuah game 2D dibuat dengan menggambar sejumlah

sprite pada suatu scene (sprite pemain, sprite musuh, sprite background , dsb.)

3. Initialize()

Fungsi ini digunakan untuk melakukan inisialisasi semua variabel dan objek yang ada pada

Game1.

4. LoadContent()

Fungsi ini akan dipanggil setelah fungsi Initialize() dipanggil. Fungsi ini adalah di mana

kita akan me-load semua elemen grafis dan semua aset yang dibutuhkan oleh game, misalnya

gambar, model 3D, suara, dsb.

Setelah fungsi LoadContent() selesai dipanggil, Game1 akan memasuki fase apa yang

disebut dengan game loop. Hampir semua game, bukan hanya game XNA, mempunyai game



loop. Inilah yang membedakan game development dengan software development biasa. Sebuah

game loop terdiri dari sekumpulan fungsi yang dipanggil terus menerus sampai game berakhir.

Di XNA, sebuah game loop hanya terdiri dari 2 fungsi : Update() dan Draw().

5. UnloadContent()

Fungsi ini digunakan untuk unload semua aset yang di-load pada fungsi LoadContent() dan

membutuhkan penanganan unload khusus. Biasanya XNA akan menangani proses unload aset

ini, tetapi jika kita melakukan perubahan manajemen memori pada beberapa objek yang di-load

pada fungsi LoadContent(), maka kita dapat melakukan proses unload -nya pada fungsi ini.

6. Update()

Semua algoritma yang mempengaruhi gameplay , selain yang berhubungan dengan

penggambaran objek, berada pada fungsi ini. Instruksi yang biasanya ada pada fungsi ini adalah

menggeser objek, collision detection (deteksi tabrakan), melakukan update score, dsb.

7. Draw()

Seperti namanya, fungsi ini digunakan untuk menggambar semua objek pada game. Kita harus

memastikan sesedikit mungkin instruksi pada fungsi ini, selain instruksi penggambaran objek,

karena seharusnya instruksi-instruksi tersebut ada pada fungsi Update().

Diagram alir pemanggilan fungsi-fungsi di atas dapat dilihat pada Gambar 1.

Gambar 1 Diagram Alir Fungsi-fungsi Kelas Game1

Initialize() LoadContent()

Update()

Draw()

UnloadContent

Game Over



3. PERSIAPAN PENGGUNAAN XNA GAME STUDIO

Sekarang kita akan melakukan instalasi XNA Game Studio. Jika Anda sudah mempunyai XNA Game

Studio 3.0 di komputer Anda, Anda dapat melewati bagian ini.

3.1. KEBUTUHAN PERANGKAT KERAS

Kebutuhan perangkat keras untuk melakukan instalasi XNA Game Studio 3.0 adalah sebagai berikut:

- Minimum : Komputer x86 / x64 dengan CPU 1.6 GHz, 384 MB RAM, monitor 1024x768, dan hard

disk 5400 RPM

- Disarankan : Komputer x86 / x64 dengan CPU 2.2 GHz atau lebih, 1024 MB atau lebih RAM,

monitor 1280x1024, dan hard disk 7200 RPM

- Jika sistem operasi yang digunakan adalah Windows Vista, CPU 2.4 GHz, 768 RAM

3.2. KEBUTUHAN PERANGKAT LUNAK

Kebutuhan perangkat lunak untuk melakukan instalasi XNA Game Studio 3.0 adalah sebagai berikut:

- Sistem operasi : Windows XP Service Pack 3, Windows Vista Service Pack 1, Windows 7

- IDE : Microsoft Visual Studio 2008 Express atau Team System, dengan C#

3.3. INSTALASI XNA GAME STUDIO 3.0

Kita akan melakukan instalasi XNA Game Studio 3.0 dengan langkah-langkah sebagai berikut:

1. Download installer XNA Game Studio 3.0 di

http://www.microsoft.com/downloads/details.aspx?FamilyId=7D70D6ED-1EDD-4852-9883-

9A33C0AD8FEE&displaylang=en

2. Ikuti petunjuk instalasi sampai XNA Game Studio 3.0 selesai di-install pada komputer Anda

3.4. MENGUJI HASIL INSTALASI XNA GAME STUDIO 3.0

Kita akan menguji apakah XNA Game Studio 3.0 sudah ter-install dengan baik pada komputer kita,

dengan langkah-langkah sebagai berikut:

1. Buka Visual Studio 2008, pilih menu File New Project…



2. Pada kotak dialog New Project, lihat apakah pada kotak Project Types, sudah ada pilihan XNA

Game Studio 3.0 dan sudah ada pilihan template untuk project XNA Game Studio 3.0 pada

Templates

Gambar 2 Pilihan Project Type dan Templates pada Kotak Dialog New Project

3. Masih pada kotak dialog New Project, klik OK. Jika project XNA baru telah berhasil dibuat, maka

itu artinya instalasi XNA Game Studio 3.0 pada komputer Anda berhasil dengan baik!☺

3.5. MEMBUAT GAME DENGAN PROJECT STARTER KIT

Kita akan mencoba membuat sebuah game utuh menggunakan project starter kit yang disediakan oleh

XNA Game Studio 3.0 dengan langkah-langkah sebagai berikut:

1. Pilih File New Project…

2. Pada kotak dialog New Project, pilih XNA Game Studio 3.0 pada Project Types dan Platformer

Starter Kit (3.0) pada Templates

3. Klik OK

4. Setelah project selesai dibuat, tekan F5 untuk melakukan kompilasi dan pembentukan file

executable game dan menampilkan game, maka sebuah game akan muncul seperti pada

Gambar 3, dan kita bisa langsung memainkannya!☺



Gambar 3 Game Platformer Starter Kit



4. LET’S START MAKING GAME ☺☺☺☺

Sekarang kita akan membuat game kita sendiri, yang ber-genre shooting. Game ini akan melibatkan dua

buah kapal yang saling menembak, di mana satu kapal terletak di bawah dan kapal yang lain terletak di

atas. Di antara kedua kapal akan ada objek-objek penghalang yang dapat menghalangi datangnya

peluru, sehingga akan menyulitkan kedua kapal untuk menembakkan pelurunya ke kapal lawannya.

Kita akan membuat game ini dalam beberapa tahap kecil, yaitu sebagai berikut:

1. Menambahkan aset ke game

2. Menentukan resolusi game

3. Menampilkan background game

4. Membuat kapal

5. Menambahkan kapal ke game

6. Menggerakkan kapal dengan input device

7. Membuat peluru

8. Membuat kapal yang dapat menembakkan peluru

9. Deteksi tabrakan antara peluru dan kapal

10. Membuat tambahan objek penghalang

11. Menambahkan objek penghalang ke game

12. Menampilkan user interface score

13. Membungkus file audio menjadi file aset game dengan Microsoft XACT

14. Menambahkan suara ke game

Setiap tahap yang dijabarkan di atas akan dijelaskan lebih detil pada bagian-bagian selanjutnya.

Selamat menikmati!☺



5. THE FIRST STEP …

Sebelum memulai pembuatan game, ada baiknya kita menyiapkan sebuah folder tertentu, misalnya di

D:\Documents\My Games\ untuk menaruh semua file yang dibutuhkan dalam pembuatan game kita

nantinya.

Lalu, kita juga perlu men-download file aset yang dibutuhkan untuk game kita di

http://agategames.com/xnabooks/asetgamexna.zip. Extract file asetgamexna.zip dan simpanlah hasil

ekstraksi tersebut di dalam folder Content dalam folder yang telah kita siapkan tadi. Sehingga lokasi file

aset kita adalah D:\Documents\My Games\Content.

5.1. MEMBUAT PROJECT GAME PC DENGAN XNA GAME STUDIO 3.0

Untuk membuat game PC menggunakan XNA Game Studio 3.0, kita terlebih dahulu harus melakukan

instalasi XNA Game Studio 3.0. Sebagai IDE, kita dapat menggunakan Visual Studio Team System 2008

atau Visual C# 2008 Express. Berikut adalah langkah-langkah untuk membuat project game PC XNA pada

Visual Studio Team System 2008:

1. Pilih File New Project…

2. Pilih template Windows Game (3.0)

3. Isilah nama proyek dan lokasi proyek sesuai dengan yang Anda inginkan, misalnya :

Name : ShootingGameXNA

Location : D:\Documents\My Games

Solution Name : ShootingGameXNA



Gambar 4 Membuat Project Game PC pada XNA Game Studio 3.0

4. Pilih OK

5.2. KOMPONEN-KOMPONEN PROJECT

Setelah project ShootingGameXNA berhasil dibuat, pada project tersebut terdapat beberapa komponen

antara lain sebagai berikut :

Gambar 5 Komponen-komponen Project Game PC XNA Game Studio 3.0

1. Properties : elemen proyek yang berisi informasi penting terkait proyek, misalnya

tipe hasil kompilasi proyek (library , aplikasi Windows, dsb.), lokasi tempat hasil kompilasi

berada, dan lain sebagainya

2. References : library referensi yang diperlukan game



3. Content : content pipeline yang berguna untuk load aset-aset game

4. Game.ico : file image yang akan ditampilkan sebagai icon game

5. Game1.cs : kelas utama yang memodelkan game yang akan kita buat

6. GameThumbnail.png : file image yang akan ditampilkan sebagai thumbnail game

7. Program.cs : kelas main program tempat instansiasi dari Game1.cs akan dijalankan

5.3. MENAMBAHKAN ASET GAME

Kita menambahkan file aset game ke dalam content pipeline, dengan cara sebagai berikut :

1. Pada Solution Explorer, klik kanan pada Content, pilih Add Existing Item…

2. Pilihlah semua file yang akan ditambahkan sebagai aset game

Gambar 6 Pilih Semua File Aset Game

3. Pilih Add

4. Semua file yang telah ditambahkan ke content pipeline dapat dilihat pada Solution Explorer

Gambar 7 Semua File Aset Tampil pada Solution Explorer



5.4. MENENTUKAN RESOLUSI GAME

Kita akan membuat game yang resolusinya 800x600. Oleh karena itu, pada Game1.cs, kita harus

melakukan hal-hal sebagai berikut pada kelas Game1:

1. Menambahkan atribut konstanta GAME_WIDTH (800) dan GAME_HEIGHT (600)

2. Pada konstruktor kelas Game1, kita masukkan nilai PreferredBackBufferWidth dan

PreferredBackBufferHeight dengan konstanta yang telah dideklarasi pada poin 1

public readonly static int GAME_WIDTH = 800;

public readonly static int GAME_HEIGHT = 600;

public Game1()

{

graphics = new GraphicsDeviceManager(this);

Content.RootDirectory = "Content";

// Menentukan resolusi layar game

graphics.PreferredBackBufferWidth = GAME_WIDTH;

graphics.PreferredBackBufferHeight = GAME_HEIGHT;

}

Jika kita menekan F5 sekarang, maka akan tampak layar game kita yang masih kosong. Jadi dengan

menggunakan XNA, game kita telah dibuat hanya dengan cara membuat project XNA baru. ☺

Gambar 8 Game XNA yang Masih Kosong



5.5. MENAMPILKAN BACKGROUND GAME

Tambahkan atribut dan properti berikut dalam kelas Game1:

1. BG_POS : atribut konstanta posisi background digambar

2. SpriteBatch : getter atribut spriteBatch

3. BgTexture : data tekstur 2D yang akan dijadikan background game

public readonly static Vector2 BG_POS = Vector2.Zero;

public SpriteBatch SpriteBatch

{

get

{

return spriteBatch;

}

}

public Texture2D BgTexture;

Tekstur 2D adalah representasi file gambar (.jpg, .png) yang berupa kumpulan

( array ) data warna.

Pada fungsi LoadContent(), kita harus melakukan langkah-langkah sebagai berikut:

1.

Inisialisasi spriteBatch yang digunakan untuk menggambar tekstur2. Load tekstur background

3. Inisialisasi bujur sangkar tempat data tekstur 2D background akan digambar

protected override void LoadContent()

{

// Inisialisasi spriteBatch yang digunakan untuk menggambar tekstur

spriteBatch = new SpriteBatch(GraphicsDevice);

BgTexture = Content.Load<Texture2D>("bg");

}

Sprite Batch adalah kelas pada XNA yang memungkinkan sejumlah gambar 2D

digambar dengan menggunakan pengaturan kartu grafis yang sama.



Terakhir, kita menggambar data tekstur background pada fungsi Draw() dengan menggunakan

spriteBatch. Perlu diingat, bahwa sebelum spriteBatch digunakan untuk menggambar, fungsi

spriteBatch.Begin()dan spriteBatch.End() harus dipanggil terlebih dahulu :

protected override void Draw(GameTime gameTime)

{// Menggambar semua objek setiap gameTime

spriteBatch.Begin();

spriteBatch.Draw(BgTexture, BG_POS, Color.White);

spriteBatch.End();

base.Draw(gameTime);

}

Tekan F5 untuk melihat hasilnya. Sekarang game kita sudah mempunyai background ! Mudah sekali

bukan?☺

Gambar 9 Game yang Sudah Memiliki Background



6. OBJEK-OBJEK GAME

Pada game ini, ada 2 objek utama yang berperan, yaitu kapal dan peluru. Kapal adalah “pemeran

utama” game kita, jadi pemain akan menggerakkan kapal ini di game. Peluru adalah objek yang

ditembakkan oleh kapal.

6.1. MEMBUAT KAPAL

Sekarang kita membuat kapal yang nantinya dapat digerakkan oleh pemain. Pertama-tama kita

membuat kelas Ship yang memodelkan kapal pada game:

1. Klik kanan pada project ShootingGameXNA pada Solution Explorer, pilih Add New Item…

Gambar 10 Menambahkan file Kelas Ship.cs pada Game

2. Kita membuat kelas Shipmenjadi turunan dari kelas

Microsoft.Xna.Framework.DrawableGameComponent

using System;

using System.Collections.Generic;

using Microsoft.Xna.Framework;using Microsoft.Xna.Framework.Audio;

using Microsoft.Xna.Framework.Content;

using Microsoft.Xna.Framework.GamerServices;

using Microsoft.Xna.Framework.Graphics;

using Microsoft.Xna.Framework.Input;

using Microsoft.Xna.Framework.Net;

using Microsoft.Xna.Framework.Storage;

namespace ShootingGameXNA



{

public class Ship : DrawableGameComponent

{

}

}

DrawableGameComponent adalah kelas dari XNA Framework yang merepresentasikan komponen game XNA yang dapat digambar pada game

Lalu kita menambahkan atribut berikut dalam kelas Ship:

1. shipTexture : data tekstur 2D kapal

2. Position : posisi kapal (dalam Vector2)

3. Direction : arah hadap kapal, 0 berarti kapal menghadap ke atas, 1 berarti kapal

menghadap ke bawah

private Texture2D shipTexture;

public Vector2 Position;

public int Direction; // 0 : menghadap atas, 1 : menghadap bawah

public int Score;

Vector2 pada XNA adalah tipe bentukan yang merupakan representasi

dari vektor 2 dimensi, dengan demikian mempunyai X dan Y, dan juga

fungsi-fungsi operasi vektor, seperti operasi dot vektor, cross vektor, dan

sebagainya

Setelah atribut dideklarasi, saatnya melakukan inisialisasi atribut tersebut dalam konstruktor kelas Ship

:

public Ship(Game1 game, Texture2D texture, Vector2 position, int direction) :

base(game)

{

shipTexture = texture;

Position = position;Direction = direction;

Score = 0;

}

Kita membuat kapal ini bisa digambar dengan melakukan menambahkan fungsi Draw():

public override void Draw(GameTime gameTime)

{

((Game1)Game).SpriteBatch.Draw(shipTexture, Position, Color.White);




}

6.2. MENAMBAHKAN KAPAL KE GAME

Setelah kita membuat kelas yang memodelkan sebuah kapal pada game, kita akan menambahkan kapal

tersebut ke game kita.

Pertama-tama, tambahkan atribut berikut pada kelas Game1:

1. NUM_SHIPS : array jumlah kapal yang ada di game

2. SHIP_TEXTURE_PATHS : array path dan nama file (tanpa ekstensi) semua tekstur 2D

kapal relatif terhadap Content

3. SHIP_INIT_POS : array posisi inisial semua kapal ketika pertama kali muncul di

game

4. ShipTextures : array data tekstur 2D untuk semua kapal

5. Ships : array berisi semua kapal yang terdapat di game

6. i : iterator bertipe integer serba guna☺

public readonly static int NUM_SHIPS = 2;

public readonly static string[] SHIP_TEXTURE_PATHS = new string[]

{

"ship1",

"ship2" };

public readonly static Vector2[] SHIP_INIT_POS = new Vector2[]

{

new Vector2(350, 500),

new Vector2(350, 0)

};

public Texture2D[] ShipTextures;

public Ship[] Ships;

private int i;

Atribut ShipTextures dan Ships harus diinisialisasi pada fungsi LoadContent(), dan setiap

instansiasi dari kapal harus ditambahkan ke list of components Components yang diturunkan dari base

class Game1, yaitu Microsoft.Xna.Framework.Gameagar fungsi Update() dan Draw() kelas

Ship ikut dipanggil ketika fungsi Update() dan Draw() pada Game1 dipanggil. Kita tambahkan

potongan kode berikut ke dalam fungsi LoadContent().

ShipTextures = new Texture2D[NUM_SHIPS];

for (i = 0; i < NUM_SHIPS; i++)



{

ShipTextures[i] = Content.Load<Texture2D>(SHIP_TEXTURE_PATHS[i]);

}

Ships = new Ship[NUM_SHIPS];


{

Ships[i] = new Ship(this, ShipTextures[i], SHIP_INIT_POS[i], i);

Components.Add(Ships[i]);

}

Fungsi Draw() untuk semua objek turunan DrawableGameComponentyang telah di-add pada

Game.Components, akan dipanggil pada base.Draw() yang dipanggil di dalam fungsi

Game1.Draw().

Karena fungsi Ship.Draw() tidak memanggil fungsi SpriteBatch.Begin()dan

SpriteBatch.End(), kita harus memastikan bahwa base.Draw() dipanggil di dalam lingkupSpriteBatch.Begin()dan SpriteBatch.End() yang dipanggil di dalam fungsi

Game1.Draw(), agar tidak muncul exception ketika game dijalankan.

Dengan demikian fungsi Game1.Draw() akan menjadi seperti di bawah ini.


{

// Menggambar semua objek setiap gameTime




spriteBatch.End();

}

Sekarang tekan F5 untuk melihat 2 kapal kita sudah berdiri kokoh di posisinya masing-masing☺



Gambar 11 Dua Buah Kapal pada Game

6.3. MENGGERAKKAN KAPAL DENGAN INPUT DEVICE

Kita akan membuat kedua kapal yang telah kita buat pada tahap sebelumnya dapat digerakkan ke kiri

dan ke kanan dengan menggunakan keyboard .

Pertama-tama, tambahkan atribut konstanta SPEED yang menyatakan kecepatan gerak kapal pada kelas

Ship. Nilai SPEED sama dengan 100 berarti kapal akan bergerak sejauh 100 pixel setiap 1 detik.

readonly static int SPEED = 100;

Lalu, mari kita tambahkan fungsi MoveLeft() dan MoveRight() pada kelas Ship agar kapal kita

dapat bergerak ke kiri dan ke kanan. Posisi kapal akan bergeser sejauh SPEED dikalikan dengan jumlah

detik yang dilewati sejak fungsi Game1.Update() dipanggil sebelumnya. Dengan demikian, posisi

kapal akan bergeser sejauh SPEED setiap elapsed telah berjumlah 1 detik.

float elapsed;

public void MoveLeft(GameTime gameTime)

{

elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;

Position.X -= SPEED * elapsed;

}



public void MoveRight(GameTime gameTime)

{


Position.X += SPEED * elapsed;

}

Di manakah fungsi MoveLeft() dan MoveRight() dipanggil? Fungsi ini akan dipanggil di

Game1.Update(). Tapi kita akan membuat kedua fungsi ini tidak dipanggil secara langsung di

Game1.Update(), melainkan kita akan membuat suatu fungsi pada Game1 yang khusus untuk

menangani semua input untuk game.

Tambahkan fungsi playingHandleInput()pada Game1.cs. Fungsi ini menggunakan fungsi pada

kelas Keyboard XNA yang dapat mengecek status dari setiap tombol pada keyboard , dengan

memanggil fungsi Keyboard.GetState()yang mengembalikan nilai bertipe KeyboardState.

Karena kita melakukan suatu aksi ketika tombol pada keyboard ditekan, kita menggunakan fungsi

KeyboardState.IsKeyDown()untuk mengecek apakah suatu tombol sedang dalam keadaan

ditekan atau tidak.

private void playingHandleInput(GameTime gameTime)

{

// Menangani input untuk player 1 :

// A : gerak ke kiri

// D : gerak ke kanan

if (Keyboard.GetState().IsKeyDown(Keys.A))

{// Menggeser persegi kapal player 1 ke kiri

Ships[0].MoveLeft(gameTime);

}

else if (Keyboard.GetState().IsKeyDown(Keys.D))

{

// Menggeser persegi kapal player 1 ke kanan

Ships[0].MoveRight(gameTime);

}

// Menangani input untuk player 2 :

// Panah Kiri : gerak ke kiri

// Panah Kanan : gerak ke kanan

if (Keyboard.GetState().IsKeyDown(Keys.Left))

{

// Menggeser persegi kapal player 2 ke kiri

Ships[1].MoveLeft(gameTime);

}

else if (Keyboard.GetState().IsKeyDown(Keys.Right))

{

// Menggeser persegi kapal player 2 ke kanan

Ships[1].MoveRight(gameTime);

}



// Menangani input keluar dari permainan

if (Keyboard.GetState().IsKeyDown(Keys.Escape))

{

Exit();

}

}

Lalu panggilah fungsi playingHandleInput()pada Game1.Update():

protected override void Update(GameTime gameTime)

{

playingHandleInput(gameTime);

base.Update(gameTime);

}

Jika kita tekan F5, maka kita dapat menggerakan kapal yang di atas dengan menggunakan tombol panah

kiri dan kanan, dan kapal yang di bawah dengan menggunakan tombol A dan D.

6.4. MEMBUAT PELURU

Sekarang kita akan membuat peluru yang dapat ditembakkan oleh kedua kapal kita. Peluru untuk kedua

kapal akan menggunakan tekstur yang sama.

Tambahkan file kelas Bullet.cs pada project kita, lalu seperti pada kelas Ship, buatlah kelas Bullet

menjadi turunan kelas Microsoft.Xna.Framework.DrawableGameComponent.

using System;


using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Audio;





using Microsoft.Xna.Framework.Net;

using Microsoft.Xna.Framework.Storage;


{

public class Bullet : DrawableGameComponent{

}

}

Tambahkan atribut berikut di kelas Bullet:

1. ParentShip : kapal yang menembakkan peluru



2. bulletTexture : data tekstur 2D peluru

3. Position : posisi peluru

4. Direction : arah gerak peluru, 0 berarti arah gerak peluru ke atas, 1 berarti arah

gerak peluru ke bawah

readonly static float BULLET_POS_OFFSET_SHIP_X = 35;

readonly static float BULLET_POS_OFFSET_SHIP_Y = 80;

readonly static float SPEED = 400;

public Ship ParentShip;

private Texture2D bulletTexture;


public int Direction; // 0 : tembak ke atas, 1 : tembak ke bawah

Setelah kita melakukan deklarasi atribut di atas, kita harus melakukan inisialisasi atribut tersebut di

konstruktor kelas Bullet, sehingga konstruktor kelas Bullet akan menjadi sebagai berikut:

public Bullet(Game1 game, Ship ship, Texture2D texture) :

base(game)

{

ParentShip = ship;

bulletTexture = texture;

Direction = ship.Direction;

Position = new Vector2();

Position.X = ship.Position.X + BULLET_POS_OFFSET_SHIP_X;

if (Direction == 0)

{

Position.Y = ship.Position.Y;

}else

{

Position.Y = ship.Position.Y + BULLET_POS_OFFSET_SHIP_Y;

}

}

Setelah ditembakkan, peluru pasti bergerak maju sesuai dengan arah geraknya dan tidak akan di-update

ataupun digambar lagi (dihapus dari Game.Components) ketika peluru telah berada di luar area

game.

Untuk mewujudkan hal itu, mari kita mengimplementasi behavior ini dengan menambahkan fungsi

Update() pada kelas Bullet. Semua fungsi Update() yang terdapat pada semua objek turunan

dari DrawableGameComponentakan dipanggil secara otomatis ketika fungsi Game1.Update()

dipanggil, asalkan objek tersebut telah ditambahkan pada list DrawableGameComponent

Game.Components.



float elapsed;

public override void Update(GameTime gameTime)

{


if (Direction == 0) // menembak ke atas

{

Position.Y -= SPEED * elapsed;

}

else //menembak ke bawah

{

Position.Y += SPEED * elapsed;

}

if (Position.Y <= 0 ||Position.Y >= Game1.GAME_HEIGHT)

{

Game.Components.Remove(this);

}


}

Untuk menggambar peluru, kita gunakan cara yang sama seperti menggambar kapal, yaitu dengan

menambahkan fungsi Draw() dan memanggil fungsi SpriteBatch.Draw() di dalamnya.


{

((Game1)Game).SpriteBatch.Draw(bulletTexture, Position, Color.White);


}

6.5. MEMBUAT KAPAL YANG DAPAT MENEMBAKKAN PELURU

Sekarang kita sudah mempunyai kelas Bullet yang memodelkan peluru pada game, sehingga kita

dapat membuat kapal kita menembakkan peluru.

Pertama-tama, kita harus menambahkan atribut BulletTexture di kelas Game1 yang menyimpan

data tekstur peluru yang akan kita gunakan untuk mengambarkan peluru pada game. Atribut ini harus

bersifat public karena kita akan membuat peluru baru di kelas Ship, bukan di kelas Game1.

public Texture2D BulletTexture;

Lalu kita load data tekstur ini pada fungsi Game1.LoadContent().

BulletTexture = Content.Load<Texture2D>("bullet");



Setelah kita mempunyai data tekstur peluru pada Game1, kita menambahkan sebuah atribut pada kelas

Ship, yaitu sebuah list of Bullet yang berisi peluru-peluru yang ditembakkan oleh kapal tersebut.

public List<Bullet> Bullets;

Lalu atribut Bullets ini akan diinisialisasi pada konstruktor kelas Ship.

Bullets = new List<Bullet>();

Terakhir, kita menambahkan fungsionalitas menembak pada kapal kita dengan membuat fungsi

Ship.Shoot() yang akan membuat sebuah peluru baru dengan menggunakan data tekstur peluru

yang telah kita load pada Game1, lalu menambahkannya ke Ship.Bullets dan

Game.Components.

public void Shoot()

{

Bullet bullet = new Bullet((Game1)Game, this,

((Game1)Game).BulletTexture);

Bullets.Add(bullet);

Game.Components.Add(bullet);

}

Lalu di manakah fungsi Ship.Shoot() ini dipanggil? Ya, tepat sekali! Kita harus menambahkan

sesuatu pada fungsi Game1.playingHandleInput(), sehingga kedua kapal kita dapat

menembakkan peluru setiap kali ada trigger dari input device. Oleh karena itu, kita tambahkan potongankode berikut pada fungsi Game1.playingHandleInput()agar ketika tombol W ditekan, kapal

yang di bawah akan menembakkan peluru ke atas, dan agar ketika tombol panah bawah ditekan, kapal

yang di atas akan menembakkan peluru ke bawah.

Tetapi, kita tidak ingin setiap kali tombol W atau tombol panah atas ditekan, sebuah peluru

ditembakkan, karena ketika sebuah tombol keyboard ditekan sambil ditahan, tombol tersebut dapat

terdeteksi dalam keadaan ditekan berkali-kali dalam selang waktu sepersekian detik saja. Dengan

demikian jika peluru ditembakkan setiap kali tombol tersebut terdeteksi sedang dalam keadaan ditekan,maka akan terjadi hujan peluru yang sama sekali tidak bagus untuk game kita.

Oleh karena itu, kita harus memastikan peluru baru akan ditembakkan setelah selang waktu minimum

antara 2 buah peluru yang ditembakkan secara berurutan telah dipenuhi. Caranya adalah dengan

menambahkan beberapa atribut pada kelas Game1.



public readonly static TimeSpan UPDATE_INTERVAL = new TimeSpan(0, 0, 0, 0,

330);

private TimeSpan timeSinceLastUpdate1;

private TimeSpan timeSinceLastUpdate2;

Pada Game1.Update(), nilai atribut timeSinceLastUpdate1dan timeSinceLastUpdate2

akan ditambahkan dengan selang waktu antara pemanggilan fungsi Game1.Update() yang sekarang

dengan pemanggilan yang sebelumnya. Kita lakukan ini di awal fungsi Game1.Update().

protected override void Update(GameTime gameTime)

{

timeSinceLastUpdate1 += gameTime.ElapsedGameTime;

timeSinceLastUpdate2 += gameTime.ElapsedGameTime;

playingHandleInput(gameTime);


}

Sekarang kita dapat menambahkan potongan kode berikut pada fungsi

Game1.playingHandleInput(),untuk membuat kapal menembakkan peluru ketika suatu

tombol pada keyboard ditekan. Tetapi peluru baru akan ditembakkan jika total waktu yang telah berlalu

telah lebih dari selang waktu minimum yang diperlukan untuk sebuah peluru ditembakkan

(UPDATE_INTERVAL). Setiap peluru baru ditembakkan, timeSinceLastUpdate1dan

timeSinceLastUpdate2di-assign dengan nilai TimeSpan.Zero.

if (Keyboard.GetState().IsKeyDown(Keys.W) &&

(timeSinceLastUpdate1 > UPDATE_INTERVAL))

{

// Menembakkan peluru dari ship1

Ships[0].Shoot();

timeSinceLastUpdate1 = TimeSpan.Zero;

}

if (Keyboard.GetState().IsKeyDown(Keys.Down) &&

(timeSinceLastUpdate2 > UPDATE_INTERVAL))

{

// Menembakkan peluru dari ship2

Ships[1].Shoot();

timeSinceLastUpdate2 = TimeSpan.Zero;

}



Pada fungsi Bullet.Update(), kita sudah membuat sedemikian rupa sehingga ketika peluru sampai

di luar area game, peluru tersebut akan dihapuskan dari Game1.Components. Sekarang, karena kita

mempunyai atribut baru pada kelas Ship, yaitu Bullets, list of peluru yang ditembakkan oleh kapal

tersebut, kita pun harus menghapuskan peluru yang sampai di luar area game dari Bullets. Sehingga

fungsi Bullet.Update() kita sekarang akan menjadi seperti berikut ini:

float elapsed;


{


if (Direction == 0) // menembak ke atas

{

Position.Y -= SPEED * elapsed;

}

else //menembak ke bawah

{Position.Y += SPEED * elapsed;

}

if (Position.Y <= 0 || Position.Y >= Game1.GAME_HEIGHT)

{

ParentShip.Bullets.Remove(this);

Game.Components.Remove(this);

}


}

Untuk melihat bagaimana kedua kapal kita sekarang sudah dapat menembakkan peluru, tekan F5☺



Gambar 12 Kedua Kapal Sudah Dapat Menembakkan Peluru Merah



7. INTERAKSI ANTAR OBJEK

7.1. DETEKSI TABRAKAN ANTARA PELURU DAN KAPAL

Deteksi tabrakan (collision detection) adalah suatu teknik yang digunakan untuk menentukan apakah

sebuah objek bertabrakan/berhimpitan dengan objek lain.

Kita akan menambahkan fungsi deteksi tabrakan sederhana pada kelas Bullet. Fungsi ini bernama

IsCollide() yang mengembalikan true jika peluru bertabrakan dengan sebuah objek dengan posisi

dan radius tertentu. Fungsi ini menggunakan rumus untuk menentukan apakah sebuah titik ada di dalam

lingkarang atau tidak. Jika jarak titik dan pusat lingkaran lebih kecil dari hasil kuadrat radius lingkaran,

maka titik tersebut berada di dalam lingkaran. Kita merepresentasikan peluru menjadi sebuah titik, dan

kapal menjadi sebuah lingkaran. Sehingga jika titik berada di dalam lingkaran, maka peluru bertabrakan

dengan kapal.

public bool IsCollide(Vector2 position, float radius)

{

if (Vector2.DistanceSquared(this.Position, position) <= radius*radius)

{

return true;

}

else

{

return false;

}}

Kita membutuhkan fungsi Bullet.IsCollide()untuk menentukan apakah peluru dari kapal yang

satu berhasil mengenai kapal yang lainnya. Oleh karena itu, kita akan menambah sebuah atribut pada

kelas Ship yang menyatakan radius dari kapal dan sebuah fungsi lagi, juga pada kelas Ship, yaitu

fungsi yang bertugas untuk mengecek apakah peluru dari kapal lainnya berhimpitan dengan kapal

tersebut.

readonly static float RADIUS = 50;

int i, j;

private void CheckCollisionWithBullets()

{

for (i = 0; i < ((Game1)Game).Ships.Length; i++)

{

if (((Game1)Game).Ships[i] != this)

{

for (j = 0; j < ((Game1)Game).Ships[i].Bullets.Count; j++)

{

if (((Game1)Game).Ships[i].Bullets[j].IsCollide(Position, RADIUS))

{



((Game1)Game).Ships[i].Score++;

Game.Components.Remove(((Game1)Game).Ships[i].Bullets[j]);

((Game1)Game).Ships[i].Bullets.RemoveAt(j);

}

}

}

}

}

Pada kelas Ship, kita harus menambahkan fungsi Update(), sehingga kita akan memanggil fungsi

Ship.CheckCollisionWithBullets()di dalam fungsi tersebut.


{

CheckCollisionWithBullets();


}

Sekarang jika kita tekan F5 untuk melihat hasilnya, kita akan mendapatkan bahwa peluru yang kita

tembakkan akan menghilang ketika mengenai kapal yang lain. Game kita sudah mulai terlihat seperti

game sungguhan kan! ^^

7.2. MEMBUAT TAMBAHAN OBJEK PENGHALANG (OBSTACLE )

Untuk membuat game kita semakin menarik, mari kita membuat objek-objek penghalang yang

bergerak-gerak di antara kedua kapal.

Seperti membuat kelas Bullet, kita membuat kelas Obstacle, menambahkannya ke project kita,

dan membuatnya menjadi kelas turunan dari

Microsoft.Xna.Framework.DrawableGameComponent.

using System;


using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Audio;





using Microsoft.Xna.Framework.Net;using Microsoft.Xna.Framework.Storage;


{

public class Obstacle : DrawableGameComponent

{

}

}



Kita tambahkan atribut berikut ke kelas Obstacle:

1. LEFT_MARGIN : atribut konstanta yang nilainya menyatakan batas kiri yang dapat

dicapai oleh objek penghalang

2. RIGHT_MARGIN : atribut konstanta yang nilainya menyatakan batas kanan yang dapat

dicapai oleh objek penghalang

3. obstacleTexture : data tekstur 2D objek penghalang

4. Position : posisi objek penghalang

5. Radius : radius objek penghalang

6. Speed : kecepatan gerak objek penghalang

readonly static float LEFT_MARGIN = 100;

readonly static float RIGHT_MARGIN = 100;

public Texture2D obstacleTexture;


public float Radius;

public float Speed;

Inisialisasi atribut-atribut ini dilakukan di konstruktor kelas Obstacle. Oleh karena itu, mari kita buat

konstuktor kelas Obstacle sebagai berikut :

public Obstacle(Game1 game, Texture2D texture, Vector2 position, float speed)

: base(game)

{obstacleTexture = texture;

Position = position;

Radius = obstacleTexture.Width / 2;

Speed = speed;

}

Kita akan membuat objek penghalang yang bergerak-gerak secara horizontal di antara kedua kapal,

dengan kecepatan berdasarkan atribut Speed. Dan ketika objek penghalang mencapai batas kiri atau

kanan (LEFT_MARGIN atau RIGHT_MARGIN), objek akan bergerak ke arah sebaliknya. Selain behavior

yang berhubungan dengan pergerakan, objek penghalang ini juga tidak bisa ditembus oleh peluru.

Dengan kata lain, peluru akan menghilang ketika bertabrakan dengan objek penghalang. Semua

behavior peluru ini akan kita implementasi dengan menambahkan fungsi Update() pada kelas

Obstacle.

float elapsed;

int i, j;




{


// Menggerakan obstacle

if (Speed < 0)

{

if (Position.X < LEFT_MARGIN)

{

Speed = -Speed;

}

else

{

Position.X += Speed * elapsed;

}

}

else

{

if (Position.X > Game1.GAME_WIDTH - RIGHT_MARGIN)

{

Speed = -Speed;}

else

{

Position.X += Speed * elapsed;

}

}

// Apakah obstacle bertabrakan dengan peluru?


{


{

if (((Game1)Game).Ships[i].Bullets[j].IsCollide(Position,Radius))

{

Game.Components.Remove(((Game1)Game).Ships[i].Bullets

[j]);


}

}

}


}

Dan seperti kelas-kelas turunan DrawableGameComponentyang telah kita buat sebelumnya, kita

harus melakukan membuat fungsi Draw() pada kelas Obstacle.


{

((Game1)Game).SpriteBatch.Draw(obstacleTexture, Position, Color.White);


}



7.3. MENAMBAHKAN OBJEK PENGHALANG KE GAME

Pada kelas Game1, kita harus menambahkan beberapa atribut yang diperlukan untuk menambahkanobjek penghalang pada game kita.

1. OBSTACLE_TEXTURE_PATH : array path dan nama file (tanpa ekstensi) semua tekstur 2D

objek penghalang relatif terhadap Content

2. OBSTACLE_INIT_POS : array posisi inisial semua objek penghalang ketika pertama kali

muncul di game

3. OBSTACLE_SPEED : array kecepatan gerak semua objek penghalang

4. ObstacleTextures : array data tekstur 2D objek penghalang

5. Obstacles : array objek penghalang yang ada di game

public readonly static int NUM_OBSTACLES = 3;

public readonly static string[] OBSTACLE_TEXTURE_PATH = new string[]

{

"obstacle1",

"obstacle2",

"obstacle3"

};

public readonly static Vector2[] OBSTACLE_INIT_POS = new Vector2[]

{

new Vector2(300, 200),new Vector2(170, 300),

new Vector2(120, 400)

};

public readonly static float[] OBSTACLE_SPEED = new float[]

{

200,

300,

-400

};

public Texture2D[] ObstacleTextures;

public Obstacle[] Obstacles;

Kita melakukan load data tekstur objek penghalang dan membuat objek penghalang di dalam fungsi

Game1.LoadContent().

ObstacleTextures = new Texture2D[NUM_OBSTACLES];

for (i = 0; i < NUM_OBSTACLES; i++)

{

ObstacleTextures[i] =

Content.Load<Texture2D>(OBSTACLE_TEXTURE_PATH[i]);

}



Obstacles = new Obstacle[NUM_OBSTACLES];

for (i = 0; i < NUM_OBSTACLES; i++)

{

Obstacles[i] = new Obstacle(this, ObstacleTextures[i],

OBSTACLE_INIT_POS[i], OBSTACLE_SPEED[i]);

Components.Add(Obstacles[i]);

}

Kita tekan F5, dan Voila! Sekarang game kita semakin lengkap dan semakin menarik dengan adanya

objek-objek penghalang yang menyulitkan pemain untuk menembakkan peluru ke kapal yang ada di

seberang☺

Gambar 13 Objek Penghalang pada Game



8. MENAMPILKAN GRAPHICAL USER INTERFACE SCORE

Game yang bagus tidak lepas dari Graphical User Interface (GUI) atau tampilan antar muka yang baik.

GUI berfungsi untuk menampilkan informasi penting yang dibutuhkan oleh pemain, misalnya : nyawa

pemain, score pemain, waktu tersisa, dan lain sebagainya. GUI yang baik merupakan hal wajib untuk

sebuah game. Definisi GUI yang baik adalah GUI yang mudah dimengerti dan tidak merepotkan pemain

untuk memperoleh informasi dari game. Sekarang kita akan membuat GUI sederhana agar pemain

dapat melihat score untuk masing-masing kapal.

Sebenarnya kita sudah membuat sistem scoring sederhana untuk kapal kita, sehingga setiap kapal

berhasil menembakkan peluru ke kapal lain di seberang, score kapal tersebut akan bertambah. Sistem

scoring sederhana ini ada pada fungsi Ship.CheckCollisionWithBullets():


Kita akan menambahkan Graphical User Interface (UI) score yang berfungsi untuk menampilkan score

setiap kapal. Karena score yang ditampilkan itu berupa teks, maka kita harus menggambarkan nilai score

kapal berupa teks juga.

Untuk menggambar teks pada XNA,kita memerlukan font yang direpresentasikan dalam bentuk

Sprite Font. Sprite Font ini berupa file aset XML yang mempunyai extension .spritefont.

Untuk UI score, kita akan menggunakan font Arial, sehingga kita membuat Sprite Font Arial dengan cara

sebagai berikut :

1. Pada Solution Explorer, klik kanan pada Content, pilih Add New Item…

2. Pada kotak dialog Add New Item, pilih Sprite Font pada kotak Templates.

3. Beri nama Arial.spritefont



Gambar 14 Menambahkan Sprite Font Arial ke Game

4. Klik Add

Sekarang kita sudah mempunyai Arial.spritefont pada Content game kita. Namun default font yang

digunakan pada Sprite Font biasanya bukan Arial, sehingga kita harus mengubahnya secara manual

seperti di bawah ini:

1. Buka file Arial.spritefont

2. Ganti nilai elemen FontName menjadi Arial dan nilai element Size menjadi 26

<FontName>Arial</FontName><Size>26</Size>

3. Save file Arial.spritefont

Seperti tipe file aset lainnya, kita harus melakukan load Sprite Font pada fungsi

Game1.LoadContent(). Tetapi terlebih dahulu kita harus menambahkan atribut yang akan

menyimpan hasil load Sprite Font pada kelas Game1.

public SpriteFont ArialSpriteFont;

Pada fungsi Game1.LoadContent(), tambahkan potongan kode berikut untuk load file

Arial.spritefont.

ArialSpriteFont = Content.Load<SpriteFont>("Arial");



Setelah kita mempunyai Sprite Font, kita dapat menggambar teks yang menyatakan score untuk masing-

masing kapal dengan menggunakan fungsi SpriteBatch.DrawString(). Kita melakukannya di

dalam fungsi Game1.Draw(), di dalam lingkup SpriteBatch.Begin()dan

SpriteBatch.End(). Sebelumnya, kita akan menambahkan atribut konstanta pada kelas Game1,

untuk menentukan posisi dan warna teks score yang kita gambar.

public readonly static Vector2[] SCORE_UI_POS = new Vector2[]

{

new Vector2(310, 535),

new Vector2(310, 25)

};

public readonly static Color[] SCORE_UI_COLOR = new Color[]

{

Color.Red,

Color.Green

};


{

// Menggambar semua objek setiap gameTime




{

spriteBatch.DrawString(ArialSpriteFont,

Ships[i].Score.ToString(), SCORE_UI_POS[i], SCORE_UI_COLOR[i]);

}


spriteBatch.End();

}

Tekan F5, dan kita akan dapat melihat UI score yang telah kita bikin ada di samping masing-masing kapal

☺



Gambar 15 Game yang Sudah Mempunyai UI Score



9. SOUND & MUSIC

Game tanpa suara tentu saja kurang menarik. Oleh karena itu, kita akan menambahkan suara pada

game kita, agar pemain dapat memperoleh pengalaman audio dari game, selain pengalaman visual.

9.1. MEMBUNGKUS FILE AUDIO MENJADI FILE ASET GAME DENGAN MICROSOFT XACT

Pada XNA, semua file audio dibungkus terlebih dahulu dalam suatu file .xap. File .xap ini dibuat dengan

menggunakan tools yang disediakan oleh XNA, yang bernama Microsoft Cross-Platform Audio Creation

Tool (XACT). Kita ikuti langkah-langkah di bawah ini untuk membuat file .xap dari semua file audio yang

akan kita tambahkan ke game kita:

1. Buka Microsoft Cross-Platform Audio Creation Tool (XACT). Jika XNA di-install di C:\Program

Files\ maka program ini dapat ditemukan di C:\Program Files\Microsoft XNA\XNA Game

Studio\v3.0\Tools\ dengan executable file bernama Xact.exe

2. Buat project baru dengan memilih pada menu bar File New Project

3. Tentukan lokasi penyimpanan project pada folder Content project kita, beri nama project

ShootingGameXNAAudio, lalu klik Save

4. Pada window di kiri atas, terdapat Wave Banks dan Sound Banks. Klik kanan pada Wave Banks,

pilih New Wave Bank, lalu klik kanan pada Sound Banks, pilih New Sound Bank

Wave Banks adalah kumpulan file wave (.wav), sedangkan Sound Banks

adalah kumpulan suara yang sudah dapat langsung dimainkan di

dalam game.



Gambar 16 Tampilan Microsoft XACT

5. Tambahkan file audio untuk game kita pada Wave Bank, dengan cara klik kanan pada window

Wave Bank, pilih Insert Wave File(s)… Kita akan menambahkan file missilelaunch.wav dan

explosion.wav yang terdapat pada folder yang sama dengan folder project XACT, yaitu folder

Content

6. Drag missilelaunch dan explosion dari window Wave Bank ke Cue List yang ada pada window

Sound Bank (bagian bawah dari Sound Bank)



Gambar 17 Menambahkan Wave dan Cue pada Microsoft XACT

9.2. MENAMBAHKAN SUARA KE GAME

Setelah kita mempunyai file .xap yang merupakan kumpulan dari file audio, kita dapat menambahkan

suara ke dalam game kita seperti di bawah ini:

1. Tambahkan file ShootingGameXNAAudio.xap, missilelaunch.wav, dan explosion.wav ke Content

project kita, dengan klik kanan pada Content, lalu Add Existing Item…

2. Tambahkan atribut yang diperlukan untuk audio pada game berikut:

a. AudioEngine : engine yang digunakan XNA untuk mengelola suara pada game

b. SoundBank : objek representasi dari sound bank yang di-load dari file aset audio

c. WaveBank : objek representasi dari wave bank yang di-load dari file aset audio

public AudioEngine AudioEngine;

public SoundBank SoundBank;

public WaveBank WaveBank;

3. Inisialisasi ketiga atribut di atas pada fungsi Game1.LoadContent()

AudioEngine = new AudioEngine("Content/ShootingGameXNAAudio.xgs");

WaveBank = new WaveBank(AudioEngine, "Content/Wave Bank.xwb");



SoundBank = new SoundBank(AudioEngine, "Content/Sound Bank.xsb");

Sekarang kita sudah dapat menggunakan suara yang sudah kita bungkus menjadi file .xap tadi untuk

dijadikan sound effect ketika terjadi sesuatu pada game kita dengan menggunakan fungsi

SoundBank.PlayCue().

Kita tambahkan potongan kode ini ke dalam fungsi Ship.Shoot() untuk memberikan sound effect

missilelaunch ketika sebuah peluru ditembakkan.

((Game1)Game).SoundBank.PlayCue("missilelaunch");

Dan kita tambahkan potongan kode ini ke dalam fungsi Ship.CheckCollisionWithBullets()

untuk memberikan sound effect ledakan ketika peluru mengenai kapal, sehingga fungsi

Ship.CheckCollisionWithBullets() menjadi seperti di bawah ini:

int i, j;

private void CheckCollisionWithBullets()

{


{

if (((Game1)Game).Ships[i] != this)

{


{

if (((Game1)Game).Ships[i].Bullets[j].IsCollide(Position, RADIUS))

{




((Game1)Game).SoundBank.PlayCue("explosion");

}

}

}

}

}

Lalu kita tambahkan potongan kode yang sama seperti di atas dalam fungsi Obstacle.Update()

untuk memberikan sound effect ledakan juga ketika peluru mengenai objek penghalang, sehingga

bagian pengecekan tabrakan dengan peluru pada Obstacle.Update() akan menjadi seperti di

bawah ini:

// Apakah obstacle bertabrakan dengan peluru?


{


{

if (((Game1)Game).Ships[i].Bullets[j].IsCollide(Position,Radius))

{





((Game1)Game).SoundBank.PlayCue("explosion");

}

}

}

Tekan F5 dan kita akan mendapatkan pengalaman yang lebih ketika bermain game ini dengan adanyasound effect ketika kita menembak dan mengenai objek pada game :D



10. THE GAME IS DONE ! ☺☺☺☺

Selamat! Game kita sudah selesai, dengan demikian Anda sudah menjadi seorang game developer!☺

Sebenarnya masih banyak pengembangan selanjutnya yang dapat dilakukan untuk game tadi, misalnya:

1. Menambahkan efek partikel ledakan ketika peluru menabrak kapal

2. Membuat kapal dikendalikan dengan artificial intelligence (AI), sehingga pemain bisa bermain

sendirian, tanpa harus mengendalikan kedua kapal sekaligus

3. Menambahkan layar main menu, game over, dan sebagainya

Anda dapat mengembangkan sesuka hati Anda, karena ini adalah game yang sepenuhnya milik Anda!

Selamat berkreasi!☺



PENUTUP

Sampailah juga kita di bagian akhir e-book ini dan telah muncullah seorang game developer baru di

dunia, yaitu Anda!☺

Dari perjalanan kita dari awal sampai akhir e-book ini, kita dapat menyimpulkan bahwa XNA sangat

memudahkan kita untuk membuat sebuah game. Cukup dengan pengetahuan pemrograman dasar, kita

dapat membuat game dengan mudah.

Jika Anda tertarik untuk mendalami XNA lebih lanjut, Anda dapat mencari sumber online yang

terpercaya di XNA Creators Club Online, XNA Framework Class Library Reference, atau Riemers XNA

Tutorial.

Selamat belajar dan sampai jumpa di e-book game development berikutnya!☺



REFERENSI

- XNA 3.0 Game Programming Recipes: A Problem-Solution Approach (Expert's Voice in XNA)

- Beginning XNA 3.0 Game Programming: From Novice to Professional

- Game Development and Production

- Learning XNA 3.0: XNA 3.0 Game Development for the PC, Xbox 360, and Zune

- Microsoft XNA Unleashed: Graphics and Game Programming for Xbox 360 and Windows

- Microsoft XNA Game Studio 3.0 Unleashed

- XNA Creators Club Online

- XNA Framework Class Library Reference

Membuat Game Dengan XNA Game Studio

Documents

Transcript of Membuat Game Dengan XNA Game Studio