Belajar Godot - Animations & Visual Polish

#Pendahuluan

Di episode 11 kalian menaklukkan input: Input Map, keyboard, mouse, touch, sampai gamepad, plus pola pemisahan input UI dan input gameplay. Karakter kini bisa digerakkan dengan nyaman di berbagai perangkat. Tapi masih ada satu hal yang membuat game terasa "kaku": pergerakan hanya didukung fisika, sedangkan ekspresi — lompat, berkedip, transisi layar — belum punya nyawa.

Episode 12 mengisi celah itu: animasi dan visual polish. Kita membedah AnimationPlayer sebagai mesin timeline, AnimationTree dengan blend tree dan state machine untuk transisi antar animasi, animasi prosedural yang dihitung dari kode, particle systems untuk ledakan dan debu, lalu sentuhan akhir berupa shader ringan dan screen transition. Di akhir episode, game kalian akan terasa jauh lebih "hidup".

#AnimationPlayer: Timeline Animasi

AnimationPlayer adalah jantung animasi Godot. Ia bekerja seperti editor timeline: kalian punya tracks, keyframe di sepanjang sumbu waktu, dan kurva interpolasi di antaranya. Untuk animasi dasar, kalian tidak perlu menulis kode sama sekali — cukup atur keyframe di editor.

Ada beberapa jenis track yang perlu kalian kenali:

• Property tracks — mengubah properti node apa pun dari waktu ke waktu, misalnya skala sprite atau warna material.
• Transform tracks — jalan pintas untuk posisi, rotasi, dan skala, dengan interpolasi yang sudah dioptimalkan.
• Method call tracks — memanggil fungsi pada waktu tertentu, misalnya memicu suara langkah di frame kaki menyentuh tanah.
• Audio tracks — memutar clip audio pada titik tertentu di timeline.

Dari kode, semuanya tinggal dipanggil lewat API kecil berikut:

Memutar animasi dari kode

$AnimationPlayer.play("run")
$AnimationPlayer.get_animation("run").length
$AnimationPlayer.is_playing()

Satu hal penting: AnimationPlayer mengeksekusi tracks berdasarkan hierarki node, jadi tata nama jalur seperti Sprite2D:scale sangat memengaruhi struktur scene kalian. Buatlah animasi dengan nama yang jelas — idle, run, jump, attack — karena nama itu akan menjadi API yang dipakai kode dan AnimationTree.

#AnimationTree dan Blend Tree

AnimationPlayer hanya memutar satu animasi penuh dari awal sampai akhir. Untuk game yang butuh pencampuran dan transisi halus, gunakan AnimationTree sebagai pengatur logika di atasnya.

Konsepnya: AnimationPlayer tetap menyimpan semua animasi sebagai data, sedangkan AnimationTree memutuskan bagaimana animasi itu dicampur. Tambahkan node AnimationTree, arahkan anim_player ke AnimationPlayer, lalu pilih salah satu mode:

• Blend Tree — menggabungkan beberapa animasi sekaligus. Contoh paling umum: blend antara idle dan run berdasarkan kecepatan, sehingga transisi berjalan mulus dan tidak terpotong.
• State Machine — setiap state adalah satu animasi, dan transisi antar state diatur lewat kondisi. Cocok untuk alur seperti idle ke jump ke fall ke land.

Contoh blend tree sederhana: dua input animasi idle dan run dihubungkan ke node BlendSpace2D, lalu nilai blend_position menentukan campurannya. Dari kode:

Mengontrol blend berdasarkan kecepatan

func _physics_process(_delta: float) -> void:
    var kecepatan: float = velocity.length()
    $AnimationTree["parameters/blend/blend_amount"] = kecepatan / 200.0

Jalur parameters/... adalah cara Godot mengekspos parameter AnimationTree ke kode — pola yang sama berlaku untuk blend_position, travel, dan kondisi state machine.

#Animasi Prosedural dan Manajemen Transisi

Tidak semua gerakan perlu dianimasikan manual di editor. Untuk efek yang bergantung pada state — memantul saat berlari, gerakan nafas, ekor yang bergoyang, kedipan mata — animasi prosedural yang dihitung dari kode jauh lebih praktis: kalian cukup memakai fungsi sinus terhadap waktu.

Prosedural bob saat berlari

@export var bob_amplitude: float = 4.0
@export var bob_speed: float = 10.0
 
var waktu_berjalan: float = 0.0
 
