penerapan gui animasi pada processing

7/26/2019 Penerapan GUI Animasi Pada Processing

1/13

PENERAPAN GUI ANIMASI PADA PROCESSING UNTUK MEMBUAT GAME

TOWER DEFENSE

Disusun Serta Disajikan Untuk Memenuhi Persyaratan

Dalam Pembuatan Tugas Makalah

MODUL PRAKTIKUM

OLEH

DESI YUSNITA 1414370032

PROGRAM STUDI SISTEM KOMPUTER

FAKULTAS ILMU KOMPUTER

UNIVERSITAS PEMBANGUNAN PANCA BUDI

MEDAN

2016


2/13

Penerapan GUI Animasipada Processing

Menurut Wikipedia, Dalamteknologi komputasi,antarmuka pengguna grafis atau

APG (Inggris:Graphical User Interfaceatau GUI) adalah jenisantarmuka pengguna yang

menggunakan metodainteraksipada piranti elektronik secara grafis (bukan perintah teks)

antara pengguna dan komputer.

GUI menjadi salah satu faktor kemudahan dalam penggunaan komputer, piranti bergerak

seperti pemutarMP3,pemutar media portabel atau piranti permainan, peralatan rumah tangga,

dan peralatan kantor. GUI menggambarkan informasi dan perintah yang tersedia untuk

pengguna menggunakan ikon grafis.

SedangkanAnimasimerupakangambar bergerak berbentuk dari sekumpulan objek

(gambar) yang disusun secara beraturan mengikuti alur pergerakan yang telah ditentukan

pada setiap pertambahan hitungan waktu yang terjadi. Gambar atau objek yang dimaksud

dalam definisi di atas bisa berupa gambar manusia, hewan, maupun tulisan.

DenganBegitudapatkitasimpulkan GUI

Animasimerupakansebuahgambarbergerakdarisekumpulanobjekdimana user

dapatmelakukaninteraksiterhadapobjek- objektersebut.

Disini kami akanmembahaspenerapan GUI Animasikedalamsebuah game sederhana

tower defenceyang kami perolehdari website openprocessing.org.

Disini kami akanmembagisintaksmenjadi 5 bagiandenganpembagiansatu program

utamauntukmenjalankankeseluruhanisisintaksdan 4 class program

sebagaipendukungdariisisintaksutama.

Program Utama:

ArrayList towers;

ArrayList squares;

intfr = 0;

intdualtimer = 0;

PImage path, space, titlepage, instructions;

int MONEY = 700;

int LIVES = 10;

int SCORE = 0;

floatrospacetate;

int cols = 16;

int rows = 12;

intgridAccess [][] = new int[cols][rows];
https://id.wikipedia.org/wiki/Teknologi_komputasihttps://id.wikipedia.org/wiki/Bahasa_Inggrishttps://id.wikipedia.org/wiki/Antarmuka_penggunahttps://id.wikipedia.org/wiki/Interaksihttps://id.wikipedia.org/wiki/MP3https://id.wikipedia.org/wiki/MP3https://id.wikipedia.org/wiki/Interaksihttps://id.wikipedia.org/wiki/Antarmuka_penggunahttps://id.wikipedia.org/wiki/Bahasa_Inggrishttps://id.wikipedia.org/wiki/Teknologi_komputasi


3/13

intnumObadGuys = 4;

intbadGuyHealth = 100;

intmaptestX, maptestY;

intplaceX, placeY;

Button[] b = new Button[192];

boolean play = false;

boolean end = false;

boolean intro = false;

int timer = 0;

boolean title = true;

PFont file;

void setup () {

size(640,480);

cursor(CROSS);

rectMode(CENTER);

imageMode(CENTER);

smooth();

frameRate(30);

file = loadFont("File-24.vlw");

textFont(file);

textAlign(CENTER);

path = loadImage("basicPath1.png");

space = loadImage("space.png");

titlepage = loadImage("titlepage.png");

instructions =loadImage("instructions.png");

for(int h = 0; h< 192; h++) {

b[h] = new Button();

}

int u = 0; //Setsup grid ID number

for (int v = 0; v < rows; v++) {

for (int w = 0; w < cols; w++) {

gridAccess[w][v] = u;

u++;

}

}

towers = new ArrayList();

squares = new ArrayList();

}

