Roblox secara inheren lintas‑platform, karena pemain dapat menemukan dan bergabung dalam permainan di ponsel atau tablet mereka, kemudian melanjutkan dari tempat mereka meninggalkan di PC atau konsol mereka. Untuk mendukung rangkaian platform yang berkembang, Anda harus membangun antarmuka pengguna yang dapat menyesuaikan dengan jenis input (sentuh, gamepad, mouse/keyboard), ukuran layar, dan orientasi perangkat. Panduan ini, panduan desain adaptif, dan sumber daya yang terhubung dapat membantu Anda merancang permainan lintas‑platform yang kompatibel, dapat diakses, dan menyenangkan di semua platform.
Untuk menjelajahi permainan yang telah dibuat sebelumnya yang menampilkan konsep desain lintas‑platform berikut, lihat Interactivity Showcase.
Input
Permainan yang dirancang dengan cermat harus mendukung semua jenis input utama, termasuk mouse dan keyboard, sentuh, dan gamepad.
Tindakan lintas platform
Dukung semua jenis input utama (mouse/keyboard, sentuh, dan gamepad) menggunakan Input Action System.
Untuk menyederhanakan input lintas‑platform, Roblox menyediakan Input Action System untuk mendefinisikan tindakan seperti "melompat," "berlari," atau "menembak" dan menyiapkan binding untuk beberapa input perangkat keras untuk menggerakkan tindakan tersebut. Anda tidak perlu memikirkan semua aspek teknis dari input perangkat keras dan kapan harus mendengarkan pemicu input tertentu; Anda cukup mendefinisikan input mana yang melakukan tindakan mana.
Deteksi jenis input
Pastikan bahwa elemen UI merespons dan menyesuaikan dengan jenis input utama pemain sebagaimana dijelaskan dalam deteksi jenis input. Juga pertimbangkan petunjuk bantu untuk membantu pemain memahami perubahan input tertentu.
Dalam pengembangan lintas platform, penting bagi Anda untuk menentukan dan merespons jenis input utama yang digunakan pemain, biasanya untuk memastikan bahwa elemen UI seperti tombol dan menu di layar berfungsi dengan baik dan mendukung interaksi di berbagai perangkat.
Misalnya, perangkat yang mendukung sentuhan menganggap sentuh adalah input default dan tombol sentuh dapat muncul untuk tindakan, tetapi seorang pemain mungkin memilih untuk menghubungkan gamepad bluetooth. Dalam hal ini, sentuh tetap menjadi input yang valid, tetapi Anda dapat menganggap pemain ingin beralih ke gamepad yang terhubung sebagai jenis input utama dan mungkin menggunakan sentuh sebagai input cadangan untuk UI di layar.
Petunjuk bantu
Berdasarkan jenis input utama, sangat dianjurkan untuk menyertakan petunjuk UI bantu kapan pun memungkinkan. Misalnya, saat memilih alat untuk dilengkapi, tampilkan petunjuk spesifik input seperti 1–5 ketika pemain menggunakan keyboard, atau petunjuk pemicu gamepad saat pemain menggunakan gamepad.
Metode GetImageForKeyCode() dan GetStringForKeyCode() berguna dalam mengumpulkan gambar atau string spesifik platform untuk digunakan dalam petunjuk UI, seperti contoh berikut:
| Kode Tombol | Gambar Xbox | Gambar PlayStation | String |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/a | n/a | 1 |
| Enum.KeyCode.Five | n/a | n/a | 5 |
Antarmuka pengguna
Antarmuka pengguna yang dirancang dengan baik sangat penting agar pemain di semua platform dapat berinteraksi dengan permainan Anda.
Posisi dan ukuran
Pastikan bahwa semua elemen UI terlihat di semua ukuran dan orientasi layar.
Pastikan bahwa semua tombol/kontrol dapat diinteraksi dan tidak terblokir atau tertutupi oleh potongan perangkat atau elemen UI Roblox.
Semua elemen UI harus ditempatkan dan ukuran dengan tepat agar memastikan visibilitas dan interaktivitas di berbagai ukuran layar. Menempatkan elemen UI dengan Scale adalah pendekatan umum karena didasarkan pada persentase dari batasan X dan Y layar, bukan nilai pixel (pixel dapat bervariasi secara sewenang-wenang baik dari segi jumlah maupun kepadatan di berbagai perangkat). Anda juga dapat memanfaatkan AnchorPoint elemen untuk mengatur asal posisinya. Misalnya, wadah UI yang memegang penghitung permata/koin dalam gambar berikut diposisikan pada skala X 1 (kanan) dan skala Y 0 (atas) dengan titik jangkar di bagian kanan atas.
Scale juga disarankan untuk ukuran elemen UI, seperti membuat wadah UI meluas 75% lebar di setiap layar. Namun, 75% akan menghasilkan ukuran yang sangat besar pada TV 4K untuk pemain konsol, jadi sangat disarankan untuk menjelajahi adaptasi ukuran layar sebagai cara untuk menyesuaikan tata letak UI di berbagai viewport.
Adaptasi ukuran layar
Sesuaikan UI dengan berbagai ukuran tampilan dengan memeriksa dan mendengarkan perubahan ukuran tampilan viewport.
Dengan banyaknya ukuran layar yang mungkin diakses dalam platform Roblox, mencoba memprediksi ukuran layar berdasarkan pixel sering kali mengarah pada salah tafsir. Untuk membantu dalam menentukan ukuran layar pemain untuk menyesuaikan ukuran/posisi elemen UI, Roblox menyediakan properti read‑only ViewportDisplaySize yang mewakili ukuran rendering viewport yang dikategorikan secara internal.
| ViewportDisplaySize | Ringkasan |
|---|---|
| Small | Sebagian besar perangkat tablet/ponsel/handheld |
| Medium | Sebagian besar laptop dan monitor |
| Large | Sebagian besar TV atau lebih besar |
Untuk kustomisasi yang lebih asli, Anda dapat menggunakan Style Editor UI untuk mengkonfigurasi Style Queries untuk nilai-nilai ViewportDisplaySize dan PreferredInput. Menggunakan pemilih intrinsik seperti @ViewportDisplaySizeSmall atau @PreferredInputTouch memungkinkan UI Anda secara otomatis menukar token untuk ukuran teks, dimensi wadah, dan pengukuran lainnya saat lingkungan perangkat pemain atau metode input utama berubah.
Kontainer tata letak
Gunakan tata letak untuk mengatur komponen UI individu dan pastikan bahwa wadah menyesuaikan dengan responsif terhadap elemen anak di dalamnya.
Untuk organisasi UI yang lebih mudah, Anda harus menggunakan komponen tata letak untuk mengatur anak-anak. Saat menggunakan kontainer tata letak, pastikan bahwa anak-anak tersebut dapat dibaca, dapat diakses, dan tidak terlihat berantakan. Komponen tata letak yang umum adalah UIListLayout, yang menempatkan GuiObjects saudara ke dalam baris atau kolom dan menyesuaikannya setiap kali Anda menambahkan atau menghapus suatu objek saudara.
Anda juga harus mempertimbangkan distribusi dan posisi relatif elemen dalam kontainer tata letak demi pengalaman pengguna yang terbaik. Mengintegrasikan flex ke dalam tata letak daftar adalah cara yang kuat untuk mengisi/mendistribusikan secara setara atau menyelaraskan/meregangkan item di seluruh garis mereka, atau flex item khusus di seluruh ruang variabel.
Aksesibilitas
Pastikan bahwa semua teks mudah dibaca di semua layar. Juga pastikan semua UI memiliki kontras yang cukup dan bahwa tidak ada yang bergantung sepenuhnya pada warna untuk membedakan suatu tindakan atau hasil.
Bahkan dengan elemen UI diperbesar dengan benar di semua ukuran layar perangkat, permainan secara keseluruhan harus memenuhi standar aksesibilitas untuk pemain dengan penglihatan yang terganggu atau buta warna. Ukuran teks dapat sangat berpengaruh pada keterbacaan UI berbasis teks, sehingga Anda harus menyertakan batasan ukuran teks untuk memastikan teks tidak menjadi tidak terbaca (terlalu kecil) atau secara visual terlalu besar di layar yang lebih besar seperti TV 4K.
Untuk lebih banyak tips tentang aksesibilitas, lihat di sini.
Tips & trik akhir
Saat Anda bekerja menuju permainan lintas‑platform yang sepenuhnya, pertimbangkan tips dan trik berikut:
- Emulasi perangkat sangat penting untuk merancang permainan yang optimal di Roblox. Manfaatkan Device Emulator dan Controller Emulator bawaan untuk meniru berbagai perangkat dan gamepad langsung di Studio.
- Alur kerja styling UI Roblox, mirip dengan CSS, memungkinkan Anda untuk menyatakan dan menerapkan overriding secara global pada properti instance UI. Bersama dengan Style Editor yang terintegrasi, Anda dapat menyiapkan antarmuka pengguna yang lengkap dan mudah dimodifikasi.
- Setelah permainan Anda secara efektif lintas-platform, jelajahi fitur asli seperti umpan balik haptic di ponsel dan gamepad, gerakan sentuh seperti TouchSwipe dan TouchPinch, atau fungsionalitas akselerometer dan giroskop pada perangkat AccelerometerEnabled dan GyroscopeEnabled.