Pada umumnya ukuran canvas pada game adalah menyesuaikan ukuran laman browser. Masalahnya ukuran ini akan selalu berbeda dan sewaktu-waktu dapat berubah saat run-time. Padahal, ukuran canvas harus diatur dengan nilai absolut, sesuai dengan ukuran laman browser. Untuk itu, kita harus memasang fungsi callback method window.resize(). Fungsi tersebut akan dieksekusi setiap kali windows berubah ukuran.
Agar tampilan laman responsif, kita sebaiknya juga mengatur beberapa properti dari elemen html dan tag <body>. Dengan pengaturan ini, ukuran body akan selalu menyesuaikan ukuran laman browser.
html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}
Setiap browser mungkin memiliki konfigurasi margin dan padding untuk body yang berbeda-beda. Kita sama sekali tidak membutuhkan properti ini. Dengan mengatur kedua nilai ini menjadi 0, tampilan keseluruhan akan menjadi fullscreen. Saat properti width dan height dari body diatur ke nilai 100%, akan terlihat 2 scrollbar muncul di sisi kiri dan bawah laman browser. Hilangkan dengan memasang properti overflow:hidden.
Setiap window mengalami resize, browser akan mengubah nilai properti innerWidth dan innerHeight. Kedua nilai inilah yang menjadi acuan untuk secara otomatis menyesuaikan ukuran canvas.
window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
Terakhir, agar proses resize juga dilakukan otomatis di awal saat inisialisasi, panggil method window.onresize() di bagian inisiaisasi.
window.onload = function(){
...
window.onresize();
...
};
Contoh lengkap source codenya ini, bro.
<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}
canvas {
border:1px solid red;
}
</style>
<script type='text/javascript'>
var canvas;
var context;
window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
window.onresize();
context.fillStyle = "red";
context.fillRect(10,10,20,20);
};
window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
</script>
</head>
<body>
<canvas id='gameCanvas' width='100%' height='100%'></canvas>
</body>
</html>
Eksperimen apa lagi yang akan kita lakukan selanjutnya?
Tetap update bersama Komputoo!
0 comments