Membuat Game Multiplayer HTML5 Dengan Construct2, NodeJS, dan Socket.IO

Pada Wednesday, 18 April, 2012 Jam 13:24 Di Tulis Oleh Istanto Adi Nugroho
Artikel dalam kategori dodol, Iseng, Ngawur, Pribadi

BACA ARTIKEL INI DALAM FORMAT AMP Membuat Game Multiplayer HTML5 Dengan Construct2, NodeJS, dan Socket.IO

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Artikel ini adalah tingkatan lebih lanjut dari artikel construct 2 review. Seperti sudah kita ketahui sebelumnya construct 2 adalah HTML5 game engine terbaik dan termudah (menurut saya pribadi). Masalahnya adalah construct 2 sampai saat ini belum (resmi) men-support game multiplayer. Kalian pasti pernah dengar berita heboh tentang mozilla yang me-release multiplayer html5 dengan nama “browser quest” teknologi itu sekarang sudah kuno he he. Kalian pasti pernah bermain game facebook seperti farmville atau texas hold’em poker, ketahuilah trend gaming untuk saat ini adalah game yang berbasis web browser, simple, dapat dimainkan bersama teman-teman.

:m005 Pada artikel pendek kali ini akan saya coba tuliskan bagaimana sebenarnya cara membuat game multiplayer HTML5. Kunci dari sebuah game multiplayer adalah paket! kemudian socket yang digunakan untuk mengirimkan dan menerima paket. Beruntungnya kita NodeJS memiliki sebuah modul bernama socket.io pertanyaannya apakah harus wajib menggunakan NodeJS? Tentu tidak! ada banyak bahasa pemrograman yang lain yang menggunakan socket misalnya visual basic dengan winsocket dan lain sebagainya.

Lalu bagaimana sebenarnya kunci dari sebuah game multiplayer. Construct 2 bertugas membuat klient dan melakukan komunikasi via socket. Yang menjadi tugas kita sebenarnya simple saja, kita harus melakukan coding server agar semua paket yang dikirimkan atau diterima klient bisa diproses secara realtime. Pada contoh kali ini kita akan menggunakan NodeJS sebagai server dan socket.io sebagai socket penghubung antara client dan server.

Langkah pertama yang harus kita lakukan adalah menginstall NodeJS dan Socket.io mudah kok caranya. Silahkan download NodeJS kemudian buatlah sebuah folder dengan nama node_modules pada drive c jadi pathnya akan seperti ini “c:\node_modules” kemudian install socket.io pada folder node_modules.

* Tunggu sampai proses instalasi selesai.

Setelah NodeJS dan Socket.IO terinstall saatnya kalian download construct 2 kemudian install. Setelah sampai pada tahap ini saatnya tugas kalian membuat file untuk server menggunakan bahasa pemrograman JAVA, Kebetulan sudah ada contoh yang cukup bagus, Buatlah sebuah file dengan nama server.js kemudian isi dengan kode dibawah ini:

// variabel konstanta
var entities = [], count = 0;
var io = require(“socket.io”).listen(81); // listen pada port 81
var INITIAL_X = 25;
var INITIAL_Y = 25;
var INITIAL_VEL_X = 0;
var INITIAL_VEL_Y = 0;

// matikan mode debug
io.set(‘log level’, 1);

