Mengenal GDI+ untuk Menggambar pada Windows Form part 3

Pemrograman, Pemrograman Desktop
July 24, 2012 Marselinus Denny

Jika sebelumnya kita telah mengenal cara membuat animasi untuk bola yang bergerak memantul-mantul, maka kali ini kita akan menggunakan GDI+ untuk membuat animasi dari sprites.

Berikut adalah contoh sprites yang akan kita pergunakan dalam artikel kali ini. Download dan simpan gambar Tarma Metal Slug yang diambil dari GSArchive berikut :

Download Resource File

Seperti yang terlihat dari gambar di atas, sprite adalah serangkaian gambar dengan ukuran tertentu yang akan dimainkan frame demi frame hingga memunculkan ilusi gerakan. Lebar tiap frame dalam gambar tersebut adalah 48px dengan 10 frame dalam gerakannya.

Object yang akan dipakai dalam artikel ini adalah karakter Tarma dari MetalSlug. Tarma dalam program yang akan Anda buat hanya akan bergerak mondar-mandir dari kiri ke kanan layar. Tentunya dia akan memiliki animasi sehingga benar-benar tampak hidup.

Animasi Tarma

Untuk dapat mewujudkan itu, yang perlu kita lakukan adalah memanipulasi parameter sourceRectangle dan destinationRectangle seperti yang dijelaskan pada artikel lalu. SourceRectangle akan mengambil gambar atau frame dari sprite yang kita punya dan posisi dari SourceRectangle akan terus bergeser setiap interval waktu tertentu yang tentunya cukup kecil sehingga sourceRectangle akan bergeser cukup cepat. Akibatnya gambar yang tampil pada destinationRectangle tampak bergerak.

Membuat Animasi dari Sprite

