Cara Membuat Animasi dengan Tag Canvas HTML5 - dummies

Meskipun tag kanvas HTML5 mungkin tidak menggantikan Flash sebagai mekanisme untuk menerapkan permainan dan animasi di browser, cukup mudah untuk menambahkan animasi ke animasi. gambar kanvas Kuncinya adalah menggunakan fitur animasi yang sudah terpasang pada browser.

Struktur dasar lingkaran animasi di kanvas HTML5

Animasi umumnya memerlukan sebuah organisasi khusus yang disebut lingkaran animasi . Struktur dasar dari lingkaran animasi bekerja sama dalam bahasa apa pun:

1. Inisialisasi.

   Buat aset, termasuk latar belakang dan objek yang akan Anda gunakan. Objek yang akan dimanipulasi secara real time biasanya disebut sprite . Umumnya, ini dilakukan saat program berjalan pertama kali, untuk menghemat waktu selama eksekusi utama. Anda juga bisa mengatur konstanta untuk ukuran gambar, ukuran tampilan, frame rate, dan nilai lain yang tidak akan berubah selama eksekusi game.

2. Tentukan frame rate.

   Animasi dan permainan bekerja dengan memanggil fungsi berulang kali pada tingkat yang ditentukan. Dalam JavaScript, Anda biasanya menggunakan fungsi setInterval () untuk menentukan fungsi berulang. Rasio frame menunjukkan seberapa sering fungsi yang ditentukan akan dipanggil. Permainan dan animasi biasanya berjalan pada tingkat frame antara 10 dan 30 frame per detik. Frame rate yang lebih cepat lebih halus, tapi mungkin tidak bisa dipertahankan dengan beberapa perangkat keras.

3. Evaluasi keadaan saat ini.

   Setiap sprite benar-benar elemen data. Selama setiap frame, tentukan apakah sesuatu yang penting telah terjadi: Apakah pengguna menekan tombol? Apakah elemen seharusnya bergerak? Apakah sprite meninggalkan layar? Apakah dua sprite conk satu sama lain?

4. Ubah data sprite.

   Setiap sprite umumnya memiliki data posisi atau rotasi yang dapat dimodifikasi pada setiap frame. Biasanya ini dilakukan melalui transformasi (translasi, rotasi, dan skala), meski terkadang Anda bisa beralih di antara gambar.

5. Kosongkan latar belakangnya.

   Animasi benar-benar serangkaian gambar yang digambar dengan cepat di tempat yang sama. Biasanya, Anda harus menghapus latar belakang di awal setiap bingkai untuk membersihkan gambar bingkai terakhir.

6. Redraw semua sprite.

   Setiap sprite digambar ulang dengan menggunakan data barunya. Sprite tampak bergerak karena digambar di lokasi atau orientasi baru.

Membuat konstanta dari fitur animasi di kanvas HTML5

Membangun sebuah program yang memutar gambar di dalam kanvas memerlukan beberapa batch kode. Tugas pertama adalah mengatur berbagai variabel dan konstanta yang menggambarkan masalah.Kode berikut dibuat di luar fungsi karena ini menggambarkan nilai yang akan dibagi di antara fungsi:

gambar var; var con; var goofyPic; sudut var = 0; CANV_HEIGHT = 200; CANV_WIDTH = 200; SPR_HEIGHT = 50; SPR_WIDTH = 40;

Variabel gambar akan mengacu pada elemen kanvas. Variabel con akan menjadi konteks gambar, goofyPic adalah gambar yang akan diputar, dan sudut akan digunakan untuk menentukan berapa besar gambar yang diputar saat ini. Nilai lainnya adalah konstanta yang digunakan untuk menggambarkan tinggi dan lebar kanvas serta sprite.

Menggelar animasi di kanvas HTML5

Gunakan mekanisme onload tubuh untuk memulai beberapa kode segera setelah halaman selesai dimuat. Namun, halaman sekarang memiliki dua fungsi. Fungsi init () menangani inisialisasi, dan fungsi draw () akan dipanggil berulang kali untuk menangani animasi yang sebenarnya. Berikut kode di init () function:

function init () {drawing = document. getElementById ("gambar"); con = gambar getContext ("2d"); goofyPic = dokumen getElementById ("goofyPic"); setInterval (draw, 100);} // end init

