katulsomin - MIC ITB

See also: Other Geeks@INDC

June 2009 - Posts

Tutorial XNA : Memasukkan Gambar dan Menggerakkannya

Sesuai janji, sekarang akan saya jelaskan caranya memasukkan gambar dan mengolahnya dalam XNA Game Studio. Saya sarankan untuk pemula, baca dulu pengantar tutorial XNA saya sebelumnya. Saya ingatkan, saya juga belum mahir. Jadi kalau ada kesalahan atau saran kasih tahu, ya. Siip..

Menambah Asset Project

Sebelum gambar hendak di otak-atik, file gambar perlu dimasukkan dulu sebagai asset. Untuk contoh ini, saya akan memakai gambar bola ini:

600px-Soccer_ball.svg

Dalam solution explorer, klik kanan Content, Add –> Existing Item

6-29-2009 6-25-15 PM

 

Lalu tinggal pilih file gambar yang hendak dimasukkan. Jika sudah, klik file tersebut, dan akan muncul properties-nya:

image

Asset Name adalah nama yang digunakan bila kita hendak meload file tersebut. Lebih baik Asset Name diubah menjadi nama yang lebih pendek dan mudah diingat, dan disini Asset Name saya ubah menjadi “bola”. Properties yang lain tidak perlu diubah, tapi kalau mau silahkan experimen sendiri.

 

Menampilkan Gambar

Disini saya jelaskan dulu cara yang paling standar, agar lebih mudah dimengerti cara kerjanya, Baru nanti agak lebih mantep, OK? Smile

Pertama-tama, harus disediakan kelas container untuk gambar. Masukkan kode berikut ke dalam kelas Game1.cs

   1: Vector2 posisi = new Vector2(0, 0); // untuk menampung posisi gambar
   2: Texture2D gambar; // Untuk menampung grafik dari gambar

Sekarang, ayo kita load asset bola kedalam game. Sesuai struktur XNA, urusan load asset ditangani di prosedur LoadContent. Tambahkan kode ini di prosedur tersebut.

   1: gambar = this.Content.Load<Texture2D>("bola");

Untuk kebersihan memori, jangan lupa untuk menambahkan kode untuk unload-nya juga di UnloadContent:

   1: gambar.Dispose();

Setelah persiapan diatas telah selesai, saatnya kita gambar ke layar. Untuk proses menggambar, kita akan berurusan dengan kelas spriteBatch. spriteBatch adalah kelas XNA untuk menggambar ke layar. Ok, sekarang tambahkan code ini kedalam prosedur Draw:

   1: spriteBatch.Begin();
   2: spriteBatch.Draw(gambar, posisi, Color.White);
   3: spriteBatch.End();

Bila berhasil, saat kita coba Run Game1.cs akan muncul window seperti ini:

image

Enggak susah, kan? smile_regular

Membuat Kelas Sprite Sederhana dan Menggerakkan Gambar

Kalau yang berpengalaman OOP, kayaknya udah melihat masalah pada cara diatas. Bila untuk menggambar dibutuhkan 2 variable yang berbeda, itu tidak efektif. Apa lagi jika kebutuhan makin kompleks dan variable makin banyak. Akan lebih baik jika kita membuat sebuah kelas Sprite yang memiliki property dan method yang lengkap untuk mengurusnya. Karena itu, mari kita buat sebuah kelas sprite sederhana agar mengendalikan gambar lebih mudah!

Untuk membuat kelas baru, klik kanan di project name, Add –> New Item

 image

 Dan pilih Class, untuk contoh ini saya beri nama SpriteSederhana.

image

Ini kode saya untuk kelas Sprite Sederhana:

   1: using Microsoft.Xna.Framework.Graphics;   // Untuk Texture2D
   2: using Microsoft.Xna.Framework;  //  Untuk Vector2
   3:  
   4: namespace Latihan
   5: {
   6:     class SpriteSederhana
   7:     {
   8:  
   9:         public Texture2D texture { get; set;}  // Sprite texture
  10:         public Vector2 posisi { get; set; }  // posisi Sprite
  11:         public SpriteSederhana (Texture2D newTexture, Vector2 newPosisi) //konstruktor
  12:         {
  13:             texture = newTexture;
  14:             posisi = newPosisi;
  15:         }
  16:  
  17:         public void Draw(SpriteBatch spriteBatch)
  18:         {
  19:             spriteBatch.Draw(texture, posisi, Color.White); //Untuk menggambar ke layar
  20:         }
  21:  
  22:         public void Dispose()
  23:         {
  24:             texture.Dispose(); //Untuk unload Content
  25:         }
  26:     }
  27: }

Setelah itu, Game1.cs juga perlu sedikit diubah untuk memanfaatkan kelas sprite baru kita.

