Memperkenalkan Timeline di Unity

[Tutorial ini memiliki sekitar 50 MB gambar, termasuk animasi GIF]

Pengembang sering menggunakan cutscene untuk memberi tahu bagian dari plot game atau untuk memikat pemain. Beberapa game membuat adegan animasi yang dirender khusus dengan model yang sangat terperinci, sementara yang lain menggunakan model nyata dalam game. Berkat penggunaan model dalam gim, Anda dapat menghemat banyak uang dan waktu, karena Anda tidak harus membuat model, rig, dan animasi baru khusus untuk cutscene. Tetapi bahkan jika Anda menggunakan model yang sudah jadi, ini tidak berarti Anda harus mengorbankan efek atau drama khusus! Unity memiliki alat yang ampuh untuk membuat cutscene yang menarik - Unity Timeline!

Dalam tutorial ini, Anda akan mengenal Timeline dan belajar cara membuat cutscenes dengan animasi dan perubahan kamera.

Mulai bekerja

Unduh rancangan proyek dan proyek selesai dari sini .

Buka file Proyek Pemula dan muat adegan Utama. Dia akan menjadi fondasi kita. Ada seorang pahlawan di dalamnya, berdiri di atas menara dan memandang dunia:


Dengan bantuan Anda, dia akan dapat melompat dari menara, berbalik, pergi ke peti harta karun dan membukanya dengan tendangan. Dengan animasi ini, kamera juga akan mengubah posisinya. Seperti apa adegan yang sudah jadi:

Apa itu Timeline?

Dalam tutorial ini kita akan bekerja dengan Garis Waktu Persatuan - tetapi apa itu garis waktu? Timeline adalah GameObject dengan komponen timeline yang dapat diedit di jendela Unity Timeline, yang mengontrol kerangka kunci animasi dan siklus hidup objek. Saat membuat cutscene menggunakan Unity Timeline, kami mengatur kunci animasi dan menentukan kapan mereka harus bekerja. Dalam tutorial ini kita juga akan menggunakan AnimationController, yang dapat dianggap sebagai superset dari kerangka kunci dari animasi.

Ketika karakter melakukan animasi, seperti berjalan, setiap individu yang bergerak dari suatu objek harus menunjukkan jalurnya. Dalam tutorial ini kita tidak akan terlibat dalam pembuatan model dan kecurangan animasi - semuanya telah dilakukan untuk kita. Tapi itu berguna untuk mengetahui bahwa ketika Anda secara manual mengatur keyframe untuk animasi atau menggunakan AnimationController, mereka pada dasarnya adalah hal yang sama: posisi objek pada titik waktu tertentu. Timeline mengontrol semua gerakan ini untuk membuat adegan. Anda akan memahami semua ini ketika Anda mulai memahami Garis Waktu Persatuan.

Namun sebelum Anda terjun ke dalam penelitian, ada baiknya untuk memberikan tinjauan singkat tentang jendela Timeline. Lihat gambar dan baca deskripsi di bawah angka:

1. Aset Timeline: Ini adalah trek yang dipetakan ke GameObject di hierarki. Ini menyimpan keyframe yang terkait dengan GameObject ini, digunakan untuk melakukan animasi atau untuk menentukan apakah GameObject aktif.
2. GameObject Terkait: Ini adalah GameObject yang dikaitkan dengan trek.
3. Bingkai: Ini adalah kerangka Timeline yang saat ini ditetapkan. Ketika kami perlu mengubah animasi, kami mengatur keyframe di frame awal dan akhir.
4. Track Group: meningkatkan skala adegan juga meningkatkan jumlah trek. Anda dapat mengatur trek dengan mengelompokkannya.
5. Tombol Rekam: ketika tombol ini aktif, kita dapat mengubah bingkai saat ini dan mengatur posisi dan / atau rotasi GameObject di layar. Perubahan akan direkam.
6. Ikon Kurva: mengklik ikon ini akan membuka jendela Kurva, di mana Anda dapat menyempurnakan detail kerangka kunci terkait dari animasi untuk mengubahnya dengan cara yang diinginkan.

