Sabtu, 04 Juli 2015

Animasi dengan Vektor Translasi

Selamat Pagi rekan-rekan sekalian...Bangun Tidur nge-blog lagi...ngeblog lagi tidur lagi...bangguuunnn...nge-blog lagi...inget sama almarhum Mbah Surip sang seniman nyentrik yang selalu happy...I Love You Full.


Pagi rekan-rekan (mulai serius nih), di pagi ini aku akan membagikan cerita translasi dengan vektor. Vektor lagi vektor lagi ngetrend amat dia di blog ini. Translasi dengan vektor mirip dengan translasi yang telah ogut bahas di artikel sebelumnya, hanya translasi dengan vektor mempunyai keunggulan, karena vektor mempunyai arah dan panjang tertentu, sehingga lebih bebas mengarahkannya kemana saja.

Program contoh yang akan ogut bagikan akan terlihat seperti gambar di bawah ini. Pesawat fighter bergerak sesuai dengan arah vektor yang ditetapkan, dan peluru yang ditembakkan fighter juga bergerak sesuai dengan arah yang dikehendaki.


Teori Vektor Translasi
Untuk memahami proses translasi dengan vektor perhatikanlah gambar berikut ini.


Titik koordinat A ditranslasikan dengan vektor c sehingga posisinya berubah menjadi A‟.

Untuk menentukan posisi titik A‟ tambahkanlah titik A dengan vektor translasinya yaitu vektor c, sehingga:

x‟ = x + ci
y‟ = y + cj

Rumus di atas berlaku untuk setiap titik koordinat yang ingin dipindahkan ke posisi lain dengan sebuah vektor.

Vektor Pesawat


Vektor Peluru


Gambar di atas adalah gambar-gambar dari vektor-vektor yang digunakan untuk translasi pesawat dan peluru. Ingatlah aturan dasar trigonometri  akan sangat membantu untuk menentukan vektor translasi pesawat dan vektor translasi peluru.

Berikut ogut sertakan kode program untuk memudahkan Anda belajar, source code program secara lengkap dapat Anda download.

Tentukan nilai awal untuk Fighter, peluru dan vektor.

    Public Sub SettingNilaiAwal()
        'fighter
        Fighter.Ax = 420 : Fighter.Ay = 120
        Fighter.Bx = 580 : Fighter.By = 120
        Fighter.Cx = 580 : Fighter.Cy = 280
        Fighter.Dx = 420 : Fighter.Dy = 280

        Fighter.d_X = 25
        Fighter.d_Y = 25
        Fighter.Index_Tekstur = 1

        Indeks_Tekstur_Fighter = 1
        Delay_Tekstur_Fighter = 1
        Plus_Indeks_Tekstur_Fighter = True

        '=================================
        'cos 45 = 0.7071, sin 45 = 0.7071
        'buat 8 buah vektor fighter dengan
        'menggunakan aturan trigonometri
        '=================================
        'arah utara
        Vektor_Fighter(0).i = 0 : Vektor_Fighter(0).j = Fighter.d_Y
        'arah timur laut
        Vektor_Fighter(1).i = Fighter.d_X * 0.7071
        Vektor_Fighter(1).j = Fighter.d_Y * 0.7071
        'arah timur
        Vektor_Fighter(2).i = Fighter.d_X : Vektor_Fighter(2).j = 0
        'arah tenggara
        Vektor_Fighter(3).i = Fighter.d_X * 0.7071
        Vektor_Fighter(3).j = -Fighter.d_Y * 0.7071
        'arah selatan
        Vektor_Fighter(4).i = 0 : Vektor_Fighter(4).j = -Fighter.d_Y
        'arah barat daya
        Vektor_Fighter(5).i = -Fighter.d_X * 0.7071
        Vektor_Fighter(5).j = -Fighter.d_Y * 0.7071
        'arah barat
        Vektor_Fighter(6).i = -Fighter.d_X : Vektor_Fighter(6).j = 0
        'arah barat laut
        Vektor_Fighter(7).i = -Fighter.d_X * 0.7071
        Vektor_Fighter(7).j = Fighter.d_Y * 0.7071

        '================================
        'menghitung vektor untuk peluru
        'dengan menggunakan trigonometri
        'cos 15 = 0.9659, sin 15 = 0.2588
        '================================
        'Peluru Fighter(0)
        Peluru_Fighter(0).GO_Active = False
        Peluru_Fighter(0).Vektor.i = -27.5 * 0.9659
        Peluru_Fighter(0).Vektor.j = 27.5 * 0.2588
        'Peluru Fighter(1)
        Peluru_Fighter(1).GO_Active = False
        Peluru_Fighter(1).Vektor.i = -27.5
        Peluru_Fighter(1).Vektor.j = 0.0#
        'Peluru Fighter(2)
        Peluru_Fighter(2).GO_Active = False
        Peluru_Fighter(2).Vektor.i = -27.5 * 0.9659
        Peluru_Fighter(2).Vektor.j = -27.5 * 0.2588

        'Timer peluru
        Timer_Peluru.TDelay = 2500 '2.5 detik
        Timer_Peluru.TGetFirst = True
    End Sub

