นำแบบของคุณไปใช้ใน Studio | เอกสาร - ศูนย์กลางครีเอเตอร์ Roblox

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

โดยใช้ไฟล์ เกมเลเซอร์แท็กตัวอย่าง .rbxl เป็นข้อมูลอ้างอิง ส่วนนี้ของหลักสูตรการออกแบบส่วนติดต่อผู้ใช้จะแสดงให้คุณเห็นวิธีการนำแผน UI ของคุณไปสู่ชีวิต รวมถึงคำแนะนำเกี่ยวกับ:

การดึง ID ของทรัพย์สินจากห้องสมุดทรัพย์สิน UI เพื่อให้คุณสามารถสร้างส่วนประกอบ UI ของเกมเลเซอร์แท็กตัวอย่างได้
การเลียนแบบอุปกรณ์ต่างๆ โดยตรงใน Studio เพื่อดูว่า UI ของคุณแสดงผลบนหน้าจอและอัตราส่วนภาพที่แตกต่างกันอย่างไร
การสร้างวัตถุ ScreenGui, SurfaceGui และ BillboardGui เพื่อแสดง UI ของคุณบนหน้าจอของผู้เล่น พื้นผิวของชิ้นส่วน และภายในพื้นที่ 3D ตามลำดับ

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

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

รับห้องสมุดทรัพย์สิน

ห้องสมุดทรัพย์สินคือการรวบรวมทรัพย์สินที่คุณสามารถเพิ่มลงในคลังของคุณเพื่อให้เข้าถึงและนำกลับมาใช้ใหม่ได้ง่าย ห้องสมุดทรัพย์สินที่คุณจะใช้สำหรับโครงการของคุณจาก Creator Store รวมถึงทรัพย์สิน UI องค์ประกอบ 2D เดี่ยวเก้าชิ้น และเวอร์ชันสุดท้ายของวัตถุเป้าหมาย ตัวเลือกบลาสเตอร์ และข้อมูลผู้เล่นที่คุณกำลังสร้างในส่วนนี้ของบทเรียน

**ไอคอน MultiBlaster**
rbxassetid://14309094777

**ไอคอน SingleBlaster**
rbxassetid://14309094641

**ไอคอนทีมสีชมพู**
rbxassetid://14309678581

**รูปสี่เหลี่ยมคางหมู**
rbxassetid://14304828203

**รูปสี่เหลี่ยมคางหมูกลับด้าน**
rbxassetid://14304827304

**ไอคอนทีมสีเขียว**
rbxassetid://14309678701

**การจางหายหลายทิศทาง**
rbxassetid://14304827147

**ไอคอนปุ่มระเบิด - ค่าเริ่มต้น**
rbxassetid://18308375067

**ไอคอนปุ่มระเบิด - ถูกกด**
rbxassetid://18308372597

**ไอคอนจุดศูนย์กลาง**
rbxassetid://14400935532

ไอคอน Hit Marker
rbxassetid://14401148777

**รูปหกเหลี่ยม**
rbxassetid://14462567943

**ไอคอนลูกศรเลือก**
rbxassetid://14309187282

**การจางหายของขอบ**
rbxassetid://14309518632

เพื่อให้ห้องสมุดทรัพย์สินจากคลังของคุณเข้าสู่เกมของคุณ:

เพิ่มห้องสมุดทรัพย์สินลงในคลังของคุณ
1. ไปที่ หน้ารายละเอียด ของห้องสมุดทรัพย์สินใน Creator Store
2. ที่มุมขวาบน คลิกที่ปุ่ม Get Model ห้องสมุดทรัพย์สินจะอยู่ในคลังของคุณแล้ว และคุณสามารถนำทรัพย์สินเหล่านี้ไปใช้ซ้ำในโครงการใดๆ บนแพลตฟอร์ม
ใน Studio ให้ไปที่แท็บ Home จากนั้นคลิกที่ปุ่ม Toolbox หน้าต่าง Toolbox จะเปิดขึ้น
ในหน้าต่าง Toolbox คลิกที่แท็บ Inventory จะแสดงการจัดเรียง My Models
คลิกที่เมนูแบบเลื่อนลง จากนั้นเลือกการจัดเรียง My Packages
คลิกที่กระเบื้อง Final Screen UI Components จากนั้นในหน้าต่าง Explorer ให้เลือก Completed Components แล้วลากไปยังบริการ StarterGui ตอนนี้คุณสามารถเปิดใช้งานส่วนประกอบสุดท้ายใดๆ เพื่ออ้างอิงการออกแบบของพวกเขาได้

เลียนแบบอุปกรณ์

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

ตัวอย่างเช่น หากคุณไม่ทดสอบ UI ของคุณบนขนาดหน้าจอที่หลากหลาย ผู้เล่นที่มีหน้าจอขนาดใหญ่ قدไม่สามารถอ่านข้อความของคุณหรือแยกแยะไอคอนของคุณได้ และผู้เล่นที่มีหน้าจอขนาดเล็กอาจไม่สามารถเห็นพื้นที่ 3D ได้เนื่องจากองค์ประกอบ UI ของคุณใช้พื้นที่มากเกินไปบนหน้าจอ

ในการเลียนแบบ UI ของคุณบนขนาดหน้าจอที่หลากหลาย:

จากเมนู Test ของ Studio ให้เปิดใช้งาน Device Emulator
ในเมนูแบบเลื่อนลงของความละเอียด ให้เลือก Actual Resolution สิ่งนี้ช่วยให้คุณเห็นความละเอียดที่แท้จริงขององค์ประกอบ UI ของคุณบนอุปกรณ์ที่คุณกำลังเลียนแบบ
ในเมนูแบบเลื่อนลงของอุปกรณ์ ให้เลือกอุปกรณ์อย่างน้อยหนึ่งอุปกรณ์ในหมวด Phone, Tablet, Desktop, และ Console

สร้างวัตถุ ScreenGui

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

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

HUDGui - แสดงข้อมูลสำคัญเกี่ยวกับการเล่นเกมเมื่อผู้เล่นมีส่วนร่วมในรอบ เช่น เป้าหมายและคะแนนรวมของแต่ละทีม
PickABlasterGui - แสดงตัวเลือกบลาสเตอร์ทั้งหมดเมื่อผู้เล่นเริ่มต้นหรือเข้าร่วมรอบอีกครั้ง
ForceFieldGui - แสดงกริดหกเหลี่ยมเมื่อผู้เล่นกำลังเลือกบลาสเตอร์และในขณะที่พวกเขาไม่สามารถถูกทำลายได้ชั่วคราว
OutStateGui - แสดงขอบมืดรอบหน้าจอเมื่อผู้เล่นถูกแท็กออก
RoundResultsGui - แสดงการซ้อนทับมืดบนหน้าจอพร้อมข้อมูลเกี่ยวกับทีมที่ชนะรอบ

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

เพื่อสร้างวัตถุ ScreenGui:

ในหน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่บริการ StarterGui จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
แทรก ScreenGui
เปลี่ยนชื่อ ScreenGui ตามบริบทขององค์ประกอบ UI ลูกของมัน
ทำซ้ำกระบวนการนี้สำหรับแต่ละกลุ่มขององค์ประกอบ UI ที่คุณต้องการแสดงบนหน้าจอของผู้เล่นทุกคน

UI เป้าหมาย

ตามแนวทางปฏิบัติที่ดีที่สุดในลำดับชั้นภาพจาก Wireframe Your Layouts ส่วนนี้สอนวิธีการนำเสนอองค์ประกอบ UI ทั้งหมดที่แสดงบนหน้าจอซึ่งเกี่ยวข้องกับเป้าหมายของเกม กลุ่มขององค์ประกอบ UI นี้อยู่ใกล้ด้านบนของหน้าจอเพราะเป้าหมายและคะแนนของแต่ละทีมมีความสำคัญที่สุดต่อการชนะเกม

ตัวอย่างเช่น ตัวอย่างนี้ให้ส่วนประกอบ UI เป้าหมายที่ผู้เล่นอ้างอิงเพื่อทราบว่าพวกเขาต้องทำอะไรเพื่อให้ประสบความสำเร็จในรอบ เมื่อผู้เล่นแท็กสมาชิกทีมศัตรูและทำคะแนนได้ ส่วนประกอบนี้จะติดตามคะแนนของแต่ละทีมเมื่อเปรียบเทียบกับเป้าหมายรวมภายในคำแนะนำของส่วนหัว สำหรับการตรวจสอบระดับสูงเกี่ยวกับสคริปต์ของไคลเอนต์และเซิร์ฟเวอร์ทั้งหมดที่ทำงานร่วมกันเพื่อติดตามคะแนน ดูที่ Track points ในหลักสูตร Gameplay Scripting

เพื่อสร้าง UI เป้าหมายให้เหมือนกับในเกม Laser Tag ตัวอย่าง:

สร้างตัวเก็บสำหรับส่วนประกอบทั้งหมด
1. แทรก Frame ลงในวัตถุ HUDGui ScreenGui
  1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
  2. เลื่อนเมาส์ไปที่วัตถุ HUDGui ลูกของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
  3. จากเมนูบริบท ให้แทรก Frame
2. เลือก Frame ใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0 เพื่อกำหนดจุดกำเนิดของเฟรมที่ด้านบนกลางของมัน (50% จากซ้ายไปขวาของเฟรม และ 0% จากบนไปล่างของเฟรม)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของเฟรมโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.03, 0} เพื่อกำหนดเฟรมใกล้ด้านบนกลางของหน้าจอ (50% จากซ้ายไปขวาของหน้าจอ และ 3% จากบนไปล่างของหน้าจอเพื่อให้มีพื้นที่ buffer เล็กน้อย)
  4. ตั้งค่า Size เป็น {0.5, 0},{0.13, 0} เพื่อให้ส่วนประกอบของเฟรมใช้พื้นที่ขนาดใหญ่ที่ด้านบนของหน้าจอเพื่อดึงดูดความสนใจของผู้เล่น (50% ในแนวนอน และ 13% ในแนวตั้ง)
  5. ตั้งค่า Name เป็น Objective
3. OPTIONAL
  แทรก UIAspectRatioConstraint ลงใน Objective เพื่อให้แน่ใจว่าสัดส่วนของป้ายยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่น ตัวอย่างตั้งค่า UIAspectRatioConstraint.AspectRatio เป็น 7
สร้างตัวเก็บสำหรับวัตถุคำแนะนำของเป้าหมาย
1. แทรก Frame ลงใน Objective
2. เลือก Frame ใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0 เพื่อกำหนดจุดกำเนิดของเฟรมที่ด้านบนกลางของมัน (50% จากซ้ายไปขวาของเฟรม และ 0% จากบนไปล่างของเฟรม)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของเฟรมโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0, 0} เพื่อกำหนดเฟรมอยู่กลางของตัวเก็บ (50% จากซ้ายไปขวาของเฟรมหลัก และ 0% จากบนไปล่างของเฟรมหลัก)
  4. ตั้งค่า Size เป็น {1, 0},{0.67, 0} เพื่อให้ส่วนประกอบ UI ของการเลือกใช้พื้นที่ประมาณมากกว่าครึ่งหนึ่งของตัวเก็บจากบนไปล่าง (100% ในแนวนอนและ 67% ในแนวตั้งของเฟรมหลัก)
  5. ตั้งค่า Name เป็น ObjectiveDisplay
สร้างองค์ประกอบชื่อเรื่อง
1. แทรก ImageLabel ลงใน ObjectiveDisplay
2. เลือก ImageLabel จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดกำเนิดของป้ายที่ด้านล่างกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 100% จากบนไปล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า LayoutOrder เป็น -1
  4. ตั้งค่า Position เป็น {0.5, 0},{0.34, 0} เพื่อกำหนดป้ายใกล้ด้านบนกลางของเฟรม (50% จากซ้ายไปขวาของเฟรมหลัก และ 34% จากบนไปล่างของเฟรมหลัก)
  5. ตั้งค่า Size เป็น {0.46, 0},{0.34, 0} เพื่อขยายพื้นที่คำแนะนำให้เกือบครึ่งหนึ่งของเฟรม (46% ในแนวนอนและ 34% ในแนวตั้งของเฟรมหลัก)
  6. ตั้งค่า Name เป็น Header
  7. ตั้งค่า Image เป็น rbxassetid://14304828123 เพื่อแสดงรูปสี่เหลี่ยมคางหมู
  8. ตั้งค่า ImageTransparency เป็น 0.15 เพื่อทำให้ส่วนหัวโปร่งใส
3. OPTIONAL
  แทรก UIAspectRatioConstraint ลงใน ImageLabel เพื่อให้แน่ใจว่าสัดส่วนของป้ายยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่น ตัวอย่างตั้งค่า UIAspectRatioConstraint.AspectRatio เป็น 13.781
