Upload
dessi-yusnita
View
236
Download
0
Embed Size (px)
Citation preview
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
7/26/2019 Penerapan GUI Animasi Pada Processing
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_komputasi7/26/2019 Penerapan GUI Animasi Pada Processing
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
7/26/2019 Penerapan GUI Animasi Pada Processing
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()
7/26/2019 Penerapan GUI Animasi Pada Processing
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
7/26/2019 Penerapan GUI Animasi Pada Processing
6/13
if((mouseX 600) ||((mouseX>= 480 &&mouseX= 465) || ((mouseX>= 480&&mouseX
7/26/2019 Penerapan GUI Animasi Pada Processing
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;
7/26/2019 Penerapan GUI Animasi Pada Processing
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;
if (mousePressed&&rectOn) {
a = rectY;
}
return a;
}
booleanoverRect (int x, int y, int width,int height)
{
if (mouseX>= x-20 &&mouseX= y-20 &&mouseY
7/26/2019 Penerapan GUI Animasi Pada Processing
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;
if (mousePressed&&rectOn) {
a = rectX;
}
return a;}
intposY (int x, int y) {
int a = 0;
if (mousePressed&&rectOn) {
a = rectY;
}
return a;
}
booleanoverRect (int x, int y, int width,int height)
{
if (mouseX>= x-20 &&mouseX= y-20 &&mouseY
7/26/2019 Penerapan GUI Animasi Pada Processing
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
7/26/2019 Penerapan GUI Animasi Pada Processing
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:
7/26/2019 Penerapan GUI Animasi Pada Processing
12/13
7/26/2019 Penerapan GUI Animasi Pada Processing
13/13
HasilProgram :