Mengenal GDI+ untuk Menggambar pada Windows Form part 3

Mengenal GDI+ untuk Menggambar pada Windows Form part 3

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…

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 :

Tarma

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

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 dalam Folder

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

    Ubah Property PictureBox

    pilih gambar yang anda inginkan

    Pilih Gambar yang Diinginkan

    Tampilan dari windows form

    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:
    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 :
    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 :
    publicpartialclassForm1 : Form
    
        {
    
    public Form1()
    
            {
    
                InitializeComponent();
    
            }
    
        }
    
    publicclassKarakter
    
    {
    
    }
  10. Berikutnya masukkan ke dalam class Karakter berbagai field yang diperlukan sebagai berikut :
    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 :
    ///<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 :
    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() :

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

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

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

http://www.c-sharpcorner.com/uploadfile/mahesh/gdi_plus12092005070041am/gdi_plus.aspx

http://www.codeproject.com/Articles/1355/Professional-C-Graphics-with-GDI

http://msdn.microsoft.com/en-us/library/8z5dw491.aspx

Tag: ,

Write Comment

Your email will not be published. The marked label is required.