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 của họ, sau đó tiếp tục từ nơi họ đã dừng lại trên PC hoặc console. Để hỗ trợ một bộ nền tảng đang mở rộng, bạn nên xây dựng giao diện người dùng có thể thích ứng liền mạch với loại đầu vào (cảm ứng, gamepad, 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, có thể truy cập 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 đây, hãy xem Triển lãm Tương tác.
Đầu vào
Một trò chơi được thiết kế 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à gamepad.
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à gamepad) 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 để định nghĩa hành động như "nhảy", "chạy nhanh" hoặc "bắn" và thiết lập ràng buộc cho nhiều đầu vào phần cứng để điều khiển những hành động đó. Bạn không cần phải suy nghĩ về tất cả các khía cạnh kỹ thuật của đầu vào phần cứng và khi nào để lắng nghe các kích hoạt đầu vào cụ thể; bạn chỉ cần định nghĩa các đầu vào nào thực hiện các 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 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 và menu trên màn hình 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 một người chơi có thể chọn kết nối một gamepad 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 gamepad đã 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.
Nếu bạn đang sử dụng Hệ thống Hành động Đầu vào, thuộc tính PreferredBinding bổ sung cho việc phát hiện đầu vào chính: cũng như PreferredInput báo cáo loại đầu vào chính hiện tại của người chơi, PreferredBinding báo cáo InputBinding cụ thể phù hợp với thiết bị hiện tại của người chơi. Cả hai đều tự động cập nhật khi người chơi chuyển đổi thiết bị, vì vậy bạn có thể điều khiển UI nhận biết thiết bị mà không cần viết logic chuyển đổi thiết bị cho riêng mì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ị, hiển thị các gợi ý cụ thể cho đầu vào như 1–5 khi người chơi đang sử dụng bàn phím, hoặc các gợi ý về nút gamepad khi người chơi đang sử dụng gamepad.
Để có các gợi ý hỗ trợ không cần mã mà tự động cập nhật khi người chơi chuyển đổi thiết bị, hãy sử dụng InputActionLabel và chỉ định nó đến bất kỳ InputAction nào để hiển thị đầu vào chính xác theo nền tảng. Xem hiển thị ràng buộc để biết chi tiết đầy đủ.
Để có kiểm soát chi tiết hơn, hoặc nếu bạn cần tùy chỉnh hiển thị gợi ý vượt quá những gì InputActionLabel cung cấp, bạn có thể sử dụng các phương thức UserInputService dưới đây để thu thập hình ảnh và chuỗi cụ thể cho nền tảng:
Các phương thức GetImageForKeyCode() và GetStringForKeyCode() rất hữu ích trong việc thu thập hình ảnh hoặc chuỗi cụ thể cho nền tảng để sử dụng trong một gợi ý UI, chẳng hạn như các ví dụ sau:
| 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à rất quan trọng để 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 hiển thị 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 đều có thể tương tác và không bị chặn hoặc che khuất bởi các phần cắt của 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 định vị và kích thước một cách 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. Đị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 một tỷ lệ phần trăm của X và Y của màn hình, không phải giá trị pixel (pixel có thể thay đổi tùy ý về cả 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 dưới đây được định vị ở tỷ lệ X là 1 (phải) và tỷ lệ Y là 0 (trên) với một điểm neo ở góc trên bên phải.
Scale cũng được khuyến nghị cho kích thước các phần tử UI, chẳng hạn như làm cho một container UI trải dài 75% chiều rộng trên mọi màn hình. Tuy nhiên, 75% sẽ hiển thị với kích thước rất lớn trên TV 4K cho người chơi console, vì vậy bạn nên 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 các thay đổi về kích thước hiển thị viewport.
Với nhiều 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 sai. Để 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 đại diện cho kích thước hiển thị được phân loại nội bộ của viewport.
| ViewportDisplaySize | Tóm tắt |
|---|---|
| Small | Hầu hết các thiết bị máy tính bảng/di động/cầm tay |
| Medium | Hầu hết các laptop và màn hình |
| Large | Hầu hết các TV hoặc lớn hơn |
Để có 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 hoán đổi các token 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 phản ứng với 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, có thể truy cập 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 xem xét việc phân phối và vị trí tương đối của các phần tử trong các container bố cục để có trải nghiệm người dùng tốt nhất. Tích 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/kéo dài các mục trên dòng của chúng, hoặc flex các mục cụ thể trên một không gian biến đổi.
Khả năng truy cập
Đảm bảo rằng tất cả văn bản đều dễ đọc trên tất cả các màn hình. Cũng hãy đảm bảo rằng tất cả UI có độ tương phản đủ và rằng không có gì chỉ dựa 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 khả năng truy cập cho người chơi có thị lực kém hoặc mù màu. Kích thước văn bản có thể ảnh hưởng lớn đế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 quá lớn về mặt thị giác trên các màn hình lớn như TV 4K.
Để biết thêm mẹo về khả năng truy cập, hãy xem hướng dẫn khả năng truy cập.
Mẹo và thủ thuật cuối cùng
Khi bạn làm việc để phát triển một trò chơi đa nền tảng hoàn chỉnh, hãy xem xét các mẹo và thủ thuật sau:
- Giả lập 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 giả lập Thiết bị và Trình giả lập Bộ điều khiển tích hợp để giả lập các thiết bị và gamepad khác nhau trực tiếp trong Studio.
- Quy trình thiết kế UI của Roblox, tương tự như CSS, cho phép bạn khai báo và áp dụng toàn cầu các ghi đè cho các thuộc tính của instance 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 sửa đổi.
- Khi trò chơi của bạn đã thực sự đa nền tảng, hãy khám phá các tính năng gốc như phản hồi xúc giác trên di động và gamepad, các 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.