// event pada saat socket terhubung
io.sockets.on(“connection”, function (socket) {
// increment nomor setiap entities
var myNumber = count++;
var mySelf = entities[myNumber] = [myNumber, INITIAL_X, INITIAL_Y, INITIAL_VEL_X, INITIAL_VEL_Y];

// mengirimkan paket init (create object) posisi dan ID pada setiap pemain yang terhubung pada server
console.log(myNumber + ‘ mengirimkan: ‘ + ‘init,’ + mySelf[0] + ‘,’ + mySelf[1] + ‘,’ + mySelf[2]);
socket.send(‘init,’ + mySelf[0] + ‘,’ + mySelf[1] + ‘,’ + mySelf[2]);

// mengirimkan paket create (create object) posisi dan ID pada setiap pemain yang terhubung pada server
for (var entity_idx = 0; entity_idx < entities.length; entity_idx++) {
if (entity_idx != myNumber) {
entity = entities[entity_idx];
if (typeof (entity) != “undefined” && entity != null) {

console.log(myNumber + ‘ mengirimkan: create untuk ‘ + entity_idx);
socket.send(‘create,’ + entity[0] + ‘,’ + entity[1] + ‘,’ + entity[2]); // mengirimkan klient yang baru terhubung pada klient yang telah terhubung
}
}
}

// mengirimkan paket create kepada semua pemain yang terhubung pada server
socket.broadcast.emit(“message”,’create,’ + mySelf[0] + ‘,’ + mySelf[1] + ‘,’ + mySelf[2]);

// kondisi saat socket menerima paket
socket.on(“message”, function (data) {
var new_data = data.split(‘,’);
if (new_data[0] == ‘update’) {
mySelf[1] = new_data[1];
mySelf[2] = new_data[2];
mySelf[3] = new_data[3];
mySelf[4] = new_data[4];
// beritahukan semua klient tentang update data saya
socket.broadcast.emit(“message”,’update,’ + mySelf[0] + ‘,’ + mySelf[1] + ‘,’ + mySelf[2] + ‘,’ + mySelf[3] + ‘,’ + mySelf[4]);
}
else if (new_data[0] == ‘shoot’) {
var shoot_info = [];
shoot_info[0] = new_data[1];
shoot_info[1] = new_data[2];
shoot_info[2] = new_data[3];

// beritahukan semua klient tentang update data saya
socket.broadcast.emit(“message”,’shoot,’ + mySelf[0] + ‘,’ + shoot_info[0] + ‘,’ + shoot_info[1] + ‘,’ + shoot_info[2]);
}
});

});

Setelah selesai simpanlah server.js kemudian buka folder tempat kalian menyimpan server.js lalu ketikkan “node server.js” Untuk contoh client saat ini belum bisa saya publikasikan silahkan kalau yang mau untuk belajar serius/untuk proyek/untuk pekerjaan bertemu langsung dengan saya :m000 tetapi yang jelas intinya klient menggunakan plugin socket (silahkan cari digoogle), klient akan mengirimkan dan menerima paket kemudian memprosesnya begitu juga dengan server.

Hasilnya akan kurang lebih seperti ini dimana setiap entities (object) akan bisa melihat kegiatan entities (object) lain. Sama seperti sebuah game multiplayer misalnya ragnarok atau game online apapun yang biasa kalian mainkan secara realtime.

Kalau ada pertanyaan kenapa harus HTML5 dan kenapa harus NodeJS? Kalau kalian orang yang berpikiran kedepan kalian akan tau alasannya, ya karena keduanya adalah solusi cross platform! bisa diinstall dan dimainkan di linux, windows, android atau system operasi apapun sehingga kemungkinan hasil karya kalian akan lebih dikenal orang banyak, kesempatan dan peluang pun akan terbuka sangat lebar.

Sekian dulu.. Salam GoBlog! :m039

Kata Kunci Terkait:

Kamu boleh memberikan komentar, atau melakukan trackback dari blog kamu.
    Digg Del.icio.us StumbleUpon Reddit Twitter RSS

3 Komentar pada artikel “Membuat Game Multiplayer HTML5 Dengan Construct2, NodeJS, dan Socket.IO”

  1. Nisa R berkata:

    Pada June 13th, 2013 Jam 3:54 PM

    lalu untuk settingan di constructnya bagaimana? saya masih kurang paham

    [Balas]

  2. Dzaky berkata:

    Pada July 10th, 2013 Jam 11:07 PM

    pertanyaan yang bagus.. 
    gimana om??..

    [Balas]

  3. skip hire Bedfordshire berkata:

    Pada September 1st, 2013 Jam 11:42 PM

    It’s great that you are getting ideas from this post as
    well as from our discussion made at this place.

    [Balas]

Berikan Komentar

[+] yoyocici emoticons Istanto Personal Blog