Fungsi Easing: Bikin Gerakan di Game Terasa Hidup

Geser panel menu dari kiri ke kanan dengan kecepatan konstan, dan hasilnya terasa kaku, seperti barang di atas ban berjalan. Beri gerakan yang sama awal yang cepat dan pendaratan yang lembut, dan tiba-tiba terasa rapi. Perbedaannya ada pada fungsi easing, salah satu cara paling murah untuk meningkatkan rasa sebuah game.

Apa itu fungsi easing?

Animasi memindahkan sesuatu dari nilai awal ke nilai akhir dalam rentang waktu tertentu. Di setiap saat kamu tahu seberapa jauh progresnya, dalam bentuk angka t dari 0 sampai 1. Tanpa easing, progres sama dengan waktu: di tengah durasi, objek berada tepat di tengah jalan. Itulah interpolasi linear, atau lerp.

Fungsi easing mengubah bentuk t sebelum dipakai. Kecepatan di sepanjang jalan berubah, sementara titik awal dan akhirnya tetap sama.

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

const t = Math.min(elapsed / duration, 1);
x = lerp(startX, endX, easeOutCubic(t));

Banyak kurva standar yang dipakai saat ini berakar dari persamaan easing Robert Penner, yang pertama kali populer di animasi Flash. Situs easings.net menampilkannya berdampingan lengkap dengan pratinjau langsung.

Jenis-jenis easing utama

Ease-out: mulai cepat, berhenti lembut

Gerakan dimulai dengan cepat lalu melambat saat tiba. Rasanya responsif karena reaksinya langsung terlihat. Gunakan untuk elemen yang masuk ke layar dan apa pun yang merespons input pemain, seperti popup, koin yang terbang ke HUD, atau kamera yang mengunci target.

Ease-in: mulai pelan, selesai cepat

Gerakan makin lama makin cepat, seperti benda yang mulai jatuh. Gunakan untuk elemen yang keluar dari layar. Hindari untuk respons terhadap input, karena awal yang pelan terasa seperti lag.

Ease-in-out: lembut di kedua ujung

Pelan, cepat, lalu pelan lagi. Cocok untuk kamera yang berpindah antara dua titik dan gerakan cutscene, saat keberangkatan dan kedatangan sama-sama harus terasa tenang.

Back, elastic, dan bounce

Back sedikit melewati target lalu kembali. Elastic bergoyang seperti pegas. Bounce menabrak titik akhir lalu memantul. Ketiganya memberi karakter pada tombol, hadiah, dan game bergaya kartun, tetapi gunakan secukupnya agar antarmuka tidak terasa ramai.

Easing di game engine

Kamu jarang perlu menulis kurva sendiri:

• Godot: kelas Tween memungkinkan kamu memadukan jenis transisi (misalnya back atau elastic) dengan arah easing (in, out, atau in-out).

• Unity: AnimationCurve memungkinkan desainer menggambar kurva sendiri di Inspector lalu membacanya dari kode.

• Web dan UI: CSS mendukung ease-in, ease-out, cubic-bezier(), dan lainnya, seperti tercantum di referensi easing function dari MDN.

Bug lerp yang klasik

Jalan pintas populer untuk gerakan mengikuti yang halus adalah memindahkan sebagian dari sisa jarak di setiap frame:

// Bergantung pada frame rate
x += (target - x) * 0.1;

Hasilnya tampak bagus, tetapi kecepatannya berubah mengikuti frame rate. Pada 120 FPS objek menyusul jauh lebih cepat daripada pada 30 FPS. Solusinya adalah mengalikan dengan waktu, topik yang kami bahas lengkap dalam artikel tentang delta time:

// Tidak bergantung pada frame rate
x += (target - x) * (1 - Math.exp(-speed * dt));

Tips praktis

1. Jadikan ease-out sebagai pilihan awal. Saat ragu, ini pilihan paling aman untuk gerakan interaktif.

2. Jaga animasi UI tetap singkat. Panduan durasi animasi dari Nielsen Norman Group menyarankan sebagian besar animasi antarmuka hanya berlangsung beberapa ratus milidetik. Pemain tidak boleh dibuat menunggu menu.

3. Sesuaikan kurva dengan materialnya. Benda berat bergerak dengan easing yang lambat; benda ringan dan kenyal boleh melewati target.

4. Terapkan easing tidak hanya pada posisi. Skala, rotasi, warna, dan volume suara juga terasa lebih baik dengan kurva yang sama.

5. Bandingkan secara berdampingan. Rekam versi linear dan versi dengan easing, lalu tonton bergantian. Perbedaannya biasanya langsung terasa.

Easing tidak mengubah ke mana sesuatu bergerak. Easing mengubah rasanya saat menuju ke sana.

Jelajahi lebih lanjut

Easing adalah salah satu bahan game feel, bersama trik seperti coyote time dan input buffering. Lihat game yang sedang kami kembangkan di Ryuartistry.