katulsomin - MIC ITB : beginner

Tutorial XNA : Bermain Dengan Musik dan Video

katulsomin — Tue, 28 Jul 2009 20:02:00 GMT

Jaman sekarang, game bagus apa yang tidakpunya musik/video? Hampir enggak ada! Kalau kau ingin membuat game yang mengesankan, harus ada multimedianya. Itu harga mati. Jadi, tentu saja XNA akan membantu kita di aspek ini..

Siap ? 1..2..3.. Let’s rock!

Audio

Pertama-tama kita tambahkan file lagu yang ingin dipakai ke dalam Project solution. Klik kanan Content->Add->Existing item

Akan kebuka window seperti ini:

Kita tinggal ambil file audio yang kita mau saja. Format yang didukung untuk XNA 3.1 adalah .xap , .wav, .wma, dan .mp3 tercinta. Saya ambil sebuah lagu mp3 dan memberi nama asset name ’musikku’. Lagu ini siap digunakan! ayo.

Seperti biasa, pertama kita butuh kelas kontainer untuk lagu. Tambahkan kode berikut di kelas Game1.cs:

     Song lagu;

Terus, kita load di dalam fungsi LoadContent:

    lagu = this.Content.Load<Song>("musik");

Oops, jangan lupa bersih-bersih di UnloadContent

    lagu.Dispose();

Sip. Sekarang lagu tinggal dimainkan. Tulis kode ini di fungsi Update:

    if (MediaPlayer.State != MediaState.Playing)

    {

        MediaPlayer.Play(lagu);

    }

kode-kode ini sangat simpel hingga saya bingung apa yang perlu dijelaskan. XNA memang membuat serba mudah.. (mengingat pahit saat harus pusing mengurus bit stream untuk musik di java.. sial!). Dan of course, ini hanya fitur basic.. kelas Song, MediaPlayer, MediaLibrary, dll.. memberikan berbagai fungsionalitas seperti Windows media player! Silahkan disoba-coba sendiri.

Selain cara ‘langsung’ diatas, ada juga cara yang lebih rapi, dengan XACT. Tapi itu untuk post di lain hari (sori, awalnya mau aku bahas, tapi ternyata cukup dalam.. takutnya malah jadi ngebingungin).

Video

Menambahkan video ke XNA juga tidak sulit. Secara default, XNA mendukung format .wmv

Pertama, masukkan file wmv yang hendak dipakai ke dalam project solution. Caranya persis sama dengan file audio. Untuk contoh ini asset name-nya “videoclip”

Lalu, Tambahkan kode ini di kelas Game1.cs:

    Video video;

    VideoPlayer videoplayer = new VideoPlayer();

kode untuk LoadContent..

    video = Content.Load<Video>("videoclip");

    videoplayer.Play(video);

Hanya dengan begini saja, jika dicoba dijalankan suara dari video clip sudah akan keluar. Untuk mendapat gambar video juga, teksture dari video perlu kita gambar ke layar.

Tambahkan ini ke fungsi Draw:

    Texture2D p = videoplayer.GetTexture();

    spriteBatch.Begin();

    gambarBola.Draw(spriteBatch);

    spriteBatch.Draw(p, new Vector2(0, 0), Color.White);

    spriteBatch.End();

Selesai! Sebagai tambahan, gambar video ini juga dapat kita manipulasi seperti gambar biasa. Silahkan coba sendiri!

…

Wah, sudah selesai post ini. Awalnya saya kira butuh halaman yang lebih banyak, tapi sistem content pipeline di XNA membuat proses memasukkan multimedia menjadi mudah. Jadi sori yah kalo post ini singkat bener.

Di post selanjutnya, saya mau ngebahas 3D di XNA.

Share this post: | | | |

Tutorial XNA: Menerima input Keyboard, Mouse, Gamepad dan Voice Recognition

katulsomin — Wed, 08 Jul 2009 19:34:00 GMT

