Halo! Saya seorang desainer UI senior di Pixonic, Alexey Morev. Dan pada artikel ini, kita akan fokus pada animasi UI yang bisa kita lihat masing-masing di dalam game.
Antarmuka permainan adalah kumpulan elemen yang membantu pengguna berinteraksi dan mengontrol permainan: tombol, ikon, bilah kemajuan, latar belakang, kartu, jendela sembul. Untuk mempermudah interaksi dengan elemen antarmuka, mereka dianimasikan.
Saya akan memberi tahu Anda bagaimana animasi semacam itu dibuat, di mana program itu dibuat, tahap pengembangan animasi apa yang ada dan mengapa mereka umumnya dibutuhkan.
Jadi, mari kita mulai!
Pertama-tama, mari kita tentukan apa itu animasi dan apa jenisnya.
Sederhananya, animasi adalah urutan bingkai yang menghidupkan gambar. Ini dibagi menjadi penuh (animasi penuh) dan disederhanakan (animasi terbatas). Contoh animasi penuh adalah film animasi berdurasi penuh apa pun: Disney's Aladdin, The Jungle Book, The Little Mermaid, dll. Contoh animasi yang disederhanakan adalah sebagian besar kartun seperti Rick dan Morty, Gravity Falls, Extreme Space, dan dll.
Untuk animasi penuh, 24-25 bingkai diambil per detik waktu dan detail kecil karakter, lingkungan, dll. Dianimasikan. Dalam animasi yang disederhanakan, jumlah bingkai per detik lebih sedikit, dan beberapa elemen karakter dan lingkungan yang tidak signifikan mungkin tidak dianimasikan sama sekali dan tetap statis. Perlu dicatat bahwa prinsip-prinsip ini harus diikuti dalam pembuatan animasi apa pun, baik itu antarmuka atau kartun.
Animasi lengkap dan disederhanakan berdasarkan contoh The Simpsons
Seperti yang Anda lihat, pada splash screen versi penuh, animasinya lebih halus dan lebih detail, sedangkan dalam bukaan pendek, Anda dapat melihat bagaimana jumlah bingkai dikurangi dan detail karakter tidak dianimasikan.
Kami menemukan apa itu animasi. Sekarang logis untuk beralih ke pertanyaan berikut: jenis animasi apa yang digunakan di UI? Dan apakah dia dibutuhkan?
Aku akan menjawab yang kedua dulu. Apakah kita membutuhkan animasi? Semuanya tampak jelas: jendela telah terbuka, hadiah telah diterima, tombol telah ditekan. Tidak penting menggunakan jenis animasi apa pun, bukan?
Tidak seperti itu. Berkat animasi, Anda tidak hanya dapat mendiversifikasi komponen visual game, tetapi juga membantu pengguna memahami apa yang terjadi di layar, di mana harus mengklik, dan tindakan apa yang harus dilakukan. Inilah salah satu alasan utama penggunaan animasi UI dalam game: untuk menarik perhatian pemain ke elemen yang paling penting saat ini.
Alasan kedua adalah kemampuan animasi untuk menunjukkan dinamika dan gaya permainan secara keseluruhan. Animasi UI harus sesuai dengan dinamika game. Ini berkontribusi pada perendaman yang lebih besar. Menggunakan animasi yang terlalu lambat dalam game yang bergerak cepat akan mengganggu pemain dan memengaruhi keseluruhan pengalaman.
Sedangkan untuk jenis animasi yang digunakan, itu hanya bergantung pada sumber daya dan kemampuan Anda. Jika Anda dan tim Anda mampu menerapkan animasi penuh, dan gaya visual gim memungkinkannya, maka lebih baik melakukannya: hasilnya akan jauh lebih segar dan lebih indah. Dalam kasus lain, lebih baik menggunakan animasi yang disederhanakan.
Mari gunakan contoh popup yang sama untuk melihat tampilannya dengan animasi penuh, sederhana, dan minimal.
Animasi penuh
Animasi yang disederhanakan
Animasi minimal
Siapa yang membuat animasi UI dan bagaimana proses pengembangan bekerja
Biasanya ada tiga orang yang terlibat dalam pengembangan sebuah animasi:
- seorang desainer atau artis membuat referensi animasi;
- perancang teknis mentransfer referensi ini ke mesin permainan;
- programmer membuat animasi muncul pada saat yang tepat sesuai dengan pemicu tertentu.
Terkadang studio menyewa animator dengan sengaja, tetapi tidak sering - biasanya desainer sudah cukup.
Pembuatan animasi secara kasar dapat dibagi menjadi tiga tahap: berpikir, membuat referensi, dan menerapkan.
Tahap pertama: ide
Untuk menyesuaikan animasi secara organik dengan apa yang terjadi di layar, Anda perlu menentukan apa yang perlu dianimasikan, serta apa yang akan terjadi sebelum dan sesudah animasi.
Mari kita telusuri proses pembuatan animasi selangkah demi selangkah menggunakan contoh animasi popup yang ditunjukkan di atas.
Pada awal pengerjaan, kita akan melakukan permainan penelitian tentang topik dan gaya yang serupa, kemudian kita akan memilih opsi yang paling berhasil dan menarik yang akan kita gunakan sebagai referensi. Dengan demikian, kami menghemat waktu, bukan menciptakan kembali roda dari awal, tetapi mulai dari apa yang telah kami lakukan sebelumnya. Kemudian kami menjelaskan secara detail apa yang harus terjadi dengan objek animasi tersebut. Ini dilakukan terutama untuk diri Anda sendiri, agar tidak melupakan sesuatu yang penting, serta untuk dokumentasi penulisan selanjutnya.
Sebagai contoh, mari kita ambil popup berikut dan menganalisis seluruh urutan pembuatan animasi di atasnya.
Mari kita gambarkan secara singkat idenya:
- Munculnya pop-up setelah pemain lama absen dalam game;
- Buat animasi yang halus tapi cukup cepat;
- Gunakan animasi full frame;
- Menganimasikan setiap elemen;
- Menganimasikan meriam dinosaurus;
- Tambahkan cahaya animasi di bawah dinosaurus.
Saat tujuan menjadi jelas dan dirumuskan dengan jelas, Anda dapat melanjutkan ke tahap kedua.
Langkah kedua: membuat referensi
Kami membuat referensi animasi kami sendiri, yang selanjutnya akan didemonstrasikan, disempurnakan, dan diubah.
Untuk ini, program seperti Adobe Animate, After Effects, Spine, dll. Pada tahap ini, tidak masalah bagi kami program mana yang akan dianimasikan (pengecualian mungkin Spine, karena editor ini memiliki ekspor animasi ke banyak mesin), jadi kami memilih mana yang lebih nyaman dan lebih cepat bagi kami. Anda bahkan dapat menganimasikan elemen bingkai demi bingkai di Photoshop, tetapi ini sudah eksotis. Saya lebih suka bekerja di After Effects karena ini adalah editor paling fleksibel dalam hal animasi: Anda dapat menerapkan hampir semua ide yang muncul di benak Anda.
Jangan lupa untuk memperhitungkan pengaturan waktu agar semua elemen UI berperilaku baik: tanpa desinkronisasi, penundaan, dan dalam urutan yang benar.
Kita tidak boleh melupakan durasi animasi itu sendiri. Misalnya, jika kemunculan jendela membutuhkan waktu lebih dari satu detik, dan dalam permainan itu muncul cukup sering, pemain akan sangat cepat bosan dengan animasi yang berlarut-larut dan akan kesal. Pada saat yang sama, jika kemunculan suatu elemen jarang terjadi, dan acara ini membawa kegembiraan bagi pemain (misalnya, menerima peti, hadiah, atau pencapaian), Anda dapat membuat animasi penampilan lebih panjang dan lebih berwarna.
Tahap tiga: implementasi
Di sini kami mengoptimalkan semua grafik yang digunakan dalam referensi: mengiris partikel, cahaya, latar belakang, dinosaurus, dan hal-hal kecil lainnya - dengan kata lain, semua efek visual.
Contoh pemotongan yang dioptimalkan Pemotongan
elemen semacam itu diperlukan untuk mengurangi ukuran animasi akhir, karena ada banyak elemen lain dalam proyek, dan setiap megabyte itu penting. Jika Anda tidak mengoptimalkan elemen irisan, maka situasi mungkin muncul bahwa animasi indah Anda akan melambat. Setelah itu, dengan menggunakan animator dari mesin tempat game dikembangkan, kami mengulangi animasi yang sama yang dilakukan pada tahap referensi.
Mengapa Anda tidak dapat melakukan semuanya di mesin sekaligus? Jawabannya tidak jelas, tetapi cukup sederhana: ketika Anda membuat animasi, misalnya, di After Effects, Anda hanya memiliki program animasi dan fungsinya. Tidak perlu mengonfigurasi kamera dalam game agar dapat ditampilkan dengan benar di UI. Tidak perlu mengoptimalkan grafik dan membagi semuanya menjadi komponen-komponennya: Anda dapat dengan mudah mengganti elemen apa pun, atau bahkan memikirkan ulang animasi sepenuhnya, mengubahnya sepenuhnya. Jika Anda membuat semuanya sekaligus di mesin gim, Anda akan membuang banyak waktu untuk mengoptimalkan file, Anda secara teknis akan terjepit dan menghabiskan banyak waktu untuk mengiris grafik untuk animasi pada tahap awal, meskipun pada akhirnya bisa berubah menjadi sangat berbeda.
Kesimpulan
Terakhir saya akan merangkum materi dan memberikan beberapa tip singkat. Saat bekerja dengan animasi, pikirkan terlebih dahulu, amati pengaturan waktu, gunakan animasi penuh bila memungkinkan, dan jangan lupa untuk melihat animasi dari proyek lain untuk referensi yang memungkinkan.
Jika Anda menikmati artikel ini, artikel berikutnya direncanakan tentang bagaimana Anda dapat menggunakan prinsip-prinsip animasi Disney di UI. Pelajari lebih lanjut tentang prinsip itu sendiri di sini .