Pedoman desain adaptif

Desain adaptif memastikan permainan Roblox Anda terlihat dan terasa hebat di berbagai ukuran layar, orientasi, dan tipe input. Bergerak melampaui kategori perangkat tradisional seperti mobile, desktop, dan konsol, perangkat masa kini memiliki kemampuan yang jauh lebih dinamis, memungkinkan transisi yang mulus antara berbagai input dan tampilan. Bayangkan sebuah tablet yang mendukung beberapa orientasi (landscape dan potret), beberapa tipe input (sentuh, gamepad, mouse, dan keyboard), dan beberapa ukuran tampilan (tampilan asli, dan memperluas ke TV besar).

Pedoman ini akan membantu Anda memberikan permainan kelas dunia yang secara cerdas beradaptasi dengan perangkat dan tipe input apa pun untuk menjangkau audiens yang luas. Untuk detail lebih lanjut tentang alur kerja dan API untuk membantu menerapkan pedoman ini, lihat panduan pengembangan lintas platform.

Prinsip inti

Setiap permainan itu unik, tetapi mengikuti beberapa prinsip kunci akan membantu Anda memberikan permainan yang intuitif dan halus kepada setiap pemain, di setiap perangkat.

1. Fluiditas input — Pastikan UI Anda berfungsi dengan berbagai tipe input seperti gamepad, sentuh, keyboard, dan kontroler VR. Ini termasuk mengubah tata letak UI Anda dan memberikan petunjuk bantuan tergantung pada tipe input.
2. Tata letak responsif — Rancang tata letak UI yang secara otomatis menyesuaikan dengan berbagai ukuran layar dan orientasi.
3. Ukuran dinamis — Sesuaikan elemen UI sesuai kebutuhan agar sesuai dengan berbagai dimensi layar.
4. Keterbacaan dan kejelasan visual — Buat semua komponen UI, termasuk teks dan tombol, mudah dibaca dan jelas secara visual.

Fluiditas input

Pastikan permainan Anda terasa alami pada berbagai perangkat input, termasuk gamepad, mouse/keyboard, sentuh, dan VR.

• Rancang kontrol dan pintasan untuk beberapa input — Pastikan setiap tindakan dalam permainan Anda dapat dipicu menggunakan tombol gamepad/D‑pad, pintasan keyboard, dan sentuhan. Kontrol harus dapat difokuskan secara visual dan fungsional untuk navigasi dengan D-pad atau stik. Uji setiap mode input sehingga permainan inti, menu, dan UI dapat diakses dan terasa alami, terlepas dari perangkat.
• Berikan umpan balik visual berdasarkan tipe input — Perbarui label UI, prompt, dan tooltip untuk mencerminkan metode input yang aktif, misalnya menampilkan Tekan A pada gamepad, Jepit saat sentuh, atau ShiftA pada keyboard. Gunakan ikon dan bahasa yang akrab bagi para pemain di setiap platform.

Tata letak responsif

Tata letak UI permainan Anda harus beradaptasi dengan berbagai ukuran layar dan orientasi. Di monitor komputer besar, Anda memiliki banyak ruang untuk menampilkan semua tombol sekaligus. Namun, di layar ponsel kecil, semua tombol itu akan terlihat sempit dan berantakan.

• Sesuaikan tata letak dengan ukuran layar dan orientasi — Gunakan pola responsif sehingga UI Anda mengatur ulang atau menyusut dengan tepat. Misalnya, pindahkan tombol yang kurang penting ke dalam menu yang dapat dilipat ("hamburger"/tombol menu) di layar kecil, sementara menampilkannya secara penuh di desktop. UI permainan Anda harus beradaptasi dengan mulus ke orientasi portrait dan landscape jika mendukungnya.
• Implementasikan komponen tata letak yang bereaksi terhadap ukuran induknya — Bangun panel dan widget UI yang menyesuaikan ukuran atau posisinya berdasarkan kontainer induknya. Misalnya, gunakan tata letak tampilan terpisah di mana panel samping menyusut pada layar sempit tetapi berkembang pada yang lebih lebar.

Ukuran dinamis

Ini tentang ukuran elemen UI Anda, bukan hanya posisinya. UI Anda harus dapat diperbesar atau diperkecil sesuai dengan layar agar semuanya tetap pada ukuran yang tepat dan selalu mudah untuk berinteraksi.

• Dukung ukuran yang didorong konten dan pembungkus otomatis — Implementasikan perilaku ukuran otomatis: biarkan kotak teks tumbuh atau menyusut dengan konten, dan dukung pemotongan otomatis sehingga label tidak meluap atau menjadi tidak terbaca saat ukuran layar berubah.
• Paparkan dan hormati preferensi aksesibilitas / pengguna — Biarkan UI Anda merespons pengaturan skala teks atau UI yang ditentukan oleh pengguna, menghubungkan pengaturan tersebut langsung ke ukuran elemen UI sehingga meningkatnya preferensi aksesibilitas selalu diterjemahkan ke UI yang lebih besar dan lebih mudah dibaca.

Keterbacaan & kejelasan visual

Bisakah pemain benar-benar membaca teks Anda di layar ponsel kecil atau TV besar yang jauh dari mereka? Apakah tombol Anda mudah dilihat di latar belakang dunia 3D Anda?

• Pilih ukuran dan gaya font untuk layar kecil — Selalu pilih ukuran font yang terbaca di perangkat mobile, bukan hanya desktop. Uji di perangkat nyata, dan verifikasi teks dapat dibaca pada ukuran terkecil yang diharapkan. Hindari font yang terlalu dekoratif atau tipis.
• Pastikan kontras tinggi dan hierarki visual yang jelas — Gunakan warna untuk teks dan latar belakang yang memberikan kontras cukup untuk terbaca dalam berbagai kondisi pencahayaan dalam permainan. Gunakan hierarki visual yang kuat dan buat tindakan serta label utama menonjol melalui ukuran, warna, atau penempatan.

Pemikiran akhir

Adaptivitas adalah tentang bertemu pemain di mana mereka berada, baik di tangan mereka, di meja mereka, atau di layar besar. Pembuat Roblox yang membangun dengan pedoman ini menghadirkan permainan lintas platform yang berarti, dapat diakses, dan menyenangkan. Mulailah beradaptasi hari ini dan biarkan kreasi Anda berkembang!