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 duadimensi 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).
Objects Beberapa objek merupakan gabungan antara item dengan terrain/accessories,, di mana objek tidak hanya mempengaruhi gerak (locomotion)) karakter, tetapi juga memiliki sifat inert yang dapat mempengaruhi atribut karakter, misalnya mengurangi nyawa.
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: <meta charset="utf-8">
Simple Canvas Game <script src="js/game.js">
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)