4. แทรก TextLabel ลงใน Header เพื่อแสดงชื่อเรื่อง
5. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ที่กลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนไปล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อย้ายป้ายไปยังกลางของป้ายหลัก (50% จากซ้ายไปขวาของป้ายหลัก และ 50% จากบนไปล่างของป้ายหลัก)
  4. ตั้งค่า Size เป็น {0.62, 0},{0.55, 0} เพื่อขยายพื้นที่ข้อความให้มากกว่าครึ่งหนึ่งของป้ายหลัก (62% ในแนวนอนและ 55% ในแนวตั้งของป้ายหลัก)
  5. ตั้งค่า Name เป็น HeaderTextLabel
  6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสไตล์อนาคต
  7. ตั้งค่า Weight เป็น Medium เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้งค่า Text เป็น OBJECTIVE
  9. เปิดใช้งาน TextScaled
สร้างองค์ประกอบคำแนะนำ
1. แทรก ImageLabel ลงใน ObjectiveDisplay
2. เลือก ImageLabel จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดกำเนิดของป้ายที่ด้านล่างกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 100% จากบนไปล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{1, 0} เพื่อย้ายป้ายไปยังด้านล่างกลางของเฟรมหลัก (50% จากซ้ายไปขวาของเฟรมหลัก และ 100% จากบนไปล่างของเฟรมหลัก)
  4. ตั้งค่า Size เป็น {0.89, 0},{0.66, 0} เพื่อขยายพื้นที่ข้อความให้เกือบเต็มความกว้างของเฟรมหลัก (89% ในแนวนอนและ 66% ในแนวตั้งของเฟรมหลัก)
  5. ตั้งค่า Name เป็น Body
  6. ตั้งค่า Image เป็น rbxassetid://14304827265 เพื่อแสดงรูปสี่เหลี่ยมคางหมูกลับด้าน
  7. ตั้งค่า ImageColor3 เป็น 0, 0, 0 เพื่อทำให้ภาพมีสีดำ
  8. ตั้งค่า ImageTransparency เป็น 0.3 เพื่อทำให้ส่วนหัวโปร่งใส
3. OPTIONAL
  แทรก UIAspectRatioConstraint ลงใน ImageLabel เพื่อให้แน่ใจว่าสัดส่วนของป้ายยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่น ตัวอย่างตั้งค่า UIAspectRatioConstraint.AspectRatio เป็น 13.781
4. แทรก TextLabel ลงใน Body เพื่อแสดงคำแนะนำ
5. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ที่กลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนไปล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อย้ายป้ายไปยังกลางของป้ายหลัก (50% จากซ้ายไปขวาของป้ายหลัก และ 50% จากบนไปล่างของป้ายหลัก)
  4. ตั้งค่า Size เป็น {0.85, 0},{0.39, 0} เพื่อขยายพื้นที่ข้อความให้มากกว่าครึ่งหนึ่งของป้ายหลัก (85% ในแนวนอนและ 39% ในแนวตั้งของป้ายหลัก)
  5. ตั้งค่า Name เป็น BodyTextLabel
  6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสไตล์อนาคต
  7. ตั้งค่า Weight เป็น Medium เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้งค่า TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาวบนพื้นหลังมืด
  9. ตั้งค่า Text เป็น แท็กผู้เล่นฝ่ายตรงข้ามเพื่อทำคะแนน! ทีมแรกที่ได้ %d คะแนนชนะ.
  10. เปิดใช้งาน TextScaled
สร้างตัวเก็บสำหรับตัวนับคะแนนของทีมเป้าหมาย
1. แทรก Frame ลงใน Objective
2. เลือก Frame ใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดกำเนิดของเฟรมที่ด้านล่างกลางของมัน (50% จากซ้ายไปขวาของเฟรม และ 100% จากบนไปล่างของเฟรม)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของเฟรมโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{1, 0} เพื่อกำหนดเฟรมอยู่กลางด้านล่างของตัวเก็บ (50% จากซ้ายไปขวาของเฟรมหลัก และ 100% จากบนไปล่างของเฟรมหลัก)
  4. ตั้งค่า Size เป็น {0.44, 0},{0.27, 0} เพื่อให้ส่วนประกอบ UI ของการเลือกใช้พื้นที่ประมาณน้อยกว่าครึ่งหนึ่งของตัวเก็บจากซ้ายไปขวา (44% ในแนวนอนและ 27% ในแนวตั้งของเฟรมหลัก)
  5. ตั้งค่า Name เป็น TeamPointCounter
สร้าง padding สำหรับตัวนับคะแนนของทีม
1. แทรกวัตถุ UIListLayout ลงในเฟรมจากขั้นตอนที่ 5
2. เลือกวัตถุ UIListLayout จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า Padding เป็น 0.025, 0 เพื่อให้มีพื้นที่ระหว่างตัวนับคะแนนของทีมในอนาคต
  2. ตั้งค่า FillDirection เป็น Horizontal เพื่อให้ตัวนับคะแนนของแต่ละทีมแสดงอยู่ข้างๆ กัน
  3. ตั้งค่า HorizontalAlignment เป็น Center เพื่อให้ตัวนับคะแนนของแต่ละทีมจัดเรียงอยู่กลางกัน
สร้างองค์ประกอบตัวนับคะแนนของทีมสีเขียว
1. แทรก ImageLabel ลงใน TeamPointCounter
2. เลือก ImageLabel จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  2. ตั้งค่า Position เป็น {0.5, 0},{1, 0} เพื่อย้ายป้ายไปยังด้านล่างกลางของเฟรมหลัก (50% จากซ้ายไปขวาของเฟรมหลัก และ 100% จากบนไปล่างของเฟรมหลัก)
  3. ตั้งค่า Size เป็น {0.5, 0},{1, 0} เพื่อขยายป้ายให้กว้างครึ่งหนึ่งของเฟรมหลัก (50% ในแนวนอนและ 100% ในแนวตั้งของเฟรมหลัก)
  4. ตั้งค่า Name เป็น TeamACounter
  5. ตั้งค่า Image เป็น rbxassetid://14304826831 เพื่อแสดงการจางหายทิศทาง
  6. ตั้งค่า ImageColor3 เป็น 88, 218, 171 เพื่อทำให้ภาพมีสีเขียวมิ้นต์
3. กำหนดคุณสมบัติที่กำหนดเองเพื่อติดตามว่าป้ายนี้เป็นของทีมสีเขียว
  1. ในหน้าต่าง Properties ให้ไปที่ส่วน Attributes จากนั้นคลิกที่ไอคอนบวก ป๊อปอัปจะปรากฏขึ้น
  2. ในฟิลด์ Name ให้ป้อน teamColor
  3. ในเมนูแบบเลื่อนลง Type ให้เลือก BrickColor
  4. คลิกที่ปุ่ม Save
  5. ตั้งค่า teamColor ใหม่เป็น Mint
4. แทรก TextLabel ลงใน TeamACounter เพื่อแสดงคำแนะนำ
5. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 1, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ที่ด้านขวากลางของมัน (100% จากซ้ายไปขวาของป้าย และ 50% จากบนไปล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.95, 0},{0.5, 0} เพื่อย้ายป้ายไปยังด้านขวาของป้ายหลัก (95% จากซ้ายไปขวาของป้ายหลัก และ 50% จากบนไปล่างของป้ายหลัก)
  4. ตั้งค่า Size เป็น {0.85, 0},{0.39, 0} เพื่อขยายพื้นที่ข้อความให้มากกว่าครึ่งหนึ่งของป้ายหลัก (85% ในแนวนอนและ 39% ในแนวตั้งของป้ายหลัก)
  5. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสไตล์อนาคต
  6. ตั้งค่า Weight เป็น Bold เพื่อทำให้ฟอนต์หนาขึ้น
  7. ตั้งค่า TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาวบนพื้นหลังมืด
  8. ตั้งค่า Text เป็น -
  9. เปิดใช้งาน TextScaled
  10. ตั้งค่า TextXAlignment เป็น Right
6. แทรกวัตถุ UIStroke ลงใน TextLabel จากนั้นในหน้าต่าง Properties ตั้งค่า Color เป็น 8, 78, 52 เพื่อขอบเส้นที่มีสีเขียวเข้ม
สร้างองค์ประกอบตัวนับคะแนนของทีมสีชมพู
1. ทำสำเนา TeamAICounter และลูกของมัน
2. เลือก TeamACounter ที่ทำสำเนา จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า Name เป็น TeamBCounter
  2. ตั้งค่า Image เป็น rbxassetid://14305849451 เพื่อแสดงการจางหายทิศทางในทิศทางตรงกันข้าม
  3. ตั้งค่า ImageColor3 เป็น 255, 170, 255 เพื่อทำให้ภาพมีสีชมพู
  4. ตั้งค่า teamColor เป็น Carnation Pink
3. เลือก TextLabel ที่ทำสำเนาใน TeamBCounter จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ที่ด้านซ้ายกลางของมัน (0% จากซ้ายไปขวาของป้าย และ 50% จากบนไปล่างของป้าย)
  2. ตั้งค่า Position เป็น {0.05, 0},{0.5, 0} เพื่อย้ายป้ายไปยังด้านซ้ายของป้ายหลัก (5% จากซ้ายไปขวาของป้ายหลัก และ 50% จากบนไปล่างของป้ายหลัก)
  3. ตั้งค่า TextXAlignment เป็น Left
4. เลือก UIStroke ที่ทำสำเนาใน TeamBCounter จากนั้นในหน้าต่าง Properties ตั้งค่า Color เป็น 158, 18, 94 เพื่อขอบเส้นที่มีสีชมพูเข้ม
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์สถานที่ตัวอย่าง Laser Tag ที่อัปเดตคำแนะนำเป้าหมายและติดตามคะแนนทีมโดยอัตโนมัติ

สคริปต์ต่อไปนี้ต้องการชุดของโมดูลสคริปต์ที่ทำงานร่วมกันเพื่อตั้งค่าการแสดงผล Heads Up (HUD) หลัก รวมถึง setObjective และ startSyncingTeamPoints หลังจากผู้เล่นเข้าร่วมรอบและเลือกบลาสเตอร์ สคริปต์นี้จะทำให้แน่ใจว่าส่วนประกอบ UI HUD ทั้งหมดแสดงผลอย่างเหมาะสมสำหรับสถานะของผู้เล่น อุปกรณ์ และสถานะทีม

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

ตอนนี้ หลังจากผู้เล่นเลือกบลาสเตอร์ UI เป้าหมายจะแสดงที่ด้านบนของหน้าจอของพวกเขา และติดตามคะแนนของแต่ละทีม

UI บลาสเตอร์

ตามแนวทางปฏิบัติที่ดีที่สุดในลำดับชั้นภาพจาก Wireframe Your Layouts ส่วนนี้สอนวิธีการนำเสนอองค์ประกอบ UI ทั้งหมดที่แสดงบนหน้าจอซึ่งเกี่ยวข้องกับบลาสเตอร์ของผู้เล่น กลุ่มขององค์ประกอบ UI นี้ใช้พื้นที่หน้าจอส่วนใหญ่ใกล้กลางหน้าจอเพราะมันทำหน้าที่เป็นจุดสนใจเพื่อดึงดูดความสนใจของผู้เล่นไปที่การกระทำในพื้นที่ 3D และมีความสำคัญที่สุดสำหรับการเล่นเกม

จุดศูนย์กลาง

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

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

เพื่อสร้างจุดศูนย์กลางให้เหมือนกับในเกม Laser Tag ตัวอย่าง:

แทรก ImageLabel ลงในวัตถุ HUDGui ScreenGui
1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
2. เลื่อนเมาส์ไปที่วัตถุ HUDGui ลูกของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
3. จากเมนูบริบท ให้แทรก ImageLabel
เลือก ImageLabel ใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Image เป็น rbxassetid://14400935446
2. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายที่กลางของป้าย (50% จากซ้ายไปขวาของป้าย และ 50% จากบนไปล่างของป้าย)
3. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
4. ตั้งค่า Name เป็น Crosshair
5. ตั้งค่า Position เป็น {0.5,0},{0.5,0} เพื่อกำหนดป้ายอยู่กลางหน้าจอ
6. ตั้งค่า ScaleType เป็น Fit เพื่อให้ภาพพอดีกับภายในตัวเก็บและไม่ยืดออกในขนาดหน้าจอที่แตกต่างกัน
OPTIONAL
แทรก UIAspectRatioConstraint ลงใน Crosshair เพื่อให้แน่ใจว่าสัดส่วนของป้ายยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่น ตัวอย่างตั้งค่า UIAspectRatioConstraint.AspectRatio เป็น 0.895

Hit marker

Hit marker เป็นองค์ประกอบ UI ที่แสดงเฉพาะเมื่อการยิงทำผลกระทบกับผู้เล่นคนอื่นในทีมศัตรู เช่นเดียวกับจุดศูนย์กลาง องค์ประกอบ UI นี้เป็นข้อกำหนดที่สำคัญสำหรับเกมยิงมุมมองบุคคลที่หนึ่งเพราะมันให้ข้อเสนอแนะแบบภาพเมื่อผู้เล่นประสบความสำเร็จในการแท็กผู้เล่นฝ่ายตรงข้ามออก

เพื่อสร้าง Hit marker ให้เหมือนกับในเกม Laser Tag ตัวอย่าง:

แทรก ImageLabel ลงในวัตถุ Crosshair ImageLabel
1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
2. เลื่อนเมาส์ไปที่วัตถุ Crosshair ลูกของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
3. จากเมนูบริบท ให้แทรก ImageLabel
เลือก ImageLabel ใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Image เป็น rbxassetid://14401148736 เพื่อแสดงไอคอน Hit marker สี่เหลี่ยมผืนผ้า
2. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายที่กลางของป้าย
3. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
4. ตั้งค่า Position เป็น {0.5,0},{0.5,0} เพื่อกำหนดป้ายอยู่กลางหน้าจอ
5. ตั้งค่า Name เป็น Hitmarker
6. ตั้งค่า Size เป็น {0.6, 0},{0.06, 0} เพื่อลดขนาดของสี่เหลี่ยมรอบกลางของจุดศูนย์กลาง
7. ตั้งค่า ImageTransparency เป็น 1 เพื่อทำให้ Hit marker โปร่งใสทั้งหมด สคริปต์ในขั้นตอนถัดไปจะทำให้ความโปร่งใสกลับมาเป็น 0 ทุกครั้งที่การยิงของผู้เล่นทำผลกระทบกับผู้เล่นคนอื่นในทีมศัตรู
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์สถานที่ตัวอย่าง Laser Tag ที่แสดง Hit marker เมื่อการยิงทำผลกระทบกับผู้เล่นในทีมศัตรู

สคริปต์ต่อไปนี้ต้องการชุดของโมดูลสคริปต์ที่ทำงานร่วมกันเพื่อตั้งค่าการแสดงผล Heads Up (HUD) หลัก รวมถึง setupHitmarker หลังจากผู้เล่นเข้าร่วมรอบและเลือกบลาสเตอร์ สคริปต์นี้จะทำให้แน่ใจว่าส่วนประกอบ UI HUD ทั้งหมดแสดงผลอย่างเหมาะสมสำหรับสถานะของผู้เล่น อุปกรณ์ และสถานะทีม

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

ตอนนี้ ทุกครั้งที่ผู้เล่นยิงบลาสเตอร์ของพวกเขาและการยิงทำผลกระทบกับผู้เล่นคนอื่น Hit marker จะแสดงผลชั่วคราว

ตัวเลือกบลาสเตอร์

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

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

การตั้งค่านี้ช่วยให้คุณสร้าง Configuration เพิ่มเติมสำหรับประเภทบลาสเตอร์เพิ่มเติมที่แสดงผลได้อย่างถูกต้องภายในตัวเลือกบลาสเตอร์โดยไม่ต้องสร้างปุ่มแต่ละปุ่มภายใน StarterGui.PickABlasterGui

เพื่อสร้างตัวเลือกบลาสเตอร์ให้เหมือนกับในเกม Laser Tag ตัวอย่าง:

สร้างตัวเก็บสำหรับส่วนประกอบทั้งหมด
1. แทรก Frame ลงในวัตถุ PickABlaster ScreenGui
  1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
  2. เลื่อนเมาส์ไปที่วัตถุ PickABlaster ลูกของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
  3. จากเมนูบริบท ให้แทรก Frame
2. เลือกเฟรมใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดกำเนิดของเฟรมที่ด้านล่างกลางของมัน (50% จากซ้ายไปขวาของเฟรม และ 100% จากบนไปล่างของเฟรม)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของเฟรมโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.9, 0} เพื่อกำหนดเฟรมใกล้ด้านล่างกลางของหน้าจอ (50% จากซ้ายไปขวาของหน้าจอ และ 92.4% จากบนไปล่างของหน้าจอ)
  4. ตั้งค่า Size เป็น {0.8, 0},{0.25, 0} เพื่อให้ส่วนประกอบ UI ของตัวเลือกบลาสเตอร์ใช้พื้นที่ขนาดใหญ่ของหน้าจอเพื่อดึงดูดความสนใจของผู้เล่น (80% ในแนวนอน และ 25% ในแนวตั้ง)
  5. ตั้งค่า Name เป็น Component
3. OPTIONAL
  แทรก UIAspectRatioConstraint ลงใน Component เพื่อให้แน่ใจว่าสัดส่วนของเฟรมและองค์ประกอบ UI ลูกของมันยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่น ตัวอย่างตั้งค่า UIAspectRatioConstraint.AspectRatio เป็น 5
สร้างตัวเก็บเพื่อเก็บกลุ่มองค์ประกอบ UI
1. แทรก Frame ลงใน Component
2. เลือกเฟรมใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของเฟรมที่กลางของมัน (50% จากซ้ายไปขวาของเฟรม และ 50% จากบนไปล่างของเฟรม)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของเฟรมโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.375, 0} เพื่อกำหนดเฟรมใกล้ด้านบนกลางของตัวเก็บ (50% จากซ้ายไปขวาของเฟรมหลัก และ 37.5% จากบนไปล่างของเฟรมหลัก)
  4. ตั้งค่า Size เป็น {1, 0},{0.75, 0} เพื่อให้ส่วนประกอบ UI ของการเลือกใช้พื้นที่ 3/4 ของตัวเก็บ (100% ในแนวนอนและ 75% ในแนวตั้งของเฟรมหลัก)
  5. ตั้งค่า Name เป็น SelectionFrame
สร้างคำแนะนำสำหรับตัวเลือกบลาสเตอร์
1. แทรก ImageLabel ลงใน SelectionFrame
2. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดกำเนิดของป้ายที่ด้านล่างกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 100% จากบนไปล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า LayoutOrder เป็น -1
  4. ตั้งค่า Position เป็น {0.5, 0},{0.22, 0} เพื่อกำหนดป้ายใกล้ด้านบนกลางของเฟรม (50% จากซ้ายไปขวาของเฟรมหลัก และ 22% จากบนไปล่างของเฟรมหลัก)
  5. ตั้งค่า Size เป็น {0.45, 0},{0.22, 0} เพื่อขยายพื้นที่คำแนะนำให้เกือบครึ่งหนึ่งของเฟรม (45% ในแนวนอนและ 22% ในแนวตั้งของเฟรมหลัก)
  6. ตั้งค่า Name เป็น Header1. ตั้งค่า Image เป็น rbxassetid://14304828123 เพื่อแสดงรูปทรงสี่เหลี่ยมคางหมู
  7. ตั้งค่า ImageTransparency เป็น 0.15 เพื่อทำให้หัวข้อมีความโปร่งใสบางส่วน
3. OPTIONAL
  แทรก UIAspectRatioConstraint ลงในป้ายชื่อเพื่อให้แน่ใจว่าสัดส่วนของป้ายชื่อยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่นอย่างไร ตัวอย่างนี้ตั้งค่า UIAspectRatioConstraint.AspectRatio เป็น 13.78
4. แทรก TextLabel ลงใน Header เพื่อแสดงข้อความเชิญชวน
5. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อใหม่ให้อยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อย้ายป้ายชื่อไปยังกลางของป้ายชื่อหลัก (50% จากซ้ายไปขวาของป้ายชื่อหลัก และ 50% จากบนลงล่างของป้ายชื่อหลัก)
  4. ตั้งค่า Size เป็น {0.6, 0},{0.55, 0} เพื่อขยายพื้นที่ข้อความให้กว้างกว่าครึ่งหนึ่งของป้ายชื่อหลัก (60% ในแนวนอนและ 55% ในแนวตั้งของป้ายชื่อหลัก)
  5. ตั้งค่า Name เป็น HeaderTextLabel
  6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสไตล์อนาคต
  7. ตั้งค่า Weight เป็น Medium เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้งค่า Text เป็น PICK A BLASTER
  9. เปิดใช้งาน TextScaled
สร้างคอนเทนเนอร์สำหรับปุ่มบลาสเตอร์และลูกศรเลือก
1. แทรก ImageLabel ลงใน SelectionFrame
2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่า Image เริ่มต้นออก
  2. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อให้อยู่ตรงกลางด้านล่างของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 100% จากบนลงล่างของป้ายชื่อ)
  3. ตั้งค่า BackgroundColor เป็น 0, 0, 0 เพื่อทำให้ป้ายชื่อเป็นสีดำ
  4. ตั้งค่า BackgroundTransparency เป็น 0.3 เพื่อลดความทึบของป้ายชื่อลง 30% และให้ตรงกับองค์ประกอบ UI สีดำทั้งหมดในเกม
  5. ตั้งค่า Position เป็น {0.5, 0},{1, 0} เพื่อกำหนดป้ายชื่อให้อยู่ตรงกลางด้านล่างของเฟรม (50% จากซ้ายไปขวาของเฟรมหลัก และ 100% จากบนลงล่างของเฟรมหลัก)
  6. ตั้งค่า Size เป็น {1, 0},{0.77, 0} เพื่อขยายพื้นที่ป้ายชื่อให้กว้างขึ้นไปยังพื้นที่ด้านล่างของข้อความเชิญชวน (100% ในแนวนอนและ 77% ในแนวตั้งของเฟรมหลัก)
3. ทำมุมของคอนเทนเนอร์ให้โค้งมน
  1. แทรกวัตถุ UICorner ลงในป้ายชื่อ
  2. เลือกวัตถุมุมใหม่ จากนั้นในหน้าต่าง Properties ตั้งค่า CornerRadius เป็น 0.075, 0 เพื่อทำให้มุมโค้งมน
สร้างคอนเทนเนอร์สำหรับปุ่มบลาสเตอร์ของคุณ
1. แทรก Frame ลงในป้ายชื่อจากขั้นตอนที่ 4
2. เลือกเฟรมใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดเริ่มต้นของเฟรมใหม่ให้อยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของเฟรม และ 50% จากบนลงล่างของเฟรม)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของเฟรมโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดเฟรมให้อยู่ตรงกลางของป้ายชื่อหลัก (50% จากซ้ายไปขวาของเฟรมหลัก และ 50% จากบนลงล่างของเฟรมหลัก)
  4. ตั้งค่า Size เป็น {0.85, 0},{0.77, 0} เพื่อขยายพื้นที่เฟรมให้กว้างขึ้นไปยังพื้นที่ส่วนใหญ่ของป้ายชื่อ (85% ในแนวนอนและ 77% ในแนวตั้งของป้ายชื่อหลัก)
  5. ตั้งค่า Name เป็น Container
สร้างพื้นที่ว่างสำหรับปุ่มบลาสเตอร์ในอนาคตทั้งหมด
1. แทรกวัตถุ UIListLayout ลงในเฟรมจากขั้นตอนที่ 5
2. เลือกวัตถุเลย์เอาต์ใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า Padding เป็น 0.035, 0 เพื่อให้มีพื้นที่ระหว่างปุ่มทั้งหมดในอนาคต
  2. ตั้งค่า FillDirection เป็น Horizontal เพื่อให้แต่ละปุ่มแสดงอยู่ข้างกัน
  3. ตั้งค่า HorizontalAlignment และ VerticalAlignment เป็น Center เพื่อให้แต่ละปุ่มจัดเรียงอยู่ตรงกลางของกันและกัน
สร้างปุ่มนำทางด้านซ้าย
1. แทรกวัตถุ ImageButton ลงใน ImageLabel จากขั้นตอนที่ 4
2. เลือกปุ่มใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่า Image เริ่มต้นออก
  2. ตั้งค่า AnchorPoint เป็น 0, 0.5 เพื่อกำหนดจุดเริ่มต้นของปุ่มใหม่ให้อยู่ตรงกลางด้านซ้ายของมัน (0% จากซ้ายไปขวาของปุ่ม และ 50% จากบนลงล่างของปุ่ม)
  3. ตั้งค่า BackgroundTransparency เป็น 0.15 เพื่อให้มีการตอบสนองทางสายตาเมื่อชี้ไปที่ปุ่มว่าปุ่มนั้นสามารถเลือกได้
  4. ตั้งค่า Position เป็น {0.02, 0},{0.5, 0} เพื่อให้มีพื้นที่ว่างทางด้านซ้ายของปุ่มจากคอนเทนเนอร์หลัก (2% จากซ้ายไปขวาของป้ายชื่อหลัก และ 50% จากบนลงล่างของป้ายชื่อหลัก)
  5. ตั้งค่า Size เป็น {0.04, 0},{0.33, 0} เพื่อทำให้ปุ่มเลือกมีขนาดเล็กกว่าปุ่มบลาสเตอร์มาก (4% ในแนวนอนและ 33% ในแนวตั้งของเฟรมหลัก)
  6. ตั้งค่า Name เป็น NavigationButtonLeft