Deteksi tombol keyboard yang ditekan user dan tentukan vektor yang dipakai untuk mentranslasi Fighter.

    Private Sub Tekan_Keyboard()
        Fighter.Index_Tekstur = Indeks_Tekstur_Fighter
        NilaiKey = 0

        'kiri
        If (GetKeyState(Keys.J) And &H1000) Then
            NilaiKey = NilaiKey + 10000
        End If
        'kanan
        If (GetKeyState(Keys.L) And &H1000) Then
            NilaiKey = NilaiKey + 20000
        End If
        'atas
        If (GetKeyState(Keys.I) And &H1000) Then
            NilaiKey = NilaiKey + 1000
        End If
        'bawah
        If (GetKeyState(Keys.K) And &H1000) Then
            NilaiKey = NilaiKey + 2000
        End If

        '==========================================
        'proses sesuai dengan key yang ditekan user
        '==========================================

        'kiri
        If NilaiKey = 10000 Then
            If Fighter.Ax > -GlControl1.Width - 50 Then
                'arah barat
                Translasi_Fighter(6)
            End If
        End If
        'kanan
        If NilaiKey = 20000 Then
            If Fighter.Bx < GlControl1.Width + 50 Then
                'arah timur
                Translasi_Fighter(2)
            End If
        End If
        'atas
        If NilaiKey = 1000 Then
            If Fighter.Cy < GlControl1.Height + 50 Then
                'arah utara
                Translasi_Fighter(0)
            End If
            Fighter.Index_Tekstur = 0
        End If
        'bawah
        If NilaiKey = 2000 Then
            If Fighter.Ay > -GlControl1.Height + 200 Then
                'arah selatan
                Translasi_Fighter(4)
            End If
            Fighter.Index_Tekstur = 4
        End If

        '================
        'Tombol kombinasi
        '================

        'kiri+atas
        If NilaiKey = 11000 Then
            If (Fighter.Ax > -GlControl1.Width - 50) And (Fighter.Cy < GlControl1.Height + 50) Then
                'arah barat laut
                Translasi_Fighter(7)
            Else
                If Fighter.Ax > -GlControl1.Width - 50 Then
                    'arah barat
                    Translasi_Fighter(6)
                End If

                If Fighter.Cy < GlControl1.Height + 50 Then
                    'arah utara
                    Translasi_Fighter(0)
                End If
            End If

            Fighter.Index_Tekstur = 0
        End If

        'kiri+bawah
        If NilaiKey = 12000 Then
            If (Fighter.Ax > -GlControl1.Width - 50) And (Fighter.Ay > -GlControl1.Height + 200) Then
                'arah barat daya
                Translasi_Fighter(5)
            Else
                If Fighter.Ax > -GlControl1.Width - 50 Then
                    'arah barat
                    Translasi_Fighter(6)
                End If

                If Fighter.Ay > -GlControl1.Height + 200 Then
                    'arah selatan
                    Translasi_Fighter(4)
                End If
            End If

            Fighter.Index_Tekstur = 4
        End If

        'kanan+atas
        If NilaiKey = 21000 Then
            If (Fighter.Bx < GlControl1.Width + 50) And (Fighter.Cy < GlControl1.Height + 50) Then
                'arah timur laut
                Translasi_Fighter(1)
            Else
                If Fighter.Bx < GlControl1.Width + 50 Then
                    'arah timur
                    Translasi_Fighter(2)
                End If

                If Fighter.Cy < GlControl1.Height + 50 Then
                    'arah utara
                    Translasi_Fighter(0)
                End If
            End If

            Fighter.Index_Tekstur = 0
        End If

        'kanan+bawah
        If NilaiKey = 22000 Then
            If (Fighter.Bx < GlControl1.Width + 50) And (Fighter.Ay > -GlControl1.Height + 200) Then
                'arah tenggara
                Translasi_Fighter(3)
            Else
                If Fighter.Bx < GlControl1.Width + 50 Then
                    'arah timur
                    Translasi_Fighter(2)
                End If

                If Fighter.Ay > -GlControl1.Height + 200 Then
                    'arah selatan
                    Translasi_Fighter(4)
                End If
            End If
            Fighter.Index_Tekstur = 4
        End If
    End Sub

    Private Sub Translasi_Fighter(ByVal Index_Vektor As Integer)
        Fighter.Ax = Fighter.Ax + Vektor_Fighter(Index_Vektor).i
        Fighter.Bx = Fighter.Bx + Vektor_Fighter(Index_Vektor).i
        Fighter.Cx = Fighter.Cx + Vektor_Fighter(Index_Vektor).i
        Fighter.Dx = Fighter.Dx + Vektor_Fighter(Index_Vektor).i

        Fighter.Ay = Fighter.Ay + Vektor_Fighter(Index_Vektor).j
        Fighter.By = Fighter.By + Vektor_Fighter(Index_Vektor).j
        Fighter.Cy = Fighter.Cy + Vektor_Fighter(Index_Vektor).j
        Fighter.Dy = Fighter.Dy + Vektor_Fighter(Index_Vektor).j
    End Sub

