Make sprite animation move in corona.

Pada postingan ini, saya akan menjelaskan cara membuat sprite animation di corona, dan cara membuat animasi tersebut dapat bergerak sesuai dengan keinginan kita. Sebelumnya akan saya jelaskan apakah Sprite animation itu.

Sprite animation adalah sebuah API dari corona yang membuat gambar kelihatan lebih hidup dengan cara menampilkan beberapa gambar dalam 1 detik, yang kita kenal juga sebagai fps (frame per second).

Pertama kita harus buat file baru, seperti yang sudah saya jelaskan cara membuat project baru pada bagian physics in corona. Saya akan melewatkan bagian ini dan langsung kebagian cara membuat Sprite Animation.

Sediakan gambar sprite animation terlebih dahulu. Jika anda tidak mempunyainya, anda dapat mendownloadnya disini. Saya akan memilih gambar lebah untuk dijadikan Sprite Animationnya. Jangan lupa untuk menyatukan gambar yang telah dibuat, saya menggunakan TexturePacker untuk menyatukan gambar spriteSheetnya.  Disini gambarnya saya simpan bernama gambar.png. Nanti gambar akan terbentuk seperti:

Gambar.lua

Saya memberi nama file tersebut "gambar.lua". Didalam gambar.lua, kita buat object bernama sheetInfo.

Didalam lua, array disebut juga tabel, dimana dapat menyimpan data didalamnya. Didalam sheet lua saya masukkan sheet yang berupa frame. Frame disini dimaksudkan ukuran dari tiap gambar yang akan ditampilkan.

Jika anda memiliki 10 buah gambar, tambahkan lagi gambar sesuai dengan kebutuhan dan jangan lupa ukuran width dan height jangan lebih besar dari sheetContentWidth. Karena sheetContentWeight adalah ukuran gambar yang akan ditampilkan, sedangkan width dan height adalah ukuran gambar sebenarnya. Pada tahap ini kita telah membuat beberapa gambar yang telah di simpan didalam tabel sheetInfo.

Selanjutnya kita beritahukan setiap gambar di tiap gambar yang telah kita buat dengan menggunakan frameIndex.

Saya mempunyai 16 gambar yang akan dimunculkan selama 1 detik. Ingat maksimum dari corona adalah 30 fps. Jika anda memasukkan lebih dari 30 fps, corona tetap menghitung sampai frameIndex ke 30.

Selanjutnya, kita tambahkan method getSheet dan getFrameIndex

Getsheet berfungsi untuk memeberitahukan memberikan aplikasi dari setiap gambar yang telah disatukan, dan getFrameIndex berfungsi untuk mendapatkan frameindex yang akan dimunculkan.

Main.lua

Sekarang saatnya membuat logic di main.lua. Sekarang simpan gambar.lua kedalam object gambar. Buat juga object yang akan menyimpan data gambar.png dan tiap tiap gambar diatur besar tiap gambar yang akan di tampilkan dari sheetInfo.sheet pada gambar.lua.  Pada newImageSheet mengizinkan anda untuk menyimpan banyak gambar hanya dengan sekali panggil newImageSheet.

Sekarang kita telah menyimpan setiap gambar dan disimpan kedalam imageSheet. Selanjutnya kita buat buat tabel bernama sequenceData, yang menyimpan sifat sifat dari tiap spriteSheet yang akan dibuat.

Ingat jangan lupa memberi name di setiap sifat spriteSheet yang akan dibuat jika ingin membuat spriteSheet kita lebih dinamis. Maksud dinamis disini, gambar dapat melakukan hal lain setelah selain terbang, dengan cara menambahkan kurung kurawal, bernama lain, contoh anda tambahkan name = "run" dengan gambar lain.
sheet berisikan gambar gambar yang telah kita simpan di object imageSheet.
Start adalah gambar pertama yang akan kita munculkan.
Count adalah sampai object berapa yang akan di munculkan, disini saya memiliki 16 gambar. Anda dapat melakukannya sesuai dengan kebutuhan anda. Jangan lupa, Corona hanya 30 dan 60 fps.
loopCount adalah berapa kali perulangan gambar yang akan dimunculkan. Agar membuat gambar looping terus menerus, ubah loopCount = 0.

Selanjutnya kita panggil fungsi newSprite, dimana newSprite akan menyatukan gambar dan menampilkan gambar dari kumpulan gambar yang telah dibuat dan tabel gambar yang akan dibuat.

Selanjutnya gunakan setSequence, yang berguna untuk memunculkan gambar yang akan di mulai, jika anda membuat run, anda dapat mengubahnya, otomatis gambar spriteSheetnya juga akan berubah. Sekarang anda sudah dapat menjalankan animasi sebanyak 16 gambar selama 1 detik. Untuk mensetting berapa banyak maksimum fps yang akan di gunakan anda dapat membuka config.lua. Saya memasang maksimum fps yang akan di tampilkan adalah 60 untuk membuat gambar terlihat lebih lembut.

Sekian dari posting blog saya, anda dapat download source code disini. Selamat mencoba.