Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Spritesheets
Gamedevelopment

Pengenalan kepada Animasi Spritesheet

by
Difficulty:BeginnerLength:MediumLanguages:

Malay (Melayu) translation by Hamdan Veerlax (you can also view the original English article)

Spritesheets telah digunakan dalam permainan untuk masa yang lama. Permainan klasik seperti Legend of Zelda: Pautan ke permainan masa lalu dan bahkan moden seperti Cut the Rope telah menggunakannya. Dalam artikel ini, kita akan membincangkan tentang animasi spritesheet dan bagaimana untuk mengodnya, dan kami juga akan menunjukkan bagaimana ia boleh digunakan dalam permainan kecil. Saya akan menggunakan JavaScript untuk kod itu, tetapi anda sepatutnya dapat mengikutinya dalam mana-mana bahasa.

Post Berkaitan

Tutorial ini adalah sebahagian daripada kerjasama khas antara artis, animator dan gamedev!


Hit Space untuk melompat.

Sebelum kita boleh mula bercakap mengenai bagaimana untuk mengarang animasi spritesheet, kita harus terlebih dahulu mentakrifkan beberapa syarat: animasi, sprite, dan spritesheet.


Animasi

Kembali pada tahun 1872, Eadweard Muybridge telah ditugaskan untuk membuktikan sama ada kuda mengangkat semua empat kaki dari tanah sekaligus ketika berlari. Untuk berbuat demikian, beliau menubuhkan satu siri kamera di sepanjang trek dan mengambil gambar secara berturut-turut sebagai kuda berlari. Proses ini membolehkannya menangkap 16 gambar larian kuda. Di salah satu gambar, kuda itu memang mempunyai empat kaki dari tanah.

Muybridge race horse image sheet
Foto Muybridge's ''The Horse in Motion'' dengan gambar pertama dikeluarkan.

Muybridge kemudian mengulangi percubaan itu dan meletakkan setiap gambar ke peranti yang boleh memproyeksikan gambar dalam penggantian pantas untuk memberikan ilusi kuda berjalan, mewujudkan projektor filem pertama.

Muybridge race horse animated

Proses mengubah imej secara berturut-turut untuk memberikan ilusi pergerakan dipanggil animasi.


Sprite

Sprite adalah imej grafis tunggal yang dimasukkan ke dalam adegan yang lebih besar supaya ia kelihatan sebagai sebahagian daripada tempat kejadian.

An example of a sprite

Sprites adalah cara yang popular untuk membuat adegan yang besar dan rumit kerana anda boleh memanipulasi setiap sprite secara berasingan dari tempat kejadian. Ini membolehkan kawalan yang lebih besar ke atas bagaimana pemandangan diberikan, dan juga bagaimana pemain boleh berinteraksi dengan tempat kejadian.

Ia tidak biasa untuk permainan mempunyai puluhan ratus beratus-ratus sprite. Memuatkan setiap ini sebagai imej individu akan menggunakan banyak memori dan kuasa pemprosesan. Untuk membantu menguruskan sprite dan elakkan menggunakan banyak imej, banyak permainan menggunakan spritesheet.

Sekiranya anda sedang mencari grafik grafik yang dibuat sebelum ini, temui Sprites dan Helaian Permainan yang mungkin sesuai untuk keperluan anda. Atau anda boleh memesan sprite watak permainan tersuai anda sendiri pada Envato Studio.

game character sprite on Envato Studio

Spritesheet

Apabila anda meletakkan banyak sprite ke dalam imej tunggal, anda mendapat spritesheet.

An example of a shritesheet

Sprhehehehe digunakan untuk mempercepat proses memaparkan imej ke skrin; Ia lebih cepat untuk mengambil satu imej dan memaparkan hanya sebahagian daripada imej itu daripada mengambil banyak imej dan memaparkannya.

Animasi Spritesheet tidak lebih daripada mengambil spritesheet dan mengubah sprit yang diberikan secara berturut-turut untuk memberikan ilusi pergerakan, seperti projektor filem memaparkan filem.


Bahagian Spritesheet

Spritesheets terdiri daripada dua bahagian: bingkai dan kitaran

Bingkai adalah imej tunggal (atau sprite) dari spritesheet. Kembali ke contoh kuda Muybridge, setiap gambar kuda dalam imej akan menjadi bingkai.

Apabila bingkai diletakkan dalam perintah yang mencipta pergerakan yang berterusan, ia mewujudkan kitaran.

Meletakkan foto-foto kuda mengikut urutan yang mereka ambil menghasilkan kitaran "run" sejak kuda berjalan (berbanding dengan kitaran "berjalan" atau "terbiar").


Animasi Coding Spritesheet

Terdapat tiga bahagian untuk pengekodan animasi spritesheet:

  1. Mewujudkan imej
  2. Mengemas kini imej untuk setiap bingkai animasi
  3. Melukis bingkai ke skrin

Mewujudkan Imej

Kami akan mulakan dengan mencipta fungsi (atau kelas) yang akan mengendalikan animasi spritesheet kami. Fungsi ini akan mencipta imej dan menetapkan jalan supaya kita dapat menggunakannya untuk menarik.

Oleh kerana spritesheets berbeza boleh mempunyai saiz bingkai yang berbeza, kita perlu lulus lebar dan ketinggian bingkai supaya kita dapat mengira dengan tepat berapa banyak bingkai berturut-turut dan lajur imej. Kami akan menggunakan maklumat ini kemudian untuk menarik animasi ke skrin.

Adalah penting bahawa setiap bingkai spritesheet adalah lebar dan ketinggian yang sama; jika tidak, lukisan animasi ke skrin sangat sukar.

Mengemas kini Imej

Untuk mengemas kini animasi spritesheet, yang perlu kita lakukan ialah menukar bingkai yang akan kita buat. Di bawah ini adalah spritesheet dibahagikan kepada setiap bingkai dan bernombor.

spritesheet divided into frames and numbered

Di setiap bingkai permainan, kami akan mengemas kini senarai sprites. Walau bagaimanapun, kami tidak mahu animasi bertukar ke bingkai seterusnya setiap bingkai, jadi kami perlu memberitahu spritesheet kami berapa banyak bingkai menunggu sebelum peralihan.

Adalah penting untuk diperhatikan bahawa tidak setiap spritesheet mempunyai sprite dalam setiap bingkai yang tersedia (seperti imej Muybridge's ''The Horse in Motion''). Jika kita cuba untuk menghidupkan spritesheet kita dengan bingkai kosong, akan ada blip dalam animasi setiap kali bingkai kosong ditarik ke skrin.

Untuk mengimbangi ini, kami juga akan memberitahu senarai sprites apa nombor bingkai yang terakhir, supaya kami tidak menghidupkan bingkai kosong.

Dengan menggunakan modulo operator (%) untuk currentFrame, kita boleh membuat gelung yang berterusan—setiap kali endFrame tercapai, currentFrame akan kembali ke 0, sekali gus melingkari animasi.

Pengendali modulo untuk kaunter menghalang limpahan integer.

Menggambar Imej

Lukisan imej dari spritesheet berfungsi dengan cara yang sama seperti lukisan imej dari peta jubin.

Kami mengira barisan imej yang kita mahu menarik dengan mengambil modulo bingkai semasa dan bilangan bingkai setiap baris. Kami mengira ruang dengan membahagikan bingkai semasa dengan bilangan bingkai setiap baris.

Dengan menggunakan baris dan lajur ini, kita kemudian boleh mengira koordinat bingkai untuk menarik dengan mendarabkannya mengikut frameWidth dan frameHeight, masing-masing:

Dengan fungsi spritesheet di tempat, kita kini boleh menggunakannya untuk membuat animasi spritesheet:


Kitaran Pelbagai dalam Satu Spritesheet

Kod di atas akan berfungsi untuk mana-mana spritesheet yang mengandungi satu kitaran. Walau bagaimanapun, ia tidak biasa untuk spritesheet untuk memegang pelbagai kitaran, bermakna bahawa terdapat banyak animasi dalam satu spritesheet tunggal.

Kita perlu mengubah cara spritesheet kita berfungsi untuk mengendalikan pelbagai animasi dari satu spritesheet tunggal.

Mewujudkan Imej

Oleh kerana imej tetap sama antara animasi, kita akan membahagikan lembaran kerja kita menjadi dua fungsi: satu untuk imej dan satu untuk setiap animasi dari spritesheet.

Sebuah spritesheet akan memegang maklumat mengenai imej dan saiz bingkai.

Mengemas kini dan Menggambar Imej

Satu animasi akan bertanggungjawab mengemas kini dan melukis spritesheet.

Oleh kerana spritesheet mengandungi lebih banyak bingkai daripada mana-mana animasi yang diperlukan, kita perlu tahu nombor bingkai untuk memulakan dan menamatkan animasi. Menggunakan maklumat ini, kami akan membuat pelbagai nombor bingkai supaya kami boleh menggunakan currentFrame untuk mengakses nombor bingkai yang betul.


Meletakkan Spritesheet untuk Digunakan

Dengan animasi yang sedia untuk mengendalikan apa-apa spritesheet, kita boleh menggunakannya untuk membuat gaya Canabalt-sederhana runner tak terhingga:


Hit Space untuk melompat.

Anda boleh mencari kod sumber penuh untuk ini dalam repo GitHub kami. Apa skor tinggi anda?

Sumber Tambahan

Jika anda mencari grafik permainan kreatif, kami mempunyai Sprites dan Spread Game di GraphicRiver, yang mungkin hanya penyelesaian yang diperlukan oleh permainan anda. Atau, jika anda berminat untuk mendapatkan sedikit bantuan dengan animasi anda, Envato Studio mempunyai koleksi Animasi yang hebat yang anda ingin cari.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.