Animasi dengan Sprite Kit

Membuat animasi 2D dengan salah satu framework iOS

SpriteKit adalah salah satu framework yang digunakan untuk membuat animasi 2D di iOS. Dikarenakan SpriteKit merupakan framework asli milik Apple, maka animasi yang dibuat dapat berjalan dengan optimal dan hemat baterai di environment iOS. Serta, sangat mungkin bagi kalian untuk membuat game di iOS dengan framework ini apabila dikombinasikan SceneKit. Namun kita akan bahas lebih spesifik mengenai SceneKit di artikel berikutnya.

SpriteKit bekerja dengan cara sama seperti membentuk animasi 2D di masa lalu, yaitu dengan menggunakan kumpulan adegan / frame dan ditampilkan secara berurutan dalam waktu yang singkat. Untuk itu, yang kita perlukan sebelum mulai beranimasi adalah beberapa gambar yang saling mendukung suatu gerakan.

Persiapan

Melalui artikel ini, kita akan mencoba membuat animasi anjing yang sedang berlari. Untuk itu, kalian perlu download dulu asetnya disini.

Akan ada total 6 gambar, berarti kita akan membuat animasi dengan kecepatan 6 fps (frame per second).

Selanjutnya, kita mulai meletakkan gambar-gambar yang sudah di-download di folder Assets.xcassets di Xcode. Pastikan juga nama masing-masing gambar sudah sesuai urutan nomor, sehingga sesuai dengan gambar di atas.

Membuat Scene

Setelah persiapan gambar selesai, selanjutnya kita akan membuat sebuah scene. Untuk itu, buka File > New > File…, lalu pilih SpriteKit Scene.

Setelah file terbentuk, kita akan mengatur tampilan scene yang tampil melalui Inspector (shortcut : ⌘⌥0). Pada Inspector, kita lakukan pengaturan seperti berikut

Warna pada background-nya sendiri adalah transparan. Cara melakukannya yaitu dengan memilih warna Custom lalu atur opacity menjadi 0%.

Setelah melakukan pengaturan di atas, kita akan melihat halaman hitam besar dan bergaris-garis. Posisi objek ditandai dengan kotak putih yang berada di koordinat (0,0). Untuk mengisi objek kosong tersebut, buka Library (shortcut : ⌘⇧L), lalu pilih tab kedua dan cari gambar Run 1. Lakukan drag&drop gambar tersebut ke kotak putih pada scene. Setelah itu, ubah nama objeknya menjadi “dog”. Hasilnya akan tampak seperti berikut.

Membentuk Animasi

Selanjutnya kita buat file baru bernama State.swift , lalu isikan dengan kode berikut.

Penjelasan kode:

• switch stateClass, membentuk status objek. Dalam kasus ini digunakan case Running.Type, dengan tujuan untuk menjalankan objek.
• let texture, membentuk array gambar yang akan dianimasikan, terdiri dari “Run 1” hingga “Run 6”.
• lazy var action, menggerakkan animasi seterusnya dengan jeda 0.1 detik antar gambar.

Setelah selesai, kita akan menambah file baru dengan nama SceneController.swift, lalu isikan dengan kode berikut

Penjelasan kode:

• func didMove(), memanggil objek dengan nama “dog”.
• func update(), menjalankan class Running .

Tambahkan juga class di atas pada scene yang akan dianimasikan, seperti contoh berikut.

Menampilkan Animasi

Setelah gerakan animasi telah dibentuk, sekarang yang perlu dilakukan yaitu menampilkannya. Karena itu kita buka Main.storyboard dan tambahkan UIView pada ViewController. Setelah itu ubah warna background dari UIView menjadi transparan.

Serta, ubah nama class pada UIView seperti tampilan berikut.

Setelah setup telah selesai, selanjutnya kita buka ViewController.swift dan tambahkan kode berikut.

Yang perlu dilakukan di sini, adalah membuat func sceneSetup() untuk menjalankan file “MyScene” pada view SKView yang telah dibuat. Apabila semua tahapan telah dilakukan dengan benar, coba jalankan aplikasinya maka hasilnya akan seperti ini!

Kesimpulan

Sekarang kita telah memiliki anjing yang terus berlari di layar! hehe. Meski hasilnya statik / diam di tempat, namun kita berhasil menggabungkan kumpulan gambar dan menjadikannya suatu gerakan, sehingga terbentuklah animasi.

Terima kasih telah membaca artikel ini. Apabila dirasa bermanfaat, bagikan juga pengetahuan ini kepada yang lain ya!