Bina Animasi Multi-Negara dalam Permainan HTML5 Anda

Dengan semua gerakan ini berlaku dalam permainan HTML5 anda, anda pasti mahu pelbagai animasi yang canggih. Anda boleh menggunakan fungsi changeImage () atau setImage () (mereka mempunyai dua nama berbeza untuk perkara yang sama) untuk menukar imej yang dikaitkan dengan sprite pada bila-bila masa. Kadang-kadang, anda mahu animasi yang lebih canggih. Lihatlah walkAnim. html.

Terdapat banyak imej yang bertukar di sini. Animasi berjalan sebenarnya adalah satu siri lapan gambar yang berbeza dengan cepat bertukar untuk memberikan ilusi berjalan. Terdapat 4 animasi yang berbeza (satu untuk setiap arah kardinal), jadi itu adalah 32 imej yang berbeza. Walau bagaimanapun, jika anda melihat kod, anda akan melihat bahawa sprite watak mengandungi hanya satu imej.

Imej ini adalah animasi komposit. Setiap baris mewakili arah, dan setiap baris mengandungi kitaran, atau satu siri imej, yang dimaksudkan untuk diulang.

The rpg_sprite_walk. Imej png dicipta oleh Franck Dupont. Dia dengan murah hati menyiarkan gambar ini pada OpenGameArt. tapak org, di mana dia dikenali sebagai "Arikel. "Dia mengeluarkan kerjanya di bawah satu lesen khas yang disebut" Atribusi - Kongsi Sama. "Ini bermakna orang boleh menggunakan atau mengulang semula kerjanya secara percuma, selagi mereka menyifatkan pengarang asal.

Imej latar belakang adalah oleh penulis yang bernama Hyptosis, yang mengeluarkan imej di bawah domain awam di laman web yang sama. Penyumbang berbakat dan bijaksana seperti Franck dan Hyptosis adalah kunci kepada komuniti kreatif yang berkembang maju. Rasa bebas untuk melihat tapak seni permainan terbuka untuk karya seni yang lebih hebat untuk digunakan dalam permainan anda, tetapi pastikan untuk mengucapkan terima kasih dan atribut penulisnya sewajarnya.

The simpleGame. Perpustakaan js mengandungi ciri untuk membuat animasi multi-imej dengan mudah. Lihat kod untuk walkAnim. html untuk melihat cara kerjanya:

walkAnim. permainan html var; var latar belakang; aksara var; fungsi init () {game = scene baru (); latar belakang = Sprite baru (permainan, "rpgMap. png", 800, 600); latar belakang. setSpeed ​​(0, 0); latar belakang. setPosition (400, 300);

character = new Sprite (permainan, "rpg_sprite_walk. Png", 192, 128); aksara. loadAnimation (192, 128, 24, 32); aksara. generateAnimationCycles (); aksara. renameCycles (Array baru ("turun", "naik", "kiri", "kanan")); aksara. setAnimationSpeed ​​(500); / / memulakan watak dijeda. setPosition (440, 380); watak. setSpeed ​​(0); aksara. jedaAnimasi (); aksara. setCurrentCycle ("bawah"); Permainan.mulakan ();} / update akhir fungsi panas () {permainan. jelas (); checkKeys (); latar belakang. kemas kini (); watak. kemas kini ();} // end update function checkKeys () {if (keysDown [K_LEFT]) { character. setSpeed ​​(1); aksara. watak playAnimation (). setMoveAngle (270); aksara. setCurrentCycle ("kiri"); } jika (keysDown [K_RIGHT]) {character. setSpeed ​​(1); watak. watak playAnimation (). setMoveAngle (90); watak. setCurrentCycle ("right");} if (keysDown [K_UP]) {character. setSpeed ​​(1); watak. watak playAnimation (). setMoveAngle (0); watak. setCurrentCycle ("up");} if (keysDown [K_DOWN]) {character. setSpeed ​​(1); watak. watak playAnimation (). setMoveAngle (180); watak. setCurrentCycle ("down");} if (keysDown [K_SPACE]) { character. setSpeed ​​(0); aksara. jedaAnimasi (); aksara. setCurrentCycle ("bawah"); }} Anda perlu mengambil beberapa langkah baru untuk membina animasi, tetapi hasilnya bernilai sepenuhnya.

Dapatkan imej animasi.

1. Anda boleh membuat imej sendiri, atau melihat sumber yang sangat baik seperti OpenGameArt. org untuk mencari kerja yang dilakukan oleh orang lain. Sudah tentu, anda mempunyai tanggungjawab untuk menghormati pekerjaan orang lain, tetapi ada beberapa karya hebat yang terdapat dalam lesen yang sangat permisif hari ini. Pastikan imej diatur dalam baris dan lajur dan setiap sub-imej adalah saiz yang sama.

   Anda mungkin perlu memusingkan dengan editor imej anda untuk memastikan imej itu dalam format yang betul dan anda tahu saiz setiap sub-imej.

   Lampirkan imej animasi kepada sprite anda.

2. Anda akan melampirkan keseluruhan imej ke sprite anda, tetapi hanya memaparkan sebahagian kecilnya pada satu-satu masa. Ini lebih mudah daripada bekerja dengan sekumpulan imej, dan ia juga lebih cekap.

   Buat objek animasi dengan kaedah loadAnimation ().

3. Apabila anda menggunakan kaedah loadAnimation () objek, anda membuat alat animasi yang membantu mengurus animasi. Dua parameter pertama adalah saiz keseluruhan imej (lebar dan ketinggian), dan kedua parameter kedua ialah lebar dan ketinggian setiap sub-imej. Jika anda mendapat nilai-nilai ini salah, animasi akan muncul untuk tatal. Terus bermain sehingga anda mendapat hak nilai berikut:

   aksara. loadAnimation (192, 128, 24, 32);

   Membina kitaran animasi.
   

4. Setiap baris akan berubah menjadi kitaran animasi. Versi lalai (tanpa sebarang parameter) berfungsi dengan baik dalam kebanyakan situasi. Lihat dokumentasi untuk kegunaan yang lebih maju dari alat ini:

   aksara. generateAnimationCycles ();

   Namakan semula kitaran.
   

5. Animasi yang dibuat dengan perintah buildAnimationCycles () mempunyai nama lalai, tetapi hampir selalu lebih baik untuk melampirkan nama anda sendiri, lebih bermakna. Tambah array dengan nama yang menunjukkan setiap baris mewakili:

   aksara. renameCycles (Array baru ("turun", "naik", "kiri", "kanan"));

   Tetapkan kelajuan animasi.
   

6. Kecepatan animasi menunjukkan berapa pantas animasi akan dijalankan. Nilai 500 seolah-olah sesuai untuk kebanyakan aplikasi, tetapi anda boleh menyesuaikan nilai ini supaya kitaran berjalan kaki kelihatan seperti ia sebenarnya menggalakkan watak:

   watak.setAnimationSpeed ​​(500);

   Tetapkan kitar yang anda hendak paparkan.
   

7. Kaedah setCurrentCycle () membolehkan anda memilih kitaran dengan salah satu nama yang anda nyatakan dalam langkah renameAnimationCycles ():

   . setCurrentCycle ("bawah");

   Gunakan arahan pauseAnimation () untuk menghentikan animasi.
   

8. PautanAnimasi () perintah membuat animasi berhenti sementara.

   Gunakan playAnimation () untuk memulakan animasi.

9. Kaedah ini akan terus menggelung kitaran animasi semasa.

   Seperti yang anda dapat lihat, animasi menambah banyak keseronokan kepada permainan dan membuka seluruh dunia permainan peranan kepada repertoar anda.