3. ทำมุมของปุ่มให้โค้งมน
  1. แทรกวัตถุ UICorner ลงในปุ่ม
  2. เลือกวัตถุมุมใหม่ จากนั้นในหน้าต่าง Properties ตั้งค่า CornerRadius เป็น 0.1, 0 เพื่อทำให้มุมโค้งมน
4. แทรกวัตถุ ImageLabel ลงในปุ่ม
5. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อใหม่ให้อยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
  2. ตั้งค่า Position เป็น {0.45, 0},{0.5, 0} เพื่อกำหนดป้ายชื่อให้อยู่ใกล้กลางของปุ่มหลัก (45% จากซ้ายไปขวาของปุ่มหลัก และ 50% จากบนลงล่างของปุ่มหลัก) ค่านี้ไม่อยู่ตรงกลางเพราะลูกศรไม่ดู อยู่ตรงกลาง ของปุ่มที่ {0.5, 0},{0.5, 0}
  3. ตั้งค่า Size เป็น {0.8, 0},{0.8, 0} เพื่อขยายพื้นที่ป้ายชื่อให้กว้างขึ้นไปยังพื้นที่ด้านล่างของข้อความเชิญชวน (80% ในแนวนอนและ 80% ในแนวตั้งของเฟรมหลัก)
  4. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของภาพโปร่งใสทั้งหมด
  5. ตั้งค่า Image เป็น rbxassetid://14309187238
  6. ตั้งค่า ScaleType เป็น Fit
สร้างปุ่มนำทางด้านขวา
1. ทำซ้ำ NavigationButtonLeft
2. เลือกปุ่มที่ทำซ้ำ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 1, 0.5 เพื่อกำหนดจุดเริ่มต้นของปุ่มใหม่ให้อยู่ตรงกลางด้านขวาของมัน (100% จากซ้ายไปขวาของปุ่ม และ 50% จากบนลงล่างของปุ่ม)
  2. ตั้งค่า Position เป็น {0.98, 0},{0.5, 0} เพื่อให้มีพื้นที่ว่างทางด้านขวาของปุ่มจากคอนเทนเนอร์หลัก (98% จากซ้ายไปขวาของป้ายชื่อหลัก และ 50% จากบนลงล่างของป้ายชื่อหลัก)
  3. ตั้งค่า Name เป็น NavigationButtonRight
3. เลือกวัตถุ ImageLabel ของมัน
  1. ตั้งค่า Rotation เป็น 180 เพื่อพลิกภาพ
  2. ตั้งค่า Position เป็น {0.55, 0},{0.5, 0} เพื่อกำหนดป้ายชื่อให้อยู่ใกล้กลางของปุ่มหลัก (55% จากซ้ายไปขวาของปุ่มหลัก และ 50% จากบนลงล่างของปุ่มหลัก) ค่านี้ไม่อยู่ตรงกลางเพราะลูกศรไม่ดู อยู่ตรงกลาง ของปุ่มที่ {0.5, 0},{0.5, 0}
สร้างปุ่ม SELECT
1. แทรกวัตถุ ImageButton ลงใน Component สังเกตว่ากระบวนการนี้ทำให้ปุ่มเลือกแยกออกจาก SelectionFrame เพื่อให้คุณสามารถเพิ่มพื้นที่ว่างระหว่างส่วนหลักของคอมโพเนนต์กับปุ่มเลือก
2. เลือกปุ่มใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่า Image เริ่มต้นออก
  2. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดเริ่มต้นของปุ่มใหม่ให้อยู่ตรงกลางด้านล่างของมัน (50% จากซ้ายไปขวาของปุ่ม และ 100% จากบนลงล่างของปุ่ม)
  3. ตั้งค่า BackgroundTransparency เป็น 0.15 เพื่อให้มีการตอบสนองทางสายตาเมื่อชี้ไปที่ปุ่มว่าปุ่มนั้นสามารถเลือกได้
  4. ตั้งค่า Position เป็น {0.5, 0},{0.99, 0} เพื่อกำหนดปุ่มให้อยู่ใกล้กลางด้านล่างของคอนเทนเนอร์ (50% จากซ้ายไปขวาของเฟรมหลัก และ 99% จากบนลงล่างของเฟรมหลัก)
  5. ตั้งค่า Size เป็น {0.17, 0},{0.18, 0} เพื่อทำให้ปุ่มยาวขึ้นอยู่ใต้ปุ่มบลาสเตอร์ (17% ในแนวนอนและ 18% ในแนวตั้งของเฟรมหลัก)
  6. ตั้งค่า Name เป็น SelectButton
3. ทำมุมของปุ่มให้โค้งมน
  1. แทรกวัตถุ UICorner ลงในปุ่ม
  2. เลือกวัตถุมุมใหม่ จากนั้นในหน้าต่าง Properties ตั้งค่า CornerRadius เป็น 0.2, 0 เพื่อทำให้มุมโค้งมน
4. แทรกวัตถุ TextLabel ลงในปุ่มเพื่อให้คุณสามารถแสดงข้อความเชิญชวน
5. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อใหม่ให้อยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อย้ายป้ายชื่อไปยังกลางของปุ่ม (50% จากซ้ายไปขวาของปุ่มหลัก และ 50% จากบนลงล่างของปุ่มหลัก)
  4. ตั้งค่า Size เป็น {0.9, 0},{0.55, 0} เพื่อขยายพื้นที่ข้อความให้เกือบทั้งหมดของความกว้างของป้ายชื่อหลัก (90% ในแนวนอนและ 55% ในแนวตั้งของป้ายชื่อหลัก)
  5. ตั้งค่า Name เป็น SelectTextLabel
  6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสไตล์อนาคต
  7. ตั้งค่า Weight เป็น Medium เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้งค่า Text เป็น SELECT
  9. เปิดใช้งาน TextScaled
สร้างพรีแฟบปุ่มบลาสเตอร์
1. ในบริการ ReplicatedStorage สร้างโครงสร้างโฟลเดอร์เพื่อจัดระเบียบวัตถุ UI ของคุณ ตัวอย่างนี้ใช้โฟลเดอร์ Instances ที่มีโฟลเดอร์ลูก Guis
2. แทรกวัตถุ ImageButton ลงในโฟลเดอร์ Guis
3. เลือกปุ่มใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่า Image เริ่มต้นออก
  2. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดเริ่มต้นของปุ่มใหม่ให้อยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของปุ่ม และ 50% จากบนลงล่างของปุ่ม)
  3. ตั้งค่า BackgroundTransparency เป็น 0.65 เพื่อให้มีการตอบสนองทางสายตาว่าปุ่มไม่ได้อยู่ในโฟกัส สคริปต์ในขั้นตอนที่ 12 จะให้การตอบสนองทางสายตาแบบโปรแกรมเมื่อปุ่มอยู่ในโฟกัส
  4. ตั้งค่า LayoutOrder เป็น 2
  5. ตั้งค่า Name เป็น BlasterButtonPrefab
  6. ตั้งค่า Size เป็น {0.8, 0},{0.8, 0}
  7. ตั้งค่า ImageTransparency เป็น 1 เพื่อทำให้ภาพโปร่งใสทั้งหมด
4. แทรก UIAspectRatioConstraint ลงใน BlasterButtonPrefab เพื่อให้แน่ใจว่าสัดส่วนของปุ่มยังคงเหมือนเดิมภายในคอมโพเนนต์ไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่นอย่างไร
5. ทำมุมของปุ่มให้โค้งมน
  1. แทรกวัตถุ UICorner ลงใน BlasterButtonPrefab
  2. เลือก UICorner จากนั้นในหน้าต่าง Properties ตั้งค่า CornerRadius เป็น 0.05, 0 เพื่อทำให้มุมโค้งมน
6. แทรก ImageLabel ลงใน BlasterButtonPrefab
7. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่า Image เริ่มต้นออก
  2. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อใหม่ให้อยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
  3. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
  4. ตั้งค่า Position เป็น {0.52, 0},{0.497, 0} เพื่อกำหนดป้ายชื่อให้อยู่ใกล้กลางของปุ่มหลัก (52% จากซ้ายไปขวาของปุ่มหลัก และ 49.7% จากบนลงล่างของปุ่มหลัก) ค่านี้ไม่อยู่ตรงกลางเพราะบลาสเตอร์ไม่ดู อยู่ตรงกลาง ของปุ่มที่ {0.5, 0},{0.5, 0}
  5. ตั้งค่า Size เป็น {1.20, 0},{0.9, 0} เพื่อขยายพื้นที่ป้ายชื่อให้อยู่ภายนอกปุ่ม (120% ในแนวนอนและ 90% ในแนวตั้งของปุ่มหลัก)
  6. ตั้งค่า ScaleType เป็น Fit
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์ตัวอย่าง Laser Tag ที่แสดงปุ่มสำหรับบลาสเตอร์แต่ละตัวแบบโปรแกรม ปรับขนาดปุ่มเมื่อผู้เล่นเลือกปุ่มที่ไม่ได้อยู่ในโฟกัส และเชื่อมโยงการเลือกบลาสเตอร์ของผู้เล่นกับอวาตาร์ของพวกเขา

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

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

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

ปุ่มบลาสต์

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

เพื่อสร้างปุ่มบลาสต์ให้เหมือนกันในเกมตัวอย่าง Laser Tag:

แทรกวัตถุ ImageButton ลงใน HUDGui ScreenGui
1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
2. วางเมาส์เหนือวัตถุ HUDGui ของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
3. จากเมนูบริบท ให้แทรก ImageButton
ในมุมมอง ให้ย้ายปุ่มไปยังตำแหน่งที่นิ้วโป้งของผู้เล่นอยู่ตามธรรมชาติ เพื่อให้คุณสามารถรับรู้ภาพที่ปุ่มจะดูเหมือนอย่างไรบนอุปกรณ์ของผู้เล่น จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Image เป็น rbxassetid://18308375035 เพื่อแสดงไอคอนปุ่มบลาสต์
2. ตั้งค่า PressedImage เป็น rbxassetid://18308372558 เพื่อแสดงเวอร์ชันที่กลับด้านของไอคอนปุ่มบลาสต์เมื่อผู้เล่นกดปุ่ม
3. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
4. ตั้งค่า Name เป็น BlastButton
5. ตั้งค่า ScaleType เป็น Fit เพื่อให้ภาพพอดีกับภายในคอนเทนเนอร์และไม่ยืดออกในขนาดหน้าจอที่แตกต่างกัน
6. ตั้งค่า ImageTransparency เป็น 0.3 เพื่อลดความทึบของป้ายชื่อให้ตรงกับองค์ประกอบ UI สีดำทั้งหมดในเกม
แทรก UIAspectRatioConstraint ลงใน BlastButton เพื่อให้แน่ใจว่าสัดส่วนของปุ่มยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่นอย่างไร
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์ตัวอย่าง Laser Tag ที่แสดงปุ่มบลาสเตอร์แบบโปรแกรมเมื่อผู้เล่นใช้การสัมผัสบนอุปกรณ์ที่รองรับการสัมผัส

สคริปต์ต่อไปนี้ต้องการชุดของโมดูลสคริปต์ที่ทำงานร่วมกันเพื่อตั้งค่า Heads Up Display (HUD) หลัก รวมถึง setupTouchButtonAsync หลังจากผู้เล่นเข้าร่วมรอบและเลือกบลาสเตอร์ของพวกเขา สคริปต์นี้จะทำให้แน่ใจว่าองค์ประกอบ UI ของ HUD ทั้งหมดแสดงอย่างเหมาะสมสำหรับสถานะของผู้เล่น อุปกรณ์ และสถานะทีม

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

ตอนนี้เมื่อผู้เล่นเข้าร่วมเกมและใช้การสัมผัสบนอุปกรณ์ที่รองรับการสัมผัส ปุ่มบลาสต์จะแสดงอยู่ที่มุมขวาบนของปุ่มกระโดด

UI ของผู้เล่น

ตามแนวทางปฏิบัติด้านลำดับชั้นทางสายตาจาก Wireframe Your Layouts ส่วนนี้จะสอนวิธีการนำเสนอองค์ประกอบ UI ทั้งหมดที่เกี่ยวข้องกับสถานะของผู้เล่น กลุ่มขององค์ประกอบ UI นี้อยู่ใกล้กับขอบของหน้าจอเพราะผู้เล่นสามารถเข้าใจข้อมูลขอบ peripheral นี้ได้โดยไม่ต้องเบี่ยงเบนความสนใจจากการเล่นเกม

ตัวบ่งชี้ผู้เล่น

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

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

เพื่อสร้างองค์ประกอบตัวบ่งชี้ผู้เล่นให้เหมือนกันในเกมตัวอย่าง Laser Tag:

แทรก Frame ลงใน HUDGui ScreenGui
1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
2. วางเมาส์เหนือวัตถุ HUDGui ของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
3. จากเมนูบริบท ให้แทรก Frame
เลือก Frame ใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า AnchorPoint เป็น 0, 1 เพื่อกำหนดจุดเริ่มต้นของเฟรมให้อยู่ตรงกลางด้านล่างของมัน (0% จากซ้ายไปขวาของเฟรม และ 100% จากบนลงล่างของเฟรม)
2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
3. ตั้งค่า Name เป็น PlayerDisplay
4. ตั้งค่า Position เป็น {0.02, 0},{0.97, 0} เพื่อกำหนดเฟรมให้อยู่ใกล้ด้านล่างซ้ายของหน้าจอ
5. ตั้งค่า Size เป็น {0.23, 0},{0.08, 0} เพื่อทำให้เฟรมสั้นลงและกว้างขึ้น
6. เปิดใช้งาน ClipsDescendants เพื่อตัดวัตถุ GuiObjects ลูกที่ยื่นออกนอกเฟรม
สร้างรูปทรงหลายเหลี่ยม
1. แทรก ImageLabel ลงใน PlayerDisplay
2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า Image เป็น rbxassetid://14304828123 เพื่อแสดงไอคอนรูปสี่เหลี่ยมคางหมู
  2. ตั้งค่า AnchorPoint เป็น 1, 1 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อให้อยู่ตรงกลางด้านล่างของมัน (100% จากซ้ายไปขวาของป้ายชื่อ และ 100% จากบนลงล่างของป้ายชื่อ)
  3. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
  4. ตั้งค่า Name เป็น Block
  5. ตั้งค่า Position เป็น {1,0},{1,0} เพื่อกำหนดป้ายชื่อให้อยู่ด้านขวาของเฟรม
  6. ตั้งค่า Size เป็น {1.858, 0},{0.581, 0} เพื่อขยายป้ายชื่อออกไปนอกเฟรม และทำให้มันสั้นลงเล็กน้อยกว่าครึ่งหนึ่งของความยาวของเฟรม
  7. ตั้งค่า ImageTransparency เป็น 0.15 เพื่อทำให้ป้ายชื่อมีความโปร่งใสเล็กน้อย
  8. ตั้งค่า ScaleType เป็น Fit เพื่อให้ภาพพอดีกับภายในคอนเทนเนอร์และไม่ยืดออกในขนาดหน้าจอที่แตกต่างกัน
  1. แทรก UIAspectRatioConstraint ลงใน Block เพื่อให้แน่ใจว่าสัดส่วนของป้ายชื่อและองค์ประกอบ UI ลูกของมันยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่นอย่างไร
  2. เลือกข้อจำกัดใหม่ จากนั้นในหน้าต่าง Properties ตั้งค่า AspectRatio เป็น 13.78
สร้างกล่องสำหรับภาพโปรไฟล์ของผู้เล่น
1. แทรก ImageLabel ลงใน PlayerDisplay
2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่า ID ของสินทรัพย์ที่เป็นตัวแทนในคุณสมบัติ Image ออก สคริปต์ในขั้นตอนที่ 7 จะใส่ภาพโปรไฟล์ของผู้เล่นลงในป้ายชื่อ
  2. ตั้งค่า AnchorPoint เป็น 0, 1 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อให้อยู่ตรงกลางด้านล่างของมัน (0% จากซ้ายไปขวาของป้ายชื่อ และ 100% จากบนลงล่างของป้ายชื่อ)
  3. ตั้งค่า BackgroundColor3 เป็น 0, 0, 0 เพื่อกำหนดสีพื้นหลังของป้ายชื่อเป็นสีดำ
  4. ตั้งค่า BackgroundTransparency เป็น 0.3 เพื่อลดความทึบของป้ายชื่อลง 30% และให้ตรงกับองค์ประกอบ UI สีดำทั้งหมดในเกม
  5. ตั้งค่า Name เป็น PlayerPortrait
  6. ตั้งค่า Position เป็น {0.11, 0},{1, 0} เพื่อกำหนดป้ายชื่อให้อยู่ด้านซ้ายของรูปทรงหลายเหลี่ยม
  7. ตั้งค่า Size เป็น {0.23, 0},{1, 0} เพื่อทำให้ป้ายชื่อเล็กลง
  8. ตั้งค่า ImageTransparency เป็น 0.15 เพื่อทำให้ป้ายชื่อมีความโปร่งใสเล็กน้อย
  9. ตั้งค่า ScaleType เป็น Fit เพื่อให้ภาพพอดีกับภายในคอนเทนเนอร์และไม่ยืดออกในขนาดหน้าจอที่แตกต่างกัน
  1. แทรก UIAspectRatioConstraint ลงใน PlayerPortrait เพื่อให้แน่ใจว่าสัดส่วนของป้ายชื่อและองค์ประกอบ UI ลูกของมันยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่นอย่างไร
  2. แทรก UICorner ลงใน PlayerPortrait จากนั้นในหน้าต่าง Properties ตั้งค่า CornerRadius เป็น 0.05, 0 เพื่อทำให้มุมโค้งมนเล็กน้อย
