Roblox는 본질적으로 크로스 플랫폼입니다. 플레이어는 휴대폰이나 태블릿에서 게임을 발견하고 참여한 후, 나중에 PC나 콘솔에서 중단한 지점부터 계속할 수 있습니다. 확장되는 플랫폼 모음을 지원하기 위해, 입력 유형(터치, 게임패드, 마우스/키보드), 화면 크기 및 장치 방향에 원활하게 적응하는 사용자 인터페이스를 구축해야 합니다. 이 가이드, 적응형 디자인 가이드 및 연결된 리소스는 모든 플랫폼에서 호환 가능하고 접근 가능하며 즐거운 진정한 크로스 플랫폼 게임을 디자인하는 데 도움이 될 수 있습니다.
다음 크로스 플랫폼 디자인 개념을 보여주는 미리 만들어진 게임을 탐색하려면 Interactivity Showcase를 확인하세요.
입력
신중하게 설계된 게임은 마우스와 키보드, 터치, 게임패드를 포함한 모든 주요 입력 유형을 지원해야 합니다.
크로스 플랫폼 동작
입력 동작 시스템을 사용하여 모든 주요 입력 유형(마우스/키보드, 터치 및 게임패드)을 지원하세요.
크로스 플랫폼 입력을 단순화하기 위해, Roblox는 "점프", "스프린트" 또는 "사격"과 같은 동작을 정의하고 이러한 동작을 구동하기 위해 여러 하드웨어 입력에 대한 바인딩을 설정하는 입력 동작 시스템을 제공합니다. 하드웨어 입력의 모든 기술적 측면과 특정 입력 트리거를 수신할 시점을 고민할 필요 없이, 어떤 입력이 어떤 동작을 수행하는지 정의하기만 하면 됩니다.
입력 유형 감지
크로스 플랫폼 개발에서 플레이어가 사용하는 주요 입력 유형을 결정하고 이에 반응하는 것이 중요합니다. 이는 일반적으로 UI 요소와 같은 화면 버튼 및 메뉴가 우아하게 작동하고 장치 간 상호작용을 지원하도록 보장하기 위해 필요합니다.
예를 들어, 터치 지원 장치는 터치가 기본 입력이라고 가정하고, 동작을 위한 터치 버튼이 나타날 수 있지만, 플레이어가 블루투스 게임패드를 연결하기로 선택할 수 있습니다. 이 경우 터치는 여전히 유효한 입력이지만, 플레이어가 연결된 게임패드를 주요 입력 유형으로 전환하고, 화면 UI에 대한 백업 입력으로 터치를 사용할 것이라고 가정할 수 있습니다.
입력 동작 시스템을 사용하는 경우, PreferredBinding 속성은 주요 입력 감지를 보완합니다. PreferredInput이 플레이어의 현재 주요 입력 유형을 보고하는 것처럼, PreferredBinding은 플레이어의 현재 장치와 일치하는 특정 InputBinding을 보고합니다. 두 속성 모두 플레이어가 장치를 전환할 때 자동으로 업데이트되므로, 장치 인식 UI를 작성할 때 장치 전환 로직을 직접 작성할 필요가 없습니다.
보조 힌트
주요 입력 유형을 기반으로, 가능한 경우 보조 UI 힌트를 포함하는 것이 좋습니다. 예를 들어, 장비를 선택할 때 플레이어가 키보드를 사용하는 경우 1–5와 같은 입력 특정 힌트를 표시하거나, 플레이어가 게임패드를 사용하는 경우 게임패드 트리거 힌트를 표시합니다.
플레이어가 장치를 전환할 때 자동으로 업데이트되는 코드 없는 보조 힌트를 원한다면, InputActionLabel을 사용하고 이를 어떤 InputAction에 연결하여 플랫폼별로 올바른 입력을 표시하세요. 전체 세부정보는 바인딩 표시를 참조하세요.
더 세밀한 제어가 필요하거나 InputActionLabel이 제공하는 것 이상의 힌트 표시를 사용자 정의해야 하는 경우, 아래의 UserInputService 메서드를 사용하여 플랫폼별 이미지와 문자열을 수집할 수 있습니다:
GetImageForKeyCode() 및 GetStringForKeyCode() 메서드는 UI 힌트에서 사용할 플랫폼별 이미지나 문자열을 수집하는 데 유용합니다. 다음은 몇 가지 예입니다:
| 키 코드 | Xbox 이미지 | PlayStation 이미지 | 문자열 |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | 해당 없음 | 해당 없음 | 1 |
| Enum.KeyCode.Five | 해당 없음 | 해당 없음 | 5 |
사용자 인터페이스
잘 설계된 사용자 인터페이스는 모든 플랫폼에서 플레이어가 게임과 상호작용하는 데 필수적입니다.
위치 및 크기
모든 UI 요소가 모든 화면 크기와 방향에서 보이도록 하세요.
모든 버튼/컨트롤이 상호작용 가능하며 장치 컷아웃 또는 Roblox UI 요소에 의해 차단되거나 가려지지 않도록 하세요.
모든 UI 요소는 여러 화면 크기에서 가시성과 상호작용을 보장하기 위해 위치 및 크기가 적절하게 설정되어야 합니다. UI 요소를 Scale로 위치 지정하는 것은 일반적인 접근 방식입니다. 이는 화면의 X 및 Y 경계의 백분율을 기반으로 하며, 픽셀 값이 아닙니다(픽셀은 장치에 따라 수와 밀도가 임의로 변할 수 있습니다). 또한 요소의 AnchorPoint를 활용하여 위치 원점을 설정할 수 있습니다. 예를 들어, 다음 이미지에서 보석/동전 카운터를 보유한 UI 컨테이너는 X 스케일이 1(오른쪽)이고 Y 스케일이 0(상단)으로 설정되어 있으며, 오른쪽 상단 앵커 포인트를 가지고 있습니다.
Scale은 UI 요소의 크기를 설정하는 데도 권장됩니다. 예를 들어, UI 컨테이너가 모든 화면에서 75% 너비를 차지하도록 만들 수 있습니다. 그러나 75%는 콘솔 플레이어의 4K TV에서 매우 큰 크기로 렌더링되므로, 다양한 뷰포트에서 UI 레이아웃을 조정하는 방법으로 화면 크기 적응을 탐색하는 것이 좋습니다.
화면 크기 적응
뷰포트 표시 크기의 변경 사항을 확인하고 수신하여 UI를 다양한 디스플레이 크기에 적응시키세요.
Roblox 플랫폼에서 접근할 수 있는 다양한 화면 크기로 인해, 픽셀로 화면 크기를 예측하려고 하면 종종 잘못 해석됩니다. 플레이어의 화면 크기를 결정하여 UI 요소의 크기/위치를 조정하는 데 도움을 주기 위해, Roblox는 뷰포트의 내부 분류된 렌더링 크기를 나타내는 읽기 전용 ViewportDisplaySize 속성을 제공합니다.
| ViewportDisplaySize | 요약 |
|---|---|
| Small | 대부분의 태블릿/모바일/휴대용 장치 |
| Medium | 대부분의 노트북 및 모니터 |
| Large | 대부분의 TV 또는 그 이상 |
더 네이티브한 사용자 정의를 위해, UI 스타일 편집기를 사용하여 ViewportDisplaySize 및 PreferredInput 값에 대한 스타일 쿼리를 구성할 수 있습니다. @ViewportDisplaySizeSmall 또는 @PreferredInputTouch와 같은 내재적 선택기를 사용하면 플레이어의 장치 환경이나 주요 입력 방법이 변경될 때 UI가 자동으로 텍스트 크기, 컨테이너 치수 및 기타 측정값에 대한 토큰을 교환할 수 있습니다.
레이아웃 컨테이너
레이아웃을 사용하여 개별 UI 구성 요소를 조직하고, 컨테이너가 내부의 자식 요소에 반응적으로 조정되도록 하세요.
UI 조직을 쉽게 하기 위해, 레이아웃 구성 요소를 사용하여 자식을 조직해야 합니다. 레이아웃 컨테이너를 사용할 때, 자식이 읽기 쉽고 접근 가능하며 혼잡하지 않도록 해야 합니다. 일반적인 레이아웃 구성 요소는 UIListLayout으로, 형제 GuiObjects를 행 또는 열로 배치하고 형제 객체를 추가하거나 제거할 때마다 조정합니다.
또한 최상의 사용자 경험을 위해 레이아웃 컨테이너 내의 요소 분포 및 상대적 위치를 고려해야 합니다. 플렉스를 목록 레이아웃에 통합하는 것은 항목을 동일하게 채우거나 분배하거나 정렬/늘리기 위해 강력한 방법입니다. 또는 특정 항목을 플렉스하여 가변 공간에 배치할 수 있습니다.
접근성
모든 텍스트가 모든 화면에서 읽기 쉬운지 확인하세요. 또한 모든 UI가 충분한 대비를 가지고 있고, 행동이나 결과를 구별하는 데 색상에만 의존하지 않도록 하세요.
모든 장치 화면 크기에서 UI 요소가 적절하게 크기 조정되더라도, 전체 게임은 시각 장애인이나 색맹 플레이어를 위한 접근성 기준 을 충족해야 합니다. 텍스트 크기는 텍스트 기반 UI의 가독성에 큰 영향을 미칠 수 있으므로, 텍스트가 읽을 수 없게(너무 작거나) 되거나 4K TV와 같은 큰 화면에서 시각적으로 너무 커지지 않도록 텍스트 크기 제약을 포함해야 합니다.
접근성에 대한 더 많은 팁은 접근성 가이드라인을 참조하세요.
최종 팁 및 요령
완전한 크로스 플랫폼 게임을 향해 나아가면서 다음의 팁과 요령을 고려하세요:
- 장치 에뮬레이션은 Roblox에서 최적의 게임을 설계하는 데 필수적입니다. 내장된 장치 에뮬레이터 및 컨트롤러 에뮬레이터를 활용하여 Studio에서 다양한 장치와 게임패드를 직접 에뮬레이트하세요.
- 게임이 효과적으로 크로스 플랫폼이 되면, 모바일 및 게임패드에서의 햅틱 피드백, TouchSwipe 및 TouchPinch와 같은 터치 제스처, 또는 AccelerometerEnabled 및 GyroscopeEnabled 장치에서의 가속도계 및 자이로스코프 기능과 같은 네이티브 기능을 탐색하세요.