Mengenal GDI+ untuk Menggambar pada Windows Form (Part 2)

Mengenal GDI+ untuk Menggambar pada Windows Form (Part 2)

GDI+ sebagai framework bagi penggambaran grafis telah umum dipergunakan pada komputer Windows. Setelah pada artikel sebelumnya Bisa Komputer telah membahas tentang dasar GDI+ maka kali…

GDI+ sebagai framework bagi penggambaran grafis telah umum dipergunakan pada komputer Windows. Setelah pada artikel sebelumnya Bisa Komputer telah membahas tentang dasar GDI+ maka kali ini kita akan membahas tentang animasi dalam GDI+ menggunakan dasar-dasar GDI+ pada artikel sebelumnya.

Animasi yang akan dibuat ada dua macam, pertama animasi yang akan memperlihatkan sebuah bola yang akan memantul-mantul pada area Windows forms dan animasi yang akan menggunakan sprites untuk memperlihatkan seorang tokoh yang benar benar tampak hidup seperti dalam game pada artikel selanjutnya.  Semua code di sini dibuat di Microsoft Visual Studio Express 2008.

Animasi Bola

Bola yang akan dibuat merupakan lingkaran yang digambar dengan method DrawEllipse milik Graphics class yang sudah kita bahas pada artikel sebelumnya. Untuk membuatnya dapat seolah-olah bergerak, maka posisi bola tersebut harus diubah sedikit demi sedikit dalam interval yang singkat agar terbentuk bayangan seolah-olah gambar bergerak (yups seperti teknik animasi Walt Disney). Karenanya komputer pada setiap interval waktu tertentu harus menghitung lokasi baru dari gambar bola dengan mempergunakan rumus jarak = kecepatan x waktu berjalan. Sementara kecepatan sendiri dalam bidang 2D terbagi menjadi 2 yaitu kecepatan X dan kecepatan Y seperti ilustrasi di bawah :

Rumus Jarak

Untuk deteksi tabrakan sebenarnya tidak ada yang terlalu istimewa, hanya menggunakan aturan sudut datang sama dengan sudut pantul atau pergi seperti ilustrasi di bawah :

Aturan Sudut

Membuat Projek Animasi

Sekarang, saatnya kita mulai membuat project animasi bola ini :

  1. Pertama-tama buat sebuah Project WindowsForm applicationbaru dan beri nama ‘ballAnimation’.

    Project Windows Form Baru

  2. Drag sebuah pictureBox seperti pada gambar.
  3. Drag sebuah timer ke dalam form, timer tidak akan terlihat pada form seperti pictureBox. Tetapi akan muncul di bagian lain di bawah Windows forms.

    Tampilan Timer pada Form

  4. Timer nantinya akan dipakai untuk menggerakan object yang digambar sesuai dengan interval waktu tertentu.
  5. Set atribut properti pada object-object yang baru Anda masukkan dengan cara klik pada object bersangkutan dan klik kanan kemudian pilih Properties, menjadi seperti berikut  :
    – Form (klik pada windows form yang ada pada layar dan pilih properties)
    Double Buffered : true
    – PictureBox1
    Border Style : FixedSingle
    – Timer1
    Interval: 1
  6. Seperti yang telah dijelaskan pada artikel sebelumnya yaitu mengenal GDI+ part1, siapkan instance dari Graphics class dan isi dengan bitmap kosong dari PictureBox1.Image. Ubah bagian source code dengan tekan F7 menjadi seperti kode di bawah :
    using System;
    
    using System.Collections.Generic;
    
    using System.ComponentModel;
    
    using System.Data;
    
    using System.Drawing;
    
    using System.Linq;
    
    using System.Text;
    
    using System.Windows.Forms;
    
    namespace ballAnimation
    
    {
    
    publicpartialclassForm1 : Form
    
        {
    
    Graphics g;
    
    Rectangle layar;
    
    public Form1()
    
            {
    
                InitializeComponent();
    
                pictureBox1.Image = newBitmap(this.Width, this.Height);
    
                g = Graphics.FromImage(pictureBox1.Image);
    
                layar = newRectangle(this.pictureBox1.Location, this.pictureBox1.Size);
    
            }
    
        }
    
    }
  7. Sekarang tentang bola yang akan ditampilkan. Bola akan berupa lingkaran yang akan terus memantul dalam sebuah kotak pictureBox jika ia menabrak batas layar yang berbentuk persegi.
  8. Bola yang akan ditampilkan akan dijelaskan pada sebuah class bernama Bola. Kelas ini memiliki atribut berupa lokasi bola, besar bola, warna, sudut, kecepatan dan besar layar tempat ia digambarkan. Beserta beberapa method:
    Update : dipergunakan untuk melakukan pengecekan tabrakan dan menghitung langkah kemajuan bola. Method ini dipanggil setiap interval timer (1 ms)
    Draw : untuk menggambar bola pada layar berdasarkan hasil perhitungan dari method Update()
    CekTabrakan : sebagai method yang akan dipanggil oleh Update untuk mengecek terjadinya tabarakan.

