Download - Game Engine dan HTML5 Game Sederhana

Transcript
Page 1: Game Engine dan HTML5 Game Sederhana

TIP 163

Game Engine

Topik 1 (Pert 2)

Game Engine dan Struktur Game HTML5 Sederhana

Dosen: Aditya Wikan Mahastama

Page 2: Game Engine dan HTML5 Game Sederhana

Last Week Review

Bagaimana dengan contoh game yang diminta untuk dipelajari?

Apa yang anda temukan?

Adakah kesulitan dalam menambahkan tembok?

Page 3: Game Engine dan HTML5 Game Sederhana

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

Page 4: Game Engine dan HTML5 Game Sederhana

Last Week Review

Mari kita lihat terlebih dahulu jenis-jenis game yang ada.

Page 5: Game Engine dan HTML5 Game Sederhana

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.

Page 6: Game Engine dan HTML5 Game Sederhana

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.

Page 7: Game Engine dan HTML5 Game Sederhana

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.

Page 8: Game Engine dan HTML5 Game Sederhana

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).

Page 9: Game Engine dan HTML5 Game Sederhana

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

Page 10: Game Engine dan HTML5 Game Sederhana

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

Page 11: Game Engine dan HTML5 Game Sederhana

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.

Page 12: Game Engine dan HTML5 Game Sederhana

Game Engine

Engine yang sudah jadi juga memastikan dari aspek

pemrograman bahwa manajemen penggunaan resource

telah dipastikan dengan baik dan tidak ada kebocoran.

Page 13: Game Engine dan HTML5 Game Sederhana

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>

Page 14: Game Engine dan HTML5 Game Sederhana

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";

Page 15: Game Engine dan HTML5 Game Sederhana

// 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";

Page 16: Game Engine dan HTML5 Game Sederhana

// 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);

Page 17: Game Engine dan HTML5 Game Sederhana

// 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

Page 18: Game Engine dan HTML5 Game Sederhana

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();

}

};

Page 19: Game Engine dan HTML5 Game Sederhana

// 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";

Page 20: Game Engine dan HTML5 Game Sederhana

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

Page 21: Game Engine dan HTML5 Game Sederhana

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);

Page 22: Game Engine dan HTML5 Game Sederhana

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)

Page 23: Game Engine dan HTML5 Game Sederhana

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;

Page 24: Game Engine dan HTML5 Game Sederhana

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;

} } } }

Page 25: Game Engine dan HTML5 Game Sederhana

Today’s Challenge

Bisakah membuat hero bergerak per tile (32 pixels?)

Page 26: Game Engine dan HTML5 Game Sederhana

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

Page 27: Game Engine dan HTML5 Game Sederhana

• 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)