The Way of life: Rancangan & Implementasi Game BallGame 2D dengan Processing

Processing 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 saya buat menggunakan 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 terletak di sebelah kiri layar.

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

Diagram di atas menjelaskan bahwa terdapat 2 aktor yaitu developer dan user (pemain). Langkah awal yang dilakukan developer yaitu merancang terhadap sistem tersebut terlebih dahulu. Kemudian baru mulai membangun game tersebut. Setelah game selesai dibuat kemudian di uji coba terlebih dahulu untuk mengetahui apakah ada bagian program yang error. Setelah dirasa tidak ada kesalahan (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 dilakukan oleh sistem.

Langkah awal Sistem memuat score dan menampilkan nyawa yang disediakan bagi user untuk memainkan game ini. Score awal adalah bernilai 0 dan nyawa user adalah sebanyak 3. 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 apakah nyawa user kurang dari 1. Jika ya maka game selesai. Jika tidak maka game akan terus dijalankan dan bola akan terus dipantulkan.

Class Diagram

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

Diagram di atas menunjukkan bahwa class yang digunakan pada program ini 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 game over.

Kode Program

/* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/3240*@* */
/* !do not delete the line above, required for linking your tweak if you re-upload */
void setup() {
size(420, 420);
background(bg);
stroke(random(255),random(255),random(255));
frameRate(200);
PFont font;
font = createFont ("Tahoma", 20);
textFont(font, 20);
}

color bg = #F0E68C, 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 = 3;
      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 keadaan 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 420 x 420. Untuk font yang digunakan adalah Tahoma berukuran 20. Font ini digunakan untuk merubah style font score yang akan terlihat pada display game ketika game tersebut dimainkan. Berikut adalah potongan kode yang membuktikan beberapa peryataan di atas :

void setup() {
size(420, 420);
background(bg);
stroke(random(255),random(255),random(255));
frameRate(200);
PFont font;
font = createFont ("Tahoma", 20);
textFont(font, 20);
}

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

color bg = #F0E68C, goal = #7CFC00;
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 digunakan untuk memberi warna background untuk pada area game. Warna yang digunakan yaitu Khaki dengan kode #F0E68C. Sementara itu untuk goalnya kita akan beri warna hijau dengan kode #7CFC00. Goal berfungsi sebagai area yang tujuan di alirkannya bola. 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 akan didapatkan semakin besar.

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 apakah jumlah nyawa bermain user kurang dari satu atau tidak. Jika kurang dari satu maka game dihentikan 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.