Tugas init () adalah menginisialisasi sesuatu. Dalam contoh khusus ini, berbagai elemen (kanvas, konteks, dan gambar) dimuat ke variabel JavaScript, dan animasi disiapkan. Fungsi setInterval () digunakan untuk mengatur lingkaran animasi utama. Dibutuhkan dua parameter:

• Fungsi berulang: Parameter pertama adalah nama fungsi yang akan dipanggil berulang kali. Dalam hal ini, fungsi undian akan dipanggil berkali-kali.

• Nilai penundaan: Parameter kedua menunjukkan seberapa sering fungsinya dipanggil dalam milidetik (1/1000 detik). Keterlambatan 100 akan membuat frame rate 10 frame per detik. Keterlambatan 50 akan menyebabkan frame rate 20 frame per detik, dan seterusnya.

Memberi animasi pada frame saat ini di kanvas HTML5

Fungsi draw () akan sering dipanggil berturut-turut. Secara umum, tugasnya adalah membersihkan bingkai, menghitung keadaan sprite baru, dan menggambar ulang sprite. Inilah kodenya:

fungsi draw () {// clear background con. fillStyle = "putih"; menipu. fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH); // tarik perbatasan con. strokeStyle = "merah"; menipu. lineWidth = "5"; menipu. strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT); // ganti sudut sudut rotasi + =. 25; jika (sudut> Matematika. PI * 2) {angle = 0;} // jalankan sistem transformasi baru. menyimpan(); menipu. terjemahkan (100, 100); menipu. putar (sudut); // gambar gambarnya. drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT); menipu. restore ();} // end draw

Sementara kodenya kelihatan sedikit terlibat, itu tidak benar-benar melakukan sesuatu yang baru:

1. Kosongkan latar belakangnya.

   Ingat bahwa animasi diulang menggambar. Jika Anda tidak menghapus latar belakang di awal setiap frame, Anda akan melihat gambar bingkai sebelumnya. Gunakan fungsi ClearRect () konteks untuk menggambar latar belakang yang baru, atau salah satu alat gambar lainnya untuk menggunakan gambar latar belakang yang lebih kompleks.

2. Gambarlah konten nonsprite apapun

   Misalnya, Anda dapat menggunakan strokeStyle, lineWidth, dan strokeRect () untuk membangun bingkai segi empat merah di sekitar kanvas. Perhatikan bahwa konstanta CANV_HEIGHT dan CANV_WIDTH mengacu pada ukuran kanvas saat ini.

3. Ubah status sprite.

   Untuk mengubah sudut rotasi gambar pada contoh, variabel yang disebut sudut dibuat di luar fungsi. (Penting agar sudut dibuat di luar konteks fungsi sehingga bisa mempertahankan nilainya di antara panggilan ke fungsi.) Anda kemudian dapat menambahkan sejumlah kecil untuk memiringkan setiap bingkai.

   Kapan pun Anda mengubah variabel (terutama dalam lingkaran yang hampir tak berujung seperti animasi), Anda harus memeriksa kondisi batas. Nilai sudut terbesar yang diizinkan (dalam radian) adalah dua kali pi. Jika sudutnya lebih besar dari itu, ia akan kembali ke nol.

4. Bangun transformasi. Buat transformasi baru dengan metode save (), dan gunakan fungsi rotate () dan translate () untuk mengubah sistem koordinat sementara.

   Banyak animasi benar-benar modifikasi dari sebuah transformasi. Citra tidak berubah, hanya transformasi yang berisi gambar.

5. Gambarlah gambar di tengah transformasi baru.

   Perintah drawImage () menarik gambar berdasarkan sudut kiri atas gambar. Jika Anda menggambar gambar di (0, 0) dari transformasi baru, gambar akan muncul untuk diputar di sekitar sudut kiri atas. Biasanya, Anda ingin gambar diputar di sekitar titik tengahnya. Cukup gambarnya jadi pusatnya ada di asalnya. Atur X ke nol minus setengah lebar gambar, dan Y ke nol minus setengah tinggi gambar.

6. Tutup transformasi. Gunakan metode restore () untuk menyelesaikan pendefinisian sistem koordinat sementara.