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

2 Responses to “Bikin musuh sederhana di XNA”

  1. ninankara Says:

    wah mantep tutorial XNA, ko ga lanjut mas?
    hehe

    lagi belajar XNA juga ne, dpt tgs akhir bikin game 3D

  2. ninankara Says:

    lanjutin lagi mas
    hehehe

    aku mau buat game 3D nih, tau sumber yg source code gratis ga?


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: