Kumpulan Informasi Tentang Kuliah

Friday, December 4, 2015

Web Game : Membuat Animasi Gambar

1:10:00 PM Posted by Abdul Rohman No comments
Dalam web game Animasi merupakan komponen yang tidak terlepaskan baik Animasi Gerak, Animasi Bola dan lain-lain, dan seolah-olah bentuk atau gambar yang kita ciptakan bias hidup atau bergerak. Selain Animasi Gerak dan Animasi Bola, Animasi Gambar juga sering digunakan dalam pembuatan web game programming.

Animasi gambar merupakan animasi yang terbentuk dari sebuah image, dalam melakukan penggambaran dilakukan pada image tertentu ( frame ) sehingga seolah-olah tercipta sebuah gerakan.

Beberapa hal perlu diperhatikan dalam membuat animasi gambar yaitu :

1. Membuat gambar atau image terlebih dahulu dengan menampilkan 2 atau lebih gambar yang berbeda dalam satu gambar.


2. Melakukan penggambaran sesuai dengan posisi frame animasi
3. Melakukan perubahan secara increment dan mengembalikan nilainya jika sudah melampui batas maksimal jumlah frame.

Dibawah ini adalah langkah-langkah untuk membuat animasi gambar yaitu sebagai berikut:

1. Buka notepad atau notepad++
2. Tuliskan script dibawah ini dalam notepad atau notepad++
<html>
    <head>
        <style>
        canvas {
            border-width: 1px;
                border-style: solid;       
        }
        </style>
        <script>  
           
            var canvas;
            var ctx;
            var frame = 0;
            var totalFrame = 5;
            var img = new Image();
           
    window.onload = function(){                    
                        img.src = "pohon animasi.png";
                       
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");             
                       
                        setInterval(draw, 200);
            };
           
            function draw() {
                        ctx.fillStyle = "#fff";
                        ctx.fillRect(0,0,canvas.width,canvas.height);
                        ctx.drawImage(img, (img.width/totalFrame)*frame, 0,
                                    img.width/totalFrame, img.height,
                                    0, 0, img.width/totalFrame, img.height);
                        frame++;
                       
                        if (frame >= totalFrame) {
                                    frame = 0;
                        }
                                               
                        ctx.font = "20pt Calibri";
                        ctx.fillStyle = "#000";
                        ctx.fillText("Frame: " + frame, 10, 180);
            }
        </script>
    </head>
    <body>
    <center>
        <canvas id="myCanvas" width="640" height="480">
        </canvas>
    </center>
    </body>
</html>

Keterangan:
Tulisan berwarna merah adalah variable global, yaitu frame dan total frame.
Tulisan berwarna biru, posisi image sesuai dengan posisi frame
Tulisan berwarma Hijau, perintah melakukan increment frame dan kemudian mengecek jika sudah mencapai total frame maka frame akan kembali atau reset ke 0.

Tulisan berwarna orange adalah tulisan informasi frame yang sedang aktif atau yang sedang digambar.

3. Simpan script diatas dengan menggunakan extend atau tipe file ".html"
4. Bukalah file tersebut dan hasilnya seperti gambar yang terletak paling atas.

0 komentar:

Post a Comment

close
==[ Klik disini 1X ] [ Close ]==