Karena game komputer sudah mainstrem, saya akhirnya tertarik dengan pengembangan game berbasis web yang bisa dimainkan lewat browser secara multiplayer. Saya pun mulai memperdalam Javascript yang sudah lama saya tinggal dan mulai sedikit terlupakan. Berencana membuat game multiplayer mengharuskan saya menguasai pemrograman server-side, itu membuat saya berkenalan dengan Node.js dan Socket.io. Di postingan sebelumnya saya sempat menyinggung mengenai kedua komponen ini, silahkan baca saja jika tertarik.
Sebelum melanjutkan pembahasan mengenai kedua komponen itu tadi, kita akan melompat ke segmen lain, yaitu mengenai canvas. Canvas adalah satu-satunya media yang efektif digunakan untuk menggambar di game berbasis web. Canvas bisa dibuat secara langsung dengan menuliskan tag <canvas> di source code HTML kita. Cara lain bisa dilakukan dengan appendElement dari javascript.
Yuk, kita liat contoh penggunaan canvas seperti apa...
<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
canvas {
margin:5px; border:1px solid red;
}
</style>
<script type='text/javascript'>
(taruh script di sini)
</script>
</head>
<body>
<canvas id='gameCanvas' width='300' height='300'></canvas>
</body>
</html>
Penting untuk menentukan properti width dan height di element canvas. Kemarin saya sempat tidak tahu soal ini. Yang terjadi adalah, ketika menggambar dengan mouse, posisi koordinat gambar menjadi tidak sesuai. Untuk sementara, pada kesempatan ini kita atur panjang dan lebarnya 300 piksel. Di kesempatan lain, saya akan menunjukkan bagaimana menyesuaikan ukuran canvas otomatis, sesuai dengan lebar browser.
Proses inisialisasi game, dilakukan saat browser selesai meload semua resource dari server. Ketika al ini terjadi, browser akan memanggil method window.onload() jika ada. Tugas kita adalah membuat fungsi yang harus dieksekusi pada saat inisialisasi dan memasangnya pada bagian ini.
Contoh sederhana berikut akan menggambar persegi 20 x 20 piksel di canvas pada koordinat (10,10).
var canvas;
var context;
window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10,10,20,20);
};
Sebelum dapat menggambar, element beserta konteksnya harus diketahui dulu. Elemen bisa diketahui dengan metode yang biasa dipakai saat merancang web. Selain getElementById, anda juga bisa menggunakan getElementsByClassName atau getElementsByTagName, tapi saya akui cara termudah adalah dengan menentukan id untuk canvas yang akan digunakan. Selnjutnya, daapatkan konteks canvas. Konteks inila yang menjadi objek perantara untuk menggambar di permukaan elemen canvas.
context = canvas.getContext("2d");
Sekarang, gambar kotaknya. dengan fillRect, ya
prototype:
void ctx.fillRect(x, y, width, height);
context.fillStyle = "red";
context.fillRect(10,10,20,20);
Jika ingin menggambar teks, gunakan fillText.
prototype:
void ctx.fillText(text, x, y [, maxWidth]);
ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);
Untuk menggambar bidang lain, atau jika ingin memanipulasi konteks canvas lebih jauh lagi, baca dokumentasi berikut. Lengkap banget, lho.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
Ditunggu tutorial selanjutnya, ya.
0 comments