Praktik Terbaik Animasi Sprite

Saya ingin lebih memahami bagaimana orang-orang di dunia nyata menangani animasi mereka.

Apakah Anda memuat 1 gambar besar dan kemudian menggambar persegi panjang yang berbeda berdasarkan bingkai animasi?

Apakah Anda memuat file gambar X ke dalam array dan menggambar item dalam array berdasarkan pada frame animasi?

Bagaimana Anda menangani memiliki panjang animasi yang berbeda untuk berbagai sprite.

Katakanlah karakter berjalan membutuhkan 4 - 8 frame, dan ombak di pantai hanya membutuhkan 2 - 3 frame. Bagaimana Anda menangani situasi itu? Lihat di bawah

Dim Waves(1) as Sprite
Dim Char(5) as Sprite

Sub Animate()
     Frame += 1
     Draw Char(Frame)
     Draw Waves(Frame)
     If Frame = 5 Then Frame = 0
End Sub

Jelas Waves akan berakhir dengan kesalahan di luar batas.

Atau apakah Anda memiliki sprite Anda khawatir tentang itu animasi sendiri, dan tidak peduli dengan frame sama sekali. Adakah masing-masing sprite mengetahui lingkaran animasinya sendiri?

Cara saya melakukannya di masa lalu adalah dengan memisahkan data animasi dari pemutaran animasi . Sebuah Animationkemudian dapat menjadi dasarnya array Framesdan beberapa sifat yang menggambarkan bagaimana animasi harus bersikap (jika loop, dll).

Saya biasanya memuat satu gambar dan menggambar potongan-potongan itu.

Setiap Frameanimasi pada dasarnya adalah persegi panjang dan panjang waktu. Hal ini memungkinkan beberapa frame untuk ditampilkan lebih lama daripada yang lain, yang mungkin atau mungkin bukan sesuatu yang Anda inginkan. Jika Anda ingin semua frame dalam animasi Anda ditampilkan untuk waktu yang sama, simpan di dalam Animationobjek Anda .

Apa pun yang perlu memainkan animasi memiliki sendiri AnimationPlayeryang dapat menunjuk ke sebuah Animation. Objek pemain mengurus memainkan animasi dan membuat "frame saat ini" tersedia.

Keuntungan untuk ini bagi saya adalah bahwa saya dapat memiliki satu contoh dari Animationbanyak objek yang dapat menunjuk dan memainkan bagian yang berbeda pada saat yang sama. Itu juga mudah untuk mengubah animasi hanya dengan menunjuk AnimationPlayerke Animationobjek yang berbeda dan mengatur ulang pemutaran.

Sunting : Berikut adalah implementasi JavaScript yang cukup mendasar dari sistem yang dijelaskan di atas . Saya melemparkannya bersama dalam beberapa menit sebagai demonstrasi . Kode "asli" akan memiliki lebih banyak fitur. Anda akan memerlukan browser modern yang mendukung Canvas dan Data URI agar dapat berfungsi.

Saya ingin animasi tahu berapa banyak frame yang dimilikinya. Di mana dan bagaimana ini disimpan relatif tidak relevan kecuali untuk masalah kinerja (seperti Anda mungkin menginginkannya dalam tekstur yang sama). Saya tidak akan menambahkan 1 ke framecount, saya akan menambahkan deltaTime * animSpeed ​​dan mengubah nilai itu menjadi integer saat menampilkan. Dengan cara ini, Anda dapat memperlambat atau mempercepat animasi dan bebas dari framerate.

Jadi sprite akan memiliki animasi yang memperbarui sendiri.

Mengapa tidak hanya memiliki jumlah bingkai untuk masing-masing objek Anda yang disimpan? Secara pribadi saya meneruskan jumlah frame dalam animasi ke objek saya di konstruktor mereka, maka saya memiliki fungsi Animate () standar yang mengambil jumlah frame dalam animasi.

Tergantung implementasinya. Di mesin saya, saya melakukan animasi di Direct3D dan DirectDraw.

Di DirectDraw saya membuat satu gambar besar. Itu semua akan disimpan dalam memori sistem, yang pada akhirnya bermuara pada blok data satu dimensi.

Pro:

• Mudah untuk berpindah antar bingkai. Ubah pointer mulai, tambahkan pitch (total lebar gambar) setiap y dan Anda emas.

Kekurangan:

• Tidak bisa hanya menyalin satu frame ke layar, Anda harus melakukannya secara manual.

• Blok memori raksasa. Bingkai bergegas datang di penalti.

Dalam Direct3D saya menggunakan tekstur yang terpisah. Ini karena saya tidak tahu batasan tekstur perangkat, jadi saya tidak tahu apakah itu mendukung tekstur yang seukuran seluruh gambar.

Pro:

• Anda dapat menyalin bingkai langsung ke layar, karena semuanya adalah entitas yang terpisah.

Kekurangan:

• Kurangnya penyelarasan memori.

Di gim saya , saya telah memberi kelas dasar Sprite saya pengetahuan tentang cara menggambar itu sendiri, dan semua elemen animasi mewarisi pengetahuan itu: jumlah dan durasi bingkai animasi, posisi di layar, dll. Lingkaran permainan utama hanya mengulangi semua dari sprite, meminta masing-masing untuk menggambar sendiri sesuai keinginan. Tampaknya bekerja dengan cukup baik, dan sedikit lebih modular untuk mem-boot: jika Anda menambahkan sprite baru yang memiliki loop animasi yang berbeda (atau bahkan lebih kompleks: beberapa negara animasi), Anda tidak perlu kembali dan menulis ulang Animate Anda () rutin untuk mengakomodasi kompleksitas tambahan:

Dim Waves as Sprite
Dim Char as Sprite

Sub Animate()
     Char.update()
     Waves.update()
End Sub

Setiap kali pembaruan () metode sprite dipanggil, ia tahu jika harus menggambar ulang frame yang sama seperti terakhir kali, pindah ke frame berikutnya dalam animasi saat ini, ubah ke animasi baru, dll.

Ini memiliki manfaat tambahan sehingga membuatnya lebih mudah untuk menyesuaikan framerate untuk mengakomodasi kecepatan rendering jam / platform yang berbeda, karena satu-satunya perubahan adalah seberapa sering Anda memanggil Animate ().