Jangan khawatir jika informasi ini tampaknya terlalu rumit untuk Anda sejauh ini - dalam proses menyelesaikan tutorial kami akan kembali ke sana. Pada tahap ini, yang paling penting adalah untuk mengingat di mana jendela Timeline berada, dan ketika Anda memilih GameObject Timeline, Anda dapat mengakses jendela Timeline.

Cahaya, kamera, MOTOR!

Setelah memuat adegan utama, klik Mainkan. Anda akan melihat seorang pahlawan berdiri di atas menara:


Ini adalah animasi default yang ditentukan dalam pengontrol Animasi. Dalam tutorial ini kita akan menggunakan animasi yang sudah dibuat, sehingga Anda tidak perlu khawatir tentang struktur internal model, animasi atau pengontrol. Tetapi jika Anda ingin memahami proses ini, Anda dapat mempelajari tutorial kami Pengantar Animasi Unity .

Membuat GameObject dari tipe Timeline

Langkah pertama adalah membuat Timeline GameObject. Buat GameObject kosong dengan mengklik kanan (pada Mac dengan Command ditekan) di jendela Hierarchy dan pilih Create Empty . Jadi kami menambahkan GameObject ke tempat kejadian dan memilihnya:


Tanpa menghapus pilihan dari GameObject, buka menu Window dan pilih Timeline . Jendela Timeline terbuka. Klik pada tombol Buat , kotak dialog Simpan terbuka. Ubah nama file menjadi Timeline dan klik Simpan:


Ganti nama GameObject ke Timeline dengan mengkliknya, menekan tombol F2 dan memasuki Timeline :


Kami membuat Timeline GameObject yang akan mengoordinasikan semua animasi dan perubahan kamera dalam cutscene. Di dalam mesin, Unity menyimpan file aset bernama Timeline.playable ke disk. Dalam GameObject Timeline Unity menambahkan komponen Playable Director dan Animator .

Komponen Playable Director berisi bidang yang dapat dimainkan yang melekat pada aset Timeline yang baru saja kita simpan. Komponen Animator yang ditambahkan oleh Unity dalam teori seharusnya memungkinkan kami untuk menghidupkan Timeline GameObject, tetapi kami tidak akan melakukan ini, jadi Anda bisa mengabaikannya.

Sebelum melanjutkan, saya ingin menyeret tab Timeline ke bagian bawah layar. Ini akan memungkinkan kita untuk membuka jendela Scene dan Timeline secara bersamaan:


Pilih GameObject Timeline dan kembali ke jendela Timeline. Saat ini kami memiliki Jalur Animasi untuk Timeline GameObject. Kami tidak membutuhkannya, sehingga Anda dapat memilihnya dan tekan Hapus untuk menghapus:

Animasi lompatan!

Sekarang kita siap untuk memulai animasi. Luaskan GameObject Hero untuk melihat Model GameObject. Pilih Garis Waktu GameObject. Seret Model GameObject ke jendela Timeline; ini akan membuka menu track, jadi pilih Animation Track . Ulangi langkah ini untuk Pahlawan GameObject:

Catatan: kami menambahkan Hero dan Model untuk menggunakan ruang lokal nol dengan benar. GameObject Hero adalah wadah untuk Model GameObject, yang memungkinkan Anda untuk memainkan animasi tanpa mempengaruhi posisi dari mana mereka dimainkan. Ketika kita perlu memindahkan pahlawan, kita akan menghidupkan Hero GameObject. Ketika sebuah karakter perlu dianimasikan - apa yang dapat dilakukan saat bergerak - kita akan menggunakan Model GameObject. Tanpa hubungan orangtua-anak ini, animasi yang dimainkan oleh objek Model akan salah menimpa parameter gerak objek Pahlawan jika Anda tidak mengkonfigurasinya sebagai seorang anak.

Rekam bingkai kunci

Karena trek GameObject Hero mewakili posisi pahlawan, kita perlu mengatur posisinya sebagai kerangka kunci awal.

