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

Trừ khi các đối tượng UI nằm dưới sự kiểm soát của 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ó toàn quyề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à các đối tượng chồng lên nhau.

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

Tất cả GuiObjects chia sẻ một tập hợp các thuộc tính chính để định vị, 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ò chơi.

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ả giá trị Scale và Offset cho mỗi trục:

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

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ể đơn giản nhập bốn giá trị cách nhau bằng dấu phẩy, ví dụ 0.25,40,0.1,20, và Studio sẽ suy luận tập hợp giá trị mong muốn.

Studio cũng suy luận tập hợp giá trị mong muốn khi một số duy nhất được nhập. 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 của 50%. Ngược lại, nhập 20 sẽ được chuyển đổi thành {0, 20},{0, 20} vì 20 có thể là một giá trị Offset của 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 định kích thước đối tượng dọc theo các trục X và Y. Một UDim2 được biểu diễn bởi 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 của kích thước 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.

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ể đơn giản nhập bốn giá trị cách nhau bằng dấu phẩy, ví dụ 0.75,0,0.25,0, và Studio sẽ suy luận tập hợp giá trị mong muốn.

AnchorPoint

Thuộc tính AnchorPoint xác định điểm gốc từ nơi đối tượng thay đổi vị trí và kích thước. Các giá trị AnchorPoint mặc định 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, có nghĩa là một đối tượng với các giá trị AnchorPoint là (0.5, 0.5) sẽ đặ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à thay đổi tỷ lệ 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 trường AnchorPoint.
Nhập một tọa độ Vector2 mới và nhấn Enter.

Studio suy luận cặp giá trị mong muốn khi một số duy nhất được nhập. 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 ở giữa.

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 cho 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, thuộc tính ZIndexBehavior mặc định luôn hiển thị các phần tử con 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 để quyết định thứ tự mà nó hiển thị trê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ấ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 ngang hoặc 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 anh chị em thành 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 anh chị em trong một lưới các ô đồng nhất có cùng kích thước trong container cha của chúng.
Bảng	UITableLayout định vị các GuiObjects anh chị em 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 anh chị em của nó thành các trang độc đáo mà bạn có thể chuyển đổi thông qua lập trình.

Các yếu tố đa nền tảng

Roblox vốn dĩ là đa nền tảng, vì người chơi có thể khám phá và tham gia các trò chơi trên điện thoại hoặc máy tính bảng của họ, sau đó tiếp tục từ nơi họ đã dừng lại trên PC hoặc console. Bạn nên thiết kế các trò chơi Roblox của mình để 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ự trữ

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à dưới bên phải của màn hình. Khi bạn thiết kế UI của một trò chơi, 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 cần điều khiển ả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à bàn tay của người chơi, việc với quá xa từ các góc dưới trở nên 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 thường xuyên sử dụng bên ngoài các khu vực dễ tiếp cận.

Nút nằm trong tầm với của ngón tay phải của người chơi

Nút khó tiếp cậ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 cách 40% dưới cạnh trên của màn hình có thể tiếp cận trên điện thoại nhưng gần như không thể tiếp cận trên máy tính bảng.

Nút cách 40% từ cạnh trên của điện thoại, trong tầm với của ngón tay của người chơi

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

Một cách tiếp cận đáng tin cậy trên cả điện thoại và máy tính bảng là đị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 sử dụng 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 client trong StarterPlayerScripts, lấy vị trí của nút nhảy và tạo một nút tạm thời cách nó 20 pixel về bên trái.

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ờ 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 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 mô phỏng 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ị hạn chế trên các thiết bị di động, vì vậy bạn chỉ nên hiển thị thông tin quan trọng nhất trong quá trình chơi game. Ví dụ, nếu trò chơi của bạn bao gồm một hành động nhập đặ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.