Belajar Pemrograman Komputer Grafik / Game 2D dengan VB .Net dan OpenTK

Suatu pagi di bulan juni, langit masih gelap...dan tentu saja ini bulan ramadhan...bagi rekan-rekan yang menjalankan puasa aku ucapkan selamat menunaikan kewajibannya...

Pagi eh subuh semuanya...kali ini aku akan membuat tulisan yang sangat berbeda dari sebelumnya, ya sangat berbeda karena kali ini ogut akan bercerita tentang VB. Net dan OpenTK.

Dikarenakan banyaknya email yang masuk dan menanyakan tentang pemrograman grafik / game di VB  .Net maka dengan ini ogut mendeklarasikan artikel pertama yang mengulas tentang pemrograman grafik di VB .Net. Untuk pendeklarasian tersebut ogut telah menetapkan akan memakai OpenTK sebagai sarana untuk pemrograman grafik (seperti pidato aja yah...).

Lanjut ya...

Agar Visual Basic .Net dapat dipakai untuk menampilkan tayangan grafik diperlukan component tambahan, ogut memilih memakai OpenTK karena component ini merupakan salah satu component terbaik yang ada pada saat ini dan sangat mudah untuk digunakan. OpenTK dapat Anda unduh di link berikut ini atau dapat langsug ke www.opentk.com untuk update versi terbarunya (ogut punya versi tahun 2014), setelah proses unduh, Anda akan mendapatkan sebuah file yang dapat langsung Anda jalankan.

Klik dua kali pada file OpenTK maka secara default OpenTK akan di install pada folder C:\Users\...\Documents\OpenTK\1.1.

Aku menggunakan Operating System Windows 7 Ultimate SP1, jika Anda menggunakan Windows versi lain folder tujuan mungkin akan berbeda.

Setelah proses instalasi selesai maka Anda akan mendapatkan OpenTK secara lengkap seperti gambar berikut ini.

Setelah OpenTK Terpasang di komputer Anda sekarang saatnya untuk membuat programnya. Aku menggunakan Visual Basic .Net yang tergabung di dalam Visual Studio Express 2013.

Pertama jalankan Visual Studio di komputer Anda.

Untuk memulai pemrograman grafik Anda harus membuat project baru dengan langkah seperti berikut. Klik File lalu pilih New Project.

Pilih Visual Basic, lalu klik pada Windows Forms Application, tentukan nama project, pilih lokasi folder tempat meletakkan project dan terakhir klik tombol OK.

Setelah tombol OK Anda klik maka project Visual Basic .Net akan terbentuk seperti gambar berikut.

Tahap berikutnya Anda harus menambahkan component OpenTK ke dalam project yang baru saja Anda buat dengan cara seperti berikut ini.

Klik View lalu pilih Object Browser.

Setelah tampil window Object Browser klik Edit Custom Component Set.

Pilih component OpenTK.dll dan OpenTK.GLControl.dll dengan cara klik tab Browse, pilih folder tempat OpenTK berada, lalu pilih OpenTK.dll dan OpenTK.GLControl.dll, klik tombol Add dan terakhir klik tombol OK.

Setelah tombol OK Anda klik maka Anda akan mendapatkan tampilan seperti berikut. Klik Add to References in Selected Project in Solution Explorer.

Lalu klik OK.

Tahap berikutnya klik dan seret dua file dll OpenTK ke Solution Explorer.

Setelah Anda melakukannya maka Solution Explorer di project Anda akan menjadi seperti berikut.

Klik pada OpenTK.dll lalu ubah properties Copy to Output Directory menjadi Copy if newer.

Lakukan hal yang sama terhadap OpenTK.GLControl.dll.

Klik tab Form1.vb [Design] untuk kembali menampilkan form VB. Net.

Langkah berikutnya tampilkan Toolbox dengan cara klik View lalu pilih Toolbox.

Setelah Toolbox tampil klik kanan pada All Windows Forms, lalu pilih Choose Items.

Klik tombol Browse.

Pilihlah folder tempat OpenTK berada, klik pada OpenTK.GLControl.dll, lalu klik tombol Open.

Hasilnya dapat Anda lihat seperti berikut, GL Control telah ditambahkan, klik tombol OK untuk melanjutkan.

Sekarang Anda dapat melihat GL Control pada Toolbox.

