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

Trừ khi các đối tượng UI đang ở dưới sự kiểm soát của một cấu trúc bố trí hoặc một giới hạn kích thước , bạn có toàn quyền kiểm soát vị trí của chúng và kích thước .Bạn cũng có thể đặt thứ tự Z‑index phân tầng mà các đối tượng chồng lấp.

Thuộc tính cốt lõi

Tất cả GuiObjects chia sẻ một bộ tính năng cốt lõi của các thuộc tính đến vị trí , kích thước , neo và lớp chúng trong một thùng chứa trên màn hình hoặc trong kinh nghiệm.

Vị trí

Thuộc tính Position là một bộ phối trí UDim2 vị trí đối tượng dọc theo trục X và Y .Một UDim2 được đại diện bởi cả Scale và Offset giá trị cho mỗi trục:

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

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

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

Studio cũng suy ra giá trị dự định khi một số duy nhất được nhập.Ví dụ, chỉ cần nhập 0.5 sẽ được chuyển thành {0.5, 0},{0.5, 0} vì 0.5 có thể là giá trị Thước đo 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 bộ phối hợp điểm UDim2 có kích thước đối tượng dọc theo trục X và Y .Một UDim2 được đại diện bởi cả Scale và Offset giá trị cho mỗi trục:

Thước đo — Giá trị đại diện cho một phần trăm của kích thước của thùng chứa theo trục tương ứng, cộng với bất kỳ giá trị Offset nào.
Bù trừ — 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 với bất kỳ giá trị Thước đo nào.

Để chỉnh kích thước của một đối tượng được chọn GuiObject, hãy nhấp vào trường Kích thước trong cửa sổ Tính năng và nhập một bộ phương cài đặtmới UDim2.

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

Điểm neo

Thuộc tính AnchorPoint định nghĩa đ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 đối tượng là đặt neo ở góc trên cùng bên trái của đối tượng.

giá trị là một phần trăm từ đến , so với kích thước của đối tượng, có nghĩa là một đối tượng với giá trị của nơi đặt điểm neo giữa (50%) thông qua đối tượng cả theo chiều ngang và chiều dọc, và bất kỳ thay đổi nào về vị trí hoặc kích thước của nó cả di chuyển và phóng toả từ điểm này.

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

Trong cửa sổ Tính năng, nhấp vào bên trong trường Điểm neo .
Nhập một phối trí mới Vector2 và nhấn Enter .

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

ZIndex định vị

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

Đối với các thùng chứa UI như ScreenGui , mặc định ZIndexBehavior luôn luôn hiển thị con cái trên cha mẹ của chúng, và mỗi con cái ZIndex được sử dụng để quyết định thứ tự mà nó hiển thị trên những người khác.

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

Cấu trúc bố trí

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

Bố trí	Mô tả
Danh sách	UIListLayout vị trí anh em GuiObjects vào các hàng ngang hoặc cột dọc trong thùng cha của chúng.
Nhảy lưới	UIGridLayout vị trí anh em GuiObjects trong một lưới các tế bào đồng kích thước trong cùng một thùng chứa cha của chúng.
Bảng	UITableLayout vị trí anh em GuiObjects và con của họ vào định dạng bảng.
Trang	UIPageLayout tổ chức anh em của nó GuiObjects thành các trang duy nhất mà bạn có thể chuyển đổi thông qua lập trình.

Yếu tố chéo nền tảng

Roblox vốn có bản chất là vượt nền tảng , bởi vì người chơi có thể khám phá và tham gia kinh nghiệm trên PC hoặc console, sau đó lấy lên điện thoại của họ và tiếp tục nơi họ rời tắt.Bạn nên thiết kế trải nghiệm Roblox của mình để có thể truy cập và thú vị trên tất cả 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 những người 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 thiết kế giao diện người dùng của một trải nghiệm, tránh đặt thông tin quan trọng hoặc nút ảo trong các khu vực này.

Nếu trải nghiệm của bạn sử dụng cài đặt điều khiển mặc định của DevTouchMovementMode.UserChoice , người chơi trên các thiết bị di động sẽ có thể chọn nhập từ Dynamic Thumbstick , Classic Thumbstick , hoặc Tap to Move , gây ra sự thay đổi nhẹ về điều khiển trên màn hình và khu vực dự trữ.Hãy nhớ thiết kế UI của bạn xung quanh khả năng này.

Khu vực nhó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 gạt ả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, tiếp cận quá xa từ các góc dưới trở nên khó chịu hoặc không thể, vì vậy bạn nên tránh đặt các nút thường xuyên được sử dụng bên ngoài các khu vực dễ tiếp cận.

Nút thoải mái 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 giãn tay hoặc cái ngón tay

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

Nút 40% từ cạnh trên cùng của điện thoại, trong phạm vi tiếp cận của 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ó tiếp cận mà không căng

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à tương đối vị trí của các nút tùy chỉnh gần các điều khiển thường được sử dụng như nút nhảy mặc định, đặt chúng trong tầm dễ tiếp cận.

mãsau đây, được đặt trong một kịch bản bên khách trong , lấy vị trí của nút nhảy và tạo một nút placeholder 20 pixel bên trái của nó.

Tập lệnh khách - Nút tùy chỉnh gần nút Nhảy
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

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

if UserInputService.TouchEnabled then
	-- Chờ đợi 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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")
end

Giao diện người dùng 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 chỉ nên hiển thị thông tin quan trọng nhất trong lúc chơi trò trải nghiệm trò chơi.Ví dụ, nếu trải nghiệm 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, nó không có ý nghĩa để liên tục hiển thị nút "mở" trên màn hình.Thay vào đó, sử dụng một lời nhắc cảm biến hoặc phương pháp tương tự để chỉ chấp nhận nhập khi nhân vật tiếp cận cửa hoặc rương.

Trên trang này