점수 표시줄 만들기

A 점수 표시줄은 플레이어의 레벨 업 통계, 통화 수 또는 인벤토리에 있는 파워업 아이템과 같은 게임 플레이에 중요한 정보를 표시하는 UI 요소입니다. 플레이어의 화면에 점수 표시줄을 직접 표시함으로써, 경험 내에서 다양한 목표를 달성하기 위해 필요한 것에 플레이어의 주의를 집중시킬 수 있습니다.

Gold Rush .rbxl 파일을 참조하여, 이 튜토리얼에서는 플레이어가 수집하는 금의 양을 추적하는 점수 표시줄을 만드는 방법을 보여주며, 다음과 같은 내용을 포함합니다.

• 화면의 상단 중앙에 프레임 만들기.
• 텍스트 안내 없이 점수 표시줄이 추적하는 내용을 전달하는 크라운 아이콘 추가하기.
• 플레이어가 수집한 금의 양을 기록하는 점수 텍스트 삽입하기.
• 여러 에뮬레이트된 장치에서 UI 디자인을 테스트하여 다양한 화면 및 종횡비에서의 외관 검토하기.

프레임 만들기

모든 플레이어의 화면에 UI 요소를 표시하려면 ScreenGui 객체를 StarterGui 서비스에 생성할 수 있습니다. ScreenGui 객체는 화면상의 UI의 주요 컨테이너이며, StarterGui 서비스는 내용물을 각 플레이어의 PlayerGui 컨테이너로 복사합니다.

ScreenGui 객체를 생성한 후, 각 컨테이너의 목적에 따라 하위 GuiObjects를 생성하고 사용자 정의할 수 있습니다. 이 개념을 설명하기 위해, 이 섹션에서는 아이콘과 텍스트를 포함할 Frame 객체와 함께 ScreenGui 객체를 생성하는 방법을 가르쳐드립니다.

프레임의 속성을 사용자 정의하는 것 외에도, 이 섹션에서는 프레임에 하위 UISizeConstraint 및 UIListLayout 객체를 추가하는 방법에 대한 안내도 제공합니다. 이 기법은 GuiObjects가 프레임에 삽입될 때 자동으로 수평으로 배열되며, 화면 크기가 작은 경우에도 항상 읽을 수 있도록 보장합니다. 이 지침을 따르지 않으면 프레임의 외곽에 배치된 모든 GuiObject는 배열되지 않습니다.

샘플 Gold Rush 장소 파일 내에서 프레임 컨테이너를 재생성하려면:

1. 화면에 UI를 포함할 ScreenGui 객체를 만듭니다.

   1. Explorer 창에서 StarterGui 위에 마우스를 올리고 ⊕ 아이콘을 클릭합니다. 그러면 컨텍스트 메뉴가 표시됩니다.
   2. ScreenGui를 삽입합니다.

2. 전체 점수 표시줄 UI 컴포넌트를 위한 컨테이너를 생성합니다.

   1. ScreenGui 객체 내에 Frame을 삽입합니다.

      

   2. 새 Frame을 선택한 다음, Properties 창에서,

      1. AnchorPoint를 0.5, 0으로 설정하여 프레임의 원점을 프레임의 상단 중앙에 설정합니다(프레임의 왼쪽에서 오른쪽까지 50%, 위에서 아래까지 0%).
      2. BackgroundColor를 0.6으로 설정하여 프레임의 배경을 검은색으로 만듭니다.
      3. BackgroundTransparency를 0.6으로 설정하여 프레임의 배경을 반투명으로 만듭니다.
      4. Position을 {0.5, 0},{0.01, 0}으로 설정하여 화면의 상단 중앙 근처에 프레임을 배치합니다(스크린의 왼쪽에서 오른쪽까지 50%, 위에서 아래까지 1%).
      5. Size를 {0.25, 0},{0.08, 0}으로 설정하여 프레임이 화면 중간의 큰 부분을 차지하게 만들고 플레이어의 주의를 끕니다(수평으로 25%, 수직으로 8%).
      6. Name을 ScoreBarFrame으로 설정합니다.

      

3. 프레임의 내용을 항상 소형 화면에서 가독 가능하도록 제약 조건을 추가합니다.

   1. ScoreBarFrame에 UISizeConstraint 객체를 삽입합니다.
   2. 새 제약 조건을 선택한 다음, Properties 창에서 MinSize를 0, 40으로 설정하여 프레임이 수직으로 40픽셀 이하로 축소되지 않도록 합니다.

4. 프레임에 레이아웃 객체를 추가하여 내용을 좌에서 우로 배열하고 프레임의 경계 내에서 수직으로 중앙에 배치합니다.

   1. ScoreBarFrame에 UIListLayout 객체를 삽입합니다.
   2. 새로운 레이아웃 객체를 선택한 다음, Properties 창에서,

      1. FillDirection을 Horizontal로 설정합니다.
      2. VerticalAlignment를 Center로 설정합니다.

아이콘 추가하기

아이콘은 경험 내에서 행동, 객체 또는 개념을 나타내는 상징입니다. 간단하고 직관적인 아이콘을 사용하면 플레이어가 UI에서 전달하고자 하는 내용을 쉽게 인식할 수 있으며, 이는 화면을 혼잡하게 만들고 중요한 내용에서 주의를 분산시키는 텍스트를 사용하는 것보다 낫습니다.

