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

Pemrograman, Pemrograman Desktop
July 15, 2012 Marselinus Denny

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

   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

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

   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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

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

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

   1	Random generator = newRandom();<span style="text-align: justify;">&nbsp;</span>

3. Kemudian di dalam kontruktor Form1 ( public Form1()) tambahkan syntax untuk instansiasi bola :
   
   ?

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

   1	timer1.Enabled = true;<span style="text-align: justify;">&nbsp;</span>

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

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

   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