Jumat, 03 Juli 2015

Animasi Game OpenTK 2D dengan Matematika Translasi dan Rotasi

Suatu pagi yang cerah di awal bulan july tahun 2015...


Good Day Everybody...bagaimana kabar rekan-rekan sekalian? Baik...itu yang ogut harapkan. Setelah sebelumnya ogut membahas tentang matematika vektor R2 dan memberi contoh soal, maka kali ini ogut akan memberikan contoh penerapannya di dalam program game 2D. Hohoho sekarang saatnya pembuktian kalo matematika itu berjasa besar di dalam pemrograman game.

Program akan menampilkan objek pohon, awan dan kincir angin yang bergerak dari kiri ke kanan, dan tidak hanya itu kipas dari kincir angin akan terus berputar(rotasi).


Program menggunakan matematika kombinasi tranlsasi dan rotasi, serta menggunakan vektor R2 untuk menentukan  titik sumbu putar bagi kipas kincir.



Ok deh ogut tidak akam membahas program ini secara rinci karena teori matematika sudah dijelaskan semua di artikel sebelumnya.

Berikut ini adalah sub yang ogut sertakan untuk memudahkan rekan-rekan belajar program ini.

   Private Sub SettingNilaiAwal()
        ...
...
...
        'kincir1
        Kincir1.Ax = -1310 : Kincir1.Ay = -510
        Kincir1.Bx = -890 : Kincir1.By = -510
        Kincir1.Cx = -890 : Kincir1.Cy = 80
        Kincir1.Dx = -1310 : Kincir1.Dy = 80

        'kipas1
        Kipas1.Ax = -1400 : Kipas1.Ay = -300
        Kipas1.Bx = -800 : Kipas1.By = -300
        Kipas1.Cx = -800 : Kipas1.Cy = 300
        Kipas1.Dx = -1400 : Kipas1.Dy = 300

        'kincir2
        Kincir2.Ax = 400 : Kincir2.Ay = -420
        Kincir2.Bx = 500 : Kincir2.By = -420
        Kincir2.Cx = 500 : Kincir2.Cy = -270
        Kincir2.Dx = 400 : Kincir2.Dy = -270
        'kipas2
        Kipas2.Ax = 375 : Kipas2.Ay = -370
        Kipas2.Bx = 525 : Kipas2.By = -370
        Kipas2.Cx = 525 : Kipas2.Cy = -220
        Kipas2.Dx = 375 : Kipas2.Dy = -220
    End Sub

    Private Sub Render_Kipas1()
        Dim Kipas_M As Single
        Dim Kipas_N As Single

        'translasi koordinat poligon
        If Kipas1.Bx < GlControl1.Width + 800 Then
            Kipas1.Ax = Kipas1.Ax + 15
            Kipas1.Bx = Kipas1.Bx + 15
            Kipas1.Cx = Kipas1.Cx + 15
            Kipas1.Dx = Kipas1.Dx + 15
        Else
            Kipas1.Ax = Kipas1.Ax - 2700
            Kipas1.Bx = Kipas1.Bx - 2700
            Kipas1.Cx = Kipas1.Cx - 2700
            Kipas1.Dx = Kipas1.Dx - 2700
        End If

        'vektor
        VektorKipas = Create_Vektor(Kipas1.Ax, Kipas1.Ay, Kipas1.Cx, Kipas1.Cy)
        'skala 0.5
        VektorKipas.i = VektorKipas.i * 0.5
        VektorKipas.j = VektorKipas.j * 0.5
        'titik pusat Kipas1
        Kipas_M = Kipas1.Ax + VektorKipas.i
        Kipas_N = Kipas1.Ay + VektorKipas.j
        'Rotasi Kipas1
        Rotasi(Kipas1.Ax, Kipas1.Ay, Kipas_M, Kipas_N, 7.5)
        Rotasi(Kipas1.Bx, Kipas1.By, Kipas_M, Kipas_N, 7.5)
        Rotasi(Kipas1.Cx, Kipas1.Cy, Kipas_M, Kipas_N, 7.5)
        Rotasi(Kipas1.Dx, Kipas1.Dy, Kipas_M, Kipas_N, 7.5)

        GL.Enable(EnableCap.Blend)
        GL.BlendFunc(BlendingFactorSrc.DstColor, BlendingFactorDest.Zero)

        'Mask
        GL.BindTexture(TextureTarget.Texture2D, KipasBMP_Mask)
        GL.Begin(BeginMode.Quads)
        GL.TexCoord2(0.0, 0.0) : GL.Vertex2(Kipas1.Ax, Kipas1.Ay)
        GL.TexCoord2(1.0, 0.0) : GL.Vertex2(Kipas1.Bx, Kipas1.By)
        GL.TexCoord2(1.0, 1.0) : GL.Vertex2(Kipas1.Cx, Kipas1.Cy)
        GL.TexCoord2(0.0, 1.0) : GL.Vertex2(Kipas1.Dx, Kipas1.Dy)
        GL.End()

        GL.BlendFunc(BlendingFactorSrc.One, BlendingFactorDest.One)
        'BMP
        GL.BindTexture(TextureTarget.Texture2D, KipasBMP)
        GL.Begin(BeginMode.Quads)
        GL.TexCoord2(0.0, 0.0) : GL.Vertex2(Kipas1.Ax, Kipas1.Ay)
        GL.TexCoord2(1.0, 0.0) : GL.Vertex2(Kipas1.Bx, Kipas1.By)
        GL.TexCoord2(1.0, 1.0) : GL.Vertex2(Kipas1.Cx, Kipas1.Cy)
        GL.TexCoord2(0.0, 1.0) : GL.Vertex2(Kipas1.Dx, Kipas1.Dy)
        GL.End()

        GL.Disable(EnableCap.Blend)

        If CheckBox2.Checked = True Then
            'warna merah untuk garis
            GL.BindTexture(TextureTarget.Texture2D, Red)

            GL.Begin(BeginMode.LineLoop)
            GL.Vertex2(Kipas1.Ax, Kipas1.Ay)
            GL.Vertex2(Kipas1.Bx, Kipas1.By)
            GL.Vertex2(Kipas1.Cx, Kipas1.Cy)
            GL.Vertex2(Kipas1.Dx, Kipas1.Dy)
            GL.End()
        End If
    End Sub

Update 31 Des 2015

Manfaat lain vektor dapat Anda lihat pada contoh program Vektor Pantul, Sudut Vektor dan Tanjakan Turunan.







Bagaimana rekan-rekan? masih meragukan matematika vektor untuk membuat program game? Tentu tidak terbukti sudah vektor sangat berjasa besar untuk membantu para programmer menyelesaikan perhitungan translasi dan rotasi. Di lain kesempatan ogut akan memberi contoh program lain yang menggunakan vektor R2. Selamat belajar rekan-rekan...

Salam sukses untuk Anda semua


Heriady
heriady.yoh@gmail.com




Artikel terkait

Animasi Game 2D dengan Translasi

Teknik masking pada OpenTK 2D

Matematika rotasi untuk animasi OpenTK 2D