Game Engine dan HTML5 Game Sederhana

download Game Engine dan HTML5 Game Sederhana

of 27

  • date post

    23-Jan-2017
  • Category

    Documents

  • view

    224
  • download

    2

Embed Size (px)

Transcript of 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

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

    Simple Canvas Game

  • 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

  • // 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 wall[z].x-32 && hero.x < wall[z].x+32){

    if(hero.y = wall[z].y){ hero.y = oldheroy;

    } } } }

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