Bikin musuh sederhana di XNA

T.H.E pacmanOkay, setelah berhasil me-load gambar, dan menggerakkannya sesuai dengan posisi mouse, tahap selanjutnya adalah membuat musuh! Bayangkan aja musuhnya adalah… engg… Pacman! Ya, karena karakter yang kita mainkan adalah the Ghost – maka musuhnya si Pacman donk :)

Mari kita buat gambarnya terlebih dahulu. Bukalah image editor favorit anda, dan buatlah sebuah gambar 100×100 pixel yang mirip-mirip sama Pacman. Simpan dengan nama “pacman.png”. Save image tersebut ke folder \content\ di folder project XNA anda.

Langkah-langkah yang harus kita lakukan hampir sama dengan tutorial sebelumnya. Berikut dijelaskan secara setep bae setep :

1. Open projectBuka visual studio C# 2005 express

2. Klik File -> Open Project

3. Browse ke tempat kita menyimpan project pada langkah sebelumnya, pilih file .SLN-nya dan klik Open.

4. Atau kita bisa langsung membuka projectnya lewat shortcut yang disediakan di Start Page Visual Studio C# 2005 express di tab Recent Projects.

Pacman is officially added!Nah setelah projectnya dibuka, kita load gambar tadi sebagai sebuah asset. Langkah-langkahnya adalah :

1. Klik kanan di folder content dalam jendela Solution Explorer

2. Pilih Add – Existing Item

3. Pilih file “pacman.png” yang tersimpan di folder \project XNA anda\Content\

Kemudian buat sebuah variable untuk ‘menampung’ aset tadi. Langkah-langkahnya adalah :

1. Buat sebuah variable bertipe Texture2D yang kita beri nama pacmanTexture

2. Pindah ke method LoadContent()

3. Hubungkan aset “pacman” dengan variable pacmanTexture dengan mengetikkan pacmanTexture = Content.Load<Texture2D>(“pacman”); disana.

4. (lihat gambar disamping untuk lebih jelasnya)

Nah, pertanyaan selanjutnya adalah, dimana kita akan menggambar si Pacman? Dan gimana sih tingkah lakunya (behavior) si Pacman? Mari kita definisikan sekarang :

1. Pacman selalu mulai digambar di posisi (0,0)

2. Pacman selalu bergerak menuju si Ghost.

Yap segitu dulu sementara. Cukuplah untuk menyebut ‘musuh’ di game ini sedikit ‘pintar’. Hehehe…

Langkah selanjutnya adalah menuangkan logika tingkah-laku Pacman kedalam bahasa C# :) Let’s do it step-by-step :

1. Buat sebuah variable untuk menampung posisi Pacman. Tipe variable yang tepat untuk merepresentasikan posisi Pacman adalah Vector2. Ketikkan code ini di bagian deklarasi variable : Vector2 posisiPacman;

2. Pada method Initialize() set nilai awal posisiPacman ke (0,0) dengan mengetikkan code : posisiPacman = new Vector2(0, 0);

3. Pindah ke method Update(). Dan ketikkan code berikut ini disana :

posisiGhost = new Vector2(mouse.X, mouse.Y);

jarak = posisiGhost – posisiPacman;

posisiPacman += jarak * gameTime.ElapsedGameTime.Milliseconds * 0.005f;

Okay, mari kita bahas 3 langkah di atas. Pertama-tama, kita buat sebuah variable untuk menyimpan posisi Pacman. Tipe data yang kita gunakan adalah Vector2. Tipe data ini merupakan record/struct yang menyimpan data float X dan float Y. Float adalah tipe data yang mirip-mirip dengan tipe data real (menyimpan koma-koma juga).

Selanjutnya variable tersebut di beri nilai awal (0,0). Sehingga Pacman selalu muncul dari pojok kiri atas. Kemudian kita pindah ke method update dan mengetikkan 3 baris code disana. Baris pertama posisiGhost = new Vector2(mouse.X, mouse.Y); memindahkan nilai X dan Y dari posisi mouse ke variable posisiGhost. Hal ini dilakukan untuk mempermudah perhitungan jarak antara posisi Ghost dan posisi Pacman yang dilakukan dengan menulis code : jarak = posisiGhost – posisiPacman;. Kemudian posisiPacman di increment mendekati posisiPacman dalam baris ketiga code di atas.

