Rancangan & Implementasi Game BallGame 2D dengan Processing

Selection_260Processing adalah bahasa pemrograman dan lingkungan pemrograman (development environment) open source untuk memprogram gambar, animasi dan interaksi. Digunakan oleh pelajar, seniman, desainer, peneliti, dan hobbyist untuk belajar, membuat prototipe, dan produksi. Processing digunakan untuk mengajarkan dasar-dasar pemrograman komputer dalam konteks rupa dan berfungsi sebagai buku sketsa perangkat lunak (software) dan tool produksi profesional. Selain itu processing juga dapat di gunakan sebagai bahasa pemrograman untuk pembuatan game. Bagi anda yang tertarik untuk membuat game dengan bahasa ini, ikuti langkah-langkah berikut. Yang dimulai dari perancangan, implementasi hingga tahap uji coba.

Perancangan Program

Game yang akan saya buat dengan bahasa pemrograman processing, yaitu ballgame 2D. Ballgame 2D ini sejenis game pong, namun untuk mencapai goal bola harus di mengenai area goal berupa garis berwarna hijau yang telah dibuat sebelumnya.

Perancangan sistem ini menggunakan UML sebagai pemodelan system, adapun urutan perancangan untuk diagram-diagram yang terdapat didalam UML (Unified Modeling Languange) adalah :

 Use Case Diagram

 Use Case

Diagram di atas menjelaskan bahwa terdapat 2 aktor yaitu developer dan user atau player. Developer membuat rancangan terhadap sistem tersebut terlebih dahulu. Kemudian baru mulai membangun game tersebut. Setelah selesai game tersebut di uji coba terlebih dahulu untuk mengetahui apakah ada bagian program yang error. Setelah dianggap tiada error baru kemudian developer merelease game tersebut untuk digunakan oleh setiap user.

Activity Diagram

Diagram Activity menggambarkan alur proses atau cara kerja sistem. Pada diagram ini, digambarkan aktivitas-aktivitas apa saja yang dikerjakan oleh sebuah sistem.

activity diagram

 Yang dilakukan oleh sistem pertama kali adalah memuat score dan nyawa atau kesempatan yang dapat digunakan oleh user untuk memainkan game ini. Score awal adalah bernilai 0 dan kesempatan user adlaah sebesar 5. Jika sudah sistem akan memeriksa apakah bola mengenai goal. Jika ya maka sistem akan menambahkan score user yang besarnya sesuai dengan jarak antara batas terakhir bola berpijak dengan goal. Jika tidak maka bola akan terus dipantulkan. Kemudian sistem akan mengecek kembali paakah kesempatan atau nyawa user kurang dari 1. Jika ya maka game berakir. Jika tidak maka game akan terus dijalankan dan bola akan terus dipantukan.

Class Diagram

Class diagram digunakan untuk menggambarkan Objek/Class Pada Sistem. Digambarkan objek-objek apa saja yang digunakan untuk membangun sebuah sistem.

class diagram

Diagram di atas menunjukkan bahwa class yang digunakan pada program ini adlah sebanyak 3 yaitu setup, draw, mousePressed. Class setup berfungsi sebagai layout daripada game tersebut. Sedangkan class draw berfungsi mengatur bagaimana game berjalan. Dan terakhir mousePressed adlaah class yang mengatur action mouse click. Jika player mengclick mouse sebanyak satu kali maka game akan di pause. Action mouse ini juga berfungsi sebagai perintah untuk memulai game baru apabila user telah game over.

Listing Program

void setup() {
size(400, 400);
background(bg);
stroke(random(255),random(255),random(255));
frameRate(200);
PFont font;
font = createFont(“Georgia”,18);
textFont(font);
}

color bg = #f0f8ff, goal = #40d040;
boolean looping = true;
int lives = 5, score = 0, shake = 0;
float
ballPosX = 0.0, ballPosX2 = 0.0, ballVelX = 3,
ballPosY = 0.0, ballPosY2 = 0.0, ballVelY = 0.0,
ballRad = 8, grav = 0.02,
mouseX1 = mouseX, mouseY1 = mouseY,
mouseX2 = mouseX1, mouseY2 = mouseY1,
mouseVelX = mouseX1 – mouseX2, mouseVelY = mouseY1 – mouseY2,
mouseVelX1 = mouseX1 – mouseX2, mouseVelY1 = mouseY1 – mouseY2,
mouseVelX2 = mouseX1 – mouseX2, mouseVelY2 = mouseY1 – mouseY2,
mouseVelX3 = mouseX1 – mouseX2, mouseVelY3 = mouseY1 – mouseY2,
padWid = 30, goalX
;

