ตัวเก็บ UI บนหน้าจอ | เอกสาร - ศูนย์กลางครีเอเตอร์ Roblox

ตัวเก็บ ScreenGui จะถือ GuiObjects เพื่อแสดงบนหน้าจอของผู้เล่น รวมถึง กรอบ, ป้าย, ปุ่ม และอื่นๆ วัตถุ UI บนหน้าจอทั้งหมดและโค้ดจะถูกเก็บและเปลี่ยนแปลงในฝั่งลูกค้า

ตัวอย่าง ScreenGui ที่มีลูกของ GuiObject หลายรายการ รวมถึง Frame, TextLabel, TextBox และ ImageButton.

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

แผนภาพแสดงวิธีการที่ ScreenGui ทำซ้ำจาก StarterGui ไปยัง PlayerGui ของผู้เล่น

ตามค่าเริ่มต้น GuiObjects ภายใน ScreenGui ที่อยู่ภายใน StarterGui จะปรากฏเป็นเลเยอร์ทับของ 3D viewport ซึ่งจำลองรูปลักษณ์และตำแหน่งของพวกเขาในประสบการณ์ที่กำลังทำงานอยู่ เพื่อซ่อนเลเยอร์หน้าจอทั้งหมดนี้ ให้ปิด GUI overlay จาก ตัวเลือกการแสดงผล ในมุมขวาบนของ 3D viewport

หาก Players.CharacterAutoLoads ถูกปิด เนื้อหาของ StarterGui จะไม่ถูกทำซ้ำจนกว่า Player:LoadCharacterAsync() จะถูกเรียก

เมื่อประสบการณ์ขยายขอบเขต คุณอาจต้องการอินเทอร์เฟซหน้าจอหลายรายการ เช่น หน้าจอชื่อ เมนูตั้งค่า อินเทอร์เฟซร้านค้า และอื่นๆ ในกรณีเช่นนี้ คุณสามารถวางตัวเก็บ ScreenGui ที่ไม่ซ้ำกันหลายตัวภายใน StarterGui และเปิด/ปิดคุณสมบัติ Enabled ของแต่ละตัวเก็บตามว่ามันควรจะแสดงและใช้งานได้หรือไม่ (เมื่อ false เนื้อหาจะไม่ถูกเรนเดอร์ ไม่ประมวลผลการป้อนข้อมูลผู้ใช้ หรืออัปเดตการตอบสนองต่อการเปลี่ยนแปลง)

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

คุณสมบัติ Enabled สามารถเปิด/ปิดได้ตั้งแต่แรกผ่านหน้าต่าง คุณสมบัติ และ/หรือคุณสามารถตั้งค่าในช่วงเวลาเล่นจากสคริปต์ฝั่งลูกค้าโดย เข้าถึง PlayerGui ของผู้เล่นและตั้งค่าเป็น true หรือ false สำหรับตัวเก็บที่ต้องการ

เมื่อใช้หลาย ScreenGui อินเทอร์เฟซ คุณสามารถจัดเลเยอร์พวกเขาโดยใช้ Z‑index ผ่านคุณสมบัติ DisplayOrder ดู ลำดับการแสดงผล สำหรับข้อมูลเพิ่มเติม

คุณสมบัติของตัวเก็บ

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

Screen insets

Modern phones take advantage of the entire screen but typically include notches, cutouts, and other elements that occupy screen space. Every Roblox game also includes the top bar controls for quick access to the main menu, chat, leaderboard, and more.

อุปกรณ์มือถือแสดงปุ่มแถบด้านบนของ Roblox และการตัดออกของอุปกรณ์.

To ensure players can see and access all UI easily and without obstruction, Roblox provides the ScreenInsets property which controls the safe area insets for the contents of a ScreenGui.

The default of CoreUISafeInsets keeps all descendant GuiObjects inside the core UI safe area, clear of the top bar buttons and other screen cutouts. This setting is recommended if the ScreenGui contains interactive UI elements.

อุปกรณ์มือถือแสดงพื้นที่ปลอดภัยของ UI หลัก.

ลำดับการแสดงผล

เมื่อใช้ ScreenGui อินเทอร์เฟซหลายตัว คุณสามารถจัดเลเยอร์พวกเขาโดยใช้ Z‑index ผ่านคุณสมบัติ DisplayOrder ตัวอย่างเช่น เมื่อต้องแสดงเมนูตั้งค่าที่เป็นแบบพิเศษบนหนึ่งใน ScreenGui ด้านหน้าของอินเทอร์เฟซผู้ใช้หลักของประสบการณ์บนอีก ScreenGui ให้กำหนด DisplayOrder สูงกว่าสำหรับเมนูแบบพิเศษมากกว่าบนอินเทอร์เฟซที่อยู่เบื้องล่าง

รีเซ็ตเมื่อเกิดใหม่

คุณสมบัติ Boolean ResetOnSpawn จะกำหนดว่า ScreenGui จะรีเซ็ต (ลบตัวเองและทำซ้ำลงใน PlayerGui ของผู้เล่น) ทุกครั้งที่ตัวละครของผู้เล่นเกิดใหม่หรือไม่

เงื่อนไข	รีเซ็ต
ResetOnSpawn เป็น true (ค่าเริ่มต้น)	ใช่
ScreenGui เป็นบุตรที่ ไม่ตรง ของ StarterGui เช่น มันถูกวางไว้ภายใน Folder ที่ตั้งอยู่ภายใน StarterGui.	ใช่
ResetOnSpawn เป็น false และ ScreenGui เป็นบุตรที่ ตรง ของ StarterGui.	ไม่

เข้าถึง UI ของผู้เล่น

ตามที่ได้กล่าวไว้ การกำหนดค่าตัวเก็บ ScreenGui ไปยัง StarterGui จะทำให้มันและลูกของ GuiObjects ถูกทำซ้ำลงในตัวเก็บ PlayerGui ของผู้เล่นเมื่อพวกเขาเข้าร่วมประสบการณ์และตัวละครของพวกเขาเกิดครั้งแรก

หากคุณต้องการควบคุมตัวเก็บ UI ของผู้เล่นในช่วงเวลาเล่น ตัวอย่างเช่น การแสดง/ซ่อน ScreenGui เฉพาะหรือเด็กในนั้น ให้เข้าถึงมันได้ตามนี้จาก LocalScript:

LocalScript - การเข้าถึง UI ของผู้เล่น
local Players = game:GetService("Players")

local player = Players.LocalPlayer
local playerGui = player.PlayerGui

local titleScreen = playerGui:WaitForChild("TitleScreen")
local settingsMenu = playerGui:WaitForChild("SettingsMenu")

titleScreen.Enabled = false  -- ซ่อนหน้าจอชื่อ
settingsMenu.Enabled = true  -- แสดงเมนูตั้งค่า

ปิด UI เริ่มต้น

ทุกเกมของ Roblox จะมีองค์ประกอบ UI หลายอย่างที่เปิดใช้งานโดยค่าเริ่มต้น หากคุณไม่ต้องการองค์ประกอบใด ๆ เหล่านี้หรือหากคุณต้องการแทนที่ด้วยการสร้างของคุณเอง คุณสามารถใช้วิธี SetCoreGuiEnabled() ในสคริปต์ฝั่งไคลเอ็นต์พร้อมกับตัวเลือก Enum.CoreGuiType ที่เกี่ยวข้อง

UI เริ่มต้น	อีนัมที่เกี่ยวข้อง
รายการ Players ที่อัปเดตแบบไดนามิก ซึ่งมักใช้เป็น กระดานผู้นำ	Enum.CoreGuiType.PlayerList
แถบ Health ของตัวละคร ไม่แสดงหากตัวละครมี Humanoid ที่มีสุขภาพเต็ม	Enum.CoreGuiType.Health
กระเป๋า Backpack ของตัวละคร ซึ่งมี เครื่องมือในเกม ไม่แสดงหากไม่มี Tools ในกระเป๋า	Enum.CoreGuiType.Backpack
หน้าต่าง แชทข้อความ	Enum.CoreGuiType.Chat
เมนูป๊อปอัพของ อิโมต ของตัวละคร	Enum.CoreGuiType.EmotesMenu
หน้าต่างที่แสดงมุมมองของผู้เล่นหรือตัวละครของพวกเขา ไม่แสดงก็ต่อเมื่อผู้เล่นเปิดใช้งาน มุมมองตนเอง จากเมนู Roblox	Enum.CoreGuiType.SelfView
ปุ่ม จับภาพหน้าจอ ที่ด้านขวาของหน้าจอ จะไม่แสดงก็ต่อเมื่อผู้เล่นเปิดใช้งาน การจับภาพ จากเมนู Roblox	Enum.CoreGuiType.Captures
Avatar Switcher ช่วยให้ผู้ใช้สามารถเปลี่ยนภาพอวตาร์ของแพลตฟอร์มได้	Enum.CoreGuiType.AvatarSwitcher

สคริปต์ไคลเอ็นต์ - ปิดใช้งานองค์ประกอบ UI เริ่มต้น
local StarterGui = game:GetService("StarterGui")

-- ปิดใช้งานแถบสุขภาพและกระเป๋า
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)

นอกจากนี้ อุปกรณ์ที่มีความสามารถในการสัมผัสยังมีลูกศรเสมือนและปุ่มกระโดดโดยค่าเริ่มต้น หากต้องการ คุณสามารถซ่อนองค์ประกอบเหล่านี้โดยการตั้งค่า GuiService.TouchControlsEnabled เป็น false ในสคริปต์ฝั่งไคลเอ็นต์

องค์ประกอบ UI สำหรับอุปกรณ์ที่รองรับการสัมผัสในเกม Roblox ทุกเกม

สคริปต์ไคลเอ็นต์ - ปิดใช้งานการควบคุมด้วยการสัมผัส
local GuiService = game:GetService("GuiService")

GuiService.TouchControlsEnabled = false