Artinya untuk setiap update, dekatkan posisiPackman dengan posisi Ghost sejauh 1/200 atau 0.005 pixel untuk setiap milisecond yang sudah berlalu sejak Update() sebelumnya. Nah, masih ingat dengan proses Update() dan Draw() yang selalu dikerjakan selang-seling? Keduanya tidak bisa dilakukan secara bersamaan. Nah, XNA menyimpan properti berapa waktu yang sudah lewat setelah satu Update() sebelum pemanggilan Update() yang sekarang dilakukan. Nilainya dapat dipanggil dengan mengetik : gameTime.ElapsedGameTime.Milliseconds . Dengan mengalikan jarak, 0.005 dan waktu yang sudah lewat, kita bisa mendapatkan pergeseran posisi Pacman yang ‘smooth’ -halus, sesuai dengan FPS (Frame Per Second) yang diraih game tersebut.

Kode diatas tidak valid (belum bisa di run) karena kita belum mendefinisikan variable jarak dan posisiGhost. Untuk itu, pindahlah ke bagian deklarasi variable dan tambahkan code ini disana :

Vector2 posisiGhost;

Vector2 jarak;

Sehingga source code kita sekarang seharusnya tampak seperti gambar di bawah ini :

Method updatenya udah ter-Update

Terakhir, kita harus mengupdate Draw() method kita. Disini kita memanfaatkan posisiPacman dan posisiGhost untuk menggambar texture pacman dan ghost di layar. Untuk ini kita harus sedikit mengubah code di method Draw yang sudah kita ketik kemaren menjadi :

spriteBatch.Begin();

spriteBatch.Draw(ghostTexture, posisiGhost, Color.White);

spriteBatch.Draw(pacmanTexture, posisiPacman, Color.White);

spriteBatch.End();

Dalam code diatas, kita menggunakan variable posisiGhost dan posisiPacman langsung kedalam fungsi spriteBatch.Draw(). Hal ini mungkin dilakukan karena kedua variable tersebut tipenya adalah Vector2.

Selesai! Coba jalankan program XNA anda dengan menekan F5!

Cool isn’t?! Well cukup sekian dulu hari ini, besok kita coba bikin collision detection untuk mengecek apakah kedua gambar tersebut (ghost dan pacman) sedang tabrakan. Tujuannya : untuk tau kapan kita kalah :D

Asset dan Input di XNA

Nah, setelah sukses menginstall XNA, sekarang kita bisa mulai coba-coba bikin aplikasi sederhana di framework XNA. Anggap aja ini tutorial menggunakan XNA :) Dan dalam tutorial ini kita belajar cara membuat sebuah aset dan memanggil mouse sebagai input dari user.

Membuat Project Baru

Create new Project

Klik File -> New

1. Buka visual studio C# 2005 express

2. Klik File -> New Project

3. Pada jendela create project yang baru muncul, pilih “XNA Game Studio 2.0” sebagai project type dan “Windows game 2.0” sebagai Template Project.

4. Kemudian, beri nama untuk project baru ini sekaligus mengubah path-nya (bila perlu). Pada contoh ini saya menggunakan nama “cobaXNA” dan sekaligus mengubah pathnya ke tempat project-project XNA saya.

5. Klik OK

Jendela EditorXNA sudah memudahkan kita untuk segera membuat sebuah game. Hal ini dilakukan dengan menyediakan kerangka method-method yang diperlukan. Perhatikan jendela code editor, disana sudah disediakan 5 buah method yaitu : Initialize(), LoadContent(), UnloadContent(), Update() dan Draw().

Namun dalam contoh ini, hanya 4 method utama yang akan kita pakai yaitu :

· Initialize() sebagai tempat untuk mengeset nilai awal variable-variable.

· LoadContent() sebagai tempat untuk memanggil content (gambar, font, suara, map, dll).

· Update() sebagai tempat untuk meng-update variable variable.

· Draw() sebaga tempat untuk memanggil fungsi untuk menggambar ke layar.

Dan memang biasanya hanya 4 method itu yang sering dipakai.

Kalau mau iseng, coba tekan ‘F5’ (run). Maka di layar anda akan muncul sebuah jendela berlatar biru. Horaaay! Game anda sudah bisa jalan!!! (walaupun masih kosong :P)

