Tutorial Membuat Desain GUI (Menu Utama dan Shop) yang Responsif di Semua Layar di Roblox Studio

Salah satu kesalahan paling umum yang dialami kreator pemula di Roblox Studio adalah tampilan tombol menu (GUI) yang terlihat rapi di layar komputer, namun menjadi terlalu besar atau saling bertumpuk saat dimainkan di layar smartphone.

Kunci utama membuat antarmuka pengguna (UI) yang responsif di segala ukuran layar terletak pada penggunaan satuan Scale dan komponen UI Constraints.

1. Memahami Perbedaan Scale dan Offset pada UDim2

Setiap elemen Frame, TextButton, atau TextLabel di dalam StarterGui → ScreenGui memiliki properti Size dan Position dengan format {ScaleX, OffsetX}, {ScaleY, OffsetY}:

• Scale (Angka 0 sampai 1): Mengukur persentase terhadap ukuran layar atau elemen induknya. Contohnya, {0.5, 0}, {0.5, 0} berarti lebar dan tingginya selalu 50% dari layar, baik di HP maupun monitor PC.
• Offset (Angka Piksel): Mengukur jumlah piksel tetap. Jika Anda mengisi {0, 600}, {0, 400}, kotak tersebut akan memakan hampir seluruh layar di ponsel kecil.

Aturan Emas UI Responsif: Selalu gunakan nilai Scale (dan pastikan nilai Offset = 0) untuk ukuran dan posisi utama elemen GUI.

2. Menengahkan Kotak Menu dengan AnchorPoint

Agar jendela Shop berada tepat di tengah layar di semua perangkat:

1. Ubah properti AnchorPoint pada Frame menjadi 0.5, 0.5.
2. Ubah properti Position menjadi {0.5, 0}, {0.5, 0}.

3. Gunakan Komponen Pelengkap UI Modern

• UIAspectRatioConstraint: Masukkan ke dalam Frame agar rasio panjang dan lebar kotak tidak gepeng di layar melebar.
• UICorner: Membuat sudut tombol menjadi membulat dan modern.
• UIStroke: Menambahkan garis tepi (border) halus pada tombol maupun teks.
• UIGridLayout / UIListLayout: Menyusun daftar barang di dalam ScrollingFrame secara rapi dan otomatis.

4. Uji Tampilan dengan Device Emulator

Klik ikon ponsel (Device Emulator) di pojok kanan atas jendela Viewport Roblox Studio, lalu pilih profil layar seperti iPhone, iPad, atau HD 1080p untuk memastikan seluruh tombol terbaca jelas.