Maaf updatenya lama sekali.. biasalah liburan. Di post kecil ini akan saya jelaskan caranya menerima input user. Saya akan menggunakan kelas dan project yang sebelumnya, biar gampang.

Input Keyboard

Keyboard.. paling basic untuk game di PC, dan cara mengelolanya sangat mudah di XNA. Secara default, kita bisa langsung mengakses keadaan keyboard dengan menggunakan method getState dalam objek keyboard. Biar lebih mudah dimengerti, coba tambahkan kode berikut pada Game1.cs, fungsi Update:

        1: KeyboardState tombolditekan = Keyboard.GetState();

       2: if (tombolditekan.IsKeyDown(Keys.Up))

       3:     gambarBola.posisi += new Vector2(0, -5);

       4: if (tombolditekan.IsKeyDown(Keys.Down))

       5:     gambarBola.posisi += new Vector2(0, 5);

       6: if (tombolditekan.IsKeyDown(Keys.Left))

       7:     gambarBola.posisi += new Vector2(-5, 0);

       8: if (tombolditekan.IsKeyDown(Keys.Right))

       9:     gambarBola.posisi += new Vector2(5, 0);

Kode diatas sangat simpel. Kita mengambil state dari keyboard dan membandingkannya dengan state tertentu. Dalam kasus ini, kode diatas akan membuat gambar bola bergerak dengan tombol arah di keyboard. Gampang!

Input Mouse

Satu lagi yang umum. Caranya juga tidak jauh beda dengan keyboard. Bedanya disini kita mengakses state dari objek Mouse. Contoh kode:

       1: MouseState tikus = Mouse.GetState();

       2: gambarBola.posisi = new Vector2(tikus.X, tikus.Y);

Jika anda menebak kode diatas akan membuat gambarBola mengikuti posisi mouse.. yah anda benar. kode diatas sangat jelas sehingga rasanya tidak perlu dijelaskan lagi. XNA serba menyediakan, kita tinggal mencoba dan pasti bisa membuat game.

Input GamePad

Sebetulnya salah satu tujuan XNA adalah Microsoft ingin membangun komunitas game amatir untuk XBOX, jadi jelas saja dukungan XNA untuk XBOX sangat baik. objek GamePad tersedia untuk menerima input dari XBOX. Hanya saja, saya tidak punya XBOX.. jadi tidak bisa mengetes gamePad deh. Tapi, secara teori tidak jauh beda dengan mouse atau keyboard, kok.

Maka jika saya modifikasi kode untuk keyboard menjadi gamepad, hasilnya begini:

       1: GamePadState tombolditekan = GamePad.GetState(PlayerIndex.One);

       2: if (tombolditekan.IsButtonDown(Buttons.DPadUp))

       3:     gambarBola.posisi += new Vector2(0, -5);

       4: if (tombolditekan.IsButtonDown(Buttons.DPadDown))

       5:     gambarBola.posisi += new Vector2(0, 5);

       6: if (tombolditekan.IsButtonDown(Buttons.DPadLeft))

       7:     gambarBola.posisi += new Vector2(-5, 0);

       8: if (tombolditekan.IsButtonDown(Buttons.DPadRight))

       9:     gambarBola.posisi += new Vector2(5, 0);

Tidak jauh beda, kan? Hanya ganti beberapa method saja. Walau saya ingatkan, kode yang ini tidak bisa saya tes. Tapi.. secara teori solid. Saya hampir yakin 99% kode diatas jalan.

Input Suara – Voice recognition

Nah ini baru menarik! tidak semua game menggunakan ini, karena masalah dukungan user(tidak semua orang punya microphone) dan karena memang tingkat kesulitannya lebih dibandingkan penerima input klasik diatas. Tapi hebatnya framework .NET 3.0 (dan maka otomatis XNA juga) mendukung penggunaannya, hingga ini bukan hal yang sulit! Cool, huh? Tapi yang didukung dengan baik sekarang hanya bahasa inggris, jadi kalau mau bikin game lokal masih nanti.. oh ya, dan ini hanya untuk game PC, XBOX masih belum didukung. Tapi still, it’s freaking cool.

