Panduan Membuat dan Menganimasikan Sprite Sheet di Roblox Studio

Menganimasikan elemen antarmuka (UI) 2D di Roblox Studio dapat memberikan nyawa pada game Anda. Salah satu teknik paling efisien untuk melakukan ini adalah menggunakan Sprite Sheet dan metode Flipbook.

Dalam tutorial ini, kita akan membahas tuntas apa itu sprite sheet, batasan yang ada di Roblox, perhitungan matematika di baliknya, hingga cara menganimasikannya menggunakan skrip bawaan Roblox (Luau).

1. Apa itu Sprite Sheet dan Flipbook?

Secara sederhana, Sprite Sheet adalah satu gambar statis berukuran besar yang berisi kumpulan banyak gambar kecil (frame). Sedangkan Flipbook (atau flipbooking) adalah proses menganimasikan sprite sheet tersebut di dalam game engine (seperti Roblox atau Unity) dengan cara menggeser tampilan dari satu frame ke frame lainnya secara cepat, mirip seperti buku animasi lipat.

Keunggulan utama teknik ini dibanding mengunggah banyak gambar terpisah adalah efisiensi memori (draw calls) dan waktu muat (loading time) yang jauh lebih cepat, karena game client hanya perlu mengunduh satu file tekstur saja.

2. Aturan Emas: Batasan Resolusi di Roblox

Sebelum mulai menggambar atau mendesain, Anda harus tahu satu aturan mutlak di Roblox: Batas maksimal resolusi gambar yang diunggah adalah 1024x1024 piksel.

Jika Anda mengunggah gambar lebih besar dari itu, Roblox akan secara otomatis mengompresnya. Hasilnya? Gambar Anda akan kehilangan kualitas, menjadi pixelated, dan terlihat buram. Oleh karena itu, seluruh grid animasi sprite sheet Anda harus muat di dalam kanvas maksimal berukuran 1024x1024 piksel.

3. Memahami Matematika Grid (Baris dan Kolom)

Engine membaca sprite sheet dari kiri atas ke kanan bawah. Mari kita buat perhitungan sederhana:

Jika kita memiliki kanvas berukuran 1024x1024 piksel dan ingin membuat animasi dengan 4 frame (format kotak 2x2):

Kolom (Columns): 2
Baris (Rows): 2
Ukuran per frame: 1024 dibagi 2 = 512 piksel.

Artinya, setiap frame dalam animasi Anda berukuran 512x512 piksel.

💡 Tips Resolusi Ganjil: Bagaimana jika Anda ingin membaginya menjadi 3 kolom? Angka 1024 tidak habis dibagi 3 (menghasilkan 341.33 piksel). Solusinya, kurangi kanvas Anda menjadi 1023x1023 piksel. Angka 1023 dibagi 3 menghasilkan 341 piksel per frame yang presisi tanpa ada sisa pecahan piksel yang membuat animasi terlihat melompat-lompat (jittering).

Gambar 1: Sketsa konsep Sprite Sheet 2x2 (1024x1024 px) dengan viewing window dan pergeseran koordinat offset.

4. Persiapan di Roblox Studio

Setelah Anda membuat desain sprite sheet di software seperti Photoshop, Aseprite, atau Figma dan mengekspornya dengan background transparan (format PNG):

