JQuery

Tutorial membuat animasi 2D sprite

Tutorial membuat animasi 2D sprite

Apakah animasi sprite?

Animasi sprite yang pada dasarnya adalah gambar besar yang berisi sejumlah besar gambar yang lebih kecil. Menganggapnya sebagai sebuah film strip dimana setiap frame adalah bagian animasi berikutnya dalam urutan. Ide sprite adalah bahwa Anda hanya perlu memuat satu gambar dan akan berisi semua gambar lebih kecil yang dibutuhkan untuk membuat animasi. Anda hanya perlu background sebuah gambar dan akan muncul untuk menghidupkan sprite. Untuk informasi lebih lanjut tentang sprite, check out tutorial berikut.

Ttutorial ini akan menunjukkan kepada Anda. Anda dapat melihatnya muncul sebagai sebuah animasi, namun kami hanya memindahkan posisi latar belakang gambar yang lebih besar untuk menciptakan ilusi gerakan.

 

Mengapa Anda harus menggunakan sprite?

Sebelum gambar dan css item dapat ditampilkan pada halaman web Anda, browser Anda harus meminta item seperti javascript file, Gambar, css file, dll. Setiap permintaan membutuhkan waktu dan browser Anda harus menunggu respon dan kemudian men-download file untuk itu akan ditampilkan. Jadi singkatnya, item kurang berarti lebih sedikit waktu untuk meminta dan men-download item, berarti lebih sedikit waktu untuk memuat halaman. Jadi menggunakan sprite akan meningkatkan kecepatan di mana situs web Anda akan berkurang beban.

 

Tutorial 2D sprite animasi

Di atas adalah gambar sprite orang besar yang saya gunakan untuk membuat animasi sprite untuk tutorial ini. Kami juga menggunakan javascript untuk memindahkan posisi gambar latar belakang. Dalam contoh, di bawah ini kita melakukan animasi ini setiap 300ms. Untuk mencapai animasi yang halus, kita perlu untuk mencapai 25 frame per detik, namun ini akan meningkatkan ukuran gambar sprite, jadi kita akan melakukannya waktu frame per detik.

 

Sekarang untuk kode untuk mendapatkan ini semua berjalan dengan baik.

CSS File

#idemastahanimation {
    /* our idemastah sprite png */
    background: url(jump.png);
    width: 1312px;
    height: 245px;
    }

 

Kode JavaScript

Berikut adalah fungsi javascript yang cepat untuk pindah posisi latar belakang animasi sprite ke frame berikutnya. Kita mulai pada bingkai 1 dan untuk setiap frame animasi kita bergerak 512px ke kiri karena setiap bingkai 512px lebar oleh 512px tinggi. Pindah posisi gambar latar belakang setiap bingkai menciptakan ilusi gerakan, seperti sebuah film terdiri dari 25 atau 29 frame.

$(document).ready(function(){
            // call the next() function every 100 ms.
            setInterval(next, 300);
    });

    // first frame of animation
    var frame = 1;
    // move the sprite animation to the next frame
    //      i.e. move background position to the next image in the sequence
    function next()
    {
            // Set the position of the sprite image 512px more to the left on each frame.
            var left = 512 * frame;
            // top stays 0 since all the images have Y positioned at 0
            var top = 0;
            document.getElementById('idemastahanimation').style.backgroundPosition =   '-'+left+'px -'+top+'px'; 
            frame++;
    }

 

Kode HTML

Selanjutnya kita membuat tag div mana animasi sprite akan diterapkan ke website.

<div id="idemastahanimation" title="Sprite Animation">div>

 

Sekarang sebagai fungsi javascript next() berjalan, itu akan memindahkan gambar latar belakang ke kiri yang akan menciptakan ilusi animasi.

 

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.