Pertama- tama, kita siapkan dulu voice recognition enginenya. masukkan kode berikut ke dalam game1.cs Kode ini akan membuat game kita meload engine yang sudah tersedia di framework.

       1: using System.Speech;

       2: using System.Speech.Recognition;

lalu kita buat objek SpeechRecognitionEngine. Tambahkan ini ke kelas game1.cs

       1: SpeechRecognitionEngine suara;

Sekarang, kita siapkan engine tersebut! tambahkan kode ini ke fungsi Initialize:

       1: suara = new SpeechRecognitionEngine();

       2:             suara.SetInputToDefaultAudioDevice();

       3:  

       4:             GrammarBuilder grammarBuilder = new GrammarBuilder();

       5:             grammarBuilder.Append(new Choices(      //membuat grammar baru yang dikenali program

       6:               "left",

       7:               "right",

       8:               "up",

       9:               "down"));

      10:             Grammar customGrammar = new Grammar(grammarBuilder);

      11:  

      12:             suara.UnloadAllGrammars(); // kosongkan grammar default

      13:             suara.LoadGrammar(customGrammar); //masukkan grammar yang baru

      14:  

      15:             suara.SpeechRecognized += new EventHandler<SpeechRecognizedEventArgs>(sre_SpeechRecognized);// event baru

      16:  

      17:             suara.RecognizeAsync(RecognizeMode.Multiple); // membuat program bisa menerima beberapa input sekaligus

Satu langkah lagi, kita butuh prosedur untuk meng-handle masukan suara:

       1: void suara_SpeechRecognized(object sender, SpeechRecognizedEventArgs e)

       2: {

       3:  

       4:   switch (e.Result.Text)

       5:   {

       6:     case "up":

       7:          gambarBola.posisi += new Vector2(0, -5);

       8:         break;

       9:     case "down":

      10:          gambarBola.posisi += new Vector2(0, 5);

      11:         break;

      12:      case "left":

      13:            gambarBola.posisi += new Vector2(-5, 0);

      14:            break;

      15:     case "right":

      16:              gambarBola.posisi += new Vector2(5, 0);

      17:             break;

      18:   }

      19: }

Dengan prosedur kumpulan kode diatas, apa bila ada perinatah suara yang dikenali, game akan menangkapnya dan mengurusnya. Jika semua berjalan lancar, bola kita akan bisa digerakkan hanya dengan perintah suara! XNA sure is cool huh?

Segini dulu post kali ini.. insya Allah post berikutnya membahas XACT dan Sound di XNA.

Share this post: | | | |

Tutorial XNA : Memasukkan Gambar dan Menggerakkannya

katulsomin — Mon, 29 Jun 2009 16:10:00 GMT

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:

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

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

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?

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:

Enggak susah, kan?

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

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

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!

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.

Share this post: | | | |

Tutorial XNA : Prelude

katulsomin — Sun, 28 Jun 2009 18:25:00 GMT

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 facebook. 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.

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:

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!

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]

katulsomin — Thu, 18 Jun 2009 15:54:00 GMT

Baru kemarin, saya blank total 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..

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!

~~~~

Membuat komponen tidak begitu sulit, tapi usaha menempatkan posisi dan pernak-pernik-nya bikin saya frustasi 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

Memakai Blend ternyata jauh lebih mudah. 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.

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:

Pertama-tama saya mau membuat collection untuk gambar-gambar yang akan diload dulu. Shock! di C# tidak disediakan kelas generik Vector! Aagh, padahal Vector selalu menjadi kelas collection andalan saya di Java dan C++.. Oh well, untungnya kelas list di C# tidak begitu jauh beda.
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.
Membuat fungsi untuk loading image,menangani klik dari mouse, dll. Tidak bertemu masalah disini..
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.
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.

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

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: | | | |