GDI+ Flicker-free animations using Double Buffering Technique in C# .NET

Sekitar tahun 1995, saya pernah membuat sebuah game sederhana berbasis Turbo Pascal ketika kuliah di IPB dahulu.Game tersebut kemudian saya porting ke VB di Windows pada tahun 1997. Kedua-duanya menggunakan teknik double buffering untuk menghilangkan flicker di monitor yang terjadi saat terjadi perubahan images di layar.

Teknik Double Buffering ini sangat sederhana, dimana algoritma-nya adalah:

1. Buat Canvas Kerja di luar layar atau di memori. Canvas Kerja ini tidak terlihat oleh mata pengguna atau invisible
2. Setup latar belakang di Canvas Kerja ini
3. Gambar seluruh obyek, image dan perubahan di atas Canvas Kerja
4. Kopi Canvas Kerja tersebut ke layar monitor

Inti-nya adalah melakukan setiap kegiatan di belakang layar dan mendorong hasil akhirnya ke layar monitor. Penasaran, saya coba implementasi teknik ini di teknologi .NET dengan menggunakan C# tentunya.

Saya mencoba membuat sebuah kotak yang bergerak di dalam form mengikuti kemanapun mouse saya bergerak. Untuk keperluan ini saya membuat sebuah Form kosong dan menggunakan event MouseMove sebagai trigger-nya.

Tanpa Double Buffering

Pertama saya mencoba tidak menggunakan teknik Double Buffering ini dan ternyata walaupun PC sekarang sangat jauh lebih cepat dari PC tahun 1997 namun flicker di layar monitor masih terlihat jelas… bahkan sangat jelas.

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    Graphics _screen = this.CreateGraphics();

    _screen.Clear(Color.FromKnownColor(KnownColor.Window));
    _screen.DrawString(“Hello C#”, new Font(“Verdana”, 20),
        new SolidBrush(Color.Tomato), 40, 40);
    _screen.DrawRectangle(new Pen(Color.Pink, 3), e.X, e.Y, 150, 100);
}

Baris pertama adalah membuat object Graphics menggunakan Form sebagai dasarnya.
Baris kedua membersihkan graphics menggunakan warna Window.
Baris ketiga membuat kata Hello C# pada lokasi 40, 40.
Dan baris terakhir adalah membuat kotak pada lokasi dimana mouse berada (e.X, e.Y)

Kata Hello C# akan terlihat berkedip saat anda menggerakan mouse diatas form tersebut.

Dengan Double Buffering

Ternyata beberapa control .NET sudah memiliki properties DoubleBuffered, salah satunya adalah Form. Aktifkan property ini dengan memberi nilai True untuk mencoba memperoleh hasil yang maksimal.

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    Bitmap _workspaceBMP = new Bitmap(this.Width, this.Height);
    Graphics _workspace = Graphics.FromImage(_workspaceBMP);

    _workspace.Clear(Color.FromKnownColor(KnownColor.Window));
    _workspace.DrawString(“Hello C#”, new Font(“Verdana”, 20),
        new SolidBrush(Color.Tomato), 40, 40);
    _workspace.DrawRectangle(new Pen(Color.Pink, 3), e.X, e.Y, 150, 100);

    Graphics _screen = this.CreateGraphics();
    _screen.DrawImage(_workspaceBMP, 0, 0);
}

Dibandingkan dengan kode pertama, perbedaan terlihat dari adanya pembuatan object _workspaceBMP dan _workspace. Kedua object ini-lah yang digunakan sebagai Canvas Kerja di luar layar. Setelah pekerjaan pada Canvas Kerja selesai, informasi dalam Canvas Kerja di copy ke layar melalui dua baris terakhir.

Saat diuji-coba maka terlihat bahwa tidak ada lagi bagian dari form yang berkedip saat mouse digerakkan diatas form tersebut (Dony).