Pilih trek Pahlawan di jendela Timeline dan klik tombol Rekam (lingkaran merah) untuk mulai merekam. Pilih Pahlawan GameObject di jendela Hierarki dan atur Posisi X-nya ke -1 , lalu segera atur Posisi X-nya ke 0 .

Kembali ke jendela Timeline dan tekan tombol Rekam di trek Pahlawan untuk menyelesaikan rekaman . Jadi kami menambahkan keyframe untuk posisi awal pahlawan:


Dalam proyek kami, pahlawan sudah dalam posisi dari mana ia harus memulai. Namun, hingga kami mengubah posisi, itu tidak akan didaftarkan saat merekam sebagai bingkai kunci. Karena itu, jika Anda perlu mengatur kerangka kunci saat merekam untuk posisi yang sudah memiliki kerangka kunci, cukup gerakkan dan kembalikan untuk mendaftar.

Cara termudah untuk melakukan ini adalah mengatur Posisi X objek ke -1 relatif ke posisi saat ini, dan kemudian mengembalikan nilai ke tempatnya. Dalam tutorial ini kita akan menggunakan trik ini beberapa kali.

Selanjutnya, kita perlu pahlawan untuk menunggu 100 frame sebelum melompat dari menara. Saat ini, kami hanya menetapkan posisi awal pahlawan, tetapi kami harus memberikan posisi yang sama kepada pahlawan (yaitu di bagian atas menara) setelah 100 bingkai. Jika tidak, Unity akan segera mulai menginterpolasi gerakan.

Seperti sebelumnya, pilih GameObject Timeline , tetapi kali ini Anda harus mengklik bidang frame di bagian atas jendela dan masukkan "100" . Jadi kami memindahkan keyframe ke bingkai 100.

Tekan tombol Rekam untuk trek Pahlawan. Pilih GameObject Hero dan di bidang Transform jendela Inspektur, atur Posisi X-nya menjadi -1, dan kemudian segera kembali ke 0 . Tekan tombol Rekam lagi untuk berhenti merekam.


Jadi, kami telah menyiapkan kerangka kunci awal Hero dan siap untuk terus bekerja dengan animasi.

Tambahkan klip animasi

Menentukan Data Posisi

Pertama kita perlu mengatur data posisi.

Klik GameObject Timeline untuk memilihnya. Di jendela Timeline, tambahkan Animasi ke trek Model dengan mengklik kanan (pada Mac - Perintah mengklik) pada trek Model dan memilih Tambah Dari Klip Animasi . Sekarang pilih animasi Idle :


Selanjutnya, kita menggerakkan lompatan pahlawan dari menara, tetapi pertama-tama kita harus memindahkannya ke atas dan ke atas pagar, lalu turun ke tanah.

Untuk melakukan ini, pertama pilih jendela Timeline, dan kemudian pergi ke bingkai 138 . Tekan tombol Rekam di jalur Pahlawan. Sekarang pilih GameObject Hero . Di bidang Transform pada jendela Inspektur, atur Posisi Y ke 3.934 dan Posisi Z ke 1.97 .

Kembali ke jendela Timeline dan pergi ke frame 176 . Pilih GameObject Hero lagi dan atur Posisi Y ke 0 dan Posisi Z ke 5.159 . Selesai merekam dengan menekan tombol Rekam :


Simpan adegan dan klik Mainkan untuk melihat hasil pekerjaan Anda!


Tambahkan animasi

Kami mengatur posisi ini, tetapi bukan animasi yang dilakukan dengannya. Sekarang kita akan melakukannya.

Dengan jendela Timeline dipilih, klik kanan (pada Mac, tahan Command) pada trek Model dan klik Add From Animation Clip , lalu pilih Jump . Jadi, Anda menambahkan animasi Langsung segera setelah animasi Idle.

Seret sisi kanan animasi Lompat sehingga berada di bingkai 176 . Sekarang kami akan menambahkan Klip Animasi lain, tetapi kali ini kami akan menambahkan animasi Land (Anda tidak perlu mengubah panjangnya, cukup tambahkan):


Simpan adegan itu, klik Mainkan dan lihat hasilnya!

