HTML 5

GameMaker HTML5 dikembangkan oleh YoYoGames. GameMaker membuat user mudah membuat game tanpa harus mempelajari bahasa programming yang kompleks. Interface GameMaker bersifat drag and drop. GameMaker juga mendukung grafik 2D dan 3D. Dengan teknologi HTML5, produk game nya dapat berjalan di berbagai platform termasuk perangkat mobile seperti iOS dan Android.

User juga dapat membuat “action library” sendiri dengan fitur Library Maker. Untuk user yang advance, GameMaker menyediakan bahasa pemrograman scripting yang disebut Game Maker Language (GML), yang memungkinkan untuk membuat permainan yang lebih kompleks. GML juga mendukung penggunaan DLL. Hal ini memungkinkan fungsi ditulis dalam bahasa pemrograman lain seperti C + +, Delphi, Pascal dan lain-lain.

Untuk mendapatkan game engine ini, Anda harus membeli melalui official website nya

System Requirement
- Windows XP, Windows Vista or Windows 7
- DirectX 8-compatible graphics card with at least 32MB of video memory
- Pentium or equivalent processor
- DirectX 8-compatible sound card
- 156MB of memory or greater
- 800×600 or greater screen resolution with 16-bit or 32-bit colors

Key Features
- Drag and drop web development
- Internal image editor
- Internal code editor with user definable syntax colouring
- Preloaded with freeware images and sounds
- Highly flexible scripting language for advanced users
- Built in zooming level editor
- Includes advanced features like paths, timelines and flexible font control


Official Website :
http://www.yoyogames.com/gamemaker/html5

Web Tutorial GameMaker HTML5 :
http://wiki.yoyogames.com/index.php

Forum GameMaker HTML5 :
http://gmc.yoyogames.com/index.php



Berikut ini adalah tutorial untuk membuat game pada HTML5. Berikut cara-caranya:


1. Buat Canvas
dibawah ini adalah kode programnya:


var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);


maksud dari kode tersebut ialah membuat layer atau lahan untuk kita membuat game dengan tinggi dan lebar yang telah kita tentukan.


2. Memasukan Gambar
dibawah ini adalah kode programnya:


var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {

bgReady = true;
};
bgImage.src = "images/background.png";


maksud dari kode tersebut ialah memasukan gambar background.png yang ada pada folder images pada website kita.


3. Membuat Object Hero dan Monster
dibawah ini adalah kode programnya:


var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";
var hero = {
speed: 256
};
var monster = {};
var monstersCaught = 0;


maksud dari kode ini ialah membuat object hero dan monster yang menggunakan gambar hero.png dan monster.png yang ada pada folder image juga, lalu mendeklarasikan kecepatan dalam pergerakan hero dan mendeklarasikan nilai permainan.


4.Pengaturan Tombol Permainan
dibawah ini adalah kode programnya:


var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);


dalam sebuah permainan tentunya kita diperlukan tombol kontrol untuk melakukan aksi dari object kita tersebut, oleh karena itu kode di atas ialah kode yang membuat object merespon atas tombol arah yang kita tekan.


5. Peraturan Lokasi Object Permainan
dibawah ini adalah kode programnya:


var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};


berikut ini adalah kode jika hero mengenai monster, maka hero akan di tempatkan kembali pada tengah-tengah dari canvas dan posisi dari monster di random kembali agak posisinya tidak monoton.


6.Pengaturan Arah Object Hero
dibawah ini adalah kode programnya:


var update = function (modifier) {
if (38 in keysDown) {
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) {
hero.y += hero.speed * modifier;
}
if (37 in keysDown) {
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) {
hero.x += hero.speed * modifier;
}


kode diatas ialah kode yang menerangkan pergerakan dari object hero saat tombol arah pada keyboard di tekan, maka posisi x dan y hero akan bergerak dengan kecepatan yang telah di deklarasikan sebelumnya.


7. Pengaturan Nilai Permainan
dibawah ini adalah kode programnya:


if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};


kode diatas menerangkan suatu kondisi jika object hero kita telah mengenai object monster maka nilai dari monstersCought akan bertambah dan akan memanggil fungsi reset yang akan mereset posisi hero dan merandom posisi monster.


8. Render Object
dibawah ini adalah kode programnya:


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);
}
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};


kode diatas merupakan pengaturan tampilan dari object-object kita tersebut, dan memberikan tampilan nilai pada canvas kita tersebut dengan pengaturan font seperti yang ada pada kode program diatas.


9. Melakukan Pengulangan Game
dibawah ini adalah kode programnya:


var main = function () {
var now = Date.now();
var delta = now - then;


update(delta / 1000);
render();


then = now;
};


pada kode diatas menerangkan perintah saat permainan di ulang dan melakukan render ulang.


10. Memulai Permainan
dibawah ini adalah kode programnya:


reset();
var then = Date.now();
setInterval(main, 1);


diatas merupakan perintah untuk memulai permainan dengan pengaturan-pengaturan yang telah kita buat diatas.


Sumber :
http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
http://tutorial.gameedukasi.com/2011/11/gamemaker-html5/

Storyboard sibiru

Pada tulisan kali ini saya akan membahas tentang pembuatan storyboard game sibiru untuk tugas softskill. storyboard dari permainan ini kira-kira seperti ini. Game ini menceritakan tentang seekor burung bernama si biru yang harus berjalan melewati tengkorak untuk sampai pada tujuannya.

Dalam storyboard ini dapat dilihat jika permainan ini terdiri dari 2 karakter, yaitu seekor burung berwarna biru dan sebuah tengkorak.

Pertama-tama dalam scene pertama sibiru akan berada dalam sebuah pemakaman dimana disana terdapat sebuah tengkorak dengan kepala yang dapat terlempar tinggi keatas dan bila mangenai sibiru maka sibiru tersebut akan mati. Untuk menghadapinya sibiru harus mengambil apel yang ada pada pohon dan menembakkannya pada tengkorak agar tengkorak itu hilang dan sibiru bisa lewat.

Dalam level selanjutnya sibiru akan menghadapi tengkorak yang lebih banyak dari level sebelumnya untuk bisa lewat. 

Saat level selesai maka akan muncul perkamen kalah dan menang. Jika pemain menang maka akan muncul perkamen bertuliskan anda menang dan sebuah pilihan untuk melanjutkan permainan atau keluar. Jika pemain kalah maka akan muncul perkamen bertuliskan anda kalah dan pilihan untuk mengulangi permainan atau keluar.

Jika pemain menang dan memilih untuk melanjutkan permainan maka akan muncul game yang lebih sulit lagi. disini sibiru harus melewati tengkorak yang kepalanya bisa memecah manjadi banyak. Sibiru haru berusaha mengenai tengkorak tersebut hingga nyawa yang dimiliki tengkorak itu habis. 

Jika sibiru mengenai salah satu tengkorak maka sibiru akan mati dan kembali ke posisi semula, namun bila nyawa yang dimiliki sibiru habis maka pemain akan kalah.

Saat permainan selesai maka akan muncul perkamen kalah dan menang. Jika pemain menang maka akan muncul perkamen bertuliskan anda menang dan sebuah pilihan untuk mengulangi permainan atau keluar. Jika pemain kalah maka akan muncul perkamen bertuliskan anda kalah dan pilihan untuk mengulangi permainan atau keluar.