สร้างป้ายชื่อสำหรับชื่อของผู้เล่น
1. แทรกวัตถุ TextLabel ลงใน PlayerDisplay
2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0, 0.5 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อใหม่ให้อยู่ตรงกลางด้านซ้ายของมัน (0% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
  3. ตั้งค่า Name เป็น PlayerNameTextLabel
  4. ตั้งค่า Position เป็น {0.35, 0},{0.72, 0} เพื่อกำหนดป้ายชื่อให้อยู่ด้านขวาของคอนเทนเนอร์ (35% จากซ้ายไปขวาของป้ายชื่อหลัก และ 72% จากบนลงล่างของป้ายชื่อหลัก)
  5. ตั้งค่า Size เป็น {0.52, 0},{0.3, 0} เพื่อให้ข้อความสามารถใช้พื้นที่ส่วนใหญ่ของรูปทรงหลายเหลี่ยม (52% ในแนวนอนและ 30% ในแนวตั้งของเฟรมหลัก)
  6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสไตล์อนาคต
  7. ตั้งค่า Weight เป็น Bold เพื่อทำให้ฟอนต์หนาขึ้น
  8. ลบค่า placeholder ออกภายในคุณสมบัติ Text สคริปต์ในขั้นตอนที่ 7 จะใส่ชื่อของผู้เล่นลงในป้ายชื่อ
  9. เปิดใช้งาน TextScaled
  10. ตั้งค่า TextXAlignment เป็น Left
สร้างไอคอนและสีทีมที่แสดงอยู่ทางด้านซ้ายของภาพโปรไฟล์ของผู้เล่น
1. แทรก Folder ลงใน PlayerDisplay จากนั้นเปลี่ยนชื่อเป็น TeamIcons
2. สร้างไอคอนและสีทีม เขียว
  1. แทรก ImageLabel ลงใน TeamIcons
  2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
    
    ตั้งค่า AnchorPoint เป็น 0, 1 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อให้อยู่ตรงกลางด้านล่างของมัน (0% จากซ้ายไปขวาของป้ายชื่อ และ 100% จากบนลงล่างของป้ายชื่อ)
    
    ตั้งค่า BackgroundColor3 เป็น 88, 218, 171 เพื่อกำหนดสีพื้นหลังของป้ายชื่อเป็นสีเขียวมิ้นต์
    
    ตั้งค่า Name เป็น TeamAIcon
    
    ตั้งค่า Position เป็น {0, 0},{1, 0} เพื่อกำหนดป้ายชื่อให้อยู่ด้านซ้ายของเฟรม
    
    ตั้งค่า Size เป็น {0.135, 0},{0.58, 0} เพื่อทำให้ป้ายชื่อเล็กลงทางด้านซ้ายของภาพโปรไฟล์
    
    ตั้งค่า ImageTransparency เป็น 1 เพื่อทำให้ป้ายชื่อโปร่งใส
  1. กำหนดแอตทริบิวต์ที่กำหนดเองเพื่อติดตามว่าป้ายชื่อนี้เป็นของทีมเขียว ขั้นตอนนี้สำคัญมากสำหรับสคริปต์ในขั้นตอนที่ 7
    
    ในหน้าต่าง Properties ให้ไปที่ส่วน Attributes จากนั้นคลิกที่ไอคอนบวก เมนูป๊อปอัปจะแสดงขึ้น
    
    ในฟิลด์ Name ให้ป้อน teamColor
    
    ในเมนูดรอปดาวน์ Type ให้เลือก BrickColor
    
    คลิกที่ปุ่ม Save
    
    ตั้งค่าแอตทริบิวต์ teamColor ใหม่เป็น Mint
  2. แทรก UIAspectRatioConstraint ลงใน TeamAIcon เพื่อให้แน่ใจว่าสัดส่วนของป้ายชื่อและองค์ประกอบ UI ลูกของมันยังคงเหมือนเดิมไม่ว่าจะเป็นขนาดหน้าจอของผู้เล่นอย่างไร
  3. สร้างไอคอน
    
    แทรก ImageLabel ลงใน TeamAIcon
    
    เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
    
    ตั้งค่า Image เป็น rbxassetid://14309678670 เพื่อแสดงไอคอนทีมเขียว
    
    ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดเริ่มต้นของป้ายชื่อให้อยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
    
    ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
    
    ตั้งค่า Name เป็น Icon
    
    ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายชื่อให้อยู่ตรงกลางของป้ายชื่อหลัก
    
    ตั้งค่า Size เป็น {0.7, 0},{0.6, 0} เพื่อทำให้ป้ายชื่อเล็กลง
    
    ตั้งค่า ScaleType เป็น Fit เพื่อให้ภาพพอดีกับภายในคอนเทนเนอร์และไม่ยืดออกในขนาดหน้าจอที่แตกต่างกัน
3. สร้างไอคอนและสีทีม ชมพู
  1. ทำซ้ำ TeamAIcon และลูกของมัน
  2. เลือก TeamAIcon ที่ทำซ้ำ จากนั้นในหน้าต่าง Properties,
    
    ตั้งค่า BackgroundColor3 เป็น 255, 170, 255 เพื่อกำหนดสีพื้นหลังของป้ายชื่อเป็นสีชมพู
    
    ตั้งค่า Name เป็น TeamBIcon
    
    ตั้งค่าแอตทริบิวต์ teamColor เป็น Carnation Pink
    
    เลือกลูก Icon ของ TeamBIcon ที่ทำซ้ำ จากนั้นในหน้าต่าง Properties ตั้งค่า Image เป็น rbxassetid://14309678549 เพื่อแสดงไอคอนทีมชมพู
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์ตัวอย่าง Laser Tag ที่แสดงตัวบ่งชี้ผู้เล่นด้วยสีทีมและไอคอนที่เหมาะสมในขณะที่ผู้เล่นมีส่วนร่วมในรอบ

สคริปต์ต่อไปนี้ต้องการชุดของโมดูลสคริปต์ที่ทำงานร่วมกันเพื่อตั้งค่าหน้าจอแสดงผลหลัก (HUD) รวมถึง startSyncingTeamColor, setPlayerName, และ setPlayerPortrait หลังจากที่ผู้เล่นเข้าร่วมรอบและเลือกบลาสเตอร์ของตน สคริปต์นี้จะทำให้แน่ใจว่าองค์ประกอบ UI ของ HUD ทั้งหมดแสดงผลอย่างเหมาะสมตามสถานะของผู้เล่น อุปกรณ์ และสถานะทีม

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

ตอนนี้ ทุกครั้งที่ผู้เล่นเข้าร่วมหรือกลับเข้ารอบหลังจากการเกิดใหม่ ตัวบ่งชี้ผู้เล่นจะแสดงที่มุมล่างซ้ายของหน้าจอของพวกเขา

หน้าจอแรงดัน

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

เพื่อสร้างหน้าจอแรงดันในเกม Laser Tag ตัวอย่าง:

แทรก ImageLabel ลงใน ForceFieldGui ScreenGui
1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
2. เลื่อนเมาส์ไปที่วัตถุ ForceFieldGui ของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
3. จากเมนูบริบท ให้แทรก ImageLabel
เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Image เป็น rbxassetid://14462567888
2. ตั้งค่า BackgroundTransparency เป็น 0.8 เพื่อทำให้แรงดันโปร่งใส
3. ตั้งค่า Size เป็น {1, 0},{1, 0} เพื่อทำให้ภาพเต็มหน้าจอ (100% แนวนอนและ 100% แนวตั้งของ ScreenGui แม่)
4. ตั้งค่า ScaleType เป็น Tile เพื่อทำให้หกเหลี่ยมปูทั่วทั้งหน้าจอ
5. ตั้งค่า TileSize เป็น {0, 104},{0, 180}
แทรกวัตถุ UIGradient ลงในป้าย
เลือกวัตถุเกรดใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Color เป็นลำดับสีที่เริ่มต้นด้วยสีน้ำเงิน เปลี่ยนเป็นสีขาว แล้วเปลี่ยนกลับเป็นสีน้ำเงินอีกครั้ง
  1. ตั้งค่า Color เป็น 120, 192, 250 เพื่อใช้เฉดสีฟ้าอ่อนกับหกเหลี่ยมทั้งหมด
  2. คลิกที่คุณสมบัติ Color จากนั้นคลิกที่ปุ่ม ⋯ เมนูป๊อปอัปลำดับสีจะแสดงขึ้น
    
    สามเหลี่ยมแต่ละตัวในแกนล่างของลำดับสีคือจุดสำคัญที่กำหนดค่าของสีที่คุณสมบัติในจุดนั้นของภาพจากซ้ายไปขวา
  3. คลิกและลากบนลำดับสีจนกว่าคุณจะถึงค่าของ Time เป็น 0.05 จากนั้นคลิกที่สี่เหลี่ยมเล็ก ๆ ถัดจาก Color เพื่อเปิดหน้าต่างป๊อปอัป Colors
  4. เลือกสีขาวที่สดใส จากนั้นปิดหน้าต่างป๊อปอัป
  5. คลิกและลากบนลำดับสีจนกว่าคุณจะถึงค่าของ Time เป็น 0.95 จากนั้นเปิดหน้าต่างป๊อปอัป Colors อีกครั้ง และเลือกสีขาวเดียวกันกับก่อนหน้านี้
2. ตั้งค่า Rotation เป็น 225 เพื่อให้ส่วนสีฟ้าของลำดับสีของคุณแสดงในมุมซ้ายบนและมุมขวาล่าง
3. ตั้งค่า Transparency เป็นลำดับหมายเลขที่ทำให้แรงดันดูเหมือนกำลังระยิบระยับ
  1. คลิกที่คุณสมบัติ Transparency จากนั้นคลิกที่ปุ่ม ⋯ เมนูป๊อปอัปลำดับหมายเลขจะแสดงขึ้น แต่ละสี่เหลี่ยมที่จุดเริ่มต้นและจุดสิ้นสุดของลำดับหมายเลขคือจุดสำคัญที่กำหนดค่าของความโปร่งใสของคุณสมบัติในจุดนั้นของภาพจากซ้ายไปขวา
  2. ตั้งค่าคุณสมบัติเวลาและค่าต่อไปนี้ตลอดลำดับหมายเลข:
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
ทำซ้ำ ImageLabel จากขั้นตอนที่ 2
เลือกวัตถุ UIGradient ภายในป้ายซ้ำ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Rotation เป็น -45 เพื่อพลิกภาพให้เกือบสะท้อนกันตามแกน Y
2. ปรับ Transparency เพื่อทำให้การระยิบระยับดูเป็นธรรมชาติมากขึ้น
  1. คลิกที่คุณสมบัติ Transparency จากนั้นคลิกที่ปุ่ม ⋯ เมนูป๊อปอัปลำดับหมายเลขจะแสดงขึ้น
  2. เลือกกรอบที่สาม จากนั้นคลิกที่ปุ่ม Delete
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์สถานที่ตัวอย่าง Laser Tag ที่แสดงหน้าจอแรงดันในขณะที่ผู้เล่นเข้าร่วมหรือกลับเข้ารอบ

สคริปต์ไคลเอนต์ ReplicatedStorage.ForceFieldClientVisuals ต่อไปนี้จะแทนที่ภาพลักษณ์ ForceField เริ่มต้นด้วยวัตถุ StarterGui.ForceFieldGui เมื่อผู้เล่นโหลดเข้าสู่เกมและเกิดที่ SpawnLocation ที่มีคุณสมบัติ Duration ที่มากกว่า 0 พฤติกรรมเริ่มต้นในทุกเกมคือการให้ภาพอวตาร์ของพวกเขามีลูกบอลป้องกันสีน้ำเงินที่ชั่วคราวป้องกันไม่ให้พวกเขาสูญเสียสุขภาพ

สคริปต์นี้เริ่มต้นด้วยการฟังเมื่อ ForceField ถูกเพิ่มไปยังตัวละคร ปิดภาพลักษณ์แรงดันมุมมองบุคคลแรกเริ่มต้น จากนั้นเปิดใช้งานวัตถุ ForceFieldGui ScreenGui โปรดทราบว่าสิ่งนี้จะ ไม่ ส่งผลกระทบต่อภาพลักษณ์บุคคลที่สามเมื่อผู้เล่นมองไปที่ผู้เล่นคนอื่นที่เกิดใหม่กลับเข้าสู่เกม

First-person force field visuals include a futuristic hexagonal grid on the perimeter of the screen. — ภาพลักษณ์แรงดันบุคคลแรก

Third-person force field visuals include a blue sparkling orb around the player spawning into the game. — ภาพลักษณ์แรงดันบุคคลที่สาม

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- หากผู้เล่นเกิดที่จุดเกิดที่ปิดการใช้งานแรงดัน
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

ตอนนี้ ทุกครั้งที่ผู้เล่นเข้าร่วมหรือกลับเข้ารอบหลังจากการเกิดใหม่ หน้าจอ UI แรงดันใหม่จะแสดงแทนที่ภาพลักษณ์แรงดันบุคคลแรกเริ่มต้น ForceField

หน้าจอเกิดใหม่

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับพฤติกรรมการเกิดใหม่ที่กำหนดเองในเกมเลเซอร์แท็กตัวอย่าง โปรดดูที่ Respawn Characters ในหลักสูตร Gameplay Scripting

เพื่อสร้างหน้าจอเกิดใหม่ในเกม Laser Tag ตัวอย่าง:

สร้างแบนเนอร์ข้อมูลกลาง
1. แทรก ImageLabel ลงใน OutStateGui ScreenGui
  1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
  2. เลื่อนเมาส์ไปที่วัตถุ OutStateGui ของมัน จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
  3. จากเมนูบริบท ให้แทรก ImageLabel
2. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ไว้ตรงกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนลงล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายไว้ตรงกลางของภาชนะ (50% จากซ้ายไปขวาของ ScreenGui แม่ และ 50% จากบนลงล่างของ ScreenGui แม่)
  4. ตั้งค่า Size เป็น {0.48, 0},{0.06, 0} เพื่อทำให้ป้ายกว้างขึ้น (48% แนวนอนและ 6% แนวตั้งของ ScreenGui แม่)
  5. ตั้งค่า Name เป็น Block
  6. ตั้งค่า Image เป็น rbxassetid://14304827265 เพื่อทำให้ภาพเป็นรูปสี่เหลี่ยมคางหมู
  7. ตั้งค่า ImageColor เป็น 0,0,0 เพื่อทำให้สี่เหลี่ยมคางหมูเป็นสีดำ
  8. ตั้งค่า ImageTransparency เป็น 0.3 เพื่อลดความทึบของป้ายลง 30% และให้ตรงกับองค์ประกอบ UI สีดำทั้งหมดในเกม
3. แทรก UIAspectRatioConstraint ลงใน Block เพื่อให้แน่ใจว่าสัดส่วนของป้ายและองค์ประกอบ UI ลูกหลานยังคงเหมือนเดิมไม่ว่าจะมีขนาดหน้าจอของผู้เล่นอย่างไร
4. เลือกข้อจำกัดใหม่ จากนั้นในหน้าต่าง Properties ตั้งค่า AspectRatio เป็น 13.78
5. แทรก TextLabel ลงใน Block สำหรับข้อความข้อมูล
6. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ไว้ตรงกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนลงล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายไว้ตรงกลางของป้ายแม่ (50% จากซ้ายไปขวาของป้ายแม่ และ 50% จากบนลงล่างของป้ายแม่)
  4. ตั้งค่า Size เป็น {.85, 0},{0.55, 0} เพื่อให้ข้อความสามารถใช้พื้นที่ส่วนใหญ่ของสี่เหลี่ยมคางหมู (85% แนวนอนและ 55% แนวตั้งของป้ายแม่)
  5. ตั้งค่า Name เป็น BodyTextLabel
  6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสุนทรียศาสตร์ที่ทันสมัย
  7. ตั้งค่า Weight เป็น Bold เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้งค่า Text เป็น Respawning…
  9. ตั้งค่า TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว
  10. เปิดใช้งาน TextScaled
สร้างหัวเรื่อง
1. แทรก ImageLabel ลงใน Block
2. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 1 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ไว้ตรงกลางด้านล่างของมัน (50% จากซ้ายไปขวาของป้าย และ 100% จากบนลงล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0, 0} เพื่อกำหนดป้ายไว้ที่ด้านบนกลางของป้ายแม่ (50% จากซ้ายไปขวาของป้ายแม่ และ 0% จากบนลงล่างของป้ายแม่)
  4. ตั้งค่า Size เป็น {0.46, 0},{0.56, 0} เพื่อทำให้ป้ายกว้างขึ้น (46% แนวนอนและ 56% แนวตั้งของป้ายแม่)
  5. ตั้งค่า Name เป็น Header
  6. ตั้งค่า Image เป็น rbxassetid://14304826985 เพื่อทำให้ภาพเป็นการจางหลายทิศทาง
  7. ตั้งค่า ImageColor เป็น 245, 46, 46 เพื่อทำให้การจางเป็นสีแดงเพื่อบ่งบอกว่าผู้เล่นไม่สามารถใช้งานได้ชั่วคราวในขณะที่พวกเขาถูกแท็กออกจากรอบ
3. แทรก TextLabel ลงใน Header สำหรับข้อความข้อมูล
4. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ไว้ตรงกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนลงล่างของป้าย)
  2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายโปร่งใสทั้งหมด
  3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายไว้ตรงกลางของป้ายแม่ (50% จากซ้ายไปขวาของป้ายแม่ และ 50% จากบนลงล่างของป้ายแม่)
  4. ตั้งค่า Size เป็น {.85, 0},{0.55, 0} เพื่อให้ข้อความสามารถใช้พื้นที่ส่วนใหญ่ของการจาง (85% แนวนอนและ 55% แนวตั้งของป้ายแม่)
  5. ตั้งค่า Name เป็น HeaderTextLabel
  6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสุนทรียศาสตร์ที่ทันสมัย
  7. ตั้งค่า Weight เป็น Black เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้งค่า Text เป็น TAGGED - YOU'RE OUT!
  9. ตั้งค่า TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว
  10. เปิดใช้งาน TextScaled
สร้างการจางรอบขอบของหน้าจอ
1. แทรก ImageLabel ลงใน OutStateGui
2. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ไว้ตรงกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนลงล่างของป้าย)
  2. ตั้งค่า BackgroundColor3 เป็น 0,0,0 เพื่อกำหนดสีพื้นหลังของป้ายเป็นสีดำ
  3. ตั้งค่า BackgroundTransparency เป็น 0.5 เพื่อทำให้พื้นหลังของป้ายโปร่งใสครึ่งหนึ่ง
  4. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายไว้ที่กลางของภาชนะ (50% จากซ้ายไปขวาของ ScreenGui แม่ และ 50% จากบนลงล่างของ ScreenGui แม่)
  5. ตั้งค่า Size เป็น {1, 0},{1, 0} เพื่อทำให้ป้ายกว้างไปทั่วทั้งหน้าจอ (100% แนวนอนและ 100% แนวตั้งของ ScreenGui แม่)
  6. ตั้งค่า ZIndex เป็น -1 เพื่อแสดงการจางอยู่ด้านหลังองค์ประกอบ UI อื่น ๆ
  7. ตั้งค่า Name เป็น Header
  8. ตั้งค่า Image เป็น rbxassetid://14309518613 เพื่อทำให้ภาพเป็นการจางขอบ
  9. ตั้งค่า ImageTransparency เป็น 0.1 เพื่อทำให้การจางโปร่งใสเล็กน้อย
เพื่อปรับปรุงประสิทธิภาพ คุณสามารถข้ามสินทรัพย์ภาพและใช้วัตถุ UIGradient แทนด้วยลำดับความโปร่งใสที่กำหนดเอง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเทคนิคการจางนี้ โปรดดูที่ UI Appearance Modifiers - Gradient
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์สถานที่ตัวอย่าง Laser Tag ที่แสดงหน้าจอเกิดใหม่เมื่อสุขภาพของผู้เล่นลดลงเป็นศูนย์ และพวกเขากำลังอยู่ในกระบวนการเกิดใหม่กลับไปยังโซนเกิดของทีมของพวกเขา

สคริปต์ไคลเอนต์ ReplicatedStorage.PlayerStateHandler ต่อไปนี้มีฟังก์ชันที่กระตุ้นพฤติกรรมประเภทต่าง ๆ ตามคุณสมบัติ playerState การตอบสนองของเหตุการณ์ทั้งหมดจะถูกจัดกลุ่มอย่างมีเหตุผลในสคริปต์นี้เพราะพวกเขาต้องการพฤติกรรมที่คล้ายกันในการเปิดใช้งานหรือปิดการใช้งานการควบคุมของผู้เล่น การเคลื่อนไหวของกล้อง และเลเยอร์ UI ใดที่มองเห็นได้