1. Buat project windows form baru (C#)
2. Tekan F5 sehingga akan muncul dialog untuk menyimpan project Anda dan folder Debug di dalamnya. Save gambar sprite Tarma di atas (dengan nama tarma.png pada kasus ini) dan simpan ke dalam folder Debug/Bin pada folder project yang Anda simpan.
   

   SImpan Project dalam Folder Debug
3. Masukkan sebuah pictureBox dan timer, caranya sama dengan artikel sebelumnya, penulis sangat menyarankan jika Anda tidak mengerti bagian ini untuk kembali ke artikel sebelumnya.
4. Sekarang buat pictureBox yang kita masukkan mengikuti besar layar, untuk itu ubah properties Dock dari pictureBox menjadi fill.
   

   Ubah Properties Dock menjadi Fill
5. Untuk menambah warna pada aplikasi, Anda dapat menggunakan gambar background seperti ini (kagekia.devianart.com) download dan simpan juga gambar ini:
   
6. Ubah beberapa property dari pictureBox untuk dapat menampilkan gambar di atas, pertama cari property BackgroundImage dan klik tombol kecil dengan lambang titik (…) . Akan terbuka sebuah window Select Resource, pilih import pada bagian Local Resource dan carilah file gambar yang Anda download di atas. Berikutnya, ubah juga property BackgroundImageLayout menjadi Stretch.
   
   

   Ubah Property PictureBox
   

   Pilih Gambar yang Diinginkan
   

   Tampilan dari Windows Form
7. Masukklah dalam file form1.cs dan seperti biasanya, pada konstruktor class Form1 berikan intansiasi dari Graphics class dan enable Timer1:
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   publicpartialclassForm1 : Form       {   Graphics g;   Karakter karakter;   public Form1()           {               InitializeComponent();               pictureBox1.Image = newBitmap(pictureBox1.Width,   pictureBox1.Height);               g = Graphics.FromImage(pictureBox1.Image);               timer1.Enabled = true;           }       }

8. Klik dua kali timer1 object di bagian bawah pada designer dan ubah kode yang di generateoleh C# menjadi seperti berikut :
   ?

   1 2 3 4 5 6 7 8 9

   privatevoid timer1_Tick(object sender, EventArgs e)           {               g.Clear(Color.Transparent);               pictureBox1.Invalidate();           }

9. Setelah selesai mempersiapkan segala sesuatunya, sekarang, kita akan membuat sebuah class untuk mengatur animasi yang hendak ditampilkan. Class ini bernama Karakter dan sama seperti kelas Bola pada artikel sebelumnya memiliki method untuk melakukan updateposisi dan gambar. Selain itu juga menyimpan berbagai variabel yang diperlukan dalam penggambaran. Kali ini pembuatan kelas dilakukan dalam file Form1.cs. Untuk itu tepat di bawah penutup kelas Form1 tambahkan baris sebagai berikut :
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   publicpartialclassForm1 : Form       {   public Form1()           {               InitializeComponent();           }       }   publicclassKarakter   {   }

10. Berikutnya masukkan ke dalam class Karakter berbagai field yang diperlukan sebagai berikut :
    ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

    publicclassKarakter       {   // menyimpan gambar spriteCharacter   privateImage spriteCharacter;   // menyimpan lokasi dan besar dari gambar, serta area yang dapat           // dilalui karakter           // untuk penjelasan destinationRect dan SourceRect dpat dilihat pada           // artikel sebelumnya   privateRectangle destinationRect, sourceRect, displayArea;   // spriteNum adalah banyaknya gambar dalam satu deret sprite   // spriteWidth menentukan lebar masing-masing gambar   privateint spriteNum, spriteWidth;   // interval menentukan interval waktu antar proses penggambaran           // dipanggil   // timeElapsed menyimpan banyaknya waktu yang berlalu semenjak           // pemanggilan proses   // penggambaran yang terkahir kali   privateint interval, timeElapsed;   // speed menentukan kecepatan karakter dalam berjalan   privateint speed = 5;       }

11. Dan berikan konstruktor ke dalam class Karakter :
    ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

    ///<summary>   /// Konstruktor kelas Karakter   ///</summary>   ///<param name="sprite"> gambar sprite yang dipergunakan </param>   ///<param name="destination"> kotak tujuan di mana gambar akan di gambar</param>   ///<param name="area"> layar di mana karakter diperkenankan digambar</param>   ///<param name="spriteWidth"> lebar tiap frame/gambar dalam sprite</param>   ///<param name="spriteNum"> jumlah gambar dalam sebuah sprite</param>   ///<param name="interval"> interval waktu penggambaran</param>   public Karakter(Image sprite, Rectangle destination,Rectangle area,   int spriteWidth, int spriteNum, int interval)           {   this.spriteCharacter = sprite;   this.displayArea = area;   this.destinationRect = destination;   this.spriteNum = spriteNum;   this.spriteWidth = spriteWidth;   // sourceRect adalah kotak yang membatasi area di mana   // dari file gambar asli yang diambil untuk digambar   // memungkinkan tidak semua gambar diambil   this.sourceRect = newRectangle(0, 0, spriteWidth, sprite.Height);   this.interval = interval;           }

12. Sama seperti bola pada artikel yang lalu tambahkan juga method Update() yang akan dipanggil setiap kali timer1 ‘berdetik’. Tambahkan method Update()di bawah konstruktor di dalam class :
    ?

    1	publicvoid Update(Graphics g){ }

    a. Hal pertama yang harus dilakukan adalah menghitung waktu karena kita tak mau object bergerak berdasarkan kecepatan timer ( kecepatan timer1 telah di set 1 milidetik, jika Anda tidak melakukan ini, object akan berjalan luar biasa cepat ). Untuk ini lah kita menggunakan variabel TimeInterval. Tambahkan baris berikut ke dalam method Update() :
    
    ?

    1 2 3 4 5 6 7 8 9 10 11

    // setiap kali Update dipanggil   // waktu bertambah   timeElapsed++;   // jika waktu telah melebihi interval yang ditentukan atau   // sama   if (timeElapsed >= interval){ }

    b. Setiap kali timeElapsed melebihi interval yang ditentukan maka ubahlah bagian update() sehingga setiap kali pemanggilan dapat melakukan:
    – Posisi gambar harus digeser pada layar sesuai dengan kecepatan.
    – timeElapsed harus dikembalikan menjadi nol.
    – Gambar karakter kita harus diganti dengan frame selanjutnya pada sprite.
    
    ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

    // jika waktu telah melebihi interval yang ditentukan atau sama   if (timeElapsed >= interval)               {   // gambar di layar di majukan tergantung speed                   destinationRect.X += speed;   // frame di ganti                   sourceRect.X += sourceRect.Width;                   sourceRect.X %= spriteCharacter.Width;   // kembalikan timeElapsed menjadi 0                   timeElapsed = 0;               }

    c.  Kemudian Anda harus menambahkan rutin untuk mengubah gambar dan arah gerak dari gambar karakter saat ia menyentuh bagian kiri atau kanan layar. Maka dari itu tambahkan kode berikut di dalam method Update() tepat di bawah if di atas :
    
    ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

    // jika karakter mencapai ujung dari layar   if (destinationRect.X < 0 || destinationRect.X >   displayArea.Width - spriteWidth)               {   // balik kecepatannya                   speed = -speed;   // flip gambarnya ( dari kanan menjadi kiri )   spriteCharacter.RotateFlip(RotateFlipType.Rotate180FlipY);               }

13. Untuk bagian terakhir pada Update() tambahkan sebaris kode untuk penggambaran pada pada method Update()  di bawah if pada point c di atas :
    ?

    1 2 3 4 5

    // gambarkan karakter pada layar, lihat artikel sebelumnya tentang   // operasi penggambaran Image               g.DrawImage(spriteCharacter, destinationRect, sourceRect, GraphicsUnit.Pixel);

14. Sekarang yang perlu Anda lakukan adalah mempergunakan class tersebut. Kembali pada bagian class Form1. Tambahkan beberapa baris sebagai berikut :
    ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

    publicpartialclassForm1 : Form       {   Image sprite = Image.FromFile("tarma.png");   Graphics g;   Karakter karakter;   int lebarPerSprite = 48;   int banyakSprite = 10;   int interval = 5;   public Form1()           {               InitializeComponent();   Rectangle posisiKarakter = newRectangle(0,360,80,90);   Rectangle area = newRectangle(0, 0, this.Width, this.Height);               karakter = newKarakter(sprite, posisiKarakter, area, lebarPerSprite, banyakSprite, interval);               pictureBox1.Image = newBitmap(pictureBox1.Width, pictureBox1.Height);               g = Graphics.FromImage(pictureBox1.Image);               timer1.Enabled = true;           }   privatevoid timer1_Tick(object sender, EventArgs e)           {               g.Clear(Color.Transparent);               karakter.Update(g);               pictureBox1.Invalidate();           }   }

15. Kemudian tekan F5 dan jika semua berjalan semestinya, Anda akan mendapati tampilan karakter berjalan layaknya manusia sungguhan pada layar. Anda pun dapat mencobanya pada source code yang disertakan.

Kesimpulan

Ini adalah bagian terakhir dari rangkaian artikel yang membahas tentang GDI+ di C# sebelumnya. Semoga dapat membantu Anda, berikut juga ada beberapa daftar referensi yang dapat Anda pergunakan. Happy coding :)