Buka StarterGui di Explorer dan buat sebuah ScreenGui.
Masukkan ImageLabel ke dalam ScreenGui tersebut.
Ubah properti ScaleType dari ImageLabel menjadi Fit.
Tambahkan UIAspectRatioConstraint di dalam ImageLabel dan atur AspectRatio menjadi 1 (agar bentuknya selalu proporsional dan persegi).
Unggah gambar sprite sheet Anda melalui Asset Manager atau Game Settings, lalu salin Asset ID-nya.
Tempel ID tersebut ke properti Image pada ImageLabel Anda (misal: rbxassetid://1234567890).

Pada tahap ini, Anda akan melihat seluruh frame menumpuk menjadi satu gambar besar di dalam ImageLabel. Ini normal. Saatnya kita memotong dan memfokuskannya ke satu frame!

5. Menggunakan ImageRectSize dan ImageRectOffset

Dua properti ini adalah kunci utama teknik sprite sheet di Roblox:

ImageRectSize: Berfungsi untuk "memotong" (crop) ukuran jendela frame yang ditampilkan. Jika ukuran satu frame Anda adalah 512x512 piksel, ubah properti ini menjadi Vector2.new(512, 512). Sekarang, hanya satu frame yang terlihat di layar.
ImageRectOffset: Berfungsi untuk menggeser koordinat posisi area potong tersebut. Angka defaultnya adalah Vector2.new(0, 0) (frame pojok kiri atas). Jika Anda ingin berpindah ke frame di sebelah kanannya, geser koordinat X menjadi Vector2.new(512, 0).

Diagram Teknis ImageRectSize dan ImageRectOffset Roblox Studio Gambar 2: Diagram kalkulasi ImageRectSize, ImageRectOffset, dan rumus modulo pada skrip Luau.

6. Menganimasikan dengan Skrip Luau (Flipbooking)

Agar tidak perlu mengubah ImageRectOffset secara manual, kita menggunakan LocalScript. Masukkan sebuah LocalScript ke dalam ImageLabel Anda, lalu tempelkan kode berikut:

local image = script.Parent

-- Pengaturan Resolusi dan Grid
local width = 512    -- Lebar satu frame (piksel)
local height = 512   -- Tinggi satu frame (piksel)
local columns = 2    -- Jumlah kolom dalam sprite sheet
local frames = 4     -- Total frame animasi
local fps = 12       -- Kecepatan frame per detik (Frames Per Second)

-- Set ukuran potong (crop) awal
image.ImageRectSize = Vector2.new(width, height)

-- Loop Animasi
while task.wait(1 / fps) do
    for i = 0, frames - 1 do
        -- Hitung posisi X (Kolom) menggunakan Sisa Bagi (Modulo)
        local x = (i % columns) * width
        
        -- Hitung posisi Y (Baris) menggunakan pembulatan ke bawah (math.floor)
        local y = math.floor(i / columns) * height
        
        -- Terapkan pergeseran offset ke gambar
        image.ImageRectOffset = Vector2.new(x, y)
        
        task.wait(1 / fps)
    end
end

Penjelasan Logika Skrip:

Perulangan while task.wait(1 / fps) memastikan animasi terus berputar (looping) secara stabil dengan jeda waktu sesuai FPS yang diinginkan.
Operator Modulo (%) pada variabel x: Ketika i bertambah, nilai kolom akan berulang dari 0 sampai columns - 1, sehingga pembacaan otomatis kembali ke kolom paling kiri setelah mencapai ujung baris.
math.floor(i / columns) pada variabel y: Berfungsi menghitung indeks baris aktif, mendeteksi secara akurat kapan jendela potong harus turun ke baris berikutnya.

7. Masalah Umum & Solusi Kualitas Gambar

Bagaimana jika saya membutuhkan animasi UI beresolusi sangat besar (misal: splash screen atau cutscene layar penuh), namun terbentur limit 1024x1024 dari Roblox?

Jika Anda memaksakan 16 frame beresolusi besar ke dalam satu lembar kanvas 1024x1024, resolusi tiap frame akan mengecil drastis (hanya 256x256 piksel). Saat diperbesar memenuhi layar pemain, gambar akan terlihat buram atau pecah.

Untuk kasus elemen UI layar penuh atau resolusi tinggi, solusi terbaik bukanlah menggunakan sprite sheet tunggal.

Solusi Alternatif:

Multi-Image Toggle: Unggah tiap frame sebagai file gambar terpisah (masing-masing hingga batas 1024x1024). Buat beberapa ImageLabel yang saling bertumpuk, lalu gunakan skrip untuk menyalakan dan mematikan properti Visible secara berurutan.
Multiple Sprite Sheets: Pecah animasi menjadi 2–4 file sprite sheet terpisah, lalu ganti properti Image saat berpindah lembar aset.
TweenService / Procedural UI: Untuk efek rotasi, skala, atau pergeseran UI sederhana, lebih disarankan menggunakan TweenService daripada animasi frame-by-frame agar ukuran aset tetap ringan dan tajam di semua resolusi layar perangkat.

Dengan memahami logika grid, pemotongan via ImageRect, dan sedikit matematika dasar di Luau, Anda kini bisa menyisipkan aset-aset interaktif yang ringan namun memukau secara visual ke dalam permainan Anda. Selamat bereksperimen!

Butuh Jasa Custom Roblox Game Development?

Ingin mewujudkan ide game Roblox impian Anda atau butuh bantuan teknis untuk membangun map dan mekanik gameplay?

Di Rizani Digital Tech, kami menyediakan jasa Custom Roblox Game Development dengan spesialisasi utama pada Building (perancangan map & lingkungan 3D) dan Scripting (pemrograman sistem, mekanik gameplay, dan logika Luau). Diskusikan ide proyek Anda bersama kami melalui form kontak di bawah atau via Fastwork Escrow untuk transaksi aman dan bergaransi!