Editor Grafik Animasi

Editor Grafik Animasi adalah alat berbasis node visual yang memberdayakan seniman teknis dan animator untuk membangun logika animasi yang kompleks langsung di dalam Roblox Studio. Dengan menyediakan antarmuka yang disederhanakan untuk membuat perilaku seperti pohon campuran, alat ini menghilangkan ketergantungan tradisional pada pemrograman manual untuk gerakan karakter.

Sistem ini bekerja bersamaan dengan alur kerja animasi yang sudah ada:

• Editor Animasi: Terus gunakan Editor Animasi sebagai alat utama Anda untuk membuat klip individu dan menyempurnakan keyframe dan kurva.
• Editor Grafik Animasi: Gunakan alat ini untuk mengambil klip tersebut dan mengorganisasikannya ke dalam pohon logika untuk menggerakkan perilaku permainan yang canggih.

Dirancang untuk meningkatkan kolaborasi, grafik visual memungkinkan pengembang untuk dengan cepat memeriksa, memperbaiki, dan memahami logika yang dibuat oleh animator. Sementara seniman fokus pada penyempurnaan gerakan interaktif, pengembang masih dapat mengakses node grafik animasi secara programatis untuk kontrol langsung atas animasi dan status yang dicampur.

Membangun grafik

Untuk memulai membangun logika untuk karakter yang dapat dianimasikan, akses editor Grafik Animasi melalui tab Avatar di pita Studio. Langkah-langkah berikut menunjukkan cara menginisialisasi rig dan membangun jaringan node dasar menggunakan animasi berjalan dan melambaikan tangan default.

Untuk penjelasan lebih dalam tentang aplikasi praktis, Anda dapat menjelajahi File Referensi Grafik Animasi, yang berisi contoh implementasi dasar dan kompleks.

Untuk membuat grafik animasi Anda sendiri, mirip dengan contoh dasar yang diberikan dalam referensi, gunakan langkah-langkah berikut:

1. Di Studio, tambahkan rig yang dapat dianimasikan dengan menavigasi ke tab Avatar dan memilih Karakter ⟩ Avatar Saya.

   

2. Buka Editor Grafik Animasi dengan menavigasi ke Editor Grafik di tab Avatar.

   

3. Pilih rig yang dapat dianimasikan di viewport 3D. Di tampilan editor grafik, pilih Grafik di sudut kiri atas dan pilih Baru untuk membuat grafik baru.

4. Di Editor Grafik, klik kanan dan pilih Sisipkan Node ⟩ Klip.

   

5. Di node Klip baru, atur ID Animasi.

   1. Pilih dropdown ID Animasi.

   2. Untuk mengirimkan ID aset animasi tertentu, klik Impor.

      

   3. Di bidang ID Animasi, tambahkan animasi Berjalan default: 507777826.

   4. Pilih Impor.

6. Tambahkan node klip lain dengan mengulangi langkah 4-5 menggunakan animasi Melambaikan tangan default: 507770239.

   

7. Di Editor Grafik, klik kanan dan pilih Tambahkan.

   

8. Sambungkan node Klip ke node Tambah dengan menyeret konektor output kanan atas ke port yang sesuai:

   1. Sambungkan node Klip dengan animasi Berjalan ke port Dasar.
   2. Sambungkan node Klip dengan animasi Melambaikan tangan ke port Additive.

   

9. Dari node Tambah, sambungkan konektor output kanan atas ke port Output Grafik Pose.

   

10. OPSIONAL

    Tetapkan parameter ke variabel Kecepatan Anda.

    1. Klik dan seret port Kecepatan hijau ke area kosong. Node parameter baru ditampilkan.

       

    2. Di sudut kiri atas editor grafik, gunakan panel parameter untuk dengan cepat memodifikasi parameter di node Anda. Anda juga dapat mengakses ini secara programatis.

       

11. Uji animasi dengan menekan tombol putar.

    

12. Cobalah menguji berbagai bobot, kecepatan, mode putar, dan animasi lainnya. Untuk informasi lebih lanjut tentang node individu, lihat Referensi Node.

Integrasi API

Membuat dan menerapkan Grafik Animasi mengikuti jalur animasi standar Roblox. Setelah memilih rig di Editor Grafik Animasi, aset AnimationGraphDefinition baru dibuat. Aset ini berfungsi sebagai wadah untuk node, koneksi, dan parameter Anda. Setelah logika Anda selesai, Anda menerbitkan grafik untuk menerima ID Aset standar.