Tambahkan kamera

Agak sulit untuk mengikuti aksi setelah pahlawan melompat dari menara, jadi ini saat yang tepat untuk bekerja dengan kamera.

Di jendela Hierarki, ganti nama MainCamera ke Camera1 . Pilih Garis Waktu GameObject. Seret Camera1 ke jendela Timeline, ini akan membuka menu pemilihan trek; pilih Jalur Aktivasi . Seret jalur aktif Camera1 sehingga berakhir di frame 157 :

Petunjuk: penanda bingkai saat ini dapat diatur menggunakan bidang penghitung bingkai di Inspektur Timeline. Jika Anda mengatur penanda pada bingkai yang ingin Anda seret trek, trek akan melampirkan ke penanda bingkai.

Aktivitas atau tidak aktif GameObject selama adegan dikendalikan oleh Track Aktivasi . Kamera utama kami sekarang akan mati setelah bingkai 157. Klik Mainkan dan lihat hasilnya:


Sekarang kita akan menambahkan kamera lain, hanya itu akan melihat ke bawah untuk menunjukkan pahlawan setelah melompati pagar menara.

Di jendela Hierarki, pilih Camera1 dan duplikat dengan menekan Control-D (Command-D pada Mac). Ubah nama duplikat menjadi Camera2 dan nonaktifkan .

Dalam tutorial ini, kami menggunakan dua kamera lagi, jadi mari kita buat sekarang dengan mengulangi algoritma yang sama; ganti namanya menjadi Camera3 dan Camera4 dan putuskan sambungan. Setelah itu, semua objek permainan Kamera, kecuali Camera1, harus dimatikan. Seperti apa hierarki itu seharusnya:


Sekarang kita akan menempatkan Camera2. Pilih Camera2 dan di bidang Transform pada jendela Inspektur atur Y Position ke 10.75 dan Z Position ke 2.84 . Set X Rotation ke 79.5 :


Sedangkan untuk Camera1, pilih jendela Timeline dan seret objek Camera2 ke dalamnya dari Hierarchy; menu pemilihan trek muncul lagi, jadi pilih Activation Track . Seret bilah Aktif sehingga dimulai segera setelah aktivasi Camera1 selesai (frame 158). Seret sisi kanan trek Aktif untuk Camera2 sehingga berakhir pada bingkai 216 .

Simpan adegan itu, klik Mainkan dan saksikan perubahan kamera di adegan Anda.

Sudah waktunya untuk pergi ke harta karun!

Kami melihat dada

Sekarang pahlawan kita telah mendarat di tanah, dia harus berbalik ke peti harta karun dan mulai berjalan.

Pilih GameObject Timeline dan atur bingkai 202 . Tekan tombol Rekam di trek Pahlawan untuk mulai merekam.

Pilih GameObject Hero dan di bidang Transform jendela Inspektur, atur Y Rotation ke -1, dan kemudian segera ubah nilainya kembali ke 0 untuk mengatur kerangka tombol awal dari rotasi GameObject Hero.

Setelah selesai, pilih GameObject Timeline lagi dan atur bingkai 216 . Pilih GameObject Hero lagi, dan di bidang Transform jendela Inspektur, atur Y Rotation ke -90 .

Catatan: bingkai kunci dari posisi dan rotasi diatur secara independen satu sama lain. Sebelumnya, ketika kita mengatur posisi awal pahlawan, bingkai kunci untuk belokan tidak disimpan, jadi kita perlu mengatur bingkai baru sebelum pindah ke belokan yang diinginkan ke arah harta.

Selain itu, pahlawan harus dalam keadaan menunggu saat ini, jadi tambahkan animasi Idle ke Model Animation Track dan buat bertahan hingga frame 216 :


Jadi, pahlawan kita telah mendarat dan siap untuk mencari harta karun. Sudah waktunya untuk menuju padanya dan buka peti!

Petunjuk: jika trek Timeline menjadi terlalu besar, Anda dapat memutar roda mouse untuk mengubah skalanya. Untuk bergerak ke kiri atau ke kanan, tekan dan tahan tombol tengah mouse sambil menggerakkannya ke kiri atau ke kanan.