void draw () {

maptestX = int(map(mouseX,0,640,0,16));

maptestY = int(map(mouseY,0,480,0,12));

if(title) {

dualtimer++;

if(dualtimer


4/13

else {

title = false;

intro = true;

dualtimer = 0;}

}

if(intro) {

image(instructions,width/2,height/2+1);

fill(100);

rect(540,460,120,40); // start

fill(255);

text("CONTINUE", 540, 470);

}

if(!title && !intro) {

dualtimer++;

rospacetate -= PI/4000;

pushMatrix();

translate(width/2,height/2);

rotate(rospacetate);

image(space,20,0);

popMatrix();

image(path,319,239);

intbutton_number = 0;

for(inti = 0; i< 12; i++) {

for(int j = 0; j < 16; j++) {

b[button_number].button_display((20+(j*40)),(20+(i*40)));

button_number++;

}

}

fill(100);

rect(540,460,120,40); // startrect(100,460,120,40); // lives

rect(140,20,200,40); // money

rect(500,20,200,40); // score

fill(255);

if(!play || !end) {

text("START", 540, 470);

}

if (play) {

fill(#278AA8,150);

rect(540,460,120,40);

}

fill(255);

String score = "SCORE:" + " " +

nf(SCORE,8);text(score,500,30);

String money = "URANIUM" + " " +nf(MONEY,4) + "lbs";

text(money, 140, 30);

String lives = "LIVES:" + " " +nf(LIVES,2);

text(lives, 100, 470);

}

if(play) {

fr++;

if(fr == 25) {

squares.add(new Square(badGuyHealth));

if(squares.size()


5/13

}

if(squares.size() == numObadGuys) {

fr = 30;

}}

for(int j=0; j0)

((Square)squares.get(j)).squareDisplay();

}

if(squares.size() == 0) {

timer++;

if(timer == 120) {

fr = 0;

badGuyHealth += 35;

numObadGuys += 1;timer = 0;

}

}

}

if(LIVES == 0) {

play = false;

end = true;

}

for(inti=0; i


6/13

if((mouseX 600) ||((mouseX>= 480 &&mouseX= 465) || ((mouseX>= 480&&mouseX


7/13

loc.add(new PVector(velocity.x/2,velocity.y/2));

}

}

Class untukpeletakan tower (Grid)

class Button {

intrectX = 0;

intrectY = 0;

inttestX, testY;

intrectSize = 40;

colorrectColor, baseColor;

colorrectHighlight;

colorrectRed;

colorcurrentColor;

booleanrectOver = false;

booleanrectOn = false;

Button() {

rectHighlight = color(175,100);

rectRed = color(#278AA8,25);

baseColor = color(102);

currentColor = rectRed;

}

voidbutton_display (int x, int y) {

rectX = x;

rectY = y;

rectColor = color(currentColor);

update(mouseX,mouseY);

testX = posX(mouseX,mouseY);

testY = posY(mouseX,mouseY);

if (rectOn) {fill (rectRed);

}

else if (rectOver) {

fill(rectHighlight);

}

else {

fill (rectColor);

}

stroke(255,10);

rect(rectX, rectY, rectSize, rectSize);

}

void update (int x, int y) {

if (overRect(rectX, rectY, rectSize,rectSize)) {

rectOver = true;

}

else {

rectOver = false;

}

if (mousePressed&&rectOver) {

rectOn = true;

}

else {

rectOn = false;


8/13

}

}

intposX (int x, int y) {int a = 0;

if (mousePressed&&rectOn) {

a = rectX;

}

return a;

}

intposY (int x, int y) {

int a = 0;


a = rectY;

}

return a;

}

booleanoverRect (int x, int y, int width,int height)

{

if (mouseX>= x-20 &&mouseX= y-20 &&mouseY


9/13

}

else if (rectOver) {

fill(rectHighlight);

}else {

fill (rectColor);

}

stroke(255,10);

rect(rectX, rectY, rectSize, rectSize);

}

void update (int x, int y) {

if (overRect(rectX, rectY, rectSize,rectSize)) {

rectOver = true;

}else {

rectOver = false;

}

if (mousePressed&&rectOver) {

rectOn = true;

}

else {

rectOn = false;

}

}

intposX (int x, int y) {

int a = 0;


a = rectX;

}

return a;}

intposY (int x, int y) {

int a = 0;


a = rectY;

}

return a;

}

booleanoverRect (int x, int y, int width,int height)

{

if (mouseX>= x-20 &&mouseX= y-20 &&mouseY


10/13

float r = 40;

floataX = r;

floataY = r;

int radius = 100;intTfr = 0;

intinReach = 160;

PImagetowerbase, towereye;

float angle;

Tower (float x, float y) {

location.x = x;

location.y = y;

amos = new ArrayList();

towerbase =loadImage("towerbase.png");

towereye = loadImage("towereye.png");}

voidtower_display() {

for (inti=0; i


11/13

popMatrix();

if(dist(((Square)squares.get(0)).xpos,((Square)squares.get(0)).ypos,((Amo)amos.get(k)).loc.x,((Amo)amos.get(k)).loc.y) < 25) {

amos.remove(k);

((Square)squares.get(0)).hurt();

}

else if(((Amo)amos.get(k)).loc.x>width || ((Amo)amos.get(k)).loc.x< 0 ||((Amo)amos.get(k)).loc.y> height ||((Amo)amos.get(k)).loc.y< 0) {

amos.remove(k);}

}

}

}

}

File Tambahan yang diincludedalam program:


12/13


13/13

HasilProgram :

penerapan gui animasi pada processing

Documents