lifelong learner — urip iku urup, currently working on accenture.

canvas 2d – move object

0
Degananda.com -

Hampir dalam setiap game selalu ada object yang bergerak. Pada canvas dihtml kita juga dapat menggerakan object didalamnya. Tentunnya gerakan ini harus ditrigger oleh suatu user event misalkan mouse click, keypress dan lain sebagainnya.

Canvas 2d merupakan fitur dari html 5 yang dapat dimanfaatkan untuk membuat game web based. Object yang bergerak adalah sesuatu yang mendasar dan fundamental. Logika untuk menggerakan object pada canvas adalah dengan konsep berikut ini

1. Buat object

Ini adalah kondisi dimana object tersebut pertama kali dibuat. Pada saat kita membuat object tentunya harus mendefinisikan letak x dan y dari object tersebut pada canvas. Pembuatan object dapat berasal dari trigger suatu event ataupun memang sejak awal object tersebut dibuat.

2. Hilangkan object

Setelah object dibuat dan ada suatu trigger, misalnya keypress pada keypad(up/down/left/right) arrow pada keyboard maka object yang akan kita gerakan harus dihapus dari canvas. Kita akan memanfaatkan fungsi contex.clearRect() untuk menghapus object tersebut. Perlu di ketahui bahwa fungsi clearRect() ini memang dapat menghapus object secara parsial(dengan mendefinisikan posisi x,y beserta ukurannya, width/height) namun hal itu sangat susah untuk mendapatkan posisi yang presisi. Sehingga, mudahnya menghapus object ini kita lakukan pada seluruh canvas dan nantinnya object-object yang dihapus tersebut akan dibuat kembali.

3. Buat object dengan posisi baru

setelah object yang berpindah posisi hilang dengan cara menghapus semua object pada canvas maka kita akan membuat object yang telah dihapus tersebut dengan posisi yang baru. Misalkan object awal berada di x =10 dan y=10 maka ketika kita ingin menggerakannya ke kanan maka kita harus tambahkan y. Pertambahan ini dapat berupa 1,2,3,4 dst namun perlu di ingat semakin kecil pergeserannnya akan semakin smooth animasi perpindahannya.

Online Demo @ js fiddle

Untuk mencoba secara online silahkan akses link dibawah ini

https://jsfiddle.net/yzLsygvs/

Event

untuk membuat perubahan biasannya akan diawali dengan event tertentu. Event-event tersebut dapat berupa :

  1. Mouse click
  2. Keypress pada keypad keyboard
  3. Krigger dari perubahan pada variabel
  4. dan lain sebagainnya.

Namun kebanyakan control memang dimulai dari user input(keyboard atau mouse). Sehingga peranan event listener dalam menggerakan object dalam canvas sangat penting.

Pre requisiites

Sebelum mengikuti ulasan ini kami sangat sarankan untuk membaca dua ulasan sebelum ini mengenai canvas dan event listener. Karena dua hal tersebut diperlukan untuk menggerakan object pada canvas.

Implementasi

1. Buat canvas

Buatlah canvas dengan ukuran 800(width) x 500 (height). Kami membuatnya dengan menggunakan javascript dan buat variabel untuk menampung nilai dari context. Kode yang digunakan adalah seperti berikut ini

// membuat canvas
var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 500;
document.body.appendChild(canvas);

var contex = canvas.getContext("2d");

2. mendefinisikan posisi awal object

Langkah kedua yaitu membuat variabel yang nantinnya akan menampung posisi x dan y object kita. Mengapa memerlukan ini? karena untuk menggerakan suatu object secara otomatis kita membutuhkan posisi sebelum bergerak dan posisi sesudah bergerak sehingga kita harus menyimpannya dalam suatu variabel

var pos = {
    x : 30,
    y : 30
}

3. Membuat fungsi membuat object

kita akan membuat banyak sekali object. Ingat konsep awal untuk menggerakan object yaitu buat -> hapus -> buat. Oleh karena itu proses pembuatan object harus diletakan didalam fungsi agar dapat dipanggil pada kondisi – kondisi lainnya.

function drawCircle(){
    // clear canvas
    contex.clearRect(0,0,800,500);
    contex.beginPath();
    contex.arc(pos.x,pos.y,25,0,25);
    contex.stroke();
    contex.closePath();
}

// lignkaran pertama
drawCircle();

pada fungsi diatas sebelum kita membuat object ke canvas maka akan dipanggil fungsi clearRect() yang berguna untuk menghapus object. Sebelum object dibuat hapus seluruh object yang ada dicanvas. Ini mengikuti kaidah buat object -> hapus object -> buat object agar kita dapat menggerakan object tersebut.

4.  Membuat event listener

Kita akan menggerakan object setelah user menekan tombol/keypad arrow(up/down/left/right). Object tersebut akan bergerak sebanyak 50px ke kanan/kiri/atas ataupun ke bawah. Berikut ini ada kode untuk eventlistener yang mengakomodasi kasus diatas.

addEventListener("keydown", function(res){
    if(res.key == "ArrowRight"){
        pos.x += 50;
        drawCircle();
    } else if(res.key == "ArrowLeft"){
        pos.x -= 50;
        drawCircle();
    } else if(res.key == "ArrowDown"){
        pos.y += 50;
        drawCircle();
    } else if(res.key == "ArrowUp"){
        pos.y -= 50;
            drawCircle();
    }
});