Kami mendekati harta karun itu

Pilih GameObject Timeline dan atur bingkai 216 . Tekan tombol Rekam di trek Pahlawan untuk mulai merekam.

Pilih GameObject Hero dan atur Posisi X ke -1 di bidang Transform jendela Inspektur, dan kemudian kembali ke 0 lagi untuk mengatur kerangka tombol untuk posisi awal. Selanjutnya pada Timeline, pilih frame 361 di jalur Hero.

Kembali ke GameObject Hero dan atur Posisi X ke -6 di bidang Transform pada jendela Inspektur. Kembali ke trek Pahlawan dan akhiri perekaman.

Terakhir beri objek Model animasi Walk , ikuti langkah yang sama seperti sebelumnya, dan kemudian regangkan ke frame 361 :


Anda mungkin memperhatikan bahwa sang pahlawan tampaknya melewati harta karun itu, tetapi sebenarnya itu adalah masalah dengan pratinjau Timeline, karena, seperti yang akan kita segera lihat, sang pahlawan langsung menuju dada dan berhenti.

Untuk mencegah Camera2 mengikuti seluruh jalur pahlawan, kami sekarang dapat menggunakan Camera3 untuk memotret dari belakang belakang pahlawan.

Untuk melakukan ini, di menu utama jendela Hierarchy, pilih dan seret Camera3 ke Model GameObject, yang terletak di dalam GameObject Hero, untuk menjadikan kamera sebagai anak.

Atur posisi Camera3 (X: 0, Y: 2.06, Z: -2.5) . Beri giliran (X: 0, Y: 0, Z: 0) . Hirarki akan terlihat seperti ini:


Karena kenyataan bahwa Camera3 sekarang adalah anak dari Model GameObject, itu akan mengulangi semua gerakan Model GameObject, melihatnya dari belakang. Namun, Camera3 masih membutuhkan trek aktivasi agar diaktifkan pada waktu yang tepat.

Seret GameObject Camera3 ke Timeline dan pilih Activation Track , seperti yang kami lakukan dengan Camera1 dan Camera2. Atur bingkai awal Camera3 ke bingkai akhir Camera2, dan atur bingkai akhir ke Camera3 ke 361 :


Sekarang simpan adegan itu, klik Mainkan dan lihat bagaimana hasilnya:


Kami sudah melakukan hampir semuanya! Sekarang pahlawan hanya perlu membuka peti ... tentu saja, menendangnya!

Buka peti

Untuk tampilan akhir, kami menggunakan Camera4, mengaturnya seperti yang kami lakukan dengan Camera1 dan Camera2.

Seret Camera4 ke Timeline dan tambahkan Track Aktivasi . Atur frame awal Camera4 ke akhir fase aktivitas Camera3 dan lanjutkan ke frame 555 . Seharusnya terlihat seperti ini:


Tambahkan animasi Jurus . Klik kanan (pada Mac, tahan Command) di trek Model. Pilih Tambahkan Animasi Dari Klip , lalu pilih Tendang . Jangan mengubah durasinya. Trek Model sekarang akan terlihat seperti ini:


Kita perlu membuka peti, jadi sekarang kita akan menambahkan animasi sampulnya. Menyiapkan animasi ini mirip dengan yang kami lakukan sebelumnya.

Luaskan GameObject ChestBottom di jendela Hierarchy. Seret GameObject ChestLid ke Timeline dan pilih Animation Track . Di Timeline, atur bingkai 389 . Sekarang pilih track ChestLid . Klik pada tombol Rekam .

Sekarang setelah perekaman sedang berlangsung , pilih GameObject ChestLid di jendela Hierarchy dan atur Posisi X ke -1 , lalu kembali ke 0 untuk mengatur posisi awal. Di jendela Timeline, atur bingkai 555 . Terakhir, di bidang Transform pada jendela Inspektur, atur Y Position ChestLid ke 6 . Tekan tombol Rekam di trek lagi untuk mengakhiri rekaman.


Jadi kami menghidupkan tutup dada sehingga terbang melalui dinding.

Sekarang Anda perlu menempatkan Camera4 sehingga di atas dada ketika tutupnya terbang. Kami akan mengulangi langkah yang sama lagi seperti untuk kamera sebelumnya, jadi saya tidak akan menjelaskan setiap tindakan secara detail.

Beri posisi objek Camera4 (X: -9.00, Y: 5.4, Z: 5.18) . Atur Camera4 untuk memutar (X: 90, Y: 0, Z: 0) .


Seperti semua kamera lain yang ditambahkan, menambahkan animasi membuat pemandangan lebih menarik, jadi Anda harus membuat kamera memperbesar setelah membuka peti.

Pilih jendela Timeline . Seret GameObject Camera4 ke dalamnya dan buat Track Animasi . Setel trek 389 untuk dilacak. Klik pada trek Camera4 , lalu klik tombol Rekam . Pilih GameObject Camera4 . Di bidang Transform pada jendela Inspektur, atur Posisi X ke 0, lalu -9 lagi .

Di jendela Timeline , seret Trek Animasi ke bingkai 555 .

Akhirnya atur Y Position of Camera4 ke 3.74 :


Adegan akhirnya berakhir. Klik Mainkan dan beri peringkat!

Mengelola dengan kerumitan: mengelompokkan trek

Itu adalah animasi singkat dari segalanya dengan beberapa "aktor", jadi cukup mudah bagi kami untuk melacak objek dan trek game. Tetapi ketika membuat adegan yang lebih kompleks dengan banyak bagian dan aktor yang bergerak, menjadi sangat sulit untuk dikendalikan. Itu sebabnya pemesanan sangat diperlukan. Meskipun adegan sudah siap, mari kita menghabiskan beberapa menit mengorganisirnya - di masa depan Anda masih akan berterima kasih kepada diri sendiri untuk ini.

Salah satu cara untuk mengatur pekerjaan Anda adalah dengan mengelompokkan trek. Pertama, klik kanan di bawah trek di jendela Timeline dan pilih Track Group . Klik pada Track Group dan di Inspektur ubah namanya menjadi Aktivasi :


Ulangi proses ini dan buat Grup Track yang disebut Animasi . Timeline sekarang akan terlihat seperti ini:


Sekarang seret semua trek dengan bagian Aktif ke grup Aktivasi , dan sisanya ke grup Animasi . Sekarang Anda dapat membuka dan menutup setiap grup untuk kenyamanan bekerja dengan mereka:


Jangan lupa untuk menyimpan pekerjaan Anda. Duduk di kursi direktur Anda dan pujilah diri Anda - Anda telah menyelesaikan Timeline pertama Anda.

Ke mana harus pergi selanjutnya

Jika Anda melewatkan beberapa bagian tutorial, maka jangan lupa bahwa Anda dapat mengunduh benda kerja dan proyek yang sudah selesai dari sini .

Kami bekerja keras dan menciptakan cutscene menggunakan animasi model, mengubah kamera dan memperbarui siklus hidup objek, tetapi banyak lagi yang bisa dipelajari di sini. Salah satu aspek terpenting yang terkait dengan Timeline adalah pembuatan skrip Anda sendiri di mana Anda dapat mengaitkan animasi dengan kode yang dapat dijalankan dengannya. Pelajari lebih lanjut tentang skrip di sini . Jika Anda sudah merasa nyaman, cobalah menambahkan skrip ke adegan setelah membuka peti harta karun.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang animasi di Unity secara umum, lihat tutorial kami yang luar biasa Pengantar Animasi Unity.

Untuk mempelajari lebih lanjut tentang membuat model 3D dan jendela Animasi, lihat seri rinci tutorial pengembang Unity yang disajikan di sini .

Dan yang terakhir - jika Anda tertarik untuk membuat game, maka Anda dapat membeli buku kami Unity Games By Tutorial . Ini berbicara tentang membuat empat jenis game dari awal dengan deskripsi rinci dari setiap tahap proses.