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

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

Kamu boleh memberikan komentar, atau melakukan trackback dari blog kamu.

Kata Kunci Terkait:

  • cara menggunakan construct 2
  • cara membuat game multiplayer
  • cara pakai construct 2
  • permainan multiplayer yang lebih dari 2 untuk java
  • contoh penggunaan node js
  • cara menggunakan construct2
  • cara membuat game java menjadi multiplayer
  • cara membuat game dengan construct 2
  • bagaimana cara membuat game multiplayer dengan node js
  • langkah-langkah membuat game client server dengan vb net
  • construct 2
  • latihan membuat game dengan construct 2
  • membuat aplikasi dengan construct 2
  • membuat game berbasis html 5 tutorial
  • membuat game construct
  • membuat game danganconstruct 2
  • java multiplayer game tutorial
  • download contoh website dengna node js
  • dodol multiplayer permeinan
  • construct 2 multi player
  • construct 2 socket
  • contoh contoh constrcuk 2
  • dodol multi player
  • contoh game dengan HTML5
  • contoh game menggunakan socket
  • contoh game multiplayer flash
  • contoh web node js
  • membuat game dengan html5
  • membuat game html5
  • membuat game html5 dengan construct2
  • multi player yg support html 5
  • nama game android poker multiplayer
  • node js
  • penggunaan nodejs
  • socket io construct 2
  • software membuat game flash multiplayer facebook
  • tutorial game construct 2
  • tutorial membuat game berbasis html5
  • tutorial membuat game berbasis web
  • tutorial membuat game di contruct 2
  • Menggunakan node js hosting
  • membuat timer game pada html5
  • tuto socket io construct 2
  • membuat game multiplayer
  • membuat game multiplayer dengan constract 2
  • membuat game multiplayer dengan construct 2
  • membuat game php dn html 5
  • membuat game poker dengan flash
  • membuat game poker dengan vb
  • membuat game poker di vb
  • membuat game terhubung php
  • membuat server multi player
  • tutorial membuat games dengan construct 2
  • 40 PERMAINAN PS1 dan bisa 2 player
  • cara buat real time online games
  • Cara Game bersama multiplayer
  • cara install construct 2
  • Cara memasang games java biar multiplayer
  • cara membangun game multiplayer
  • cara membuat game dari html5
  • cara membuat game dengan html5
  • cara membuat game flash multiplayer
  • cara membuat game html5
  • cara buat game real time
  • cara buat game online multiplayer
  • Cara buat game online berbasis web
  • Apa itu Contruct2
  • aplikasi game memakai node js
  • bagaimana cara Membuat Game Dengan Software Construct 2
  • belajar buat game di contruct
  • belajar buat game multiplayer
  • belajar membuat game buat android multiplayer online
  • cara agar game multiplayer di hp cross bisa main
  • cara bikin game flash poker online
  • cara buat game hp multiplayer
  • cara membuat game html5 android
  • cara membuat game jadi multiplayer
  • cara membuat games java agar bisa multiplayer
  • Cara membuat games multi player hp
  • cara membuat games multiplayer dengan html 5l
  • cara membuat real time game online
  • cara membuat server poker
  • cara mengedit game menjadi multiplayer melalui hp
  • Cara mengubah game java menjadi multiplayer
  • cara pakai construct
  • cara retry game pada construct 2
  • cara membuat games dari construck 2
  • cara membuat game real time online
  • cara membuat game pc menjadi multiplayer
  • cara membuat game java multiplayer
  • cara membuat game lan poker
  • cara membuat game lewat construct 2
  • cara membuat game menggunakan html5
  • Cara membuat game menjadi massive multiplayer
  • cara membuat game multiplayer dengan construct 2
  • cara membuat game multiplayer java
  • cara membuat game multiplayer online html 5
  • cara membuat game online client server
  • codingan kirim file melalui socket
    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

  2. Dzaky berkata:

    Pada July 10th, 2013 Jam 11:07 PM

    pertanyaan yang bagus.. 
    gimana om??..

  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.

Berikan Komentar

[+] yoyocici emoticons Istanto Personal Blog