Tutorial Steering Behaviour : Seek, menggunakan EnchantJS

Kalau sebelumnya sudah membahas sedikit tentang EnchantJS, beberapa waktu yang lalu saya membaca tentang tutorial Steering Behaviours di tutplus, dan keren banget itu. Di dalam tutorial tersebut terdiri dari bbrp konsep Steering Behaviours, sayangnya tutorial nya memakai bahasa AS3 yg saya tidak familiar. Nah, jadi kepikiran untuk membuatnya menggunakan EnchantJS. Karena di tutorial tersebut ada bbrp bagian, jadi nanti bahasnya juga satu persatu ya, sambil saya belajar :).

Untuk tutorial yang pertama yaitu tentang Seek, atau mengejar/mencari. nah jadi sebuah object bergerak ke arah object target. Implementasinya menggunakan perhitungan vector, kalo teman teman agak lupa tentang pelajaran vector mungkin bisa mengingat ingat kembali. Ini ada penjelasan yang bagus tentang Vector disini. Nah, intinya vector mempunyai magnitude dan direction misal 5km (magnitude) ke arah selatan (direction), atau jono menarik kardus dengan kekuatan 200 newton (magnitude) ke arah 60 derajat (direction). Yah, pokoknya seperti itu lah. bisa dicari di internet pembahasannya 🙂

Yang pertama mari kita buat object vector 2D sederhana, harusnya bisa lebih komplek tp yg penting gampang dipahami terlebih dahulu kan 🙂

// simple vector 2D prototype
var Vector2d = function(x, y){
 this.x = x;
 this.y = y;
}

Vector2d.prototype.length = function(){
 return Math.sqrt((this.x * this.x) + (this.y * this.y));
}

Vector2d.prototype.normalize = function(){
 var length = this.length();

 this.x = this.x / length;
 this.y = this.y / length;
}

Vector2d.prototype.subtract = function(vector){
 return new Vector2d(this.x - vector.x, this.y - vector.y);
}

Vector2d.prototype.add = function(vector){
 return new Vector2d(this.x + vector.x, this.y + vector.y);
}

Vector2d.prototype.scaleBy = function(number) {
 this.x = this.x * number;
 this.y = this.y * number;
}

Kode diatas adalah object vector 2D sederhana, mempunyai fungsi untuk menghitung panjang vector, pengurangan, penjumlahan, scaling, dan juga normalisasi. Yang perlu diperhatikan adalah tentang Normalisasi vector, dalam perhitungan graphic biasanya vector di normalisasi terlebih dahulu. Perhitungannya sangat sederhana, seperti terlihat pada kode diatas.

Kemudian mari kita buat object base Circle

// implement enchantjs
var BaseCircle = enchant.Class.create(enchant.Sprite, {
 initialize : function(r, color) {
  enchant.Sprite.call(this, r, r);

  // draw circle
  var surface = new Surface(r, r);
  surface.context.beginPath();
  surface.context.arc(r / 2, r / 2, r / 2, 0, Math.PI*2, true);
  surface.context.fillStyle = color;
  surface.context.fill();
  this.image = surface;

  // set default position
  this.moveTo(Math.round(Math.random() * (window.innerWidth / 2)), Math.round(Math.random() * (window.innerHeight / 2)));

  // properties
  this.position = new Vector2d(this.x, this.y);
  this.velocity = new Vector2d(0, 0);
  this.mass = 20;
  this.maxSpeed = 3;

  // add circle to scene
  game.currentScene.addChild(this);
 },

 move : function(x, y){
  this.moveTo(x, y);
  this.position.x = x;
  this.position.y = y;
 },

 setTarget : function(target) {
  this.target = target;
  this.target.position.x = target.x;
  this.target.position.y = target.y;
 },

 truncate : function(vector, max) {
  var i;
  i = max / vector.length();
  i = i < 1 ? 1 : (i > max ? max : i);

  vector.scaleBy(i);
 }
});

Kegunaan kode diatas adalah untuk menampilkan lingkaran, selain itu object BaseCircle juga dapat menentukan object target nya, yang juga sama2 BaseCircle

penjelasan selanjutnya akan ditambahkan :)).

Source Code :  source code

Demo : demo

Leave a Reply

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