Membuat Class Bola

Sekarang untuk membuat class Bola : Terdapat 2 cara untuk membuat class dalam C#, menulisnya langsung dalam file Form1.cs di bawah class Form1 atau mempergunakan file terpisah. Dalam contoh kali ini penulis akan mempergunakan file terpisah yang dirasa akan memberikan file source yang tidak terlalu rumit.

  1. Pertama, pilih menu Project > Add Class.
     
  2. Kemudian pilih Class dan beri nama Bola.

    Memilih Class

     

  3. Anda akan mendapati file baru terbuka bernama Bola.cs. Ubah isi dari file tersebut menjadi seperti kode di bawah :

    using System;
    
    using System.Collections.Generic;
    
    using System.Linq;
    
    using System.Text;
    
    // masukkan referensi ke System,Drawing
    
    // sehingga dapat akses ke Rectangle, PointF, dsb
    
    using System.Drawing;
    
    namespace ballAnimation
    
    {
    
    // jadikan public
    
    publicclassBola
    
        {
    
    // untuk menyimpan posisiBola dalam float
    
    PointF posisiBola;
    
    // menyimpan besar bola dalam float 20x20
    
    SizeF besarBola = newSizeF(20.0f, 20.0f);
    
    // informasi sudut dan kecepatan bola
    
    double sudutBola;
    
    double kecepatanBola = 5.0;
    
    // menyimpan besarnya layar
    
    Rectangle kotakLayar;
    
    // warna bola
    
    Pen pena;
    
    ///<summary>
    
    /// Konstruktor kelas Bola
    
    ///</summary>
    
    ///<param name="x">posisi awal - x</param>
    
    ///<param name="y">posisi awal - y</param>
    
    ///<param name="sudutAwal">sudut awal</param>
    
    ///<param name="layar">besar layar - Rectangle</param>
    
    public Bola(float x, float y,
    
    double sudutAwal, Rectangle layar)
    
            {
    
    this.posisiBola = newPointF(x, y);
    
    this.kotakLayar = layar;
    
    this.sudutBola = sudutAwal;
    
    // warna bola merah dan tebal 3 satuan
    
    this.pena = newPen(Color.Red, 3.0f);
    
            }
    
    ///<summary>
    
    /// Untuk menjalankan bola
    
    ///</summary>
    
    ///<param name="g">graphics class instance</param>
    
    publicvoid Update(Graphics g)
    
            {
    
    // gambarkan
    
                Draw(g);
    
    // cek tabrakan
    
                cekTabrakan();
    
    // ubah posisiBola berdasarkan rumus
    
                posisiBola.X += (float)(kecepatanBola * Math.Sin(sudutBola));
    
                posisiBola.Y -= (float)(kecepatanBola * Math.Cos(sudutBola));
    
            }
    
    ///<summary>
    
    /// prosedur penggambaran
    
    ///</summary>
    
    ///<param name="g">graphics class instance</param>
    
    privatevoid Draw(Graphics g)
    
            {
    
                // gambarkan bola dengan warna pena
    
    // posisi di posisiBola.X dan Y
    
    // dengan besar Width x Height
    
                g.DrawEllipse(pena, posisiBola.X, posisiBola.Y,
    
    besarBola.Width, besarBola.Height);
    
            }
    
    ///<summary>
    
    /// fungsi pengecekan tabrakan dengan layar
    
    ///</summary>
    
    privatevoid cekTabrakan()
    
            {
    
    // jika bola menembus batas kiri dan kanan layar maka sudut
    
                // bola dibuat = -sudut bola
    
    if (posisiBola.X <= 0 || posisiBola.X + besarBola.Width >=
    
    kotakLayar.Width)
    
                {
    
                    sudutBola = -sudutBola;
    
                }
    
    // jika bola menembus batas atas dan bawah layar maka sudut
    
                // bola adalah 180 derajat
    
    // dalam radian (0.5 * PI) dikurangi sudut bola
    
    if (posisiBola.Y <= 0 || posisiBola.Y + besarBola.Height >=
    
    kotakLayar.Height)
    
                {
    
                    sudutBola = Math.PI - sudutBola;
    
                }
    
            }
    
        }
    
    }

     

Menggunakan di Class Form 1

Kelas Bola telah selesai, sekarang kita akan menggunakannya di class Form1.

  1. Pertama kita akan membuat instance dari class Bola, tambahkan di dalam class Form1 :
    Bola bola;
  2. Tambahkan juga sebuah generator bilangan acak yang nanti akan dipergunakan untuk memberi nilai awal sudut bola yang nantinya akan menentukan arah bola. Tambahkan baris berikut pada class Form1 :

    Random generator = newRandom(); 
  3. Kemudian di dalam kontruktor Form1 ( public Form1()) tambahkan syntax untuk instansiasi bola :

    bola = newBola(50, 50, generator.NextDouble() * 2 * Math.PI, layar);

    parameter pertama dan kedua seperti penjelasan pada konstruktor class Bola, adalah x dan y posisi awal bola muncul. Parameter kedua adalah sudut yang harus dimiliki bola pada kondisi awal, dalam contoh ini sudut ditentukan secara acak dari 360 derajat kemungkinan ( dalam radian 2 * PI ). NextDouble akan menghasilkan bilangan pecahan acak antara 0 hingga 1. Parameter terakhir adalah besar layar ( dalam hal ini adalah pictureBox1)

  4. Secara default timer pada Form tidak langsung berjalan begitu project dieksekusi maka tambahkan juga baris perintah ini dalam konstruktor :

    timer1.Enabled = true; 
  5. Kemudian sekarang tambahkan method untuk meng-handle apa saja yang harus dilakukan setiap kali timer berdetik. Buka Form1.cs Designer atau tekan Shift + F7 dan klik dua kali pada object timer1 di  bawah layar, maka akan muncul sebuah method baru yang otomatis dibuat di Form1.cs file. Tambahkan isi dari method ini sehingga menjadi :

    privatevoid timer1_Tick(object sender, EventArgs e)
    
            {
    
                // setiap 1 ms bersihkan layar
    
                g.Clear(Color.Transparent);
    
                // juga update posisi bola
    
                bola.Update(g);
    
                // kemudian gambar ulang!!
    
                pictureBox1.Invalidate();
    
            }

     

  6. Sekarang semuanya sudah lengkap. Tekan F5 dan jika semua benar maka akan tampak sebuah bola yang memantul setiap kali menyentuh layar.

    Bola Memantul

Download File

Tag: , ,

Write Comment

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