Ganti yang lama dengan Variable baru:

   1: SpriteSederhana gambarBola;

Untuk LoadContent:

   1: gambarBola = new SpriteSederhana(this.Content.Load<Texture2D>("bola"), new Vector2(0f, 0f));

 Untuk UnloadContent:

   1: gambarBola.Dispose();

Terakhir, untuk Draw:

   1: spriteBatch.Begin();
   2: gambarBola.Draw(spriteBatch);
   3: spriteBatch.End();

Sekarang, jika dicoba di-run, bola juga akan terlihat seperti cara standar. Tapi, karena sudah dalam kelas tersendiri, akan lebih mudah untuk menambahkan method untuk mengendalikannya. Ayo, kita coba biar gambar bola ini bisa bergerak!

Tambahkan method berikut di SpriteSederhana.cs

   1: public void GerakHorizontal(int kecepatan)
   2:  {
   3:      posisi = new Vector2(posisi.X + kecepatan, posisi.Y);
   4:  }

 Sekarang, kita coba method itu di prosedur Update Game1.cs

   1: protected override void Update(GameTime gameTime)
   2: {
   3:     // Allows the game to exit
   4:     if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
   5:         this.Exit();
   6:  
   7:     // TODO: Add your update logic here
   8:     gambarBola.GerakHorizontal(1);
   9:     base.Update(gameTime);
  10: }

Coba di run. Jika Bola tersebut bergerak ke kanan, berhasil! Tentunya, kecepatan bola bergerak bisa diubah tergantung masukan kepada fungsi GerakHorizontal. Jika mau membuat GerakVertikal, tidak jauh beda. Hanya saja yang diubah adalah y, bukan x. Silahkan coba sendiri!Wink

Oke, untuk kali ini segini dulu yah. Kalau tertarik sih saya sarankan eksperimen sendiri. Insya Allah post berikutnya saya tunjukkan bagaimana mengendalikan gambar dari input user.Smile

Share this post: | | | |
Tutorial XNA : Prelude

Sebelum ditugaskan menulis blog oleh MIC ITB, saya tidak tahu sama sekali tentang XNA. Masalahnya, majalah PC terlalu mahal untuk kantong mahasiswa, dan waktu internet termakan facebooksmile_embaressed. Tugas MIC ITB mengharuskan post saya agar bermanfaat, dan post saya sebelumnya tentang silverlight, saya pikir lagi sepertinya tidak begitu membantu orang lain.. terlalu terburu-buru dan lebih seperti curhat. Karena itu sekarang saya ingin menulis tutorial yang lebih step by step, agar lebih mudah dipahami dan tidak langsung menyodorkan hasil jadi untuk dipelajari. Tutorial ini akan saya buat berdasarkan dari banyak sumber lain yang saya baca dan ambil sarinya, lalu disajikan disini dengan ramuan saya sendiri untuk pembaca.

 

Pengertian dan konsep XNA

Apa sih XNA? XNA adalah sebuah framework dari Microsoft untuk memudahkan developer membangun game untuk PC dan XBOX, dan Zune. Gampangnya, semua buatan Microsoft. XNA juga adalah singkatan dari ‘XNA’s Not Acronymed’. Hehe, saya ketawa begitu tahu. Ternyata Microsoft punya rasa humor juga. smile_regular

Beberapa keunggulan XNA adalah:

  • Gratis. jadi, mengapa tidak?
  • Portabilitas. Game yang kita buat dengan XNA dapat dijalankan di semua Platform yang mendukung XNA Framework. (Kalau mau bilang berarti ini hanya untuk windows, pikir lagi! Mono (alternatif open source yang kompatibel dengan .NET) juga akan mendukung XNA.)
  • Kemudahan. XNA mengurus berbagai kode rutin untuk mengontrol multimedia dan lain-lain, yang merupakan kebutuhan mendasar bagi semua game.

 

Persiapan untuk membuat game dengan XNA.

Ready?

Pertama-tama, kau perlu mendownload XNA Game Studio 3.1 dan Visual C# Express Edition dari website ini http://creators.xna.com/en-US/downloads. jangan khawatir, downloadnya gratis.

Install Visual C# terlebih dahulu, lalu baru XNA, karena XNA Game Studio sebetulnya mirip “extension” untuk Visual Studio.

Selesai? Oke. Buka Visual C#, pilih “New Project” dan akan muncul window ini:

image

Pilih XNA Game Studio 3.1, lalu Windows Game. Untuk nama project ini saya beri nama “Latihan”. OK!

XNA secara otomatis akan membuat beberapa file dan folder dalam project. Yang pertama kali terbuka untuk di edit adalah Game1.cs

Cobalah di-run. Jika muncul window berwarna biru seperti ini, selamat! Langkah pertama selesai!

image 

 

Struktur default game XNA