func _physics_process(delta: float) -> void:
    waktu_berjalan += delta * bob_speed
    var offset_y: float = abs(sin(waktu_berjalan)) * bob_amplitude
    $Sprite2D.position.y = -offset_y

Di sinilah manajemen transisi menjadi krusial. Transisi yang kasar — lompatan instan dari idle ke attack — terlihat seperti kesalahan program. Solusinya: gunakan crossfade. Di state machine, metode travel() memastikan animasi berpindah melewati jalur yang sudah ditentukan alih-alih memotong langsung. Untuk AnimationPlayer biasa, pola klasiknya adalah memutar ulang dari posisi nol dengan kecepatan transisi yang bisa diatur.

#Particle Systems untuk VFX

Ledakan, percikan air, debu saat lari, confetti kemenangan — semua itu adalah domain particle systems. Godot menyediakan dua varian: GPUParticles2D yang dihitung di GPU (cepat, terbatas fitur pada beberapa hardware) dan CPUParticles2D yang dihitung di CPU (lebih lambat, tapi sangat mudah disetel dari kode).

Untuk efek instan seperti ledakan, atur one_shot menjadi aktif dan emitting menjadi true saat dipicu:

Memicu ledakan satu kali

func meledak() -> void:
    $GPUParticles2D.one_shot = true
    $GPUParticles2D.emitting = true

Beberapa setelan kunci yang wajib kalian kuasai: amount untuk jumlah partikel, lifetime untuk umur tiap partikel, spread untuk arah sebaran, gravity untuk tarikan, dan initial_velocity. Efek memukul terasa pas ketika partikel menyebar cepat lalu melambat; efek ambience (salju, hujan) justru butuh lifetime panjang dan emitting yang selalu aktif.

#Polish dengan Shader dan Screen Transition

Lapisan terakhir adalah sentuhan yang membuat game terasa "dipoles": shader ringan dan screen transition. Shader untuk 2D ditulis dalam bahasa shader Godot dan dipasang pada material dari node CanvasItem. Contoh paling sederhana — pulsasi halus pada sprite:

Shader pulsasi ringan

shader_type canvas_item;
 
uniform float kekuatan = 0.1;
uniform float kecepatan = 4.0;
 
void fragment() {
    float gelombang = sin(TIME * kecepatan) * kekuatan;
    vec2 uv = UV - vec2(0.5);
    vec2 baru = uv * (1.0 + gelombang) + vec2(0.5);
    COLOR = texture(TEXTURE, baru);
}

Untuk screen transition, pola paling sederhana dan paling sering dipakai adalah fade: sebuah ColorRect di CanvasLayer paling atas, warnanya dianimasikan lewat Tween. Inilah teknik dasar dari setiap "pindah scene" yang terasa profesional:

Fade keluar lalu pindah scene

func pindah_ke(scene_path: String) -> void:
    $UI/ColorRect.color = Color(0, 0, 0, 0)
    var tween := create_tween()
    tween.tween_property($UI/ColorRect, "color:a", 1.0, 0.5)
    tween.tween_callback(func():
        get_tree().change_scene_to_file(scene_path))

#Penutup

Kalian sekarang menguasai peta animasi Godot: AnimationPlayer sebagai timeline tempat semua animasi tinggal, AnimationTree dengan blend tree dan state machine untuk mencampur serta mentransisikan animasi secara halus, animasi prosedural berbasis sinus untuk gerakan yang bergantung pada nilai, particle systems untuk VFX instan maupun ambience, serta shader dan tween sebagai lapisan polish dan screen transition.

Inti yang harus dibawa pulang:

• AnimationPlayer menyimpan animasi sebagai timeline; AnimationTree mengatur bagaimana animasi dicampur dan bertransisi.
• Parameter AnimationTree diakses lewat jalur parameters/... dari kode.
• Animasi yang bergantung pada nilai kontinu sebaiknya dihitung prosedural, bukan dianimasikan manual.
• one_shot + emitting adalah pola untuk ledakan; emitting permanen untuk ambience.
• Screen transition dengan Tween dan CanvasLayer adalah teknik dasar yang paling berdampak.

Di episode 13, visual polish bukan lagi hal yang paling menantang — karena selanjutnya kalian membuat game kalian berbicara satu sama lain: multiplayer & networking, dari high-level API dan ENet, RPC dan sinkronisasi state, sampai pola authoritative server dan dasar-dasar keamanan jaringan. Siapkan dua instance Godot, karena episode berikutnya butuh teman bermain!