เมื่อสุขภาพของผู้เล่นลดลงเป็นศูนย์ สถานะ playerState ของพวกเขาจะกลายเป็น TaggedOut ซึ่งจะกระตุ้นฟังก์ชัน onTaggedOut() onTaggedOut() จะกระตุ้นพฤติกรรมต่อไปนี้ทันที:

ผู้เล่นไม่สามารถเคลื่อนที่ในสนามได้
ผู้เล่นไม่สามารถเคลื่อนที่กล้องได้
ผู้เล่นไม่สามารถใช้บลาสเตอร์ของพวกเขาได้
StarterGui.OutStateGui จะเปิดใช้งานเฉพาะ

เมื่อผู้เล่นเกิดใหม่ สถานะ playerState ของพวกเขาจะกลายเป็น SelectingBlaster ซึ่งจะกระตุ้นฟังก์ชัน onSelectingBlaster() onSelectingBlaster() จะเปิดใช้งาน StarterGui.PickABlasterGui โดยเฉพาะ ซึ่งจะปิดหน้าจอเกิดใหม่โดยอัตโนมัติ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเงื่อนไขเหล่านี้ โปรดดูที่ Handle Client State ในหลักสูตร Gameplay Scripting

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- ปิดการใช้งานเลเยอร์ UI ทั้งหมด ยกเว้นข้อยกเว้นที่กำหนด
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers มีรายการของ guis ที่ควรตั้งค่าให้เปิดใช้งานเฉพาะ
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- เปิดใช้งานกล้องเพื่อให้ผู้เล่นสามารถมองไปรอบ ๆ ขณะเลือกบลาสเตอร์
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- ปิดการใช้งานบลาสเตอร์ขณะเลือกบลาสเตอร์
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- เปิดใช้งานการเคลื่อนที่ของผู้เล่นหลังจากเลือกบลาสเตอร์
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- เปิดใช้งานบลาสเตอร์ขณะเล่น
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- กำหนดเวลาการทำลายแรงดันเมื่อผู้เล่นเริ่มเล่น
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- ปิดการใช้งานการควบคุมขณะถูกแท็กออก
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- ปิดการใช้งานบลาสเตอร์ขณะถูกแท็กออก
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- เปิดใช้งานการควบคุมขณะอยู่ในล็อบบี้
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- ซ่อน HUD ทั้งหมดขณะอยู่ในล็อบบี้
	setGuiExclusivelyEnabled(nil)

	-- ปิดการใช้งานบลาสเตอร์ขณะอยู่ในล็อบบี้
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`Invalid player state ({newPlayerState})`)
	end
end

-- จัดการสถานะผู้เล่นเริ่มต้นหากตั้งค่าไว้
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- จัดการการอัปเดตสถานะผู้เล่นในอนาคต
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงยังคงถูกนำไปใช้หลังจากการเกิดใหม่
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

ตอนนี้ ทุกครั้งที่สุขภาพของผู้เล่นลดลงเป็นศูนย์ หน้าจอเกิดใหม่จะแสดงจนกว่าผู้เล่นจะเกิดใหม่กลับไปยังโซนเกิดของพวกเขา

ตอนนี้ที่คุณคุ้นเคยกับ GuiObjects ที่ใช้บ่อยสำหรับ UI บนหน้าจอ ลองสร้างวัตถุ RoundResultsGui ScreenGui และลูกหลานทั้งหมดสำหรับการแสดงผลบนหน้าจอเมื่อผู้เล่นชนะหรือแพ้การแข่งขัน คุณสามารถใช้ไฟล์ตัวอย่างเกมเลเซอร์แท็ก Laser Tag .rbxl เป็นข้อมูลอ้างอิง หรือปรับค่าต่าง ๆ เพื่อให้ตรงกับความต้องการของเกมของคุณ

สร้างวัตถุ SurfaceGui

เพื่อแสดง UI บนพื้นผิวของชิ้นส่วนในพื้นที่ 3D ที่ตอบสนองต่อโลจิกการเขียนสคริปต์สำหรับ แต่ละผู้เล่นแต่ละคน คุณสามารถเชื่อมโยงวัตถุ SurfaceGui กับชิ้นส่วนที่คุณต้องการแสดง UI ภายในบริการ ReplicatedStorage เทคนิคนี้ทำให้แน่ใจว่า UI และโลจิกการเขียนสคริปต์ของคุณมีให้ทั้งเซิร์ฟเวอร์และไคลเอนต์ของผู้เล่นแต่ละคน

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

ในการสร้างวัตถุ SurfaceGui:

ในหน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่บริการ ReplicatedStorage จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
จากเมนูบริบท ให้แทรกวัตถุ Part
แทรกวัตถุ ScreenGui ลงในชิ้นส่วน
เปลี่ยนชื่อ SurfaceGui ตามบริบทขององค์ประกอบ UI ลูกหลานของมัน
ทำซ้ำกระบวนการนี้สำหรับทุกองค์ประกอบ UI ที่คุณต้องการแสดงบนพื้นผิวของชิ้นส่วนในพื้นที่ 3D

เมตรเวลาคูลดาวน์

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

เพื่อสร้างเมตรเวลาคูลดาวน์ในเกม Laser Tag ตัวอย่าง:

สร้างชิ้นส่วนเพื่อถือวัตถุ SurfaceGui ของคุณ
1. ในหน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่ Workspace จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
2. จากเมนูบริบท ให้แทรกชิ้นส่วน block นี่เป็นตำแหน่งชั่วคราวสำหรับชิ้นส่วนเพื่อให้คุณสามารถมองเห็นการเปลี่ยนแปลงในแต่ละขั้นตอนของกระบวนการ
วางตำแหน่งและจัดแนวชิ้นส่วนรอบตำแหน่งที่ผู้เล่นจะถือบลาสเตอร์ของตน จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Transparency เป็น 1 เพื่อทำให้ชิ้นส่วนโปร่งใสทั้งหมด
2. ตั้งค่า Name เป็น CooldownBarPrefab
3. ตั้งค่า Size เป็น 0.169, 0.027, 2.537 เพื่อปรับขนาดชิ้นส่วนให้มีความยาวประมาณบลาสเตอร์
4. ปิดการใช้งาน CanCollide และ CanQuery
แทรก SurfaceGui ลงใน CooldownBarPrefab
เลือก SurfaceGui ใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Face เป็น Top เพื่อให้ UI แสดงหันขึ้น
2. ตั้งค่า LightInfluence และ MaxDistance เป็น 0
3. ตั้งค่า PixelsPerStud เป็น 200
สร้างบาร์สีดำ
1. แทรก ImageLabel ลงใน SurfaceGui
2. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่าดีฟอลต์ Image
  2. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ไว้ตรงกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนลงล่างของป้าย)
  3. ตั้งค่า BackgroundColor3 เป็น 0,0,0 เพื่อกำหนดสีพื้นหลังของป้ายเป็นสีดำ
  4. ตั้งค่า BackgroundTransparency เป็น 0.4 เพื่อทำให้พื้นหลังของป้ายโปร่งใสเล็กน้อย
  5. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายไว้ตรงกลางของ SurfaceGui (50% จากซ้ายไปขวาของ SurfaceGui แม่ และ 50% จากบนลงล่างของ SurfaceGui แม่)
  6. ตั้งค่า Size เป็น {1, 0},{1, 0} เพื่อทำให้ป้ายกว้างไปทั่วทั้งชิ้นส่วน (100% แนวนอนและ 100% แนวตั้งของ SurfaceGui แม่)
  7. ตั้งค่า Name เป็น Container
ทำให้มุมของ Container โค้งมน
1. แทรกวัตถุ UICorner ลงใน Container
2. เลือก UICorner จากนั้นในหน้าต่าง Properties ตั้งค่า CornerRadius เป็น 0.15, 0 เพื่อทำให้มุมโค้งมนเล็กน้อย
สร้างบาร์สีแดง
1. แทรก ImageLabel ลงใน Container
2. เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบค่าดีฟอลต์ Image
  2. ตั้งค่า AnchorPoint เป็น 1, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายใหม่ไว้ที่กลางด้านขวาของมัน (100% จากซ้ายไปขวาของป้าย และ 50% จากบนลงล่างของป้าย)
  3. ตั้งค่า BackgroundColor3 เป็น 172, 13, 13 เพื่อกำหนดสีพื้นหลังของป้ายเป็นสีแดงเข้ม
  4. ตั้งค่า BackgroundTransparency เป็น 0.2 เพื่อทำให้พื้นหลังของป้ายโปร่งใสเล็กน้อย
  5. ตั้งค่า Name เป็น Bar
  6. ตั้งค่า Position เป็น {1, 0},{0.5, 0} เพื่อกำหนดป้ายไว้ที่กลางด้านขวาของป้าย (100% จากซ้ายไปขวาของป้ายแม่ และ 50% จากบนลงล่างของป้ายแม่)
  7. ตั้งค่า Size เป็น {0, 0},{1, 0} เพื่อทำให้ป้ายยาวขึ้นไปถึงด้านบนของป้ายแม่ (0% แนวนอนและ 100% แนวตั้งของป้ายแม่) ขั้นตอนนี้ยังเป็นประโยชน์สำหรับพฤติกรรมการทวีตที่เกิดขึ้นในสคริปต์ในขั้นตอนที่ 8
ทำให้มุมของป้ายโค้งมน
1. แทรกวัตถุ UICorner ลงใน Bar
2. เลือก UICorner จากนั้นในหน้าต่าง Properties ตั้งค่า CornerRadius เป็น 0.15, 0 เพื่อทำให้มุมโค้งมนเล็กน้อย
ย้าย CooldownBarPrefab ไปยัง ReplicatedStorage
1. สร้างโครงสร้างโฟลเดอร์เพื่อจัดระเบียบวัตถุ UI ตัวอย่างใช้โฟลเดอร์ Instances ที่มีโฟลเดอร์ลูก Guis
2. ย้าย CooldownBarPrefab ไปยัง Guis
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์สถานที่ตัวอย่าง Laser Tag ที่เชื่อมต่อเมตรเวลาคูลดาวน์กับบลาสเตอร์ของผู้เล่น จากนั้นทำให้บาร์สีแดงเคลื่อนไหวหลังจากที่ผู้เล่นยิงบลาสเตอร์ของตน

สคริปต์ไคลเอนต์ ReplicatedStorage.FirstPersonBlasterVisuals ต่อไปนี้จัดการโลจิกภาพทั้งหมดสำหรับบลาสเตอร์บุคคลแรกของผู้เล่น มันต้องการชุดของโมดูลสคริปต์ที่ทำงานร่วมกันเพื่อตั้งค่าภาพลักษณ์บลาสเตอร์ที่รู้สึกสมจริงมากขึ้นสำหรับการเล่นเกมเลเซอร์แท็ก รวมถึง FirstPersonBlasterVisuals.addCooldownBar และ FirstPersonBlasterVisuals.runCooldownBarEffect

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")

local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)

local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)

local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent

local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)

local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera

local rigModel = nil
local cooldownBar = nil
local animations = {}

local function addFirstPersonVisuals()
	local blasterConfig = getBlasterConfig()

	-- เพิ่ม rig บุคคลแรก
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- เพิ่มบาร์คูลดาวน์
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation in animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- สิ่งนี้ยังทำลายบาร์คูลดาวน์เนื่องจากมันถูกเชื่อมโยงกับ rig
		rigModel:Destroy()
		rigModel = nil
	end
end

-- เรียกใช้เอฟเฟกต์ภาพบุคคลแรกเมื่อเกิดการระเบิด
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- เชื่อมโยง rig กับกล้องหากมีอยู่
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- อัปเดต CFrame ของ rig ให้สัมพันธ์กับตำแหน่งของกล้องและ RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- จัดการการเปลี่ยนแปลงภาพเมื่อประเภทบลาสเตอร์เปลี่ยนขณะเล่น
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- จัดการการเปลี่ยนแปลงภาพเมื่อสถานะผู้เล่นเปลี่ยน
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- ลบภาพเมื่อผู้เล่นกำลังเลือกบลาสเตอร์หรืออยู่ในล็อบบี้
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- เพิ่มภาพกลับเมื่อผู้เล่นเสร็จสิ้นการเลือกบลาสเตอร์
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

ตอนนี้ ทุกครั้งที่ผู้เล่นยิงบลาสเตอร์ของตน เมตรเวลาคูลดาวน์จะเคลื่อนไหวเพื่อสื่อสารเมื่อใดที่ผู้เล่นสามารถยิงได้อีกครั้ง

สร้างวัตถุ BillboardGui

เพื่อแสดงองค์ประกอบ UI ภายในพื้นที่ 3D ที่ตอบสนองต่อโลจิกการเขียนสคริปต์และหันหน้าไปทางกล้องของผู้เล่นเสมอไม่ว่าจะมุมมองของพวกเขาจะเป็นอย่างไร เช่น ชื่อผู้เล่นหรือเครื่องหมายแผนที่ คุณสามารถสร้างวัตถุ BillboardGui เป็นลูกของ BasePart หรือ Attachment ที่มีอยู่ในพื้นที่ 3D

เกมเลเซอร์แท็กตัวอย่างมีวัตถุ BillboardGui สองตัวแยกกันภายในบริการ ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - แสดงวงกลมหรือสีเขียวเหนือศีรษะของผู้เล่นแต่ละคนเมื่อพวกเขาอยู่ในรอบ
TaggedOutIndicatorGuiPrefab - แสดงเหนือศีรษะของผู้เล่นเมื่อพวกเขาถูกแท็กออกจากรอบ

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

ในการสร้างวัตถุ BillboardGui:

ในหน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่ BasePart หรือ Attachment จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
จากเมนูบริบท ให้แทรกวัตถุ BillboardGui
เปลี่ยนชื่อ BillboardGui ตามบริบทขององค์ประกอบ UI ลูกหลานของมัน
ทำซ้ำกระบวนการนี้สำหรับทุกองค์ประกอบ UI ที่คุณต้องการแสดงเหนือศีรษะของผู้เล่น

ตัวบ่งชี้ทีม

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

เพื่อสร้างตัวบ่งชี้ทีมในเกม Laser Tag ตัวอย่าง:

แทรกวัตถุ BillboardGui ลงใน rig ชั่วคราว
1. จากแท็บ Home หรือ Avatar ในแถบเครื่องมือ คลิก Character
2. เลือกจากตัวเลือกที่มีอยู่ ตัวอย่างใช้ประเภท rig R15 รูปร่างร่างกาย หญิง และอวตาร์ Rthro rig จะแสดงทั้งในมุมมอง 3D และในหน้าต่าง Explorer ภายใต้ชื่อ Rig
3. ในหน้าต่าง Explorer ให้ไปที่เมช Head ของ rig จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
4. จากเมนูบริบท ให้แทรก BillboardGui
เลือก BillboardGui ใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า LightInfluence เป็น 0 เพื่อป้องกันไม่ให้แสงจากสิ่งแวดล้อมส่งผลต่อสีของตัวบ่งชี้
2. ตั้งค่า Name เป็น OtherPlayerIndicatorPrefab
3. ตั้งค่า Size เป็น {0, 10},{0, 10} เพื่อทำให้ป้ายเล็กลงอย่างมีนัยสำคัญ
4. ตั้งค่า StudsOffsetWorldSpace เป็น 0, 4, 0 เพื่อวางตำแหน่งเหนือศีรษะของ rig
แทรกวัตถุ Frame ลงใน OtherPlayerIndicatorPrefab
เลือกกรอบใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของกรอบใหม่ไว้ตรงกลางของมัน (50% จากซ้ายไปขวาของป้าย และ 50% จากบนลงล่างของป้าย)
2. ตั้งค่า BackgroundColor3 เป็น 255, 3, 0 เพื่อกำหนดสีพื้นหลังของกรอบเป็นสีแดงในฐานะสีแทนที่
3. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดกรอบไว้ตรงกลางของ BillboardGui (50% จากซ้ายไปขวาของ BillboardGui แม่ และ 50% จากบนลงล่างของ BillboardGui แม่)
4. ตั้งค่า Size เป็น {1, -2},{1, -2} เพื่อทำให้กรอบสั้นลงให้พอดีกับพื้นที่ผิวของ BillboardGui
แทรกวัตถุ UICorner ลงใน Frame เพื่อทำให้มุมทั้งหมดกลม
แทรกวัตถุ UIStroke ลงใน Frame เพื่อทำกรอบรอบวงกลมของตัวบ่งชี้
ย้าย OtherPlayerIndicatorPrefab ไปที่ ReplicatedStorage
อ้างอิงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์ตัวอย่าง Laser Tag 1A ที่แสดงตัวบ่งชี้ทีมสำหรับผู้เล่นทุกคนในรอบที่กำลังดำเนินอยู่ เว้นแต่พวกเขาจะอยู่ในทีมศัตรูและถูกบัง

สคริปต์ ReplicatedStorage.OtherPlayerIndicatorGuiSetup ต่อไปนี้จะทำงานเมื่อผู้เล่นเกิดในสนามรบสำหรับรอบที่กำลังดำเนินอยู่ มันจะเชื่อมโยงตัวบ่งชี้ทีมโดยการเรียกฟังก์ชัน addIndicatorToCharacter() ซึ่งจะค้นหาวัตถุ Head ของผู้เล่นแต่ละคนที่เข้าร่วมในรอบ หากพวกเขายังไม่มีตัวบ่งชี้ทีม สคริปต์จะทำการโคลนและเพิ่ม UI otherPlayerIndicatorPrefab ลงใน Head ของตัวละคร และตั้งค่าสีของตัวบ่งชี้ทีมให้ตรงกับสีทีมของพวกเขา

หากผู้เล่นคนอื่นอยู่ในทีมเดียวกัน ตัวบ่งชี้ทีมจะแสดงเสมอ แม้ว่าพวกเขาจะซ่อนอยู่หลังวัตถุในพื้นที่ 3D; หากผู้เล่นคนอื่นอยู่ในทีมศัตรู ตัวบ่งชี้ทีมจะแสดงเฉพาะเมื่อไม่มีวัตถุในพื้นที่ 3D ที่จะบังพวกเขา

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab

local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?

local function removeIndicatorFromPlayer(player: Player)
	if not player.Character then
		return
	end

	local head = player.Character:WaitForChild("Head", 3)
	if not head then
		return
	end

	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
	if gui then
		gui:Destroy()
	end
end

local function addIndicatorToCharacter(otherCharacter: Model?)
	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
	if not otherPlayer then
		return
	end

	task.spawn(function()
		local otherHead = otherCharacter:WaitForChild("Head", 3)
		if not otherHead then
			return
		end

		-- Only add indicators to players participating in the round
		if not otherPlayer.Team then
			return
		end

		-- Avoid adding duplicate indicators, creating a new one only if it doesn't exist
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- The indicator is always on top only if the player is friendly

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

ตอนนี้ ทุกครั้งที่ผู้เล่นอยู่ในรอบที่กำลังดำเนินอยู่ ตัวบ่งชี้ทีมจะแสดงอยู่เหนือหัวของผู้เล่นคนอื่น เว้นแต่พวกเขาจะอยู่ในทีมศัตรูและอยู่หลังวัตถุ

ตัวบ่งชี้ที่ถูกแท็กออก

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

เพื่อสร้างตัวบ่งชี้ที่ถูกแท็กออกให้เหมือนกันภายในเกมตัวอย่าง Laser Tag:

แทรกวัตถุ BillboardGui ลงใน rig ชั่วคราวเพื่อให้คุณสามารถมองเห็นการเปลี่ยนแปลงในแต่ละขั้นตอนของกระบวนการ
1. จากแท็บ Home หรือ Avatar ในแถบเครื่องมือ คลิก Character
2. เลือกจากตัวเลือกที่มีอยู่ ตัวอย่างใช้ประเภท rig R15 รูปร่างร่างกาย masculine และอวตาร Rthro rig จะแสดงทั้งในมุมมอง 3D และในหน้าต่าง Explorer ภายใต้ชื่อ Rig
3. ในหน้าต่าง Explorer นำทางไปยัง mesh Head ของ rig จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
4. จากเมนูบริบท แทรก BillboardGui
เลือก BillboardGui ใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า LightInfluence เป็น 0 เพื่อป้องกันไม่ให้แสงจากสิ่งแวดล้อมมีผลต่อสีของตัวบ่งชี้
2. ตั้งค่า Name เป็น TaggedOutIndicatorGuiPrefab
3. ตั้งค่า Size เป็น {3, 0},{0.5, 0} เพื่อขยายพื้นที่สำหรับป้ายชื่อ
4. ตั้งค่า StudsOffset เป็น 0, 3.25, 0 เพื่อวางมันเหนือหัวของผู้เล่น
แทรกวัตถุ ImageLabel ลงใน TaggedOutIndicatorGuiPrefab
เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายชื่ออยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
3. ตั้งค่า Name เป็น Frame
4. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายชื่ออยู่กลางของภาชนะ (50% จากซ้ายไปขวาของ BillboardGui แม่ และ 50% จากบนลงล่างของ BillboardGui แม่)
5. ตั้งค่า Size เป็น {1, 0},{1, 0} เพื่อขยายป้ายชื่อให้เต็ม BillboardGui (100% แนวนอนและ 100% แนวตั้งของ BillboardGui แม่)
6. ตั้งค่า Image เป็น rbxassetid://14304826985 เพื่อทำให้ภาพเป็นการจางหลายทิศทาง
7. ตั้งค่า ImageColor เป็น 245, 46, 46 เพื่อทำให้ป้ายชื่อมีสีแดง
เพื่อปรับปรุงประสิทธิภาพ คุณสามารถข้ามสินทรัพย์ภาพและใช้วัตถุ UIGradient แทนด้วยลำดับหมายเลขโปร่งใสที่กำหนดเอง เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเทคนิคการจางนี้ ดูที่ UI Appearance Modifiers - Gradient.
แทรกวัตถุ TextLabel ลงใน Frame
เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า AnchorPoint เป็น 0.5, 0.5 เพื่อกำหนดจุดกำเนิดของป้ายชื่ออยู่ตรงกลางของมัน (50% จากซ้ายไปขวาของป้ายชื่อ และ 50% จากบนลงล่างของป้ายชื่อ)
2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสทั้งหมด
3. ตั้งค่า Name เป็น BodyTextLabel
4. ตั้งค่า Position เป็น {0.5, 0},{0.5, 0} เพื่อกำหนดป้ายชื่ออยู่กลางของภาชนะ (50% จากซ้ายไปขวาของป้ายชื่อแม่ และ 50% จากบนลงล่างของป้ายชื่อแม่)
5. ตั้งค่า Size เป็น {0.85, 0},{0.7, 0} เพื่อให้ข้อความสามารถใช้พื้นที่ส่วนใหญ่ของพื้นที่จาง (85% แนวนอนและ 70% แนวตั้งของป้ายชื่อภาพแม่)
6. ตั้งค่า FontFace เป็น Montserrat เพื่อให้เข้ากับสไตล์อนาคต
7. ตั้งค่า Weight เป็น Bold เพื่อทำให้ฟอนต์หนาขึ้น
8. ตั้งค่า Text เป็น TAGGED
9. ตั้งค่า TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว
10. เปิดใช้งาน TextScaled
ย้าย TaggedOutIndicatorGuiPrefab ไปที่ ReplicatedStorage
อ้างอิงสคริปต์ ServerScriptService ต่อไปนี้ภายในไฟล์ตัวอย่าง Laser Tag 1A ที่แสดงตัวบ่งชี้ที่ถูกแท็กออกในขณะที่ผู้เล่นกำลังเกิดใหม่กลับไปยังโซนเกิดของทีมของพวกเขา

สคริปต์เซิร์ฟเวอร์ ServerScriptService.SetupHumanoid ต่อไปนี้จะทำงานทันทีที่ผู้เล่นโหลดเกม มันจะทำให้แน่ใจว่าเมื่อใดก็ตามที่ตัวละครของผู้เล่นถูกเพิ่มลงในโมเดลข้อมูล จะมีการเรียก setupHumanoidAsync พร้อมกับ Humanoid ของพวกเขา

local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

local function onCharacterAdded(player: Player, character: Model)
	local humanoid = character:WaitForChild("Humanoid")
	setupHumanoidAsync(player, humanoid)
end

local function onPlayerAdded(player: Player)
	-- Call onCharacterAdded if the player already has a character
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Call onCharacterAdded for all future character spawns for this player
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Call onPlayerAdded for any players already in the game
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Call onPlayerAdded for all future players
Players.PlayerAdded:Connect(onPlayerAdded)

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

ยินดีด้วยที่คุณได้ทำการเรียนรู้หลักสูตรการออกแบบส่วนติดต่อผู้ใช้เสร็จสิ้น! ตอนนี้ที่คุณมีประสบการณ์ในการสร้างสไตล์ศิลปะ การวางโครงร่างเลย์เอาต์ของคุณ และการนำการออกแบบของคุณไปใช้ใน Studio ตั้งแต่ต้นจนจบ คุณสามารถขยายโปรเจกต์ของคุณด้วย UI และฟังก์ชันการทำงานใหม่ หรือทำตามหลักสูตรการสอนเพิ่มเติม เช่น Gameplay Scripting Curriculum ที่สอนเกี่ยวกับการจัดระเบียบทั่วไปและรายละเอียดการนำไปใช้ที่สำคัญของเกมยิงเลเซอร์ตัวอย่าง ขอให้สนุกกับการสร้าง!