Roblox는 본질적으로 크로스 플랫폼이며, 플레이어는 휴대폰이나 태블릿에서 게임을 발견하고 참여한 후, 나중에 PC나 콘솔에서 중단한 지점에서 계속할 수 있습니다. 확장하는 플랫폼 모음을 지원하기 위해, 입력 유형(터치, 게임패드, 마우스/키보드), 화면 크기 및 장치 방향에 매끄럽게 적응하는 사용자 인터페이스를 구축해야 합니다. 이 가이드, 적응형 디자인 가이드 및 연결된 리소스는 모든 플랫폼에서 호환 가능하고 접근 가능하며 즐거운 진정한 크로스 플랫폼 게임을 디자인하는 데 도움이 될 수 있습니다.
다음 크로스 플랫폼 디자인 개념을 보여주는 미리 만들어진 게임을 탐색하려면 Interactivity Showcase를 확인하세요.
입력
신중하게 설계된 게임은 마우스와 키보드, 터치, 게임패드를 포함한 모든 주요 입력 유형을 지원해야 합니다.
크로스 플랫폼 작업
입력 작업 시스템을 사용하여 모든 주요 입력 유형(마우스/키보드, 터치 및 게임패드)을 지원하세요.
크로스 플랫폼 입력을 단순화하기 위해 Roblox는 점프, 달리기, 사격과 같은 작업을 정의하고 이러한 작업을 수행하기 위한 여러 하드웨어 입력에 대한 바인딩을 설정하기 위해 입력 작업 시스템을 제공합니다. 하드웨어 입력의 모든 기술적 측면이나 특정 입력 트리거를 수신해야 하는 시기에 대해 생각할 필요 없이, 어떤 입력이 어떤 작업을 수행하는지만 정의하면 됩니다.
입력 유형 감지
크로스 플랫폼 개발에서 플레이어가 사용하는 주요 입력 유형을 확인하고 그에 반응하는 것이 중요합니다. 일반적으로 이는 UI 요소(화면 버튼 및 메뉴 포함)가 우아하게 작동하고 장치 간 상호작용을 지원하는지 확인하기 위함입니다.
예를 들어, 터치 지원 장치는 터치가 기본 입력인 것으로 가정하며, 작업을 위한 터치 버튼이 나타날 수 있습니다. 그러나 플레이어가 블루투스 게임패드를 연결하기로 선택할 수도 있습니다. 이 경우 터치는 유효한 입력으로 남지만, 플레이어가 연결된 게임패드를 주요 입력 유형으로 사용하고자 할 가능성이 높으므로 우선 게임패드를 사용하고 화면 UI에는 터치를 백업 입력으로 사용할 수 있습니다.
보조 힌트
주요 입력 유형을 기반으로 가능할 때마다 보조 UI 힌트를 포함하는 것이 좋습니다. 예를 들어, 도구를 선택하여 장비를 장착할 때, 플레이어가 키보드를 사용하는 경우 1–5와 같은 입력 전용 힌트를 표시하거나, 플레이어가 게임패드를 사용하는 경우 게임패드 트리거 힌트를 표시합니다.
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의 가독성에 큰 영향을 미칠 수 있으므로, 텍스트가 읽을 수 없게(너무 작거나)되거나 시각적으로 너무 크게 보이지 않도록 텍스트 크기 제약을 포함해야 합니다.
접근성에 대한 더 많은 팁은 여기에서 확인하세요.
최종 팁 & 요령
풀 크로스 플랫폼 게임을 향해 작업하며 다음과 같은 팁과 요령을 고려하세요:
- 장치 에뮬레이션은 Roblox에서 최적의 게임 설계를 위해 필수적입니다. 내장된 장치 에뮬레이터 및 컨트롤러 에뮬레이터를 활용하여 Studio에서 다양한 장치와 게임패드를 직접 에뮬레이트하세요.
- 게임이 효과적으로 크로스 플랫폼이 되면, 모바일 및 게임패드에서의 햅틱 피드백, TouchSwipe 및 TouchPinch와 같은 터치 제스처, 또는 AccelerometerEnabled 및 GyroscopeEnabled 장치에서의 가속도계 및 자이로스코프 기능과 같은 네이티브 기능을 탐색하세요.