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
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
XNA 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
I 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
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\.
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
belog 
Leave a comment