Vị trí và kích thước đối tượng UI | Tài liệu

Trừ khi các đối tượng UI được kiểm soát bởi một cấu trúc bố cục hoặc một bộ điều chỉnh/kích thước, bạn có thể hoàn toàn kiểm soát vị trí và kích thước của chúng. Bạn cũng có thể thiết lập thứ tự lớp Z‑index mà trong đó các đối tượng chồng lên nhau.

Các thuộc tính chính

Tất cả các GuiObjects chia sẻ một tập hợp các thuộc tính chính để định vị, thay đổi kích thước, điểm neo và lớp chúng trong một container trên màn hình hoặc trong trải nghiệm.

Vị trí

Thuộc tính Position là một tập hợp tọa độ UDim2 định vị đối tượng dọc theo các trục X và Y. Một UDim2 được biểu diễn bởi cả các giá trị Scale và Offset cho mỗi trục:

Các giá trị Scale đại diện cho một tỷ lệ phần trăm kích thước của container dọc theo trục tương ứng, cộng thêm bất kỳ giá trị Offset nào.
Các giá trị Offset đại diện cho số lượng pixel để dịch chuyển đối tượng theo trục tương ứng, cộng thêm bất kỳ giá trị Scale nào.

Để chỉnh sửa vị trí của một GuiObject đã chọn, hãy nhấp vào trường Position trong cửa sổ Properties và nhập một tập hợp tọa độ UDim2 mới.

Các dấu ngoặc và khoảng trắng là tùy chọn khi nhập một UDim2 trong Studio — bạn có thể chỉ cần nhập bốn giá trị được ngăn cách bởi dấu phẩy, ví dụ 0.25,40,0.1,20, và Studio sẽ suy ra tập hợp giá trị dự kiến.

Studio cũng suy ra tập hợp giá trị dự kiến khi chỉ nhập một số. Ví dụ, chỉ cần nhập 0.5 sẽ được chuyển đổi thành {0.5, 0},{0.5, 0} vì 0.5 có thể là một giá trị Scale 50%. Ngược lại, nhập 20 sẽ được chuyển đổi thành {0, 20},{0, 20} vì 20 có khả năng là giá trị Offset 20 pixel và không phải là một tỷ lệ 2000%.

Kích thước

Thuộc tính Size là một tập hợp tọa độ UDim2 xác định kích thước của đối tượng dọc theo các trục X và Y. Một UDim2 được biểu diễn bởi cả các giá trị Scale và Offset cho mỗi trục:

Scale — Các giá trị đại diện cho một tỷ lệ phần trăm kích thước của container dọc theo trục tương ứng, cộng thêm bất kỳ giá trị Offset nào.
Offset — Các giá trị đại diện cho kích thước pixel của đối tượng dọc theo trục tương ứng, cộng thêm bất kỳ giá trị Scale nào.

Để chỉnh sửa kích thước của một GuiObject đã chọn, hãy nhấp vào trường Size trong cửa sổ Properties và nhập một tập hợp tọa độ UDim2 mới.

Các dấu ngoặc và khoảng trắng là tùy chọn khi nhập một UDim2 trong Studio — bạn có thể chỉ cần nhập bốn giá trị được ngăn cách bởi dấu phẩy, ví dụ 0.75,0,0.25,0, và Studio sẽ suy ra tập hợp giá trị dự kiến.

Studio cũng suy ra tập hợp giá trị dự kiến khi chỉ nhập một số. Ví dụ, chỉ cần nhập 0.5 sẽ được chuyển đổi thành {0.5, 0},{0.5, 0} vì 0.5 có thể là một giá trị Scale 50%. Ngược lại, nhập 20 sẽ được chuyển đổi thành {0, 20},{0, 20} vì 20 có thể là giá trị Offset 20 pixel và không phải là một tỷ lệ 2000%.

AnchorPoint

Thuộc tính AnchorPoint xác định điểm gốc từ nơi mà đối tượng thay đổi vị trí và kích thước. Các giá trị mặc định của AnchorPoint là (0, 0) đặt điểm neo ở góc trên bên trái của đối tượng.

Các giá trị AnchorPoint là một phân số từ 0 đến 1, tương đối với kích thước của đối tượng, nghĩa là một đối tượng với các giá trị AnchorPoint là (0.5, 0.5) đặt điểm neo ở giữa (50%) của đối tượng cả theo chiều ngang và chiều dọc, và bất kỳ thay đổi nào đối với vị trí hoặc kích thước của nó đều di chuyển và tỷ lệ ra ngoài từ điểm này.

Để xem và chỉnh sửa điểm neo của một GuiObject đã chọn:

Trong cửa sổ Properties, nhấp vào bên trong trường AnchorPoint.
Nhập một tọa độ Vector2 mới và nhấn Enter.

Studio suy ra cặp giá trị dự kiến khi chỉ nhập một số. Ví dụ, chỉ cần nhập 0.5 sẽ được chuyển đổi thành 0.5, 0.5 cho một điểm neo trung tâm.

ZIndex