Tambahkan GL Control ke form VB. Net Anda dengan cara klik dan seret.

Setelah semua tahap-tahap di atas Anda lakukan, tahap berikutnya Anda harus mengisi form VB .Net Anda dengan kode program. Klik kanan pada Form1.vb lalu pilih View Code.

Hasil akhir akan tampak seperti gambar berikut dan form VB .Net Anda siap untuk diisi dengan kode program.

Dengan bantuan OpenTK kode program grafik yang akan Anda buat menjadi sangat mudah, sehingga bagi Anda yang baru terjun ke dunia pemrogramman grafik akan sangat terbantu untuk membuat program game.

Pertama tambahkan Imports yang diperlukan ke program.

Imports OpenTK
Imports OpenTK.Graphics
Imports OpenTK.Graphics.OpenGL
Imports OpenTK.Input
Imports System.Drawing
Imports System.Drawing.Imaging

Setting OpenTK.

Private Sub GlControl1_Load(sender As Object, e As EventArgs) Handles GlControl1.Load
    GL.ClearColor(Color.White)
    '''''''''''''''''''''
    'Setup untuk grafik viewing
    '''''''''''''''''''''
    GL.Viewport(0, 0, GlControl1.Width, GlControl1.Height)
    GL.MatrixMode(MatrixMode.Projection)
    GL.LoadIdentity()
    GL.Ortho(-GlControl1.Width, GlControl1.Width, -GlControl1.Height, GlControl1.Height, -1, 1)
    GL.MatrixMode(MatrixMode.Modelview)
    GL.LoadIdentity()
    CheckBox1.Checked = True
    CheckBox2.Checked = True
    'Setup Nilai Sumbu
    txt_Xmin.Text = -GlControl1.Width
    txt_Xmax.Text = GlControl1.Width
    txt_Ymin.Text = -GlControl1.Height
    txt_Ymax.Text = GlControl1.Height
    GlControl_Loaded = True
End Sub

Render grafik ke layar monitor.

Private Sub GlControl1_Paint(sender As Object, e As PaintEventArgs) Handles GlControl1.Paint
    GL.Clear(ClearBufferMask.ColorBufferBit)
    GL.Clear(ClearBufferMask.DepthBufferBit)
    Render_PersegiPanjang()
    GarisSumbuXY()
    'Swap Buffer
    GraphicsContext.CurrentContext.VSync = True
    GlControl1.SwapBuffers()
End Sub

Cara untuk membuat objek persegipanjang / poligon.

Private Sub Render_PersegiPanjang()
    If CheckBox2.Checked = True Then
        'warna hitam untuk garis
        GL.Color3(0, 0, 0)
        'poligon kiri bawah
        GL.Begin(BeginMode.LineLoop)
        GL.Vertex2(-450, -450) 'titik kiri bawah
        GL.Vertex2(-250, -450) 'titik kanan bawah
        GL.Vertex2(-250, -150) 'titik kanan atas
        GL.Vertex2(-450, -150) 'titik kiri atas
        GL.End()
        'poligon kanan atas
        GL.Begin(BeginMode.LineLoop)
        GL.Vertex2(50, 50) 'titik kiri bawah
        GL.Vertex2(350, 50) 'titik kanan bawah
        GL.Vertex2(350, 350) 'titik kanan atas
        GL.Vertex2(50, 350) 'titik kiri atas
        GL.End()
    End If
End Sub

Gunakan Invalidate untuk setiap event yang Anda buat di program.

Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged
    GlControl1.Invalidate()
End Sub

Dan jika program Anda jalankan akan menghasilkan tampilan seperti berikut

Demikianlah cerita tentang VB .Net dan OpenTK, dengan program yang sederhana dan singkat tampilan grafik sudah dapat muncul di layar monitor rekan-rekan. Sampai jumpa di artikel VB .Net lainnya.

Salam Sukses


Heriady
heriady.yoh@gmail.com


Download source code VB .Net ada disini, ngak usah ragu tinggal klik saja.


Artikel terkait

	Tekstur di OpenTK 2D Klik link ini untuk menuju ke artikel
	Teknik masking pada OpenTK 2D Klik link ini untuk menuju ke artikel
	Matematika rotasi untuk animasi OpenTK 2D Klik link ini untuk menuju ke artikel