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

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

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

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

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

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

รับไลบรารีสินทรัพย์

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

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

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

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

**รูปสี่เหลี่ยมผืนผ้า**
rbxassetid://14304828203

**รูปสี่เหลี่ยมผืนผ้ากลับหัว**
rbxassetid://14304827304

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

**เบลอหลายทิศทาง**
rbxassetid://14304827147

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

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

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

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

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

ในการนำไลบรารีสินทรัพย์จากคลังของคุณไปยังประสบการณ์ของคุณ:

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

จำลองอุปกรณ์

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

ตัวอย่างเช่น หากคุณไม่ทดสอบ UI ของคุณในขนาดหน้าจอต่าง ๆ ผู้เล่นที่มีหน้าจอขนาดใหญ่ อาจไม่สามารถอ่านข้อความของคุณหรือแยกแยะไอคอนของคุณได้ และผู้เล่นที่มีหน้าจอขนาดเล็กอาจไม่สามารถมองเห็นพื้นที่ 3 มิติได้เนื่องจากองค์ประกอบ 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% จากด้านบนไปด้านล่างของหน้าจอเพื่อมีพื้นที่เล็กน้อย)
  4. ตั้งค่า Size เป็น {0.5, 0},{0.13, 0} ดังนั้นส่วนประกอบของกรอบจะใช้พื้นที่ขนาดใหญ่ของด้านบนสุดของหน้าจอเพื่อดึงดูดความสนใจผู้เล่น (50%ในแนวนอนและ 13% ในแนวตั้ง)
  5. ตั้งค่า Name เป็น Objective.
3. (ไม่บังคับ) แทรก 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. (ไม่บังคับ) แทรก 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. (ไม่บังคับ) แทรก 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 เป็น Tag opposing players to score points! First team to %d points wins..
  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.
สร้างขอบเขตสำหรับตัวนับทีม
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 ของ TeamBCounter เป็น 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 ที่อัพเดตตั้งค่าคำสั่งและติดตามคะแนนทีม

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


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 นี้เป็นข้อกำหนดสำคัญสำหรับประสบการณ์การยิงในมุมมองบุคคลที่หนึ่งเพราะผู้เล่นต้องสามารถ aims ปืนของตนและติดป้ายผู้เล่นทีมศัตรูได้อย่างแม่นยำ

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

ในการสร้างเป้าขึ้นมาใหม่ในประสบการณ์ตัวอย่าง 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 เพื่อให้ภาพเข้ากับภาชนะของมันและไม่ยืดขยายในขนาดหน้าจอที่แตกต่างกัน
(ไม่บังคับ) แทรก UIAspectRatioConstraint ลงใน Crosshair เพื่อให้แน่ใจว่าสัดส่วนของป้ายชื่อคงที่ไม่ว่าขนาดหน้าจอของผู้เล่นจะเป็นอย่างไร ตัวอย่างตั้งค่าคุณสมบัติ UIAspectRatioConstraint.AspectRatio เป็น 0.895.

ตัวบ่งชี้การโจมตี

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

ในการสร้างตัวบ่งชี้การโจมตีขึ้นมาใหม่ในประสบการณ์ตัวอย่าง Laser Tag:

แทรก ImageLabel ลงในวัตถุ Crosshair ImageLabel
1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
2. ชี้ไปที่วัตถุ Crosshair ลูกของมันแล้วคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
3. จากเมนูบริบท แทรก ImageLabel
เลือก ImageLabel ใหม่และในหน้าต่าง Properties,
1. ตั้งค่า Image เป็น rbxassetid://14401148736 เพื่อแสดงไอคอนตัวบ่งชี้การโจมตีรูปสี่เหลี่ยมผืนผ้า
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 เพื่อทำให้ตัวบ่งชี้การโจมตีโปร่งใสทั้งหมด สคริปต์ในขั้นตอนต่อไปจะเปลี่ยนความโปร่งใสกลับไปที่ 0 ทุกครั้งที่การโจมตีของผู้เล่นกระทบกับผู้เล่นในทีมตรงข้าม
อ้างถึงสคริปต์ ReplicatedStorage ต่อไปนี้ภายในไฟล์สถานที่ตัวอย่าง Laser Tag ที่แสดงตัวบ่งชี้การโจมตีเมื่อการโจมตีทำให้เกิดการกระทบกับผู้เล่นในทีมตรงข้าม

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


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 นี้เป็นกระบวนการที่สำคัญต่อประสบการณ์โดยรวม

ขั้นตอนต่อไปนี้จะอธิบายวิธีการสร้างภาชนะหลาย ๆ ภาชนะสำหรับกลุ่มองค์ประกอบ UI ที่แตกต่างกัน หัวเรื่องพร้อมโปรมต์ ปุ่มนำทางและเลือก และรูปแบบปุ่มปืน โมดูลที่เกี่ยวข้องกับส่วนประกอบทั้งหมดเติมความสวยงามต่าง ๆ เข้าสู่รูปแบบปุ่มปืนตามที่ 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. (ไม่บังคับ) แทรก 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 เป็น Header
  7. ตั้งค่า Image เป็น rbxassetid://14304828123 เพื่อแสดงรูปสี่เหลี่ยม
  8. ตั้งค่า ImageTransparency เป็น 0.15 เพื่อทำให้หัวข้อมีความโปร่งใส
