Roblox về bản chất là đa nền tảng, vì người chơi có thể khám phá và tham gia các trò chơi trên điện thoại hoặc máy tính bảng, sau đó tiếp tục nơi họ đã dừng lại trên PC hoặc console. Để hỗ trợ một loạt các nền tảng ngày càng mở rộng, bạn nên xây dựng giao diện người dùng mà có thể tự động điều chỉnh theo loại đầu vào (cảm ứng, tay cầm, chuột/bàn phím), kích thước màn hình và hướng thiết bị. Hướng dẫn này, hướng dẫn thiết kế thích ứng, và các tài nguyên liên kết có thể giúp bạn thiết kế một trò chơi thực sự đa nền tảng, tương thích, dễ tiếp cận và thú vị trên tất cả các nền tảng.
Để khám phá một trò chơi đã được tạo sẵn mà giới thiệu các khái niệm thiết kế đa nền tảng sau, hãy kiểm tra Interactivity Showcase.
Nhập liệu
Một trò chơi được thiết kế một cách cẩn thận nên hỗ trợ tất cả các loại đầu vào chính, bao gồm chuột và bàn phím, cảm ứng và tay cầm.
Hành động đa nền tảng
Hỗ trợ tất cả các loại đầu vào chính (chuột/bàn phím, cảm ứng và tay cầm) bằng cách sử dụng Hệ thống Hành động Đầu vào.
Để đơn giản hóa các đầu vào đa nền tảng, Roblox cung cấp Hệ thống Hành động Đầu vào để xác định các hành động như "nhảy", "chạy" hoặc "bắn" và thiết lập các liên kết cho nhiều đầu vào phần cứng để thực hiện các hành động đó. Bạn không cần phải nghĩ về tất cả các khía cạnh kỹ thuật của các đầu vào phần cứng và khi nào để lắng nghe các tín hiệu đầu vào cụ thể; bạn chỉ cần xác định đầu vào nào thực hiện hành động nào.
Phát hiện loại đầu vào
Đảm bảo rằng các phần tử UI phản hồi và thích ứng với loại đầu vào chính của người chơi như đã nêu trong phát hiện loại đầu vào. Cũng hãy xem xét các gợi ý hỗ trợ để giúp người chơi hiểu các thay đổi đầu vào cụ thể.
Trong phát triển đa nền tảng, điều quan trọng là bạn xác định và phản hồi với loại đầu vào chính mà người chơi đang sử dụng, thường là để đảm bảo rằng các phần tử UI như nút trên màn hình và menu hoạt động một cách thanh lịch và hỗ trợ tương tác trên các thiết bị.
Ví dụ, một thiết bị hỗ trợ cảm ứng giả định rằng cảm ứng là đầu vào mặc định và rằng các nút cảm ứng có thể xuất hiện cho các hành động, nhưng người chơi có thể chọn kết nối một tay cầm bluetooth. Trong trường hợp này, cảm ứng vẫn là một đầu vào hợp lệ, nhưng bạn có thể giả định rằng người chơi muốn chuyển sang tay cầm đã kết nối như là loại đầu vào chính và có thể sử dụng cảm ứng như một đầu vào dự phòng cho UI trên màn hình.
Gợi ý hỗ trợ
Dựa trên loại đầu vào chính, bạn nên bao gồm gợi ý UI hỗ trợ bất cứ khi nào có thể. Ví dụ, khi chọn công cụ để trang bị, hãy hiển thị các gợi ý đầu vào cụ thể như 1–5 khi người chơi đang sử dụng bàn phím, hoặc các gợi ý tay cầm khi người chơi đang sử dụng tay cầm.
Các phương thức GetImageForKeyCode() và GetStringForKeyCode() rất hữu ích trong việc thu thập một hình ảnh hoặc chuỗi cụ thể của nền tảng để sử dụng trong một gợi ý UI, như các ví dụ sau đây:
| Mã phím | Hình ảnh Xbox | Hình ảnh PlayStation | Chuỗi |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | không áp dụng | không áp dụng | 1 |
| Enum.KeyCode.Five | không áp dụng | không áp dụng | 5 |
Giao diện người dùng
Một giao diện người dùng được thiết kế tốt là cần thiết để người chơi trên tất cả các nền tảng tương tác với trò chơi của bạn.
Vị trí và kích thước
Đảm bảo rằng tất cả các phần tử UI đều rõ ràng trên tất cả các kích thước và hướng màn hình.
Đảm bảo rằng tất cả các nút/điều khiển có thể tương tác được và không bị chặn hoặc che khuất bởi các khe cắt thiết bị hoặc các phần tử UI của Roblox.
Tất cả các phần tử UI nên được vị trí và kích thước thích hợp để đảm bảo khả năng hiển thị và tương tác trên nhiều kích thước màn hình khác nhau. Việc định vị các phần tử UI bằng Scale là một cách tiếp cận phổ biến vì nó dựa trên tỷ lệ phần trăm của X và Y của màn hình, không phải giá trị pixel (pixels có thể thay đổi một cách tùy ý về số lượng và mật độ trên các thiết bị). Bạn cũng có thể sử dụng AnchorPoint của phần tử để thiết lập điểm gốc vị trí của nó. Ví dụ, container UI giữ các bộ đếm gem/coin trong hình ảnh sau được định vị tại tỷ lệ X là 1 (phải) và tỷ lệ Y là 0 (trên) với điểm neo trên bên phải.
Scale cũng được khuyến nghị cho kích thước của các phần tử UI, chẳng hạn như làm cho một container UI trải rộng 75% chiều rộng trên mọi màn hình. Tuy nhiên, 75% sẽ hiển thị quá lớn trên TV 4K cho những người chơi console, vì vậy bạn được khuyến nghị khám phá thích ứng kích thước màn hình như một cách để điều chỉnh bố cục UI trên các viewport khác nhau.
Thích ứng kích thước màn hình
Thích ứng UI với các kích thước hiển thị khác nhau bằng cách kiểm tra và lắng nghe sự thay đổi kích thước hiển thị viewport.
Với vô số kích thước màn hình có thể truy cập trên nền tảng Roblox, việc cố gắng dự đoán kích thước màn hình bằng pixel thường dẫn đến hiểu nhầm. Để hỗ trợ trong việc xác định kích thước màn hình của người chơi để điều chỉnh kích thước/vị trí của các phần tử UI, Roblox cung cấp thuộc tính chỉ đọc ViewportDisplaySize mà đại diện cho kích thước thực sự của viewport.
| ViewportDisplaySize | Tóm tắt |
|---|---|
| Small | hắm máy tính bảng/di động/cầm tay hầu hết |
| Medium | hắm máy tính xách tay và màn hình hầu hết |
| Large | hắm TV hoặc lớn hơn hầu hết |
Để tùy chỉnh tự nhiên hơn, bạn có thể sử dụng Trình chỉnh sửa Kiểu UI để cấu hình Truy vấn Kiểu cho cả giá trị ViewportDisplaySize và PreferredInput. Sử dụng các bộ chọn nội tại như @ViewportDisplaySizeSmall hoặc @PreferredInputTouch cho phép UI của bạn tự động thay thế các mã cho kích thước văn bản, kích thước container và các phép đo khác khi môi trường thiết bị hoặc phương thức đầu vào chính của người chơi thay đổi.
Container Bố cục
Sử dụng các bố cục để tổ chức các thành phần UI riêng lẻ và đảm bảo rằng các container điều chỉnh một cách nhạy cảm theo các phần tử con bên trong chúng.
Để tổ chức UI dễ dàng hơn, bạn nên sử dụng các thành phần bố cục để tổ chức các phần tử con. Khi sử dụng container bố cục, hãy đảm bảo rằng các phần tử con có thể đọc được, dễ tiếp cận, và không bị lộn xộn. Một thành phần bố cục phổ biến là UIListLayout, mà định vị các GuiObjects anh em thành các hàng hoặc cột và điều chỉnh tương ứng bất cứ khi nào bạn thêm hoặc xóa một đối tượng anh em.
Bạn cũng nên cân nhắc sự phân phối và vị trí tương đối của các phần tử bên trong các container bố cục để có trải nghiệm người dùng tốt nhất. Kết hợp flex vào một bố cục danh sách là một cách mạnh mẽ để lấp đầy/phân phối đều hoặc căn chỉnh/căng các mục qua dòng của chúng, hoặc căng các mục cụ thể qua một không gian biến đổi.
Truy cập
Đảm bảo rằng tất cả văn bản có thể đọc được trên tất cả các màn hình. Cũng đảm bảo rằng tất cả các UI có độ tương phản đủ và rằng không gì phụ thuộc hoàn toàn vào màu sắc để phân biệt một hành động hoặc kết quả.
Ngay cả khi các phần tử UI được kích thước đúng cách trên tất cả các kích thước màn hình thiết bị, toàn bộ trò chơi nên đáp ứng các tiêu chuẩn truy cập cho người chơi bị suy giảm thị giác hoặc mù màu. Kích thước văn bản có thể là yếu tố chính ảnh hưởng đến khả năng đọc của UI dựa trên văn bản, vì vậy bạn nên bao gồm một ràng buộc kích thước văn bản để đảm bảo văn bản không trở nên khó đọc (quá nhỏ) hoặc có thể nhìn thấy quá lớn trên các màn hình lớn như TV 4K.
Để biết thêm mẹo về tính khả dụng, xem tại đây.
Mẹo và thủ thuật cuối cùng
Khi bạn làm việc để hoàn thành một trò chơi đa nền tảng hoàn hảo, hãy cân nhắc các mẹo và thủ thuật sau:
- Mô phỏng thiết bị là rất quan trọng để thiết kế một trò chơi tối ưu trên Roblox. Sử dụng Trình mô phỏng Thiết bị và Trình mô phỏng Tay cầm tích hợp để mô phỏng các thiết bị và tay cầm khác nhau ngay trong Studio.
- Quy trình thời trang UI của Roblox, tương tự như CSS, cho phép bạn tuyên bố và áp dụng toàn cầu các thay đổi cho các thuộc tính phiên bản UI. Cùng với Trình chỉnh sửa Kiểu tích hợp, bạn có thể thiết lập một giao diện người dùng hoàn chỉnh và dễ dàng chỉnh sửa.
- Khi trò chơi của bạn hiệu quả là đa nền tảng, hãy khám phá các tính năng bản địa như phản hồi lực trên di động và tay cầm, cử chỉ cảm ứng như TouchSwipe và TouchPinch, hoặc chức năng cảm biến gia tốc và con quay hồi chuyển trên các thiết bị AccelerometerEnabled và GyroscopeEnabled.