Algorithma Path Finding #5: Membuat karakter berjalan mengikuti jalur yang dibuat oleh algorithma path-finding

In adalah pembahasan ke 5 dari seri Algorithma Path Finding. Pembahasan pertama bisa Anda baca pada tautan ini.

Dalam tulisan sebelumnya Kita telah membahas tentang penerapan algoritma path-finding untuk mencari jalur pada daerah yang di klik di layar pada layar yang bersifat responsif.

Dalam tulisan kali ini, Kita akan membahas bagaimana membuat karakter berjalan mengikuti jalur yang telah dibuat oleh algoritma path-finding tersebut, tentu saja pada kanvas yang responsif karena kita akan mencobanya bukan hanya di PC tapi juga di telepon gengam.

Demonya bisa dilihat disini:

Kode sumbernya bisa di unduh disini:

Videonya juga tersedia di youtube:



Penjelasan kode sumber:

Pembahasan sekarang lebih kompleks dari sebelumnya sehingga sekarang file javascript-nya Kita pisah menjadi beberapa bagian antara lain:

• Pathfinder.js: menangani algorithma path finding
• Game.js: file utama 
• Peta.js: menangani peta
• Window.js: menangani segala yang berhubungan dengan window seperti saat window di- resize.

Untuk selanjutnya Saya akan memakai file js terpisah.

Struktur Object Karakter:

Dalam pembahasan kali ini kita akan memiliki sebuah karakter yang berjalan mengikuti jalur path finding. Untuk itu kita perlu menyusun struktur untuk karakter ini.

let karakter = {

    jalur: [],

    jalurn: 0,

    pos: {

        x: 1,

        y: 1

    },

    status: st_idle

};

Struktur karakter ini adalah struktur minimal untuk karakter yang bisa berjalan. 

jalur: berisi informasi jalur hasil path-finding. Jalur disimpan dalam bentuk Array.
jalurn: informasi index ke berapa dari jalur di atas.
pos: berisi informasi posisi x dan y
status: status karakter saat ini

Karakter memiliki status yang didefinisikan dalam konstanta sbb:

const st_idle = 1;
const st_jalan = 2;

window.onload()

Saat saat event window.onload() Kita membuat interval untuk proses perulangan. Dalam perulangan ini kita memanggil fungsi update() dan render(). Fungsi update() akan memperbaharui informasi karakter sedangkan fungsi render() akan melakukan proses penggambaran.

setInterval(() => {
  update();
  render();
}, 100);


canvas.onclick()

Pada saat kanvas diklik, kita melakukan pengecekan terdahulu apakah saat ini status karakter sedang berjalan atau tidak. Bila karakter sedang berjalan maka kita langsung mengakhiri fungsi ini. Kita harus menunggu karakter selesai berjalan sebelum memberi perintah baru.

  if (karakter.status != st_idle)
    return;

Bila ternyata karakter sedang diam, maka kita lanjutkan prosesnya. Kita mencari posisi klik di layar. Metodenya sama dengan tulisan sebelumnya.

let rect = canvas.getBoundingClientRect();
let poslx = (e.clientX - rect.x) * canvasScaleX;
let posly = ((e.clientY - rect.y) * canvasScaleY);
let posx = Math.floor(poslx / 32);
let posy = Math.floor(posly / 32);

Kemudian kita mencari jalur ke posisi tersebut dari posisi karakter yang terakhir.

let hasil = pfCariJalan(karakter.pos.x, karakter.pos.y, posx, posy);

Kemudian kita mengubah status karakter dengan mengisi informasi yang dibutuhkan agar karakter mulai berjalan.

karakter.status = st_jalan;
karakter.jalur = hasil;
karakter.jalurn = -1;

Kita mengubah status karakter yang awalnya diam ke berjalan. Kita juga memasukkan jalur hasil algoritma path-finding.
Saat karakter belum berjalan, isi dari variable jalurn adalah -1. Saat karakter berjalan, maka jalurn akan mulai berjalan dari angka 0 dst. Hal ini karena Array dimulai dari angka 0.

fungsi Update():

Fungsi update berisi proses untuk memperbaharui informasi karakter.

function update() {
  if (karakter.status == st_idle) {}
  else if (karakter.status == st_jalan) {
    if (karakter.jalurn >= (karakter.jalur.length - 1)) {
      karakter.status = st_idle;
    }
    else {
      karakter.jalurn++;
      karakter.pos.x = karakter.jalur[karakter.jalurn][0];
      karakter.pos.y = karakter.jalur[karakter.jalurn][1];
   }
  }
}

Kita mengecek status dari karakter.
Bila statusnya st_idle, maka tidak ada yang dilakukan.
Bila statusnya st_jalan maka kita memperbaharui proses jalan.
Saat berjalan, kita mengecek apakah proses jalan sudah selesai. Hal ini ditandai dengan jalurn yang sudah melebihi panjang dari jalur path-finding.

Bila karakter sudah selesai berjalan, maka statusnya kita rubah ke st_idle.

if (karakter.jalurn >= (karakter.jalur.length - 1)) {
  karakter.status = st_idle;
}

Bila proses jalan belum selesai, maka kita menambah isi dari jalurn. Kemudian kita mengubah posisi karakter sesuai dengan informasi dari jalur path finding.

karakter.jalurn++;
karakter.pos.x = karakter.jalur[karakter.jalurn][0];
karakter.pos.y = karakter.jalur[karakter.jalurn][1];

Fungsi Render():

Fungsi ini berisi proses pengambaran. Kita menggambar peta, jalan dan jalur sesuai informasi yang ada. Kita tidak membahas terlalu dalam mengenai fungsi ini karena isinya Saya rasa sudah cukup jelas dan sudah sering dibahas di tulisan-tulisan sebelumnya.


Terima kasih sudah mampir dan membaca. Bila ada pertanyaan, jangan sungkan untuk bertanya.