Sebelum otak-atik dimulai, perlu tahu dulu struktur game yang dibuat oleh XNA ini. Ada 2 file kode utama yang dibuat secara otomatis, yaitu :

Program.cs

File ini menyimpan Main dari game yang kita buat. Jika kita lihat isinya:

   1: using System;
   2:  
   3: namespace Latihan
   4: {
   5:     static class Program
   6:     {
   7:         /// <summary>
   8:         /// The main entry point for the application.
   9:         /// </summary>
  10:         static void Main(string[] args)
  11:         {
  12:             using (Game1 game = new Game1())
  13:             {
  14:                 game.Run();
  15:             }
  16:         }
  17:     }
  18: }
  19:  

Kode awal dari file ini simpel, yaitu membuat kelas baru dari Game1 dan menjalankannya. Program.cs ini memberikan kebebasan saat kita ingin mengurus command line code dan semacamnya, juga karena seluruh Game1 tersimpan dalam 1 kelas, jika kita ingin membuat sebuat multi-game atau sub game, file ini adalah tempat mengaturnya.

 

Game1.cs

Game.cs adalah file yang menyimpan kelas yang akan meng-enkapsulasi game yang hendak kita buat. XNA juga sudah mengenerate berbagai prosedur standar yang tinggal kita isi. Penjelasan singkat tiap prosedur:

 

Initialize

   1: /// <summary>
   2: /// Allows the game to perform any initialization it needs to before starting to run.
   3: /// This is where it can query for any required services and load any non-graphic
   4: /// related content.  Calling base.Initialize will enumerate through any components
   5: /// and initialize them as well.
   6: /// </summary>
   7: protected override void Initialize()
   8: {
   9:     // TODO: Add your initialization logic here
  10:  
  11:     base.Initialize();
  12: }

Ini adalah prosedur yang akan dilaksanakan sebelum sebuah sesi game dijalankan. Jika kita hendak melakukan inisialisasi variable, kelas, dan semacamnya untuk sebuah sesi game, tinggal kita masukkan disini, dan XNA akan mengurusnya dengan otomatis.

 

LoadContent

   1: /// <summary>
   2: /// LoadContent will be called once per game and is the place to load
   3: /// all of your content.
   4: /// </summary>
   5: protected override void LoadContent()
   6: {
   7:     // Create a new SpriteBatch, which can be used to draw textures.
   8:     spriteBatch = new SpriteBatch(GraphicsDevice);
   9:  
  10:     // TODO: use this.Content to load your game content here
  11: }

LoadContent tempatnya kita men-load berbagai content(grafik, musik, dll) kedalam game. Prosedur ini hanya akan dipanggil saat Game dijalankan pertama kali.

 

UnloadContent

   1: /// <summary>
   2: /// UnloadContent will be called once per game and is the place to unload
   3: /// all content.
   4: /// </summary>
   5: protected override void UnloadContent()
   6: {
   7:     // TODO: Unload any non ContentManager content here
   8: }

Ada masukan, ada keluaran. UnloadContent adalah kebalikan LoadContent, dimana kita memasukkan kode untuk men-unload content yang seblumnya sudah kita masukkan. Disini tempat kita “bersih-bersih” sebelum, game selesai.

 

Update

   1: /// <summary>
   2: /// Allows the game to run logic such as updating the world,
   3: /// checking for collisions, gathering input, and playing audio.
   4: /// </summary>
   5: /// <param name="gameTime">Provides a snapshot of timing values.</param>
   6: protected override void Update(GameTime gameTime)
   7: {
   8:     // Allows the game to exit
   9:     if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
  10:         this.Exit();
  11:  
  12:     // TODO: Add your update logic here
  13:  
  14:     base.Update(gameTime);
  15: }

Hampir semua game memiliki loop utama dimana setiap frame-nya informasi dan grafik game diupdate. Untuk XNA, loop tersebut adalah prosedur Update. Update akan dijalankan pada setiap frame game.

 

Draw

   1: /// <summary>
   2: /// This is called when the game should draw itself.
   3: /// </summary>
   4: /// <param name="gameTime">Provides a snapshot of timing values.</param>
   5: protected override void Draw(GameTime gameTime)
   6: {
   7:     GraphicsDevice.Clear(Color.CornflowerBlue);
   8:  
   9:     // TODO: Add your drawing code here
  10:     base.Draw(gameTime);
  11: }

Prosedur ini tempat bekerja saat kita hendak menggambar sesuatu ke layar. Prosedur ini juga akan dijalankan untuk setiap frame dalam game. Perhatikan layar biru bila kita me-run game, di snippet diatas, kode yang melaksanakannya ada di baris ke 7.

 

Sori yah, post ini kebanyakan isinya cuman teori. Tenang, ini baru prelude.

Untuk post selanjutnya, akan saya jelaskan bagaimana memasukkan gambar dan membuatnya bergerak. stay tuned!

Share this post: | | | |
Proyek SilverLight Pertamaku: Game Memory Sederhana [Part 1]

Baru kemarin, saya blank total Hmm masalah SilverLight. Pengen belajar, dan untuk saya cara tercepat untuk mengerti adalah dengan mencoba.

Setelah membaca-baca beberapa tutorial dasar SilverLight, saya putuskan mau mencoba membuat sebuah game memory sederhana. Temanya salah satu karakter manga favorit saya, Crayon ShinChan..Smile

Star Ronde 1 : Layout Grafik dulu..

Layout dan grafik di silverlight menggunakan bahasa xaml, bahasa markup berbasis xml yang berfokus pada user interface. Cukup mudah dimengerti, saya cukup tahu tentang HTML dan XML, jadi konsep tidak ini begitu baru buat saya.

Dengan mengacu pada tutorial ini dan mengandalkan VS 2008, saya berniat untuk mengambil jalan purist, hanya mengandalkan kode. Go!

 

~~~~Confused

 

Membuat komponen tidak begitu sulit, tapi usaha menempatkan posisi dan pernak-pernik-nya bikin saya frustasi Tongue Tied memakai grid masih terasa kaku, tapi kalau memakai margin lebih repot lagi. Yah, saya memang tidak begitu berpengalaman membuat grafis dari code saja sih.. kalau membuat html saja selalu pakai Dreamweaver. Setelah 2 jam berkutat berusaha meluruskan component dan mengatur posisinya agar pas, saya memilih mencoba memakai MS Expression Blend Embarrassed

Memakai Blend ternyata jauh lebih mudahSmile. Sayang sekali WYSIWYG editor ini tidak menyatu dengan VS studio.

Oke, ini layout yang telah saya buat:

 Walau art sense saya kampungan, kurasa ini tidak terlalu buruk... Coding Time.

Star Ronde 2 : C#, I Choose You!

Programming dalam Silverlight dapat menggunakan bahasa pemrograman .NET apa saja, tapi setelah menimbang-nimbang, saya memilih menggunakan C#.

Alasan?

1. Saya tidak pernah memakainya dan pengen belajar C#

2. Karena kebanyakan tutorial dan orang lain pake C#, biar lebih konek.

Saya belum tahu caranya menampilkan code diblog ini biar enak dibaca.. tapi seluruh source codenya bisa didownload disini : sincan.zip

Pengalaman ngoding-nya:

  1. Pertama-tama saya mau membuat collection untuk gambar-gambar yang akan diload dulu. Shock! di C# tidak disediakan kelas generik Vector!  AaghSuper Angry, padahal Vector selalu menjadi kelas collection andalan saya di Java dan C++.. Oh well, untungnya kelas list di C# tidak begitu jauh beda.
  2. Lalu, saya mencari dulu algoritma yang cocok untuk "mengocok" gambarnya. Setelah konsultasi pada Syekh Google Al-Wikipedia, ketemu algoritma Fisher-yates Shuffle. Contoh di Wikipedia dalam Java, tapi mengubahnya ke C# hanya beberapa menit. Saya rasa coding di C# tidak jauh beda dengan Java. Smile
  3. Membuat fungsi untuk loading image,menangani klik dari mouse, dll. Tidak bertemu masalah disini..
  4. Tapi saat di test, enggak jalan. Ugh. Setelah ditelusuri, masalahnya ternyata pada saat membandingkan 2 gambar. Di library C# ternyata tidak mempunyai fungsi untuk membandingkan 2 gambar, sama atau tidak. 1 jam saya stuck disini. Saya sudah coba fungsi standar equals(), getHashCode(), getValue(), Source.. semuanya gagal. Sebetulnya masalah ini dapat dihindari hanya dengan membuat kelas turunan baru dari Image dengan informasi tambahan, tapi berarti banyak yang perlu diedit ulang.
  5. Akhirnya saya membuat fungsi sendiri untuk membandingkan 2 Image berdasarkan hubungannya dengan List dari gambar. Alternatif lain yang lebih universal adalah mengecek per pixel, tapi kayaknya malah bakal ngelambatin untuk program ini.

Game Selesai!  ... atau paling tidak, versi betanya, sih.. sampai disini dulu part 1. Smile

di Part 2, Insya Allah game ini akan saya tambahkan animasi, suara, timer, scoring system, tampilan "You Win!" yang bagusan, dll.  Cool

 Gambar Crayon ShinChan saya dapat dari sini: http://abnormalchild.deviantart.com/art/kureyon-shin-chan-122920030

Download Source Code-nya : sincan.zip

Diharapkan saran dan kritiknya..

Share this post: | | | |