위치 및 크기 조정 UI 개체

*이 콘텐츠는 AI(베타)를 사용해 번역되었으며, 오류가 있을 수 있습니다. 이 페이지를 영어로 보려면 여기를 클릭하세요.

UI 개체가 레이아웃 구조 또는 크기 조정기 아래에 있지 않은 경우, 위치 및 크기에 대한 완전한 제어를 사용자에게 제공합니다. 또한 개체가 중첩되는 순서를 지정하는 Z-index 레이어 순서를 설정할 수도 있습니다.

핵심 속성

모든 GuiObjects는 코어 집합의 속성을 공유하여 위치, 크기, 1>앵커1> 및 4>레이어4>를 화면 또는 경험 컨테이너 내에서 배치합니다.

위치

Class.GuiObject.Position|Position 속성은 개체를 UDim2 축을 따라 위치시키는 X 및 1>Y1> 축을 통해 위치시키는 데 사용됩

  • 크기 조정기 — 해당 축을 따라 컨테이너의 크기를 나타내는 값, 모든 크기 조정 값의 추가.
  • 오프셋 — 개체를 해당 축에 이동하는 픽셀의 수를 나타내는 값, 모든 크기 조정 값의 합계.

선택한 GuiObject 의 위치를 편집하려면 속성 창에서 위치 필드를 클릭하고 새로운 Datatype.UDim2 좌표 설정입력하십시오.

크기

Class.GuiObject.Size|Size 속성은 개체를 UDim2 축을 따라 크기를 조정하는 Datatype.UDim2 좌표 집합입니다. 1>Datatype.UDim21>

  • 크기 조정기 — 해당 축을 따라 컨테이너의 크기를 나타내는 값, 모든 오프셋 값에 추가됩니다.
  • 오프셋 — 해당 축을 따라 개체의 픽셀 크기를 나타내는 값, 모든 크기 조정 값에 추가적인 크기 조정 값.

선택한 GuiObject 의 크기를 편집하려면 속성 창에서 크기 필드를 클릭하고 새로운 Datatype.UDim2 좌표 설정입력하십시오.

앵커포인트

Class.GuiObject.AnchorPoint|AnchorPoint 속성은 개체가 위치 및 크기를 변경하는 원본 점을 정의합니다. 기본 Class.GuiObject.AnchorPoint|AnchorPoint 값은 1> 4> 7> 9> <

AnchorPoint 값은 개체의 크기에 대해 배수</

선택한 GuiObject의 앵커 포인트를 보고 편집하려면:

  1. In the 속성 window, click inside the 앵커 포인트 field.

  2. 새로운 Vector2 좌표를 입력하고 Enter를 누르십시오.

Z인덱스

Class.GuiObject.ZIndex|ZIndex 속성은 GuiObjects 렌더링과 충돌하는 레이어 순서를 정의합니다. 새로운 렌더링 레이어를 생성하려면 각 개체에 대해 ZIndex 속성을 다른 음수 또는 양수 정수 값으로 설

For UI 컨테이너 like ScreenGui , the default ZIndexBehavior always renders children above their parents, and each child's ZIndex is used to decide the order in which it renders over others.

개체의 ZIndex 를 편집하려면 속성 창에서 ZIndex 를 찾아 새 정수 값을 입력하십시오.

레이아웃 구조

레이아웃 구조는 개체를 빠르게 조직하고 표시하는 데 유용합니다. 예를 들어, 가로 또는 세로 목록, 같은 크기의 타일 그리드, 페이지 시퀀스 등을 포함한 하러 오는 목록 을 만듭니다. 레이아웃

레이아웃설명
목록을 만들기UIListLayout 위치 자매 GuiObjects 수직 행 또는 부모 컨테이너 내의 가로 행에 배치됩니다.
그리드UIGridLayout 위치 형제 GuiObjects 그들의 부모 컨테이너 내의 유니폼 셀 그리드 내의 형제 위치.
테이블UITableLayout 위치 자식 GuiObjects 및 자식 아이들을 테이블 형식으로 표시합니다.
페이지UIPageLayout 은 스크립팅통해 전환할 수 있는 고유한 페이지로 Class.GuiObject|GuiObjects 을 구성합니다.

크로스 플랫폼 요소

Roblox는 기본적으로 크로스 플랫폼 이므로 플레이어는 PC 또는 콘솔에서 경험을 발견하고 참여할 수 있습니다. 나중에 휴대폰을 픽업하고 계속하기 위해 플랫폼을 최적화하지 않고 모든 플랫폼에서 액세스할 수 있는 경

예약된 영역

모바일 장치에서 기본 컨트롤은 화면의 왼쪽 하단 및 오른쪽 하단 모서리를 차지합니다. 경험의 UI를 설계할 때 이 영역에 중요한 정보나 가상 버튼을 배치하지 마십시오.

싫어요 영역

대부분의 모바일 플레이어는 두 개의 싫어요 — 하나는 가상 싫어요 막대에 있고, 다른 하나는 점프 버튼에 있습니다. 장치의 물리적 크기와 플레이어의 손에 따라 너무 멀리 부터 움직이면 불편하거나 불가능하므로 쉽게 접근할 수 있는 영역 외부에 버튼을 배치하지 마십시오.


편안한 싫지 영역은 전화기와 태블릿 사이에서 다릅니다. 태블릿에는 더 큰 화면이 있기 때문에 전화기에서는 40% 아래 모서리에 버튼을 배치할 수 있지만 태블릿에서는 거의 도달할 수 없습니다.

두 가지 모두 휴대폰과 태블릿에서 사용하는 주요 컨트롤 근처에 사용자 지정 버튼의 상대적인 위치를 기반으로 하는 신뢰할 수 있는 접근 방식입니다. 기본 점프 버튼과 같은 자주 사용되는 컨트롤에 배치하여 쉽게 액세스할 수 있습니다.

Class.StarterPlayerScripts 내 클라이언트 사이드 스크립트에 배치된 다음 코드는 점프 버튼의 위치를 가져와 위치 지정자 버튼을 만듭니다. 그리고 왼쪽에 있는 버튼을 20개의 픽셀로 만듭니다.

클라이언트 스크립트 - 점프 버튼 근처에 사용자 지정 버튼
local Players = game:GetService("Players")

local UserInputService = game:GetService("UserInputService")



local player = Players.LocalPlayer

local playerGui = player:WaitForChild("PlayerGui")



if UserInputService.TouchEnabled then

	-- 점프 버튼이 완전히 로드될 때까지 대기하십시오

	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do

		task.wait()

	end

	local jumpButton = playerGui:FindFirstChild("JumpButton", true)



	-- 점프 버튼의 왼쪽에 새로운 사용자 버튼 배치

	local customButton = Instance.new("ImageButton")

	customButton.AnchorPoint = Vector2.new(1, 1)

	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)

	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)

	customButton.Parent = jumpButton.Parent

else

	warn("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")

end

컨텍스트 기반 UI

모바일 장치의 화면 공간이 제한되므로 활성 게임 플레이 중에 가장 중요한 정보만 표시해야 합니다. 예를 들어, 경험에 특별한 입력 액션을 포함하여 도어와 보물 상자를 열려면 화면에 항상 열 버튼을 표시하는 것이 좋지 않습니다. 대신 가까이

캐릭터가 문이나 상자에 가까이 있을 때만 표시하는 사용자 지정 버튼