Perkenalan EnchantJS

enchantjs logo
Logo EnchantJs

Halo, Jadi kemarin itu sedang mencari library untuk develop game yang berbasis HTML5, kebetulan lagi tertarik belajar tentang gamedev. Akhirnya menemukan library yang cocok dan mudah untuk di pelajari, yaitu EnchantJS. nah, EnchantJS ini didevelop oleh teman2 di Tokyo pada tahun 2011 dan sekarang mulai populer, krn tidak hanya digunakan di Jepang saja tapi juga negara di luar Jepang.

Salah satu alasan kenapa saya memilih EnchantJS krn lib ini selain jalan di browser PC juga dioptimasi untuk dijalankan di smartphone, kebetulan saya sedang mengembangkan game sederhana di Android. Selain itu library ini open source dan terdapat bbrp plugin yang sudah tersedia misal untuk animation, webGL, dan lengkapnya bisa dilihat disini

Struktur Objects

Structure Object

Struktur Object EnchantJS

Struktur object di EnchantJS cukup sederhana dan gampang dipahami. Base object di dalam EnchantJS adalah Node yang mempunyai child Entity dan Group. Kemudian child dari Entity adalah Label, Sprite, Map. sedangkan child dari Group adalah scene. Untuk lebih jelas nya ada di gambar berikut

Dalam EnchantJS penyusunan game menggunakan Scene yang di dalam nya terdapat macam2 object mulai dari label, sprite, dll. Di dalam satu game bisa terdapat beberapa Scene. Scene disusun seperti stack, dan hanya Scene yang berada di atas yg tampil. Saat pertama kali object game diciptakan akan dibuat scene default yang disebut rootScene.

Scene

Scene

Scene scene diatas disusun seperti stack, scene dasar adalah root scene, kemudian bisa ditumpuk dengan scene lain, atau diganti dengan scene lain.

Berikut sample code untuk menampilkan text ‘Hello world’ seperti biasanya :))

enchant();

window.onload = function() {

 game = new Core(window.innerWidth, window.innerHeight);

 game.onload = function() {

  game.rootScene.backgroundColor = 'black';

  var label = new Label('Hello World!');
  label.color = 'white';
  label.x = window.innerWidth / 2;
  label.y = window.innerHeight / 2;

  game.rootScene.addChild(label);
 }

 game.start();
}

Baiklah, sekian perkenalannya. Semoga bermanfaat dan sampai jumpa di tutorial berikutnya 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *