การจัดตำแหน่งและขนาดของวัตถุ UI

หากวัตถุ UI ไม่อยู่ภายใต้การควบคุมของ โครงสร้างเลย์เอาต์ หรือ ตัวปรับขนาด/ข้อจำกัด คุณจะมีการควบคุมอย่างเต็มที่เกี่ยวกับ ตำแหน่ง และ ขนาด ของพวกมัน คุณยังสามารถตั้งค่าลำดับการซ้อนทับ Z‑index ที่วัตถุซ้อนทับกันได้

คุณสมบัติหลัก

วัตถุ GuiObjects ทั้งหมดมีชุดคุณสมบัติหลักในการ จัดตำแหน่ง ขนาด จุดยึด และ ชั้น ภายในคอนเทนเนอร์ที่แสดงบนหน้าจอหรือในเกม

ตำแหน่ง

คุณสมบัติ Position เป็นชุดพิกัด UDim2 ที่จัดตำแหน่งวัตถุตามแกน X และ Y UDim2 ประกอบด้วยค่า Scale และ Offset สำหรับแต่ละแกน:

• ค่า Scale แสดงถึง เปอร์เซ็นต์ ของขนาดของคอนเทนเนอร์ตามแกนที่เกี่ยวข้อง ซึ่งรวมกับค่า Offset ใดๆ
• ค่า Offset แสดงถึงจำนวน พิกเซล ที่จะเลื่อนวัตถุไปตามแกนที่เกี่ยวข้อง ซึ่งรวมกับค่า Scale ใดๆ

ในการแก้ไขตำแหน่งของ GuiObject ที่เลือก ให้คลิกที่ฟิลด์ ตำแหน่ง ในหน้าต่าง คุณสมบัติ และป้อนชุดพิกัด UDim2 ใหม่

ขนาด

คุณสมบัติ Size เป็นชุดพิกัด UDim2 ที่กำหนดขนาดของวัตถุตามแกน X และ Y UDim2 ประกอบด้วยค่า Scale และ Offset สำหรับแต่ละแกน:

• Scale — ค่าที่แสดงถึง เปอร์เซ็นต์ ของขนาดของคอนเทนเนอร์ตามแกนที่เกี่ยวข้อง ซึ่งรวมกับค่า Offset ใดๆ
• Offset — ค่าที่แสดงถึงขนาด พิกเซล ของวัตถุตามแกนที่เกี่ยวข้อง ซึ่งรวมกับค่า Scale ใดๆ

ในการแก้ไขขนาดของ GuiObject ที่เลือก ให้คลิกที่ฟิลด์ ขนาด ในหน้าต่าง คุณสมบัติ และป้อนชุดพิกัด UDim2 ใหม่

AnchorPoint

คุณสมบัติ AnchorPoint กำหนด จุดเริ่มต้น ที่วัตถุเปลี่ยน ตำแหน่ง และ ขนาด ค่าเริ่มต้นของ AnchorPoint คือ (0, 0) ซึ่งวางจุดยึดไว้ที่มุมซ้ายบนของวัตถุ

ค่า AnchorPoint เป็น เศษส่วน จาก 0 ถึง 1 ซึ่งสัมพันธ์กับ ขนาด ของวัตถุ หมายความว่าวัตถุที่มีค่า AnchorPoint เป็น (0.5, 0.5) จะวางจุดยึดไว้ที่กลาง (50%) ของวัตถุทั้งในแนวนอนและแนวตั้ง และการเปลี่ยนแปลงใดๆ ใน ตำแหน่ง หรือ ขนาด จะเคลื่อนที่และขยายออกจากจุดนี้

ในการดูและแก้ไขจุดยึดของ GuiObject ที่เลือก:

1. ในหน้าต่าง คุณสมบัติ ให้คลิกภายในฟิลด์ AnchorPoint

   

2. ป้อนพิกัด Vector2 ใหม่และกด Enter.

   Studio จะอนุมานคู่ค่าที่ตั้งใจไว้เมื่อป้อนหมายเลขเดียว ตัวอย่างเช่น การป้อนเพียง 0.5 จะถูกแปลงเป็น 0.5, 0.5 สำหรับจุดยึดกลาง

ZIndex

คุณสมบัติ ZIndex กำหนดลำดับชั้นที่ GuiObjects แสดงและซ้อนทับกัน หากคุณต้องการสร้างชั้นการเรนเดอร์ใหม่ คุณต้องตั้งค่าคุณสมบัติ ZIndex เป็นค่าบวกหรือลบที่แตกต่างกันสำหรับแต่ละวัตถุ

สำหรับคอนเทนเนอร์ UI เช่น ScreenGui ค่าเริ่มต้นของ ZIndexBehavior จะเรนเดอร์เด็กเหนือผู้ปกครองเสมอ และ ZIndex ของแต่ละเด็กจะถูกใช้เพื่อตัดสินใจลำดับที่มันเรนเดอร์เหนือผู้อื่น

ในการแก้ไข ZIndex ของวัตถุ ให้ค้นหา ZIndex ในหน้าต่าง คุณสมบัติ และป้อนค่าเต็มใหม่

โครงสร้างเลย์เอาต์

โครงสร้างเลย์เอาต์ช่วยให้คุณจัดระเบียบและแสดง GuiObjects ได้อย่างรวดเร็ว เช่น ใน รายการ แนวนอนหรือแนวตั้ง, ตาราง ของกระเบื้องที่มีขนาดเท่ากัน, ลำดับหน้า และอื่นๆ เลย์เอาต์มักจะมีอิทธิพลต่อหรือเปลี่ยนแปลง ตำแหน่ง/ขนาด ของวัตถุที่อยู่ภายใต้การควบคุมของพวกมัน

ปัจจัยข้ามแพลตฟอร์ม

Roblox มีลักษณะเป็น ข้ามแพลตฟอร์ม โดยผู้เล่นสามารถค้นหาและเข้าร่วมเกมบนโทรศัพท์หรือแท็บเล็ตของพวกเขา จากนั้นกลับมาเล่นต่อจากจุดที่พวกเขาหยุดไว้บน PC หรือคอนโซล คุณควรออกแบบเกม Roblox ของคุณให้เข้าถึงได้และสนุกสนานใน ทุก แพลตฟอร์มที่คุณเลือกสนับสนุน แทนที่จะปรับให้เหมาะกับแพลตฟอร์มเดียวและละเลยแพลตฟอร์มอื่น

โซนที่สงวนไว้

บนอุปกรณ์เคลื่อนที่ ควบคุมเริ่มต้นจะใช้พื้นที่บางส่วนของมุมล่างซ้ายและมุมล่างขวาของหน้าจอ เมื่อคุณออกแบบ UI ของเกม ให้หลีกเลี่ยงการวางข้อมูลสำคัญหรือปุ่มเสมือนในโซนเหล่านี้

โซนสำหรับนิ้วโป้ง

ผู้เล่นส่วนใหญ่บนมือถือใช้สองนิ้วโป้ง — หนึ่งนิ้วบนจอยสติ๊กเสมือนและอีกหนึ่งนิ้วบนปุ่มกระโดด ขึ้นอยู่กับขนาดทางกายภาพของอุปกรณ์และมือของผู้เล่น การเอื้อมมือไปไกลจากมุมล่างจะทำให้ไม่สะดวกหรือเป็นไปไม่ได้ ดังนั้นคุณควรหลีกเลี่ยงการวางปุ่มที่ใช้บ่อยนอกโซนที่เข้าถึงได้ง่าย

ปุ่มอยู่ในระยะที่ผู้เล่นสามารถเข้าถึงได้ด้วยนิ้วโป้งขวา

ปุ่มเข้าถึงได้ยาก เว้นแต่ผู้เล่นจะยืดมือหรือนิ้วโป้ง

จำไว้ว่าพื้นที่สำหรับนิ้วโป้งที่สะดวกสบายจะแตกต่างกันระหว่างโทรศัพท์และแท็บเล็ต เนื่องจากแท็บเล็ตมีหน้าจอที่ใหญ่กว่า ปุ่มที่วางอยู่ 40% จากขอบด้านบนของหน้าจอสามารถเข้าถึงได้บนโทรศัพท์ แต่แทบจะไม่สามารถเข้าถึงได้บนแท็บเล็ต

ปุ่มอยู่ห่างจากขอบด้านบนของโทรศัพท์ 40% อยู่ในระยะที่นิ้วโป้งของผู้เล่นสามารถเข้าถึงได้

ปุ่มอยู่ห่างจากขอบด้านบนของแท็บเล็ต 40% เข้าถึงได้ยากโดยไม่ต้องยืด

วิธีที่เชื่อถือได้ทั้งบนโทรศัพท์และแท็บเล็ตคือการจัดตำแหน่งปุ่มที่กำหนดเอง สัมพันธ์ ใกล้กับปุ่มควบคุมที่ใช้บ่อย เช่น ปุ่มกระโดดเริ่มต้น โดยวางไว้ในระยะที่เข้าถึงได้ง่าย

โค้ดต่อไปนี้ที่วางไว้ในสคริปต์ฝั่งลูกค้าใน 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("อุปกรณ์ไม่รองรับการสัมผัสหรือ Studio ไม่ได้จำลองอุปกรณ์ที่รองรับการสัมผัส!")
end

UI ตามบริบท

พื้นที่หน้าจอมีจำกัดบนอุปกรณ์เคลื่อนที่ ดังนั้นคุณควรแสดงเฉพาะข้อมูลที่สำคัญที่สุดในระหว่างการเล่นเกม ตัวอย่างเช่น หากเกมของคุณมีการกระทำการป้อนข้อมูลพิเศษเพื่อเปิดประตูและหีบสมบัติ การแสดงปุ่ม "เปิด" บนหน้าจอตลอดเวลานั้นไม่มีเหตุผล แทนที่จะใช้ การแจ้งเตือนใกล้เคียง หรือวิธีการที่คล้ายกันเพื่อรับข้อมูลเฉพาะเมื่ออักขระเข้าใกล้ประตูหรือหีบสมบัติ