예를 들어, 샘플에서는 플레이어가 수집한 금의 양을 나타내기 위해 간단한 금 크라운 아이콘을 사용합니다. 이 아이콘은 경험 내에서 가장 중요한 목표라는 것을 쉽게 인식할 수 있으며, 모바일 장치 화면에서도 가독성을 유지하기 위해 최소한의 세부정보만 포함되어 있습니다.

샘플 Gold Rush 장소 파일 내에서 금 크라운 아이콘을 재생성하려면:

1. ScoreBarFrame에 ImageLabel 객체를 삽입합니다.

   1. Explorer 창에서 ScoreBarFrame 위에 마우스를 올리고 ⊕ 아이콘을 클릭합니다. 그러면 컨텍스트 메뉴가 표시됩니다.

   2. ImageLabel을 삽입합니다.

      

2. 새 레이블을 선택한 다음, Properties 창에서,

   1. Image를 rbxassetid://5673786644로 설정하여 아이콘을 크라운으로 만듭니다.

   2. BackgroundTransparency를 1로 설정하여 레이블의 배경을 완전히 투명하게 만듭니다.

   3. LayoutOrder를 1로 설정합니다. 이렇게 하면 다음 섹션에서 텍스트를 삽입할 때 아이콘이 프레임에서 좌에서 우로 첫 번째 GuiObject로 유지됩니다.

   4. Size를 {1.25,0},{1,0}으로 설정하여 레이블 영역을 프레임의 전체 너비를 넘어 넓힙니다.

   5. SizeConstraint를 RelativeYY로 설정하여 레이블의 크기를 부모 프레임의 높이에 맞춰 스케일링하여 아이콘의 종횡비를 유지합니다.

      

점수 텍스트 삽입하기

점수 텍스트는 경험 내에서 플레이어의 점수를 기록하며, 예를 들어 매치에서 획득한 포인트 수를 나타냅니다. 모든 UI 텍스트가 명확하고 읽기 쉬운 것이 중요하므로, 플레이어가 성공하기 위해 필요한 정보를 빠르게 이해할 수 있습니다.

예를 들어, 샘플에서는 배경의 노이즈와 섞이지 않도록 대조적인 색상 위에 큰 텍스트를 사용합니다. 이는 플레이어가 3D 공간을 이동할 때 텍스트가 모든 객체와 잘 구분되도록 보장하므로, 접근성에게 특히 중요합니다.

샘플 Gold Rush 장소 파일 내에서 점수 텍스트를 재생성하려면:

1. ScoreBarFrame에 TextLabel 객체를 삽입합니다.

   1. Explorer 창에서 ScoreBarFrame 위에 마우스를 올리고 ⊕ 아이콘을 클릭합니다. 그러면 컨텍스트 메뉴가 표시됩니다.

   2. TextLabel을 삽입합니다.

      

2. 새 레이블을 선택한 다음, Properties 창에서,

   1. BackgroundTransparency를 1로 설정하여 레이블의 배경을 완전히 투명하게 만듭니다.

   2. Size를 {1,0},{1,0}으로 설정하여 레이블이 프레임의 전체를 차지하게 만듭니다(부모 프레임의 수평 및 수직 기준으로 100%). 레이블은 아이콘으로 인해 프레임의 경계를 넘어 확장됩니다.

   3. SizeConstraint를 RelativeYY로 설정하여 레이블 크기가 부모 프레임의 높이에 비례해 조정되고 아이콘의 종횡비를 유지하게 합니다. 이 단계는 레이블이 정사각형이 되고 프레임의 경계 내에 유지되도록 합니다.

   4. Font를 GothamSSm으로 설정하여 환경의 미학에 맞춥니다.

   5. Text를 0으로 설정하여 점수를 0에서 시작합니다.

   6. TextColor3를 255, 200, 100으로 설정하여 텍스트에 금색을 입힙니다.

   7. TextSize를 30으로 설정하여 화면에서 텍스트를 더 크게 만듭니다.

   8. TextXAlignment를 Left로 설정하여 점수 텍스트가 플레이어의 점수가 0, 1,000, 또는 1,000,000일 때 크라운 아이콘에 가깝게 왼쪽 정렬되도록 합니다.

      

디자인 테스트하기

Studio의 장치 에뮬레이터를 사용하면 플레이어가 다양한 장치에서 UI를 보고 상호작용하는 방식을 테스트할 수 있습니다. 이 도구는 UI 디자인에 있어 중요한 부분으로, Studio의 뷰포트 종횡비가 플레이어가 경험에 접근하는 데 사용하는 화면의 종횡비를 반드시 반영하지 않기 때문이며, 모든 장치에서 UI가 가독성과 접근성이 보장되는 것이 중요합니다.

예를 들어, 다양한 화면 크기에서 UI를 테스트하지 않으면 대형 화면을 가진 플레이어가 텍스트를 읽거나 아이콘을 해독할 수 없고, 소형 화면을 가진 플레이어가 UI 요소가 화면에서 너무 많은 공간을 차지하여 3D 공간을 볼 수 없을 수 있습니다.

다양한 화면 크기에서 UI를 에뮬레이트하려면:

1. Studio의 Test 메뉴에서 Device Emulator를 켭니다.

2. 해상도 드롭다운에서 Actual Resolution을 선택합니다. 이렇게 하면 에뮬레이트하고 있는 장치에서 UI 요소의 실제 해상도를 확인할 수 있습니다.

   

3. 장치 드롭다운에서 Phone, Tablet, Desktop, Console 섹션 내에서 최소한 하나의 장치를 선택합니다.