Kumpulan Informasi Loker dan Kuliah di Indonesia

Monday, November 23, 2015

Web Game : Membuat Animasi Bergerak

3:55:00 PM Posted by Abdul Rohman No comments
Animasi dalam sebuah web game merupakan komponen yang paling menonjol baik yang menggunakan flash intregrasi web maupunyang menggunakan HTML5. Animasi sebenarnya terdiri dari beberapa gambar yang di render bergantian pada waktu yang tertentu atau dapat juga berupa animasi gerak.

Untuk membuat animasi di dalam HTML 5, memerlukan adanya pengulangan yang terjadi secara terus menerus pada objek yang menjadi tujuan.

Dibawah ini beberpa hal yang perlu diperhatikan dalam membuat animasi yaitu:
Menerapkan clear canvas dalam halaman web supaya gambar yang sebelumnya hilang.
Membuat variable yang dapat diubah-ubah secara menyeluruh.
Dalam gambar Image menggunakan variabel yang dapat diubah-ubah.
Setiap Image berganti nilai sehingga image akan digambarkan pada posisi yang berbeda.

Contoh Script HTML 5 yaitu:
<html>
    <head>
        <style>
        canvas {
            border-width: 1px;
                border-style: solid;       
        }
        </style>
        <script>  
           
            var canvas;
            var ctx;
            var imgX = 0;
            var img = new Image();
           
    window.onload = function(){                    
                        img.src = "DI ISI GAMBAR";
                       
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");             
                       
                        setInterval(draw, 1.6);
            };
           
            function draw() {
                        ctx.fillStyle = "#fff";
                        ctx.fillRect(0,0,canvas.width,canvas.height);
                        ctx.drawImage(img, imgX, 0);
                        imgX++;
                       
                        if (imgX > canvas.width) {
                                    imgX = 0;
                        }
            }
        </script>
    </head>
    <body>
    <center>
        <canvas id="myCanvas" width="640" height="480">
        </canvas>
    </center>
    </body>
</html>


Tuliskan script diatas diatas dalam notepad dan simpan dengan file dengan extend .html, contoh; “gambar animasi.html”. Dan selanjutnya file tersebut bisa dieksekusi sehingga menampilkan halaman web seperti gambar diatas.

0 komentar:

Post a Comment