Thuộc tính ZIndex xác định thứ tự lớp mà GuiObjects được hiển thị và chồng lên nhau. Nếu bạn muốn tạo các lớp hiển thị mới, bạn phải thiết lập thuộc tính ZIndex thành các giá trị số nguyên dương hoặc âm khác nhau cho mỗi đối tượng.

Đối với các container UI như ScreenGui, giá trị mặc định ZIndexBehavior luôn hiển thị các phần tử con nằm trên các phần tử cha của chúng, và ZIndex của mỗi phần tử con được sử dụng để xác định thứ tự mà nó được hiển thị lên các phần tử khác.

Để chỉnh sửa ZIndex của một đối tượng, hãy tìm ZIndex trong cửa sổ Properties và nhập một giá trị số nguyên mới.

Cấu trúc bố cục

Các cấu trúc bố cục cho phép bạn nhanh chóng tổ chức và hiển thị GuiObjects, ví dụ như trong một danh sách theo chiều ngang hoặc chiều dọc, một lưới các ô có kích thước đồng nhất, một chuỗi trang, và nhiều hơn nữa. Các bố cục thường ghi đè hoặc ảnh hưởng đến vị trí/kích thước của các đối tượng dưới sự kiểm soát của chúng.

Bố cục	Mô tả
Danh sách	UIListLayout định vị các GuiObjects cùng cấp vào các hàng ngang hoặc cột dọc trong container cha của chúng.
Lưới	UIGridLayout định vị các GuiObjects cùng cấp trong một lưới các ô có kích thước đồng nhất trong container cha của chúng.
Bảng	UITableLayout định vị các GuiObjects cùng cấp và các phần tử con của chúng theo định dạng bảng.
Trang	UIPageLayout tổ chức các GuiObjects cùng cấp của nó thành các trang độc đáo mà bạn có thể chuyển đổi thông qua scripting.

Yếu tố đa nền tảng

Roblox vốn dĩ đa nền tảng, khi người chơi có thể khám phá và tham gia các trải nghiệm trên điện thoại hoặc máy tính bảng của họ, sau đó tiếp tục nơi họ đã dừng lại trên PC hoặc console của họ. Bạn nên thiết kế các trải nghiệm Roblox của mình sao cho có thể truy cập và thú vị trên tất cả các nền tảng mà bạn chọn để hỗ trợ, thay vì tối ưu hóa cho một nền tảng và bỏ qua các nền tảng khác.

Khu vực dành riêng

Trên các thiết bị di động, các điều khiển mặc định chiếm một phần của các góc dưới bên trái và bên phải của màn hình. Khi bạn thiết kế UI của một trải nghiệm, hãy tránh đặt thông tin quan trọng hoặc các nút ảo trong những khu vực này.

Khu vực ngón tay

Hầu hết người chơi di động sử dụng hai ngón tay — một trên joystick ảo và một trên nút nhảy. Tùy thuộc vào kích thước vật lý của thiết bị và tay của người chơi, việc với quá xa từ các góc dưới trở thành không thoải mái hoặc không thể, vì vậy bạn nên tránh đặt các nút được sử dụng thường xuyên ở ngoài các khu vực dễ tiếp cận.

Nút dễ dàng tiện tay với ngón tay phải của người chơi

Nút khó với đến trừ khi người chơi kéo dài tay hoặc ngón tay

Hãy nhớ rằng các khu vực ngón tay thoải mái khác nhau giữa điện thoại và máy tính bảng vì máy tính bảng có màn hình lớn hơn. Một nút đặt 40% từ cạnh trên của màn hình có thể với đến trên điện thoại nhưng gần như không thể với đến trên máy tính bảng.

Nút 40% từ cạnh trên của điện thoại, dễ dàng có thể với đến ngón tay của người chơi

Nút 40% từ cạnh trên của máy tính bảng, khó với đến mà không cần kéo dài

Một phương pháp đáng tin cậy trên cả điện thoại và máy tính bảng là việc định vị tương đối các nút tùy chỉnh gần các điều khiển thường xuyên như nút nhảy mặc định, đặt chúng trong tầm với dễ dàng.

Mã sau đây, được đặt trong một script phía máy khách trong StarterPlayerScripts, lấy vị trí của nút nhảy và tạo một nút button giữ chỗ 20 pixel ở bên trái nó.

Client Script - Custom Button Near Jump Button
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- Chờ cho nút nhảy được tải hoàn toàn
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Đặt nút tùy chỉnh mới sang bên trái nút nhảy
	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("Thiết bị không hỗ trợ cảm ứng hoặc Studio không đang giả lập thiết bị hỗ trợ cảm ứng!")
end

UI dựa trên ngữ cảnh

Không gian màn hình bị giới hạn trên các thiết bị di động, vì vậy bạn nên chỉ hiển thị những thông tin thiết yếu nhất trong quá trình chơi. Ví dụ, nếu trải nghiệm của bạn bao gồm một hành động đầu vào đặc biệt để mở cửa và rương kho báu, thì không có lý do gì để liên tục hiển thị một nút "mở" trên màn hình. Thay vào đó, hãy sử dụng một nhắc nhở gần hoặc phương pháp tương tự để chấp nhận đầu vào chỉ khi nhân vật tiếp cận một cánh cửa hoặc rương kho báu.