Bagaimana cara membangun Animasi Multi-Negara di Game HTML5 Anda

Dengan semua gerak ini yang terjadi di dalam game HTML5 Anda, Anda pasti menginginkan beberapa animasi canggih. Anda dapat menggunakan fungsi changeImage () atau setImage () (dua nama berbeda untuk hal yang sama) untuk mengubah gambar yang terkait dengan sprite kapan saja. Terkadang, Anda ingin animasi yang jauh lebih canggih. Lihatlah walkAnim. html

Ada banyak sekali pertukaran gambar yang terjadi di sini. Animasi berjalan sebenarnya merupakan rangkaian dari delapan gambar yang berbeda dengan cepat bertukar untuk memberi ilusi berjalan. Ada 4 animasi yang berbeda (satu untuk masing-masing arah kardinal), jadi totalnya 32 gambar berbeda. Namun, jika Anda melihat-lihat kode, Anda akan melihat bahwa sprite karakter hanya berisi satu gambar.

Gambar ini adalah animasi komposit. Setiap baris mewakili sebuah arah, dan setiap baris berisi sebuah siklus, atau serangkaian gambar, dimaksudkan untuk diulang.

rpg_sprite_walk Gambar png diciptakan oleh Franck Dupont. Dia dengan murah hati memasang gambar ini di OpenGameArt. org, dimana dia dikenal sebagai "Arikel. "Dia merilis karyanya di bawah lisensi khusus yang disebut" Attribution - Share Alike. "Ini berarti orang bisa menggunakan atau remix karyanya secara gratis, asalkan mereka mengaitkan penulis aslinya.

Gambar latar belakang oleh seorang penulis bernama Hyptosis, yang merilis gambar di bawah domain publik di situs yang sama. Penyumbang berbakat dan bijaksana seperti Franck dan Hyptosis adalah kunci bagi komunitas kreatif yang berkembang. Jangan ragu untuk melihat-lihat situs seni permainan yang terbuka untuk mendapatkan karya seni yang lebih hebat untuk digunakan dalam permainan Anda, tapi pastikan untuk berterima kasih dan anggap para pengarang sesuai keinginan mereka.

SimpleGame Perpustakaan js berisi fitur untuk membuat animasi multi-gambar dengan mudah. Lihatlah kode untuk walkAnim. html untuk melihat cara kerjanya:

walkAnim. permainan var html; latar belakang var; karakter var; fungsi init () {game = new Scene (); background = new Sprite (permainan, "rpgMap. png", 800, 600); Latar Belakang. setSpeed (0, 0); Latar Belakang. setPosition (400, 300);

karakter = sprite baru (permainan, "rpg_sprite_walk. Png", 192, 128); karakter loadAnimation (192, 128, 24, 32); karakter generateAnimationCycles (); karakter renameCycles (new Array ("down", "up", "left", "right")); karakter setAnimationSpeed (500); // mulai dijeda karakter. setPosition (440, 380); karakter. setSpeed (0); karakter jedaAnimasi (); karakter setCurrentCycle ("down"); permainanstart ();} // akhirin fungsi init update () {game. bersih(); checkKeys (); Latar Belakang. memperbarui(); karakter. update ();} // fungsi update akhir checkKeys () {if (keysDown [K_LEFT]) { karakter. setSpeed (1); karakter playAnimation () karakter. setMoveAngle (270); karakter setCurrentCycle ("kiri"); } jika (keysDown [K_RIGHT]) {karakter. setSpeed (1); karakter. playAnimation () karakter setMoveAngle (90); karakter. setCurrentCycle ("right");} if (keysDown [K_UP]) {karakter. setSpeed (1); karakter. playAnimation () karakter setMoveAngle (0); karakter. setCurrentCycle ("up");} if (keysDown [K_DOWN]) {karakter. setSpeed (1); karakter. playAnimation () karakter setMoveAngle (180); karakter. setCurrentCycle ("down");} if (keysDown [K_SPACE]) { karakter. setSpeed (0); karakter jedaAnimasi (); karakter setCurrentCycle ("down"); }} Anda perlu melakukan beberapa langkah baru untuk membuat animasi, namun hasilnya benar-benar layak dilakukan.

Dapatkan gambar animasi.

Anda dapat membuat gambar sendiri, atau melihat sumber yang bagus seperti OpenGameArt. org untuk mencari pekerjaan yang telah dilakukan orang lain. Tentu saja, Anda memiliki tanggung jawab untuk menghormati pekerjaan orang lain, namun ada beberapa pekerjaan hebat yang tersedia dalam lisensi yang sangat permisif saat ini. Pastikan gambar diatur dalam baris dan kolom dan masing-masing sub-gambar berukuran persis sama.

Anda mungkin harus mengacaukan editor gambar Anda untuk memastikan gambar itu dalam format yang benar dan Anda tahu ukuran masing-masing sub-gambar.

Lampirkan gambar animasi ke sprite Anda.
Anda akan melampirkan seluruh gambar ke sprite Anda, tapi hanya menampilkan sebagian kecil dari itu pada satu waktu. Ini lebih mudah daripada bekerja dengan banyak gambar, dan ini juga lebih efisien.

Buat objek animasi dengan metode loadAnimation ().
Saat Anda memanggil metode loadAnimation () objek, Anda membuat alat animasi yang membantu mengelola animasi. Dua parameter pertama adalah ukuran keseluruhan gambar (lebar dan tinggi), dan dua parameter kedua adalah lebar dan tinggi setiap sub-gambar. Jika Anda salah nilai, animasi akan muncul untuk menggulir. Terus bermain sampai Anda mendapatkan nilai ini dengan benar:

karakter. loadAnimation (192, 128, 24, 32);
```
Bangunlah siklus animasi.
```
Setiap baris akan berubah menjadi siklus animasi. Versi default (tanpa parameter) bekerja dengan baik dalam kebanyakan situasi. Cari dokumentasi untuk penggunaan alat ini lebih canggih:

karakter. generateAnimationCycles ();
```
Ganti nama siklusnya.
```
Animasi yang dibuat dengan perintah buildAnimationCycles () memiliki nama default, tapi hampir selalu lebih baik untuk melampirkan nama Anda sendiri yang lebih bermakna. Tambahkan sebuah array dengan nama yang menunjukkan apa yang masing-masing baris mewakili:

karakter. renameCycles (new Array ("down", "up", "left", "right"));
```
Tetapkan kecepatan animasi.
```
Kecepatan animasi menunjukkan seberapa cepat animasi akan berjalan. Nilai 500 tampaknya sesuai untuk sebagian besar aplikasi, namun Anda dapat menyesuaikan nilai ini sehingga siklus jalan karakter terlihat seperti karakternya yang benar-benar mendorong karakter

.setAnimationSpeed (500);
```
Tetapkan siklus yang ingin Anda tampilkan.
```
Metode setCurrentCycle () memungkinkan Anda memilih siklus dengan salah satu nama yang Anda indikasikan dalam langkah renameAnimationCycles ():

. setCurrentCycle ("down");
```
Gunakan perintah pauseAnimation () untuk menghentikan sebentar animasi.
```
Perintah pauseAnimation () membuat animasi berhenti sementara.

Gunakan playAnimation () untuk memulai animasi.
Metode ini akan terus menerus mengulang siklus animasi saat ini.

Seperti yang Anda lihat, animasi menambahkan sejumlah besar kesenangan untuk bermain game dan membuka keseluruhan bidang permainan peran ke repertoar Anda.