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




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

Rabu, 28 Juni 2017

Animasi Sederhana dan Kombinasi Tombol Code Block


Hai rekan-rekan sekalian kwmbali ogut akan membagikan sedikit ilmu tentang pemrograman game dengan menggunakan compiler Code Block.

Ini adalah lanjutan artikel ogut sebelumnya dan artikel ini berkaitan dengan artikel sebelumnya, jadi supaya rekan-rekan tidak bingung, silahkan baca juga artikel yang terkait dengan artikel ini.


Kali ini ogut akan membagikan contoh program animasi sederhana untuk membuat game perang 2D. Jika rekan-rekan menekan tombol 'J' , 'K', 'L' dan 'I'. maka pesawat akan bergerak kesana kemari mengikuti arah yang diberikan.

Untuk membuat animasi pesawat bergerak kesana kemari, caranya sangat mudah. Cukup dengan mengubah nilai titik koordinat ABCD. Ya hanya itu, dengan mengubah nilai titik koordinat persegipanjang ABCD maka pesawat akan ber-animasi.

Perhatikan potongan source code berikut ini.

//pesawat ke atas saja
if (kombinasi_tombol == 100000)
{
        Pesawat_Jagoan.Ay = Pesawat_Jagoan.Ay +  geser_atas_bawah;
        Pesawat_Jagoan.By = Pesawat_Jagoan.By +  geser_atas_bawah;
        Pesawat_Jagoan.Cy = Pesawat_Jagoan.Cy +  geser_atas_bawah;
        Pesawat_Jagoan.Dy = Pesawat_Jagoan.Dy +  geser_atas_bawah;
}

Untuk membuat pesawat bergerak ke atas, maka nilai koordinat Y ditambah. Hal ini juga berlaku untuk bergerak kekiri, kekanan dan kebawah.

Sedangkan untuk mendeteksi tombol keyboard yang ditekan, gunakan fungsi berikut ini.

void Keyboard_ditekan()
{
double geser_kiri_kanan = 1.0;
double geser_atas_bawah = 1.0;

int kombinasi_tombol = 0;


//tombol kanan di tekan
if (GetKeyState('L') & 0x80)
{
kombinasi_tombol = kombinasi_tombol + 1000000;
}

//tombol kiri di tekan
if (GetKeyState('J') & 0x80)
{
kombinasi_tombol = kombinasi_tombol + 2000000;
}

//tombol atas di tekan
if (GetKeyState('I') & 0x80)
{
kombinasi_tombol = kombinasi_tombol + 100000;
}

//tombol bawah di tekan
if (GetKeyState('K') & 0x80)
{
kombinasi_tombol = kombinasi_tombol + 200000;
}

...
...
...
}

Ternyata mudah ya untuk membuat animasi game 2D, selamat belajar rekan-rekan semoga artikel sederhana ini bisa bermanfaat. Ini ada contoh animasi lain yg ogut buat dengan Code Block, prisipnya sama dengan yang ogut terangkan di atas. Nanti ogut update lagi perkembangannya.



Salam


Heriady




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

Rabu, 07 Juni 2017

Program Teknik Masking Dengan Code Block


Selamat Siang rekan-rekan sekalian...kembali ogut mau membagikan sedikit ilmu yang bermanfaat untuk prmrograman game 2D.

Program akan menampilkan tampilan seperti gambar di bawah ini. Perhatikan burung biru yang ditampilkan dengan teknik masking dan yang ditampilkan tanpa teknik masking.


Burung biru yang di tampilkan dengan teknik masking akan terlihat tanpa kotak, teknik seperti ini yang digunakan untuk menampilkan objek-objek game 2D.

Penjelasan tentang teknik masking dapat rekan-rekan lihat pada link berikut ini. Karena ogut sudah pernah membahasnya dengan menggunakan Visual Studio.


Teknik masking menggunakan dua buah tekstur, yaitu tekstur image dan tekstur mask. Jika rekan-rekan masih bingung ogut sudah pernah menulis beberapa artikel yang berkaitan dengan teknik masking, semuanya dapat Anda lihat di Daftar Isi.

Untuk menamplkan burung tanpa masking source code seperti ini.

//burung tanpa masking
glBindTexture(GL_TEXTURE_2D, texture_image);
glBegin(GL_POLYGON);
glTexCoord2f(0.0f, 0.0f);glVertex2d(-350.0d,-450.0d);
        glTexCoord2f(1.0f, 0.0f);glVertex2d(150.0d,-450.0d);
        glTexCoord2f(1.0f, 1.0f);glVertex2d(150.0d,-100.0d);
        glTexCoord2f(0.0f, 1.0f);glVertex2d(-350.0d,-100.0d);
glEnd();

Dan untuk menampilkan burung dengan masking source code seperti ini.

//burung dengan masking
glEnable(GL_BLEND);
glBlendFunc(GL_DST_COLOR, GL_ZERO);
glBindTexture(GL_TEXTURE_2D, texture_mask);
glBegin(GL_POLYGON);
        glTexCoord2f(0.0f, 0.0f);glVertex2d(-100.0d,150.0d);
        glTexCoord2f(1.0f, 0.0f);glVertex2d(350.0d,150.0d);
        glTexCoord2f(1.0f, 1.0f);glVertex2d(350.0d,400.0d);
        glTexCoord2f(0.0f, 1.0f);glVertex2d(-100.0d,400.0d);
glEnd();

glBlendFunc(GL_ONE, GL_ONE);
glBindTexture(GL_TEXTURE_2D, texture_image);
glBegin(GL_POLYGON);
        glTexCoord2f(0.0f, 0.0f);glVertex2d(-100.0d,150.0d);
        glTexCoord2f(1.0f, 0.0f);glVertex2d(350.0d,150.0d);
        glTexCoord2f(1.0f, 1.0f);glVertex2d(350.0d,400.0d);
        glTexCoord2f(0.0f, 1.0f);glVertex2d(-100.0d,400.0d);
glEnd();
glDisable(GL_BLEND);

Mudah ya, tidak sulit.

Selamat Belajar rekan-rekan


Heriady




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