Cara kerja XNA

The WorkflowI hope this image is enough to explain it :)

Hal yang perlu di catat adalah bahwa method Update() dan Draw() selalu dipanggil secara bergantian. Disanalah kita harus menulis core dari program game kita. Update() biasanya diisi dengan kode program untuk meng-update nilai dari variable posisi player, posisi musuh, posisi peluru, check tumbukan (collision) dll. Artinya disanalah inti dari engine game kita ditulis.

Sedangkan Draw() adalah tempat untuk memanggil fungsi-fungsi drawing. Disini kita harus menggambar satu-per-satu texture kita (player, enemy, bullet, explotion, dll) sesuai dengan posisinya masing-masing.

Nah kombinasi kedua method inilah (update-draw) yang mengakibatkan terjadinya pergerakan gambar-gambar di layar monitor. Tiap pemanggilan Draw() bisa diasosiasikan dengan dengan sebuah Frame (dalam flash, atau video). Sehingga banyaknya pemanggilan Draw() dalam 1 detik bisa disebut sebagai Frame Per Second (FPS). Semakin tinggi FPS-nya semakin halus pergerakan gambar-gambar di monitor kita.

Karena Update() dan Draw() saling dipanggil bergantian, maka apabila method Update() dipanggil terlalu lama (perhitungan yang dilakukan didalamnya terlalu rumit) maka jumlah pemanggilan Draw() per-second-nya akan semakin kecil. Kalau terlalu kecil (dibawah 30 FPS) maka akan terasa ada efek patah-patah dalam gameplay game kita.

Load Asset

Create Gambar

Asset adalah cara XNA menyebut well… aset :P Aset adalah engg… file-file yang diambil dari luar program kita (sebut saja begitu). Misal : Texture / Gambar, Sound, Font, dll.

Nah, game yang baik adalah game yang ada gambarnya (citation needed :P). Jadi langkah pertama kita dalam membuat game adalah membuat gambar.

Bukalah image editor favorit anda, dan buatlah sebuah gambar. Dalam contoh disamping saya menggambar sebuah hantu, mirip kayak musuh dalam permainan pacman. Formatnya adalah .PNG dan berdimensi 100×100 pixel.

Save file imagenya di \folder tempat project XNA kita\content\. Dalam contoh ini, gambarnya di save di D:\Project\XNA\cobaXNA\cobaXNA\Content\.

The asset is loaded okay....

Add existing item

Kemudian, kembali ke visual studio, pada bagian Solution Explorer, klik-kanan di ‘folder’ Content -> Add -> Existing Item. Browse ke image tadi (ghost.png).

Dan akhirnya kita memiliki sebuah aset bernama ‘ghost’ (secara default diambil dari nama file-nya).

Langkah selanjutnya adalah meng-assign (kalo bahasa pascalnya) asset tadi dengan sebuah variable dalam XNA. Untuk menyimpan gambar 2D (png, jpg, bmp, dll) di XNA, kita bisa menggunakan tipe data Texture2D. Caranya ialah dengan mengetikkan code berikut di layar editor Game1.cs di bagian deklarasi variable (tepat dibawah perintah GraphicsDeviceManager graphics; dan SpriteBatch spriteBatch;).

Texture2D ghostTexture;

Kemudian pindah ke method LoadContent() dan ketikkan kode ini dibawah bagian // TODO:

ghostTexture = Content.Load<Texture2D>(“ghost”);

Tampilkan Texture di Layar

Untuk menampilkan gambar tadi, kita bisa mengetikkan kode berikut di dalam method Draw()

spriteBatch.Begin();

spriteBatch.Draw(ghostTexture, new Vector2(300, 300), Color.White);

spriteBatch.End();

Tekan F5 untuk melihat hasilnya. Seharusnya dalam layar biru tadi sudah muncul gambar yang anda buat.

Penjelasan potongan-potongan code diatas adalah sebagai berikut : Pertama, kita membuat sebuah variable bertipe Texture2D dengan nama ghostTexture. Variable ini berfungsi untuk ‘menyimpan’ sebuah gambar/texture dua dimensi. Kemudian kita menghubungkan variable ghostTexture dengan sebuah aset yang bernama “ghost”. Aset ini tiada lain dan tiada bukan adalah gambar .PNG yang sudah kita buat.