Dalam skrip Anda, Anda berinteraksi dengan grafik ini dengan memuatnya ke dalam Animator seperti yang Anda lakukan dengan animasi tradisional. Untuk menggerakkan logika internal grafik, gunakan AnimationTrack:SetParameter() untuk mengirimkan nilai waktu nyata—seperti kecepatan gerakan atau boolean status—langsung ke variabel grafik.

local animation = Instance.new("Animation")
animation.AnimationId = "rbxassetid://123456789" -- ID Grafik Anda yang Diterbitkan

local animationTrack = animator:LoadAnimation(animation)
animationTrack:Play()

-- Pembaruan parameter dinamis melalui RunService
game:GetService("RunService").Stepped:Connect(function(_, dt)
    local currentSpeed = humanoidRootPart.AssemblyLinearVelocity.Magnitude
    animationTrack:SetParameter("humanoidSpeed", currentSpeed)
end)

Referensi Node

Aturan acara global

Untuk semua node dan transisi, aturan berikut berlaku secara default:

• Acara menyebar ke atas dari node sumber mereka melalui grafik. Setiap acara membawa bobot yang mewakili pengaruh sumbernya dalam campuran akhir. Jika bobot mencapai nol pada titik mana pun, acara tersebut dibungkam.
• Node tanpa logika acara khusus meneruskan semua acara tanpa perubahan; node yang mencampur atau memilih antara input mungkin mengubah bobot atau memblokir acara dari input non-primer (lihat bagian Acara per-node).
• Acara penanda yang mencapai puncak grafik dapat diamati melalui AnimationTrack:GetMarkerReachedSignal().

Transisi

Beberapa node dalam Grafik Animasi (seperti Pilih, Pilih Prioritas, Urutan, dan Urutan Acak) mengelola bagaimana animasi bercampur saat beralih antara input aktif. Untuk mencegah redundansi dalam referensi node, perilaku ini didefinisikan oleh kelompok properti transisi standar.

Transisi default

Perilaku pencampuran dasar yang diterapkan pada node setiap kali beralih ke input aktif baru.

• DefaultTransitionDuration (number): Waktu (dalam detik) yang dibutuhkan untuk sepenuhnya bercampur ke dalam pose baru.
• DefaultTransitionCurve (Enum.PoseEasingStyle): Fungsi easing yang diterapkan selama pencampuran. Saat ini hanya mendukung Enum.PoseEasingStyle.Linear dan Enum.PoseEasingStyle.CubicV2.

Override transisi

Properti tautan spesifik input yang menggantikan transisi default. Durasi dan kurva override diterapkan saat node bertransisi ke input tersebut, kecuali untuk transisi BeforeFinished, yang menggunakan override input keluar.

• TransitionOverrideDuration (number): Mengganti durasi transisi default.
• TransitionOverrideCurve (Enum.PoseEasingStyle): Mengganti kurva transisi default. Saat ini hanya mendukung Enum.PoseEasingStyle.Linear dan Enum.PoseEasingStyle.CubicV2

Waktu transisi

Untuk jenis node urutan, pengaturan berikut mengontrol kapan urutan maju ke input berikutnya:

• WaitFor (Enum.AnimationNodeWaitFor): Mengatur kondisi untuk maju. Gunakan Enum.AnimationNodeWaitFor|Finished (default) untuk menunggu input saat ini selesai atau menyelesaikan loop, atau Enum.AnimationNodeWaitFor|Trigger untuk maju ketika WaitForTrigger adalah true. Atur default tingkat node dengan DefaultWaitFor, atau ganti untuk input dengan TransitionOverrideWaitFor.

  • When (Enum.AnimationNodeTransitionWhen): Berlaku ketika Wait For adalah Enum.AnimationNodeWaitFor|Finished. Atur default tingkat node dengan DefaultTransitionWhen, atau ganti untuk input keluar dengan TransitionOverrideWhen.

    • Enum.AnimationNodeTransitionWhen|Finished (default): Mulai mencampur setelah input saat ini selesai.
    • Enum.AnimationNodeTransitionWhen|BeforeFinished: Mulai mencampur satu durasi transisi sebelum input saat ini selesai, sehingga pencampuran tumpang tindih dengan akhir animasinya. Misalnya, transisi 0,2 detik dimulai selama 0,2 detik terakhir dari animasi.