3. (ไม่บังคับ) แทรก 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 ที่ผู้เล่นใช้เพื่อลั่นปืนบลาสเตอร์หากพวกเขากำลังเข้าถึงประสบการณ์ผ่านอุปกรณ์เคลื่อนที่หรือแท็บเล็ต ตัวอย่างประสบการณ์เลเซอร์แท็กใช้ปุ่มบลาสเตอร์ที่มีไอคอนที่แสดงถึงทั้งจุดศูนย์กลางและการยิงเพื่อสื่อสารฟังก์ชันของปุ่มโดยไม่ต้องใช้ข้อความ.

เพื่อสร้างปุ่มบลาสเตอร์ตามตัวอย่างในประสบการณ์ เลเซอร์แท็ก:

แทรก 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 ต่อไปนี้ในไฟล์สถานที่ตัวอย่าง เลเซอร์แท็ก ที่แสดงปุ่มบลาสเตอร์แบบโปรแกรมเมื่อผู้เล่นใช้การป้อนข้อมูลสัมผัสบนอุปกรณ์ที่รองรับการควบคุมสัมผัส.

สคริปต์ต่อไปนี้ต้องการชุดของโมดูลสคริปต์ที่ทำงานร่วมกันเพื่อจัดตั้งแสดงข้อมูลหน้าจอหลัก (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 ที่จัดกลุ่มนี้ใกล้เคียงกับขอบของหน้าจอเนื่องจากผู้เล่นสามารถเข้าใจข้อมูลขอบเขตนี้ได้โดยไม่ต้องเบี่ยงเบนความสนใจไปจากการเล่นเกม.

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

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

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

เพื่อสร้างส่วนประกอบตัวบ่งชี้ผู้เล่นตามที่แสดงไว้ในประสบการณ์ เลเซอร์แท็ก:

แทรก 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. Set 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. Select the new constraint, then in the Properties window, set AspectRatio to 13.78.
สร้างกล่องสำหรับภาพโปรไฟล์ของผู้เล่น.
1. แทรก ImageLabel ลงใน PlayerDisplay.
2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,
  1. ลบรหัสสินทรัพย์ที่มีอยู่ใน คุณสมบัติ 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. ลบข้อความที่มีอยู่ใน คุณสมบัติ 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.
    
    คลิกที่ปุ่ม บันทึก.
    
    ตั้งค่าแอตทริบิวต์ใหม่ 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 ต่อไปนี้ในไฟล์สถานที่ตัวอย่าง เลเซอร์แท็ก ที่แสดงตัวบ่งชี้ผู้เล่นพร้อมกับสีและไอคอนทีมที่เหมาะสมในขณะที่ผู้เล่นอยู่ในรอบ.

สคริปต์ต่อไปนี้ต้องใช้งานชุดโมดูลสคริปต์ที่ทำงานร่วมกันเพื่อจัดตั้งแสดงข้อมูล Heads Up Display (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 ที่ทับทับมุมมองเพื่อแจ้งผู้เล่นว่าพวกเขาอยู่ในสภาวะปลอดภัยจากการยิงจากทีมคู่แข่งในขณะเข้าร่วมหรือกลับเข้ามาในรอบ ตามแนวทางด้านสุนทรียศาสตร์สำหรับไอคอนจาก เลือกสไตล์ศิลปะ ประสบการณ์เลเซอร์แท็กตัวอย่างใช้รูปแบบหกเหลี่ยมโปร่งแสง เพื่อเป็นตัวแทนของฟอร์ซฟิลด์ การออกแบบนี้ไม่เพียงเสริมสร้างสไตล์ศิลปะในอนาคตสำหรับ UI ทั้งหมดในประสบการณ์ แต่ยังสื่อสารสถานะของผู้เล่นโดยไม่ต้องใช้ข้อความหรือแนวทางเพิ่มเติม

เพื่อสร้างหน้าจอฟอร์ซฟิลด์ในตัวอย่างประสบการณ์ Laser Tag:

ใส่ ImageLabel ลงใน ForceFieldGui ScreenGui object
1. ในหน้าต่าง Explorer ให้ไปที่บริการ StarterGui
2. เลื่อนเมาส์เหนือวัตถุ ForceFieldGui แล้วคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
3. จากเมนูบริบทให้ใส่ ImageLabel

1.เลือกป้ายใหม่ จากนั้นในหน้าต่าง Properties,

ตั้งค่า Image เป็น rbxassetid://14462567888
ตั้งค่า BackgroundTransparency เป็น 0.8 เพื่อทำให้ฟอร์ซฟิลด์โปร่งใส
ตั้งค่า Size เป็น {1, 0},{1, 0} เพื่อทำให้ภาพเต็มหน้าจอ (100% แนวขวางและ 100% แนวตั้งของ ScreenGui ที่เป็นพ่อแม่)
ตั้งค่า ScaleType เป็น Tile เพื่อทำให้หกเหลี่ยม tile ทั่วทั้งหน้าจอ
ตั้งค่า 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 experience. — การมองเห็นฟอร์ซฟิลด์มุมมองบุคคลที่สาม


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 หน้าจอแทนที่การมองเห็นฟอร์ซฟิลด์แบบมุมมองบุคคลแรกเริ่มต้น

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

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

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

เพื่อสร้างหน้าจอการเกิดใหม่ในประสบการณ์ Laser Tag:

สร้างป้ายข้อมูลศูนย์กลาง
1. ใส่ ImageLabel ลงใน OutStateGui ScreenGui object
  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 ที่แสดงหน้าจอการเกิดใหม่เมื่อสุขภาพของผู้เล่นถึงศูนย์ และพวกเขาอยู่ในกระบวนการเกิดใหม่กลับสู่โซนเกิดของทีมของพวกเขา

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

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

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

เมื่อผู้เล่นเกิดใหม่ สถานะ playerState ของพวกเขาจะกลายเป็น SelectingBlaster ซึ่งกระตุ้นฟังก์ชัน onSelectingBlaster() จากนั้น onSelectingBlaster() จะเปิดใช้งานเฉพาะ StarterGui.PickABlasterGui ซึ่งจะทำให้หน้าจอการเกิดใหม่ปิดการใช้งานอัตโนมัติ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเงื่อนไขเหล่านี้ ดูที่ จัดการสถานะคลienten ในหลักสูตร 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 Layer ทั้งหมด ยกเว้นข้อยกเว้นที่กำหนด
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(`สถานะผู้เล่นไม่ถูกต้อง ({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 experience เป็นอ้างอิง หรือปรับค่าต่างๆ ตามความต้องการของประสบการณ์ของคุณ

สร้างวัตถุ SurfaceGui

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

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

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

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

เมตรระยะเวลา

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

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

สร้างชิ้นส่วนเพื่อถือวัตถุ SurfaceGui ของคุณ
1. ในหน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่ Workspace แล้วคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
2. จากเมนูบริบทให้ใส่ block part นี่เป็นที่ตั้งชั่วคราวสำหรับชิ้นส่วนเพื่อให้คุณสามารถมองเห็นการเปลี่ยนแปลงในแต่ละขั้นตอนของกระบวนการ
ตำแหน่งและการจัดการชิ้นส่วนให้ถูกต้องตามตำแหน่งที่ตัวละครของผู้เล่นจะถือปืนของพวกเขา จากนั้นในหน้าต่าง Properties,
1. ตั้งค่า Transparency เป็น 1 เพื่อทำให้ชิ้นส่วนโปร่งใสทั้งหมด
2. ตั้งชื่อ 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} เพื่อวางตำแหน่งป้ายกลางของคอนเทนเนอร์ (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} เพื่อปรับป้ายไปที่กลางด้านขวาของ Container (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()

	-- เพิ่มสิ่งที่ได้มุมมอง
	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
		-- ปรับรุ่นให้สัมพันธ์กับตำแหน่งของกล้องในตำแหน่ง 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 ของมันเพื่อสอดคล้องกับวัตถุประสงค์ของแต่ละบรรจุภัณฑ์ ในทันทีถัดไป คุณจะได้เรียนรู้วิธีการดำเนินการส่วนแรกที่มีลักษณะเดียวกันของบิลบอร์ดภายในประสบการณ์เลเซอร์แท็กตัวอย่าง คุณสามารถปรับการทำงานและรูปแบบของกระบวนการนี้เพื่อให้เข้ากับคุณสมบัติของประสบการณ์ของคุณเอง

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

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

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

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

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

ใส่วัตถุ BillboardGui ลงใน rig ชั่วคราว
1. จากแท็บ Home หรือ Avatar ของแถบเมนู คลิกที่ Character
2. เลือกจากตัวเลือกที่มีอยู่ ตัวอย่างจะใช้ประเภท rig R15 รูปร่างของร่างกาย Feminine และอวาตาร์ Rthro ริปจะถูกแสดงทั้งในมุมมอง 3D และในหน้าต่าง Explorer ภายใต้ชื่อ Rig
3. ในหน้าต่าง Explorer ให้ไปที่ mesh Head ของ rig จากนั้นคลิกที่ไอคอน ⊕ เมนูบริบทจะแสดงขึ้น
4. จากเมนูบริบทให้ใส่ BillboardGui
เลือก BillboardGui ใหม่แล้วในหน้าต่าง Properties,
1. ตั้งค่า LightInfluence เป็น 0 เพื่อป้องกันไม่ให้แสงจากสภาพแวดล้อมมีผลต่อสีของตัวบ่งชี้
2. ตั้งชื่อเป็น 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} ตั้งกรอบที่กลางของค่าแม่ (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, และ avatar Rthro. Rig จะแสดงทั้งในviewport 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 ที่จะสอนเกี่ยวกับการจัดระเบียบทั่วไปและรายละเอียดการดำเนินการสำคัญของประสบการณ์เลเซอร์แท็กตัวอย่าง ขอให้สนุกกับการสร้าง!