Roblox secara inheren lintas platform, karena pemain dapat menemukan dan bergabung dengan permainan di ponsel atau tablet mereka, kemudian melanjutkan dari tempat mereka tinggalkan di PC atau konsol mereka. Untuk mendukung serangkaian platform yang terus berkembang, Anda harus membangun antarmuka pengguna yang dapat beradaptasi 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 benar-benar kompatibel, dapat diakses, dan menyenangkan di semua platform.
Untuk menjelajahi permainan yang sudah dibuat sebelumnya yang menunjukkan konsep desain lintas platform berikut, lihat Interactivity Showcase.
Input
Permainan yang dirancang dengan baik harus mendukung semua jenis input utama, termasuk mouse dan keyboard, sentuhan, dan gamepad.
Tindakan lintas platform
Dukung semua jenis input utama (mouse/keyboard, sentuhan, dan gamepad) menggunakan Sistem Aksi Input.
Untuk menyederhanakan input lintas platform, Roblox menyediakan Sistem Aksi Input untuk mendefinisikan aksi seperti "melompat," "berlari," atau "menembak" dan mengatur binding untuk beberapa input perangkat keras untuk menjalankan aksi 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 aksi mana.
Deteksi jenis input
Pastikan bahwa elemen UI merespons dan beradaptasi dengan jenis input utama pemain seperti yang 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.
Sebagai contoh, perangkat yang mendukung sentuhan menganggap sentuhan sebagai input default dan bahwa tombol sentuh mungkin muncul untuk aksi, tetapi pemain mungkin memilih untuk menghubungkan gamepad bluetooth. Dalam hal ini, sentuhan tetap menjadi input yang valid, tetapi Anda dapat menganggap pemain ingin beralih ke gamepad yang terhubung sebagai jenis input utama dan mungkin menggunakan sentuhan sebagai input cadangan untuk UI di layar.
Jika Anda menggunakan Sistem Aksi Input, properti PreferredBinding melengkapi deteksi input utama: sama seperti PreferredInput melaporkan jenis input utama pemain saat ini, PreferredBinding melaporkan InputBinding spesifik yang cocok dengan perangkat pemain saat ini. Keduanya diperbarui secara otomatis saat pemain beralih perangkat, sehingga Anda dapat menggerakkan UI yang menyadari perangkat tanpa menulis logika pengalihan perangkat sendiri.
Petunjuk bantu
Berdasarkan jenis input utama, disarankan agar Anda 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 ketika pemain menggunakan gamepad.
Untuk petunjuk bantu tanpa kode yang secara otomatis diperbarui saat pemain beralih perangkat, gunakan InputActionLabel dan arahkan ke InputAction mana pun untuk menampilkan input yang benar per platform. Lihat menampilkan binding untuk detail lengkap.
Untuk kontrol yang lebih granular, atau jika Anda perlu menyesuaikan tampilan petunjuk di luar apa yang ditawarkan InputActionLabel, Anda dapat menggunakan metode UserInputService di bawah ini untuk mengumpulkan gambar dan string spesifik platform secara manual:
Metode GetImageForKeyCode() dan GetStringForKeyCode() berguna dalam mengumpulkan gambar atau string spesifik platform untuk digunakan dalam petunjuk UI, seperti contoh berikut:
| Kode Kunci | 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 bagi pemain di semua platform untuk 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 terhalang atau tertutup oleh potongan perangkat atau elemen UI Roblox.
Semua elemen UI harus diposisikan dan diukir dengan tepat untuk memastikan visibilitas dan interaktivitas di berbagai ukuran layar. Memposisikan elemen UI dengan Scale adalah pendekatan umum karena didasarkan pada persentase dari batas X dan Y layar, bukan nilai piksel (piksel dapat bervariasi secara sewenang-wenang baik dalam jumlah maupun kepadatan di berbagai perangkat). Anda juga dapat memanfaatkan AnchorPoint elemen untuk mengatur asal posisinya. Misalnya, wadah UI yang menampung penghitung permata/koin dalam gambar berikut diposisikan pada skala X 1 (kanan) dan skala Y 0 (atas) dengan titik jangkar di sudut kanan atas.
Scale juga disarankan untuk ukuran elemen UI, seperti membuat wadah UI membentang 75% lebar di setiap layar. Namun, 75% akan menghasilkan ukuran yang sangat besar di TV 4K untuk pemain konsol, jadi disarankan agar Anda menjelajahi adaptasi ukuran layar sebagai cara untuk menyesuaikan tata letak UI di berbagai viewport.
Adaptasi ukuran layar
Sesuaikan UI untuk berbagai ukuran tampilan dengan memeriksa dan mendengarkan perubahan pada ukuran tampilan viewport.
Dengan banyaknya ukuran layar yang mungkin diakses di platform Roblox, mencoba memprediksi ukuran layar berdasarkan piksel sering kali mengarah pada salah tafsir. Untuk membantu menentukan ukuran layar pemain untuk menyesuaikan ukuran/posisi elemen UI, Roblox menyediakan properti baca-saja ViewportDisplaySize yang mewakili ukuran rendering viewport yang dikategorikan secara internal.
| ViewportDisplaySize | Ringkasan |
|---|---|
| Small | Sebagian besar perangkat tablet/mobile/handheld |
| Medium | Sebagian besar laptop dan monitor |
| Large | Sebagian besar TV atau lebih besar |
Untuk kustomisasi yang lebih native, Anda dapat menggunakan Editor Gaya UI untuk mengonfigurasi Kueri Gaya untuk 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 mengorganisir komponen UI individu dan pastikan bahwa kontainer menyesuaikan secara responsif terhadap elemen anak di dalamnya.
Untuk organisasi UI yang lebih mudah, Anda harus menggunakan komponen tata letak untuk mengorganisir anak-anak. Saat menggunakan kontainer tata letak, pastikan bahwa anak-anak dapat dibaca, dapat diakses, dan tidak berantakan. Komponen tata letak yang umum adalah UIListLayout, yang memposisikan GuiObjects saudara ke dalam baris atau kolom dan menyesuaikan sesuai saat Anda menambahkan atau menghapus objek saudara.
Anda juga harus mempertimbangkan distribusi dan posisi relatif elemen dalam kontainer tata letak untuk pengalaman pengguna terbaik. Mengintegrasikan flex ke dalam tata letak daftar adalah cara yang kuat untuk mengisi/mendistribusikan secara merata atau menyelaraskan/meregangkan item di sepanjang garis mereka, atau fleksibel item tertentu di ruang variabel.
Aksesibilitas
Pastikan bahwa semua teks dapat dibaca di semua layar. Juga pastikan semua UI memiliki kontras yang cukup dan bahwa tidak ada yang bergantung hanya pada warna untuk membedakan aksi atau hasil.
Bahkan dengan elemen UI yang diukir dengan benar di semua ukuran layar perangkat, keseluruhan permainan harus memenuhi standar aksesibilitas untuk pemain dengan gangguan penglihatan atau buta warna. Ukuran teks dapat sangat mempengaruhi keterbacaan UI berbasis teks, jadi 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 pedoman aksesibilitas.
Tips & trik akhir
Saat Anda bekerja menuju permainan lintas platform yang lengkap, pertimbangkan tips dan trik berikut:
- Emulasi perangkat sangat penting untuk merancang permainan yang optimal di Roblox. Manfaatkan Emulator Perangkat dan Emulator Kontroler bawaan untuk meniru berbagai perangkat dan gamepad langsung di Studio.
- Pipeline gaya UI Roblox, mirip dengan CSS, memungkinkan Anda mendeklarasikan dan menerapkan penggantian secara global pada properti instance UI. Bersama dengan Editor Gaya yang terintegrasi, Anda dapat menyiapkan antarmuka pengguna yang lengkap dan mudah dimodifikasi.
- Setelah permainan Anda efektif lintas platform, jelajahi fitur native seperti umpan balik haptic di mobile dan gamepad, gestur sentuh seperti TouchSwipe dan TouchPinch, atau fungsionalitas akselerometer dan giroskop pada perangkat AccelerometerEnabled dan GyroscopeEnabled.