void draw() {
fill(0);
text(“score: “, 3, 16); text(score, 80, 16);
ellipseMode(RADIUS); noFill();
for (int i = 1; i < 15; i = i+1) {
if(i > lives) {stroke(bg);}
ellipse(i*18, 30, 4, 4);
}
stroke(bg);
line(mouseX2 – padWid-1, mouseY2, mouseX2 + padWid+1, mouseY2);
mouseX2 = mouseX1; mouseY2 = mouseY1;
ellipse(ballPosX2, ballPosY2, ballRad, ballRad);
rect(goalX, height*0.4, 2, height*0.2);
stroke(goal);
goalX = random(shake/10)-shake/20+2;
if(shake > 0) {shake = shake -1;}
rect(goalX, height*0.4, 2, height*0.2);
stroke(#FF0000); rect(5, height-4, width-10, 2);
stroke(0);
rect(0, 0, width-1, height-1);
line(mouseX1 – padWid, mouseY1, mouseX1 + padWid, mouseY1);
mouseX1 = mouseX; mouseY1 = mouseY;
ellipse(ballPosX, ballPosY, ballRad, ballRad);
ballPosX2 = ballPosX; ballPosY2 = ballPosY;
ballVelY = ballVelY + grav;
ballPosX = ballPosX + ballVelX; ballPosY = ballPosY + ballVelY;
if(ballPosX + ballRad > width) {
ballPosX = width – ballRad;
ballVelX = ballVelX * -0.9;
} else if(ballPosX – ballRad < 0) {
ballPosX = ballRad;
ballVelX = ballVelX * -0.9;
if(ballPosY > height*0.4 && ballPosY < height*0.6) {
stroke(bg); fill(bg);
rect(0, 0, 160, 20);
shake = shake + int(ballVelX*100);
score = score + shake;
padWid = padWid – 1;
if(int(padWid/5) == padWid/5) {lives = lives +1;}
}
}
if(ballPosY + ballRad > height-1) {
ballPosY = height-1 – ballRad;
ballVelY = ballVelY * -0.9 +0.1;
ballVelX = ballVelX * 0.99;
lives = lives – 1;
stroke(bg); fill(bg);
rect(1, 1, 160, 20);
if(lives < 1) {
fill(bg); ellipse(18, 30, 4, 4);
fill(0);
text(“score: “, 3, 16); text(score, 80, 16);
text(“GAME OVER”, 3, 32);
score = 0;
ballPosX = 0; ballVelX = 3;
ballPosY = 0; ballVelY = 0;
padWid = 30;
lives = 5;
looping = false;
noLoop();
}
} else if(ballPosY – ballRad < 0) {
ballPosY = ballRad;
ballVelY = ballVelY * -0.9;
}
mouseVelX3 = mouseVelX2; mouseVelY3 = mouseVelY2;
mouseVelX2 = mouseVelX1; mouseVelY2 = mouseVelY1;
mouseVelX1 = mouseX1 – mouseX2; mouseVelY1 = mouseY1 – mouseY2;
mouseVelX = (mouseVelX1 + mouseVelX2 + mouseVelX3)/3;
mouseVelY = (mouseVelY1 + mouseVelY2 + mouseVelY3)/3;
if(ballPosY + ballRad > mouseY1 && ballPosY < mouseY1 &&
ballPosX + ballRad > mouseX1 – padWid &&
ballPosX – ballRad < mouseX1 + padWid && ballVelY > mouseVelY) {
ballPosY = mouseY1 – ballRad;
ballVelY = 0-ballVelY + mouseVelY * 0.8 +0.1;
ballVelX = ballVelX + (mouseVelX – ballVelX)/4;
} else if(ballPosY – ballRad < mouseY1 && ballPosY > mouseY1 &&
ballPosX + ballRad > mouseX1 – padWid &&
ballPosX – ballRad < mouseX1 + padWid && ballVelY < mouseVelY) {
ballPosY = mouseY1 + ballRad;
ballVelY = 0-ballVelY + mouseVelY * 0.8;
ballVelX = ballVelX + (mouseVelX – ballVelX)/4;
}
}

void mousePressed() {
if(looping) {noLoop(); looping = false;} else {loop(); looping = true; background(bg);}
}

Logika Program

Dari kode-kode pada listing program diatas kita bisa mengetahui hal-hal apa saja yang terjadi dari mulai pembuatan game sampai action yang berjalan ketika game berakhir. Dimulai dari pembentukan layout, bahwa ukuram layout yang dibuat untuk area game ini 400 x 400. Untuk font yang digunakan adalah Georgia berukuran 18. Font ini digunakan untuk merubah style font score yang akan terpampang ketima game dimainkan. Berikut adalah potongan kode yang membuktikan beberapa peryataan di atas :

void setup() {

size(400, 400);

background(bg);

stroke(random(255),random(255),random(255));

frameRate(200);

PFont font;

font = createFont(“Georgia”,18);

textFont(font);

}

Agar layout game terlihat lebih menarik maka kita perlu memberikan warna yang bisa kita lihat dari potongan program di bawah ini.

color bg = #FFFFF0, goal = #40d040;

boolean looping = true;

int lives = 5, score = 0, shake = 0;

float

ballPosX = 0.0, ballPosX2 = 0.0, ballVelX = 3,

ballPosY = 0.0, ballPosY2 = 0.0, ballVelY = 0.0,

ballRad = 8, grav = 0.02,

mouseX1 = mouseX, mouseY1 = mouseY,

mouseX2 = mouseX1, mouseY2 = mouseY1,

mouseVelX = mouseX1 – mouseX2, mouseVelY = mouseY1 – mouseY2,

mouseVelX1 = mouseX1 – mouseX2, mouseVelY1 = mouseY1 – mouseY2,

mouseVelX2 = mouseX1 – mouseX2, mouseVelY2 = mouseY1 – mouseY2,

mouseVelX3 = mouseX1 – mouseX2, mouseVelY3 = mouseY1 – mouseY2,

padWid = 30, goalX

;

color bg berfungsi untuk memeberi warna untuk background area game. Warna yang digunakan yaitu Ivory dengan kode #fffff0. Sementara itu untuk goalnya kita akan beri warna hijau dengan kode #40d040. Goal berfungsi sebagai area yang tujuan di alirkannya bola. Nantinya jika bola mengenai area goal, maka user akan mendapatkan score yang akan terus dikalkulasikan. Besar kecilnya score yang diperoleh tergantung dari jarak area bola terakhir menyentuh dengan area goal. Semakin jauh jaraknya, maka score yang didapatkan akan semakin tinggi.

Untuk action, aturan area, serta behaviour bola. Untuk action area area yang diperbolehkan atau tidak termasuk jurang adalah koordinat Y sedangkan bagian jurang adalah koordinat X bawah. Sisanya merupakan area aman yang adapat dilalui bola. Selain itu score akan bertambah jika mengenai goal, hal ini bisa kita lihat dari potongan program berikut.

shake = shake + int(ballVelX*100);

score = score + shake;

Kemudian sistem akan memeriksa apakan jumlah kesempatan bermain user kurang dari satu atau tidak. Jika kurang dari satu game dihentkan dan jika tidak maka game akan terus berlanjut dan bola akan terus dipantulkan.

Langkah terakhir adalah memberi action ketika mouse diklik. Jika dalam kondisi kesempatan masih ada, maka action mouse ketika diklik adalah me-pause game. Sedangkan jika dalam kondisi game over, maka ketika mouse di klik secara otomatis sistem akan membawa user dalam permainan baru.

 if(looping) {noLoop(); looping = false;} else {loop(); looping = true; background(bg);}

}

 Uji Coba

Pada bagian ini kita akan menguji coba program game yang telah kita buat. Untuk menjankan program tersebut tekan button play.

1 run program processing

State awal

2 state awal game

Get Score

3 raih score

Game Over

3 game over

Refrensi : http://www.openprocessing.org/

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: