Kamis, 29 Juni 2017

Animasi Latar Belakang Bergulung Code Block OpenGL


Selamat Sore rekan-rekan sekalian, masih dalam suasana lebaran, mohon maaf lahir dan batin. Kali ini ogut akan meneruskan artikel pemrograman game 2D dengan menggunakan compiler Code Block. Artikel kali ini membahas tentang cara membuat latar belakang yang bergulung, atau animasi bergulung, sehingga game yang rekan-rekan buat akan tampak semakin hidup seperti video berikut ini.



Atau screen capture-nya seperti ini.


Untuk membuat latar belakang bergulung, ingatlah satu hal, yaitu rantai sepeda.



Waduh apa hubungan bengkel sepeda dayung dengan game ini ya...???

Untuk membuat latar belakang bergulung ogut hanya meniru rantai sepeda. Rantai sepeda panjangnya hanya segitu-gitu aja, tapi karena diputar akan terlihat seperti tidak putus-putus alias nyambung terus.

Nah itu dia rahasianya.Untuk lebih jelasnya lihat gambar di bawah ini.



Nah lho gambar apa lagi ini...???
Gambar di atas adalah gambar layar / screen game rekan-rekan yang dibagi menjadi beberapa bagian(sebelah kiri) dan gambar tekstur latar belakang(sebelah kanan) yg ogut bagi-bagi juga. Perhatikan tekstur latar belakang yang ada tanda ujung rantai. Betul ujung-ujung tekstur di program game akan ogut sambungkan lalu akan ogut putar seperti rantai sepeda. Dengan berputarnya tekstur latar belakang seperti rantai sepeda, maka latar belakang tidak akan berhenti berputar. Ini yang akan menghasilkan efek animasi yang bagus sekali.

Di program ogut membuat typedef struct seperti berikut ini.

//BG============================================
typedef struct
{
double V_Y1;
double V_Y2;
int Index_TK;
}Vertex_BG;

typedef struct
{
double TK_Y1;
double TK_Y2;
}TK_BG;


Vertex_BG V_BG[300];
TK_BG Text_BG[600];

//+++++++++++++++++++++++++++++++++++++++++++

Lalu ogut membuat tiga fungsi berikut untuk seting nilai-nilai yang diperlukan dan menampilkan efek animasi bergulung di layar monitor.

void Create_Vertex_BG(Vertex_BG Array_BG[], int total_ar, double Ymax_P)
{
int i;

//tinggi layar dibagi dengan total array
//untuk membagi layar menjadi bagian yang
//sama besar secara horisontal
double beda_VBG = (Ymax_P * 2.0 / (double)total_ar);

for (i = 0; i < total_ar; i++)
{
Array_BG[i].V_Y1 = -Ymax_P + (beda_VBG * (double)i);
Array_BG[i].V_Y2 = -Ymax_P + (beda_VBG * (double)(i + 1));

Array_BG[i].Index_TK = i;
}

}

void Create_TK_BG(TK_BG Array_TK_BG[], int total_ar)
{
int i;

//tinggi texture = 1
//dibagi dengan banyaknya array.
double beda_TK_BG = 1.0 / (double)total_ar;

for (i = 0; i < total_ar; i++)
{
Array_TK_BG[i].TK_Y1 = beda_TK_BG * (double)i;
Array_TK_BG[i].TK_Y2 = beda_TK_BG * (double)(i + 1);
}

}


void Display_Scrolling_BG(Vertex_BG Array_BG[], TK_BG Array_TK_BG[],
int total_ar_V, int total_ar_TK,
unsigned int texture_BG, double Xmax_P)
{
int i;

glBindTexture(GL_TEXTURE_2D, texture_BG);

for (i = 0; i < total_ar_V; i++)
{
glBegin(GL_POLYGON);
glTexCoord2d(0.0, Array_TK_BG[Array_BG[i].Index_TK].TK_Y1);
glVertex2d(-Xmax_P, Array_BG[i].V_Y1);

glTexCoord2d(1.0, Array_TK_BG[Array_BG[i].Index_TK].TK_Y1);
glVertex2d(Xmax_P, Array_BG[i].V_Y1);

glTexCoord2d(1.0, Array_TK_BG[Array_BG[i].Index_TK].TK_Y2);
glVertex2d(Xmax_P, Array_BG[i].V_Y2);

glTexCoord2d(0.0, Array_TK_BG[Array_BG[i].Index_TK].TK_Y2);
glVertex2d(-Xmax_P, Array_BG[i].V_Y2);
glEnd();

//perbaharui nilai Index TK
//supaya tercipta animasi
//background berjalan/bergulung
Array_BG[i].Index_TK++;

if (Array_BG[i].Index_TK >= total_ar_TK)
Array_BG[i].Index_TK = 0;
}
}

Jadi dah program animasi bergulung ogut, selamat belajar rekan-rekan semoga artikel sederhana ini bermanfaat.

Salam


Heriady




-----------------------------------------------------------------------
-----------------------------------------------------------------------
-----------------------------------------------------------------------