game engine dan html5 game sederhana
Post on 23-Jan-2017
258 Views
Preview:
TRANSCRIPT
TIP 163
Game Engine
Topik 1 (Pert 2)
Game Engine dan Struktur Game HTML5 Sederhana
Dosen: Aditya Wikan Mahastama
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-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 menuruti perintah melalui stimulus oleh PC.
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 objekgerak (locomotion) karakter, tetapi juga memiliki sifat dapat mempengaruhi atribut karakter, misalnyanyawa.
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 mengurangi
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 b. Tactics 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> </html>
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;
}; bgImage.src = "images/background.png";
// 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; }; monsterImage.src = "images/monster.png";
// 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];
}, false);
// 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;
} if (37 in keysDown) { // Player holding left
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();
setInterval(main, 1); // Execute as fast as possible
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;
}, 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);
Tahu dari mana mousemove? Gunakan logika analogi! (atau mbah Google)
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;
} } } }
Today’s Challenge
Bisakah membuat hero bergerak per tile (32 pixels?)
Konklusi
• Sintaks JS mirip dengan C atau C++, tetapi lebih luwes
• Deklarasi variabel bertipe data variant, kecuali ditegaskan, dan bisa memiliki nilai awal
• Nama method, atribut dan variabel dimulai dengan huruf kecil
• Tak ada fungsi main(), program dieksekusi secara linier • Method pemuncul kanvas adalah setInterval(fungsi utama, interval) yang digunakan untuk merefresh penggambaran kanvas dengan interval tertentu, oleh karena itu
• Fungsi utama harus berisi update penggambaran layar
• Deklarasi array dapat disingkat dengan [], deklarasi objek dapat disingkat dengan {}
• Deklarasi sebagai sebuah objek diperlukan untuk dapat menambahkan atribut
PR Next Week:
Buatlah hero bisa menembakkan sebuah peluru kuning (cari gambar bola kuning di internet ukuran 32x32)
top related