Pembuatan Game Three Labirin Pada Processing 2.0

Assalamu’alaikum…
Saya akan membahas cara membuat sebuah game three labirin dengan aplikasi Processing 2.0. Anda dapat mengunggah aplikasi tersebut di SINI. Berikut listing program dari game three labirin yang telah saya edit dari SINI

Listing Program
/* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/6424*@* */
/* !do not delete the line above, required for linking your tweak if you re-upload */

int page = 1;
PImage maze1;
PImage maze2;
PImage maze3;
PImage mochi;
PImage finalpage;

//Posisi piont maze 1
int x = 40;
int y = 430;

//Ukuran piont
float mochiwidth = 25; //width of mochi
float mochiheight = 25; //height of mochi

//Posisi piont maze 2
int a = 10;
int b = 4;

//Posisi piont maze 3
int c = 37;
int d = 440;

void setup() {
size(677, 521);
smooth();
mochi = loadImage(“littlemochi.png”);
maze1 = loadImage(“maze_1.png”);
maze2 = loadImage(“maze_2.png”);
maze3 = loadImage(“maze_3.png”);
finalpage = loadImage(“finalpage2.png”);
}

void draw() {
// Draw Maze
background(255.0);
if (page == 1) {
image(maze1, 4, 9);

// Controls
checkPoint(x + 10, y + 20); // Offset to move toward the center

// Draw Mochi
image(mochi, x, y, mochiwidth, mochiheight);
}

if (page == 2) {
image(maze2, 4, 9);

// Controls
checkPoint2(a+10, b+10); // Offset to move toward the center

// Draw Mochi
image(mochi, a, b, mochiwidth-10, mochiheight-10);
}

if (page == 3) {
image(maze3, 4, 9);

// Controls
checkPoint3(c+10, d+10); // Offset to move toward the center

// Draw Mochi
image(mochi, c, d, mochiwidth-10, mochiheight-10);
}

if (page == 4) {
image(finalpage, 0, 0);

// Draw Mochi
image(mochi, 68, 113, 70, 70);
}

if (page == 1) {
if ((x > 500) && (x < 550) && (y 0)) {
page = 2;
}
}
if (page == 2) {
if ((a > 550) && (a 450) && (b 600) && (c 100) && (d x1) && (mouseX y1) && (mouseY < y2)){
return true;
}
else {
return false;
}
}

Logika Program

Game ini telah dibuat menggunakan aplikasi processing 2.0, berikut penjelasan dari listing diatas. Bagian program di bawah ini adalah hanya sebuah argument karena diawali tanda slash dan bintang (/*) atau dapat juga digunakan tanda slash ganda (//), sehingga bagian program ini tidak akan dieksekusi.
/* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/6424*@* */
/* !do not delete the line above, required for linking your tweak if you re-upload */

Sintaks di bawah mendeklarasikan variabel –variabel yang akan digunakan dalam program.
int page = 1;
PImage maze1;
PImage maze2;
PImage maze3;
PImage mochi;
PImage finalpage;

Bagian ini mengatur posisi titik merah pada labirin pertama dimana berada pada koordinat 40 pada sumbu x dan 430 pada sumbu y.
//Posisi piont maze 1
int x = 40;
int y = 430;

Berikut adalah bagian untuk mengatur lebar dan panjang default untuk titik merah.
//Ukuran piont
float mochiwidth = 25; //width of mochi
float mochiheight = 25; //height of mochi

Bagian ini mengatur posisi titik merah pada labirin pertama dimana berada pada koordinat 10 pada sumbu a dan 4 pada sumbu b.
//Posisi piont maze 2
int a = 10;
int b = 4;

Bagian ini mengatur posisi titik merah pada labirin pertama dimana berada pada koordinat 37 pada sumbu c dan 440 pada sumbu d.
//Posisi piont maze 3
int c = 37;
int d = 440;

Sintaks di bawah mengatur panjang dan lebar dari kotak dialog yang nantinya akan ditempatkan map labirin yang ada, memanggil gambar yangakan dijadikan symbol map, titik merah dan finishnya nanti.
void setup() {
size(677, 521);
smooth();
mochi = loadImage(“littlemochi.png”);
maze1 = loadImage(“maze_1.png”);
maze2 = loadImage(“maze_2.png”);
maze3 = loadImage(“maze_3.png”);
finalpage = loadImage(“finalpage2.png”);
}

Sintaks berikut mengatur letak dari map labirin1, 2 dan 3 itu sendiri pada kotak dialog dan mengontrol arah gerak titik sesuai dengan keyboard yang ditekan, serta memberikan area point dimana saat titik tersebut masuk area yang telah ditentukan, kita dapat menuju labirin selanjutnya.
void draw() {
// Draw Maze
background(255.0);
if (page == 1) {
image(maze1, 4, 9);

// Controls
checkPoint(x + 10, y + 20); // Offset to move toward the center

// Draw Mochi
image(mochi, x, y, mochiwidth, mochiheight);
}

if (page == 2) {
image(maze2, 4, 9);

// Controls
checkPoint2(a+10, b+10); // Offset to move toward the center

// Draw Mochi
image(mochi, a, b, mochiwidth-10, mochiheight-10);
}

if (page == 3) {
image(maze3, 4, 9);

// Controls
checkPoint3(c+10, d+10); // Offset to move toward the center

// Draw Mochi
image(mochi, c, d, mochiwidth-10, mochiheight-10);
}

if (page == 4) {
image(finalpage, 0, 0);

// Draw Mochi
image(mochi, 68, 113, 70, 70);
}

if (page == 1) {
if ((x > 500) && (x < 550) && (y < 40) && (y > 0)) {
page = 2;
}
}
if (page == 2) {
if ((a > 550) && (a < 600) && (b > 450) && (b < 480)) {
page = 3;
}
}
if (page == 3) {
if ((c > 600) && (c < 640) && (d > 100) && (d < 130)) {
page = 4;
}
}

if (page == 4) {
if (mousePressed == true) {
page = 1;
}
}

}

Bagian ini berisi kelas checkpoint1, 2 dan 3 yang akan di panggil pada bagian program diatas yang akan mengatur batas area yang dimiliki untuk dapat pindah ke labirin sebelumnya.
void checkPoint(int cx, int cy) {

if (keyCode==UP) {  // UP
if (red(get(cx, cy-1)) == 255) {
y–;
}
}
else if (keyCode==DOWN) {  // DOWN
if (red(get(cx, cy+1)) == 255) {
y++;
}
}
else if (keyCode==LEFT) {  // LEFT
if (red(get(cx-1, cy)) == 255) {
x–;
}
}
else if (keyCode==RIGHT) {  // RIGHT
if (red(get(cx+1, cy)) == 255) {
x++;
}
}
}

void checkPoint2(int cx, int cy) {

if (keyCode==UP) {  // UP
if (red(get(cx, cy-1)) == 255) {
b–;
}
}
else if (keyCode==DOWN) {  // DOWN
if (red(get(cx, cy+1)) == 255) {
b++;
}
}
else if (keyCode==LEFT) {  // LEFT
if (red(get(cx-1, cy)) == 255) {
a–;
}
}
else if (keyCode==RIGHT) {  // RIGHT
if (red(get(cx+1, cy)) == 255) {
a++;
}
}
}

void checkPoint3(int cx, int cy) {

if (keyCode==UP) {  // UP
if (red(get(cx, cy-1)) == 255) {
d–;
}
}
else if (keyCode==DOWN) {  // DOWN
if (red(get(cx, cy+1)) == 255) {
d++;
}
}
else if (keyCode==LEFT) {  // LEFT
if (red(get(cx-1, cy)) == 255) {
c–;
}
}
else if (keyCode==RIGHT) {  // RIGHT
if (red(get(cx+1, cy)) == 255) {
c++;
}
}
}

boolean overButton(int x1, int x2, int y1, int y2) {
if ((mouseX > x1) && (mouseX < x2) && (mouseY > y1) && (mouseY < y2)){
return true;
}
else {
return false;
}
}

Output Program

Berikut tampilan output saat game pertama kali dijalankan.

1

Setelah sampai finish maka akan masuk pada labirin ke-2, berikut tampilannya.

2

Saat selesai menyelesaikan labirin kedua dan sampai finish, kita akan masuk pada labirin ke-3. Berikut tampilannya.

3

Setelah menyelesaikan labirin ke-3. Maka tampilan akhirnya adalah sebagai berikut.

4

Sekian dan terima kasih,,, semoga bermanfaat.

SUMBER

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s