Reload peluru setiap 2.5 detik.

    Private Sub Reload_Peluru()
        Dim i As Integer

        For i = 0 To 2
            Peluru_Fighter(i).GO_Active = True

            Peluru_Fighter(i).Ax = Fighter.Ax - 20
            Peluru_Fighter(i).Ay = ((Fighter.Dy - Fighter.Ay) / 2) + Fighter.Ay - 10

            Peluru_Fighter(i).Bx = Peluru_Fighter(i).Ax + 20
            Peluru_Fighter(i).By = Peluru_Fighter(i).Ay

            Peluru_Fighter(i).Cx = Peluru_Fighter(i).Bx
            Peluru_Fighter(i).Cy = Peluru_Fighter(i).By + 20

            Peluru_Fighter(i).Dx = Peluru_Fighter(i).Ax
            Peluru_Fighter(i).Dy = Peluru_Fighter(i).Cy
        Next
    End Sub

Render Fighter agar bisa oleng kiri dan kanan.

    Private Sub Render_Fighter()
        'membuat animasi fighter oleng kiri kanan
        Delay_Tekstur_Fighter = Delay_Tekstur_Fighter + 1
        If Delay_Tekstur_Fighter > 6 Then
            Delay_Tekstur_Fighter = 1

            If Plus_Indeks_Tekstur_Fighter = True Then
                'plus
                Indeks_Tekstur_Fighter = Indeks_Tekstur_Fighter + 1
                If Indeks_Tekstur_Fighter > 3 Then
                    Indeks_Tekstur_Fighter = 2
                    Plus_Indeks_Tekstur_Fighter = False
                End If
            Else
                'minus
                Indeks_Tekstur_Fighter = Indeks_Tekstur_Fighter - 1
                If Indeks_Tekstur_Fighter = 0 Then
                    Indeks_Tekstur_Fighter = 1
                    Plus_Indeks_Tekstur_Fighter = True
                End If
            End If
        End If

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

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

        GL.BlendFunc(BlendingFactorSrc.One, BlendingFactorDest.One)
        'BMP
        GL.BindTexture(TextureTarget.Texture2D, FighterBMP(Fighter.Index_Tekstur))
        GL.Begin(BeginMode.Quads)
        GL.TexCoord2(0.0, 0.0) : GL.Vertex2(Fighter.Ax, Fighter.Ay)
        GL.TexCoord2(1.0, 0.0) : GL.Vertex2(Fighter.Bx, Fighter.By)
        GL.TexCoord2(1.0, 1.0) : GL.Vertex2(Fighter.Cx, Fighter.Cy)
        GL.TexCoord2(0.0, 1.0) : GL.Vertex2(Fighter.Dx, Fighter.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(Fighter.Ax, Fighter.Ay)
            GL.Vertex2(Fighter.Bx, Fighter.By)
            GL.Vertex2(Fighter.Cx, Fighter.Cy)
            GL.Vertex2(Fighter.Dx, Fighter.Dy)
            GL.End()
        End If
    End Sub

Ok rekan-rekan sekalian sampai disini dulu cerita tentang vektor kali ini, yang harus rekan-rekan perhatikan adalah manfaat vektor translasi sangat berarti bagi pemrograman game, pada kesempatan lain ogut akan memberikan contoh program lagi yang menggunakan vektor(contoh program untuk tingkat mahir).

Salam sukses dan selamat belajar


Heriady
heriady.yoh@gmail.com




Artikel terkait

Animasi Game 2D dengan Translasi

Teknik masking pada OpenTK 2D

Vektor R2

Aturan dasar trigonometri