Kamis, 13 Juni 2013

Perancangan dan Penjelasan Game Processing " Ball "

Pada pembahasan kali ini saya akan membuat sebuah game “Ball” sederhana dengan menggunakan bahasa pemrograman Processing. Bagi Anda yang belum mempunyai program processing silahkan download di www.processing.org . Setelah di download ekstrak processing.rar nya maka folder processingnya akan berisi seperti gambar dibwah ini :


Setelah itu jalan kan program Processing.exe maka tampilannya akan seperti berikut :


Setelah itu kita mulai membuat kodingan pada lembar kerja processing. Setelah semu kodingan sudah lengkap lalu kita save kodingan kita, caranya File > Save As > lalu pilih di folder mana kita akan simpan kodingannya. Seperti gambar berikut :



Setelah di save lalu run kodingan yang telah kita buat dengan klik tombol play atau tekan Ctrl + R. Maka hasilnya akan jalan program game “Bola” sperti gambar dibawah ini :


Pada game ini dimainkan oleh satu pemain, pemain harus memasukkan bola menuju goal yang berwarna kuning pada berada di sebelah kiri . Background biru langit pada layar. Pemain akan diberikan nyawa sebanyak 5 buah. Untuk memulai permainan kita cukup run permainan ini dari processing dan permainan akan langsung mulai. Lalu, pemain menggerakkan papan pointer untuk mengarahkan bole kepada goal. Untuk menggerakkannya cukup menggeserkan mouse atau mousepad yang berada pada laptop, untuk mendapatkan skor/nilai yang tinggi.


RULES
Aturan main (rules) pada game “Bola” adalah sebagai berikut:
  • Pada game Bola ini hanya bisa dimainkan oleh satu orang pemain.
  • Untuk memulai permainan, otomatis setelah permainan ini terbuka. Dan pemain hanya tinggal menggerakkan pemukul bola atau papan pointer ke arah datangnya bola.
  • Pemain akan mendapatkan skor/nilai, kita harus mengarahkan bola kearah goal yang terdapat pada kiri layar dan berwarna kuning.
  • Permainan selesai apabila nyawa pemain telah habis.

LISTING 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(400, 400);
  background(bg);
  stroke(random(255),random(255),random(255));
  frameRate(200);
  PFont font;
  font = loadFont("MyriadWebPro-18.vlw");
  textFont(font, 18);
}

color bg = #40E0D0, goal = #FFFF00;
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("Nilai: ", 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("Nilai : ", 3, 16); text(score, 80, 16);
      text("KALAH", 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

//Diatas merupakan potongan kode  yang 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 MyriadWebPro berukuran 18. Font ini digunakan untuk merubah style font score yang akan terpampang ketima game dimainkan.//

void setup() {
  size(400, 400);
  background(bg);
  stroke(random(255),random(255),random(255));
  frameRate(200);
  PFont font;
  font = loadFont("MyriadWebPro-18.vlw");
  textFont(font, 18);
}

//Agar layout game terlihat lebih menarik maka kita perlu memberikan warna yang bisa kita lihat dari potongan program di bawah ini. 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.//
color bg = #40E0D0, goal = #FFFF00;
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
;

//Score akan bertambah jika mengenai goal, hal ini bisa kita lihat dari potongan program berikut.//
      shake = shake + int(ballVelX*100);
      score = score + shake;

//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.//
void mousePressed() {
  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.
·         State awal


·         Get Score
·         Game Over

Tidak ada komentar:

Posting Komentar