RandomSequenceNode juga mendukung DefaultTransitionWhen dan TransitionOverrideWhen untuk mengontrol kapan pencampuran dimulai.

Untuk transisi mesin status, lihat Properti transisi.

Replikasi

Parameter grafik animasi dan status node internal direplikasi secara otomatis. Mode replikasi ditentukan oleh Workspace.AuthorityMode pada saat skrip Animate dibuat:

• Dalam Enum.AuthorityMode.Automatic: Parameter yang diatur melalui AnimationTrack:SetParameter() direplikasi secara otomatis ke rekan-rekan lainnya.
• Dalam Enum.AuthorityMode.Server: Server menggerakkan simulasi grafik sepenuhnya. Semua status node, seperti waktu yang berlalu untuk Enum.AnimationNodeType.ClipNode, dan parameter grafik direplikasi secara otomatis dari server ke klien. Klien pemain yang memiliki menggunakan prediksi untuk pemutaran lokal yang halus.

Skrip Animate Contoh

Untuk menghasilkan skrip contoh untuk menggerakkan grafik animasi untuk sebuah rig, gunakan Grafik -> Buat skrip Animate di Editor Grafik Animasi. Ini menghasilkan hierarki skrip yang ditempatkan di bawah StarterCharacterScripts (untuk karakter pemain) atau langsung pada rig (untuk NPC):

Animate (ModuleScript)
├── RunClient (LocalScript)
└── RunServer (Script, RunContext = Legacy)

Skrip Animate ModuleScript berisi logika pemuatan grafik. Skrip RunClient dan RunServer memanggilnya dalam konteks yang sesuai. Skrip mana yang disertakan tergantung pada kasus penggunaan:

Atribut berikut disimpan pada skrip Animate dan mengonfigurasi perilakunya:

Replikasi parameter dalam mode Otomatis

Ketika Workspace.AuthorityMode adalah Otomatis:

• klien yang memiliki menggerakkan grafik karakter pemain; server menggerakkan grafik NPC.
• Parameter yang diatur melalui AnimationTrack:SetParameter() secara otomatis direplikasi ke rekan-rekan lainnya. Beberapa panggilan SetParameter dalam satu frame digabungkan (penulis terakhir menang).
• Tidak ada pemrograman tambahan yang diperlukan untuk transportasi parameter — mesin menangani replikasi secara internal.
• Klien lain melihat pembaruan parameter dengan sedikit keterlambatan (satu interval kirim ditambah latensi jaringan).

Otoritas server

Ketika Workspace.AuthorityMode adalah Server:

• server bersifat otoritatif untuk semua grafik — ia menjalankan simulasi dan mereplikasi status grafik secara penuh.
• Apa yang direplikasi: Baik parameter maupun status node internal, termasuk waktu yang berlalu, pilihan saat ini, kemajuan transisi, jumlah loop, dan biji RNG. Ini memastikan semua klien melihat perilaku animasi yang identik.
• Karakter pemain: Server menggerakkan grafik. Skrip RunClient klien yang memiliki secara otomatis mengaktifkan Enum.PredictionMode pada Animator, sehingga pemain lokal melihat animasi yang halus dan diprediksi yang disesuaikan dengan server saat terjadi ketidakcocokan.
• NPC: Server menggerakkan grafik secara eksklusif; klien mengamati status yang direplikasi tanpa simulasi lokal.

Menggerakkan parameter

Gunakan AnimationTrack:SetParameter() dari setiap skrip yang menjalankan grafik:

• NPC (mode apa pun): Panggil SetParameter dari RunServer (atau skrip server Script mana pun yang memiliki akses ke AnimationTrack).
• Karakter pemain dalam Enum.AuthorityMode.Server: Panggil SetParameter dari kedua RunServer dan RunClient. Server membutuhkan parameter untuk menggerakkan simulasi otoritatif, dan klien yang memiliki membutuhkan parameter yang sama untuk menggerakkan prediksi lokalnya.
• Karakter pemain dalam Enum.AuthorityMode.Automatic: Panggil SetParameter dari RunClient (atau skrip lokal LocalScript mana pun yang memiliki akses ke AnimationTrack).

Skrip Animate yang dihasilkan menyertakan blok SetParameter yang dikomentari sebagai titik awal. Hapus komentar dan modifikasi untuk menggerakkan parameter dari status permainan (kecepatan gerakan, status humanoid, arah input, dll.).