TIP 163
Game Engine
Topik 1 (Pert 2)
Game Engine dan Struktur Game HTML5 Sederhana
Last Week Review
Bagaimana dengan contoh game yang diminta untuk
dipelajari?
Apa yang anda temukan?
Adakah kesulitan dalam
menambahkan tembok?
Last Week Review
Apa yang dilihat pemain dalam sebuah game adalah
keniscayaan dunia nyata yang digambarkan sebagai
sebuah dunia dalam game, oleh karena itu dunia
dalam game pada umumnya memiliki logika yang
dapat dimengerti oleh pemain, meskipun logika
tersebut kadang tidak sesuai dengan dunia nyata.
Dunia dalam game umumnya memiliki elemen-elemen
berikut:
1.
Characters
2.
Objects
Last Week Review
Mari kita lihat terlebih dahulu jenis-jenis game yang
ada.
Dunia dalam Game
Dunia dalam game dapat berisi simulasi dunia, atau
sebuah papan permainan, atau sebuah arena.
Dunia game dapat memiliki sistem koordinat
dua-dimensi atau tiga-dua-dimensi, berupa koordinat gerak
bebas atau menerapkan tile.
Characters
Karakter adalah elemen dalam game yang merupakan bagian
dari gameplay, dan memiliki peran dalam menentukan alur
pemainan. Jenisnya ada dua:
1.
Playable Characters (PC)
Dapat dikontrol secara langsung oleh pemain, baik secara
konsisten maupun bergantian. Beraksi menuruti perintah
langsung melalui input device.
2.
Non-Playable Characters (NPC)
Karakter yang seolah-olah bergerak otonom dan tidak
dapat dikontrol secara langsung oleh pemain. NPC dapat
berinteraksi dengan PC dan ada yang dapat dibuat
Characters
Karakter umumnya berupa makhluk yang hidup atau dapat
bergerak (animate objects). Karakter pasti memiliki atribut-atribut
yang menunjukkan kondisinya seperti health, power, shield, dsb.
Objects
Objek adalah elemen dalam game yang merupakan pelengkap
dan penghias alur permainan utama. Macamnya ada dua:
1.
Item
Dapat digunakan oleh karakter, dapat berinteraksi dengan
karakter dalam batas mengubah atribut karakter. Contoh
item adalah senjata, obat-obatan, potion, dkk.
2.
Terrain/Accessories
Objek-objek lain yang ada dalam dunia game, tidak dapat
berinteraksi dengan karakter, tetapi dapat mempengaruhi
keleluasaan gerak karakter seperti kecepatan dan arah
gerak. Contoh: tekstur tanah (gunung, air, aspal), pohon,
binatang, tembok (wall).
Beberapa objek merupakan gabungan antara item dengan
terrain/accessories, di mana objek
gerak (locomotion) karakter, tetapi juga memiliki sifat
dapat mempengaruhi atribut karakter, misalnya
nyawa.
Objects
Beberapa objek merupakan gabungan antara item dengan
, di mana objek tidak hanya mempengaruhi
) karakter, tetapi juga memiliki sifat
mempengaruhi atribut karakter, misalnya mengurangi
Beberapa objek merupakan gabungan antara item dengan
tidak hanya mempengaruhi
) karakter, tetapi juga memiliki sifat inert yang
Game Engine
Pada sebuah game, terdapat bagian-bagian khusus yang
dibuat untuk mengolah satu hal. Bagian-bagian ini disebut
“mesin” dari game atau game engine. Mesin-mesin ini
dapat digolongkan menjadi:
1.
Graphics Engine
a. Map/Terrain Engine
b. 3D Engine
c. Physics and Animation Engine
2.
Artificial Intelligence (AI) Engine
a.
Behavioral Engine
Game Engine
Mesin-mesin tersebut kemudian dikembangkan menjadi
tools atau modules yang dapat mencakup beberapa mesin,
dengan tujuan agar pembuat game tidak perlu membuat
seluruhnya dari nol.
Game Engine
Engine yang sudah jadi juga memastikan dari aspek
pemrograman bahwa manajemen penggunaan resource
telah dipastikan dengan baik dan tidak ada kebocoran.
Game HTML5
Secara umum, konstruksi file HTML yang dibutuhkan
hanyalah sebagai berikut:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="utf-8">
<title>Simple Canvas Game</title> </head>
<body>
<script src="js/game.js"></script> </body>
Game HTML5
File Javascript yang menyertai, berisi:
// Create the canvas
var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d");
canvas.width = 512; canvas.height = 480;
document.body.appendChild(canvas); // Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () { bgReady = true;
};
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () { heroReady = true;
};
heroImage.src = "images/hero.png"; // Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () { monsterReady = true;
};
// Game objects var hero = {
speed: 256 // movement in pixels per second };
var monster = {};
var monstersCaught = 0;
// Handle keyboard controls var keysDown = {};
addEventListener("keydown", function (e) { keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) { delete keysDown[e.keyCode];
// Reset the game when the player catches a monster var reset = function () {
hero.x = canvas.width / 2; hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly monster.x = 32 + (Math.random() * (canvas.width - 64)); monster.y = 32 + (Math.random() * (canvas.height - 64)); };
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down hero.y += hero.speed * modifier;
}
hero.x -= hero.speed * modifier; }
if (39 in keysDown) { // Player holding right hero.x += hero.speed * modifier;
}
// Are they touching? if (
hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) {
++monstersCaught; reset();
} };
// Draw everything
var render = function () { if (bgReady) {
ctx.drawImage(bgImage, 0, 0); }
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y); }
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y); } // Score ctx.fillStyle = "rgb(250, 250, 250)"; ctx.font = "24px Helvetica"; ctx.textAlign = "left"; ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32); };
// The main game loop var main = function () {
var now = Date.now(); var delta = now - then; update(delta / 1000); render();
then = now; };
// Let's play this game! reset();
var then = Date.now();
Game HTML5
Menambahkan input melalui mouse?
// Handle mouse controls var newX;
var newY;
var ditekan = false;
addEventListener("mousedown", function (e) { ditekan = true;
newX = e.pageX; newY = e.pageY; }, false);
addEventListener("mouseup", function (e) { ditekan = false;
Jangan lupa menambahkan baris-baris berikut pada
bagian update game objects:
if (ditekan) { hero.X = newX; hero.Y = newY; }
Hero bisa diseret? Tambahkan EventListener berikut:
addEventListener("mousemove", function (e) { if (ditekan){
newX = e.pageX; newY = e.pageY; }
}, false);
Menambahkan tembok
// Wall image
var wallReady = false;
var wallImage = new Image();
wallImage.onload = function () { wallReady = true;
};
wallImage.src = "images/brick_wall.png"; // Individual wall location
var wall = []; wall[0] = {}; wall[0].x = 100; wall[0].y = 100; wall[1] = {}; wall[1].x = 300; wall[1].y = 100; wall[2] = {}; wall[2].x = 100; wall[2].y = 300; wall[3] = {}; wall[3].x = 300; wall[3].y = 300;
Ubah respon setiap penekanan tombol keyboard dengan
menambahkan pembatas sesuai dengan logika gerakan
yang sedang dilakukan (geser kiri, geser kanan, dsb), misal:
if (38 in keysDown) { // Player holding up oldheroy = hero.y;
hero.y -= hero.speed * modifier; for(z=0;z<4;z++){
if(hero.x > wall[z].x-32 && hero.x < wall[z].x+32){ if(hero.y <= wall[z].y+32 && hero.y >= wall[z].y){
hero.y = oldheroy; }
} }
