점수 표시줄 생성 | 설명서 - Roblox 크리에이터 허브

A 점수 표시 바 는 경험의 게임 플레이에 중요한 플레이어 정보를 표시하는 UI 요소입니다, 예를 들어 그들의 레벨 업 통계, 통화 수 또는 인벤토리에서 파워업 항목. 플레이어의 화면에 직접 점수 표시를 표시하여 다양한 목표를 달성하기 위해 필요한 것을

참조용으로 Gold Rush.rbxl 파일을 사용하는 이 튜토리얼에서는 플레이어가 수집하는 금의 양을 추적하는 점수 바를 만드는 방법을 보여줍니다. 이 튜토리얼에는 다음과 같은 지침이 포함되어 있습니다.

화면의 왼쪽 중앙에 프레임을 생성합니다.
텍스트 지침 없이 점수 표시줄이 추적하는 내용을 보여주는 왕관 아이콘 추가.
플레이어가 수집한 금의 양을 기록한 점수 텍스트 삽입.
다양한 모니터 해상도 및 측면 비율에서 UI 디자인을 테스트하여 개발자 콘텐츠를 검토합니다.

모든 2D 작품마찬가지로 특정 목표를 달성하는 많은 방법이 있습니다. 타사 UI 도구를 통해 자신만의 2D 자산을 만들고 자신의 디자인에 따라 따라갈 수 있습니다.

프레임 생성

모든 플레이어의 화면에 UI 요소를 표시하려면 서비스에서 ScreenGui 개체를 생성할 수 있습니다. StarterGui 서비스는 경험에 대한 화면 UI의 주요 컨테이너이며, ScreenGui

Class.ScreenGui 개체를 만든 후, 자식 GuiObjects 을 각 컨테이너의 목적에 따라 생성하고 사용자 정의할 수 있습니다. 이 개념을 시연하기 위해, 이 섹션에서는 스코어 바의 아이콘과

프레임의 속성을 사용자 정의하는 것 외에도 이 섹션에서는 프레임에 자식 UISizeConstraint 및 UIListLayout 개체를 추가하는 방법에 대한

To recreate the frame container within the sample Gold Rush place file:

Class.ScreenGui 개체를 생성하여 온-스크린 UI를 포함합니다.
1. 탐색기 창에서 스타터 가이드를 마우스로 넘겨 받고 ⊕ 아이콘을 클릭하십시오. 컨텍스트 메뉴가 표시됩니다.
2. Insert a ScreenGui .
전체 점수 표시줄 구성 요소용 컨테이너 생성.
1. 프레임을 ScreenGui 개체에 삽입합니다.
2. 새로운 프레임을 선택한 다음 속성 창에서
  1. 앵커 포인트를 0.5, 0로 설정하여 프레임의 원점을 상단 중앙에 설정(프레임의 왼쪽 및 오른쪽 모두에서 50% 오프)하고, 아래 중앙에 프레임의 기원점을 설정합니다(프레임의 왼쪽 및 오른쪽 모두에서 50% 오프).
  2. 프레임의 배경을 검은색으로 하려면 BackgroundColor 를 0.6 로 설정합니다.
  3. BackgroundTransparency를 0.6로 설정하여 프레임의 배경을 반투명으로 합니다.
  4. 화면 중앙 상단의 프레임을 설정하려면 위치 를 {0.5, 0},{0.01, 0} 로 설정하고 화면 왼쪽에서 화면 오른쪽으로 50% 왼쪽에서 화면 오른쪽으로 1% 설정합니다.
  5. 프레임이 플레이어의 관심을 끌 도록 하려면 크기를 0.25, 0,0.08, 0 로 설정하세요(25% 가로, 8% 세로).
  6. 이름을 ScoreBarFrame 에 설정합니다.
작은 화면 크기에 맞춰 콘텐츠가 항상 가시적인 프레임에 제약 사항을 추가합니다.
1. ScoreBarFrame 에 다음 UISizeConstraint 개체를 삽입합니다.
2. 새 제약 조건을 선택한 다음 속성 창에서 최소 크기 를 0, 40로 0>1> 0, 401>로 설정하여 프레임이 항상 40피츠 이하로 축소되지 않도록 합니다.
프레임에 레이아웃 개체를 추가하여 콘텐츠가 왼쪽에서 오른쪽으로 정렬되고 프레임의 둥근 모서리 내에서 가로와 세로가 중앙에 맞게 배치됩니다.
1. ScoreBarFrame 에 UIListLayout 개체를 삽입합니다.
2. 새로운 레이아웃 개체를 선택한 다음 속성 창에서
  1. Set FillDirection to 가로 .
  2. Set 가로 정렬 to 센터 .

아이콘 추가

아이콘은 경험에서 액션, 개체 또는 개념을 나타내는 기호입니다. 간단하고 직관적인 아이콘을 사용하면 플레이어가 텍스트를 사용하지 않고도 쉽게 해당 내용을 통해 커뮤니케이션할 수 있습니다. 이렇게 하면 화면을 복잡하게 할 수 있고 주의를 끌 수 있는 콘텐츠

예를 들어, 샘플은 플레이어가 수집한 골드의 양을 나타내기 위해 간단한 금 왕관 아이콘을 사용합니다. 이 아이콘은 경험의 가장 중요한 목표로 쉽게 인식되며, 모바일 장치 화면에서 읽기 쉽게 유지되도록 최소 세부 정보를 포함합니다.

To recreate the gold crown icon within the sample Gold Rush place file:

ScoreBarFrame 에 ImageLabel 개체를 삽입합니다.
1. 탐색기 창에서 점수 표시줄 프레임 위로 마우스를 이동하고 ⊕ 아이콘을 클릭하십시오. 컨텍스트 메뉴가 표시됩니다.
2. Insert an 이미지 레이블 .
새 레이블을 선택한 다음 속성 창에서,
1. 이미지를 rbxassetid://5673786644로 설정하여 아이콘을 왕관으로 만듭니다.
2. 라벨의 배경을 완전히 투명하게 하려면 <a href="https://developer.microsoft.com/en-us/microsoft-edge/背景透明度" target="_blank">BackgroundTransparency</a>, <a href="https://developer.microsoft.com/en-us/microsoft-edge/標籤背景透明度" target="_blank">標籤背景透明度</a>를 1로 설정합니다.
3. 레이아웃 주문을 설정하십시오 1 . 이렇게 하면 텍스트를 다음 튜토리얼의 왼쪽에서 오른쪽으로 배치하면 아이콘이 첫 번째 GuiObject가 됩니다.
4. 레이블 영역을 넓이 크기 를 {1.25,0},{1,0} 로 설정하여 프레임 전체 너비를 초과하는 레이블 영역을 넓이십시오.
5. 크기 제한을 상대 YY 로 설정하여 레이블 크기를 부모 프레임의 높이와 함께 조정하여 아이콘의 모양 비율을 유지합니다.

점수 텍스트 삽입

점수 텍스트는 플레이어가 경험 내에서 얼마나 많은 포인트를 획득하는지 같은 일치내에서 점수를 기록합니다. 모든 UI 텍스트가 명확하고 쉽게 읽을 수 있도록 하여 플레이어가 성공할 수 있는 경험에 대한 정보를 신속하게 이해할 수 있습니다.

예를 들어, 샘플은 대비 색상 위에 대폭 색상을 사용하여 텍스트가 배경 색상과 섞이지 않도록 합니다. 이는 특히 접근성에 중요하며, 플레이어가 3D 공간을 통해 이동할 때 텍스트가 읽을 수 있도록 유지하는 데 도움이 됩니다. 여기에는 텍스트와 동일한 색상의 개체가

Gold Rush 내 score 텍스트 복제를 위해 파일 Gold Rush 을 다음과 같이 배치합니다.

ScoreBarFrame 에 TextLabel 개체를 삽입합니다.
1. 탐색기 창에서 점수 표시줄 프레임 위로 마우스를 이동하고 ⊕ 아이콘을 클릭하십시오. 컨텍스트 메뉴가 표시됩니다.
2. 입력 TextLabel .
새 레이블을 선택한 다음 속성 창에서,
1. 라벨의 배경을 완전히 투명하게 하려면 <a href="https://developer.microsoft.com/en-us/microsoft-edge/背景透明度" target="_blank">BackgroundTransparency</a>, <a href="https://developer.microsoft.com/en-us/microsoft-edge/標籤背景透明度" target="_blank">標籤背景透明度</a>를 1로 설정합니다.
2. 레이블을 확장하려면 크기 크기 를 {1,0},{1,0}로 설정하고 라벨을 모든 프레임에 확장하십시오(100% 가로 및 100% 세로 부모 프레임). 아이콘으로 인해 레이블이 프레임 범위 밖으로 확장됩니다.
3. 크기 제한을 상대 YY 로 설정하여 레이블의 크기를 부모 프레임의 높이와 함께 조정하고 아이콘의 모양 비율을 유지합니다. 이 단계는 레이블을 정사각형으로 만들고 프레임의 경계 내에 유지합니다.
4. 서체 골란 을 고픈 SSm 로 설정하여 환경의 아름다움에 일치합니다.
5. 텍스트를 0로 설정하여 점수를 0에서 시작합니다.
6. Set TextColor3 to 255, 200, 100 to gold text.
7. 텍스트 크기를 30 로 설정하여 화면에서 텍스트를 더 크게 표시합니다.
8. 점수 텍스트가 왕관 아이콘 근처에 있든 0, 1,000, 또는 1,000,000이 되든 간에 점수 텍스트가 왕관 아이콘 근처에 맞춰 왼쪽으로 설정되도록 하려면 TextXAlignment를 왼쪽으로 설정하십시오.

디자인 테스트

Studio의 장치 에뮬레이터 는 플레이어가 다양한 기기인터랙트하는 방법을 테스트하는 데 유용합니다. 이 도구는 UI 디자인의 중요한 부분인 뷰포트의 측면 비율을 반영하지 않고 스크린에서 액세스할 수 있는 경험에 액세스할 수 있도록

예를 들어, 대형 화면 크기의 범위에서 인터페이스를 테스트하지 않으면 대형 화면 플레이어는 텍스트를 읽거나 해독할 수 없으며, 소형 화면 플레이어는 대형 화면 요소가 디스플레이에 너무 많은 공간을 차지하기 때문에 3D 공간을 볼 수 없습니다.

다양한 화면 크기에 대해 UI를 표시하려면:

In the menu bar, select the 테스트 tab.
In the 에뮬레이션 section, click 장치 . 뷰포트는 평균 노트북의 모양 비율을 반영하도록 변경됩니다.
해상도 드롭다운에서 실제 해상도 를 선택합니다. 이렇게 하면 디바이스에서 시му레이션하는 동안 사용자 요소의 해상도를 확인할 수 있습니다.
장치 드롭다운에서 최소 하나의 장치 전화기, 태블릿, 컴퓨터 및 2>콘솔2> 섹션을 선택합니다.