Kemudian pada method Draw(), kita memanggil spriteBatch.Draw() untuk menggambar texture ghost tadi ke layar. Parameter yang dimasukkan dalam fungsi tersebut adalah nama variable texturenya, posisi (pojok-kiri-atas) sebagai titik awal untuk mulai menggambar texturenya dan Color Modulation – white aja biar gambar yang ditampilkan sama dengan gambar aslinya.

Perlu diperhatikan bahwa fungsi spriteBatch.Draw() hanya boleh dipanggil diantara spriteBatch.Begin() dan spriteBatch.End().

Input!

Lha apakah begituan doang udah dibilang game? Ya nggak lah, masih panjang perjalanannya untuk sampai bisa disebut sebuah game. Harus ada interaksinya dengan pemain (input dari user, mouse atau keyboard atau joystick), harus ada efek suara dan musicnya, harus ada scoring, dan harus ada kondisi kalah dan menangnya.

Mari kita mulai dengan sesuatu yang sederhana : menggerakkan gambar tadi. Caranya ialah dengan merubah posisi gambar (menggerakkannya) sesuai dengan pergerakan mouse. Kenapa mouse? Karena paling gampang manggilnya :)

Hal yang harus kita lakukan pertama kali adalah membuat variable untuk menampung mouse. Caranya ialah dengan mengetikkan code berikut di bagian deklarasi variable :

MouseState mouse;

Kemudian pindah ke method Update() dan ketikkan potongan code berikut :

mouse = Mouse.GetState();

Dan merubah code spriteBatch.Draw() kita tadi dengan :

spriteBatch.Draw(ghostTexture, new Vector2(mouse.X, mouse.Y), Color.White);

Jalankan gamenya (tekan F5) daaannn…. Tadaaah! Sekarang gambarnya bergerak sesuai dengan pergerakan mouse! Nice isn’t?!

Yang barusan kita lakukan adalah membuat sebuah variable bertipe MouseState (kayaknya udah jelas fungsinya apa) yang berfungsi untuk menyimpan state dari mouse. Kemudian kita memberi variable tersebut nilai baru dari mouse dengan memanggil GetState(). Pemberian nilai baru ini harus dilakukan setiap saat, oleh sebab itu perintah mouse = Mouse.GetState() dipanggil di method Update(). Perhatikan perbedaan huruf besar dan kecilnya! Kemudian variable mouse kita ambil posisi X dan Y nya untuk menjadi posisi penggambaran ghostTexture.

That’s it for now – sampai jumpa besok :D

Installasi XNA

haa… basbang ah :p
Tapi mungkin masih ada yang belum tau ^_^ here’s how :

Hardware Requirement :

  • 512 MB Ram, tapi sebaiknya punya 1 Giga atau lebih
  • 1 GHz CPU, lebih cepat lebih baik :)
  • Minimal kartu grafis yang support Shader Model 1.1 secara hardware (Nvidia GeForce 3, ATI Radeon 7x ke atas)

Software Requirement :

Proses installasinya seharusnya sangat mudah. Tinggal klik-klik aja. Tidak ada trik-trik khusus dalam penginstallasian semua software diatas. Namun perlu diperhatikan urutan penginstallannya harus seperti berikut :

  1. Install DirectX Runtime.
  2. Install Visual Studio 2005 Express dan SP.1-nya. Visual Studio Express dapat diinstall berdampingan dengan Visual Studio family lainnya (bahkan Visual Studio 2008).
  3. Jalankan Visual Studio Express minimal 1x. Hal ini diperlukan untuk mengaktifkan dan mempersiapkan environtment setting untuk keperluan installasi XNA.
  4. (optional) Install XNA 1.0 refresh.
  5. Install XNA Studio Express 2.0. Note: Beberapa contoh dan tutorial di internet masih menggunakan XNA framework versi 1.0. Jika anda mau, anda bisa menginstall kedua-duanya sekaligus.
  6. Selesai, seharusnya anda sudah melihat logo XNA saat anda ingin memulai project baru dalam Visual Studio 2005 Express anda. Namanya : “Windows Game (2.0)”

    XNA framework selesai di install

(note: Install artinya klik-dua-kali file installernya).

Oh, btw, saya masih menggunakan Windows XP sebagai OS untuk men-develop game XNA ^_^