ใส่ไว้ในการออกแบบใน Studio

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

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

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

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

รับคลังของสินทรัพย์

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

คุณสามารถเพิ่มส่วนใหญ่ของห้องสมุดในสินค้าคงคลังของคุณใน Studio โดยการคลิกลิงค์ เพิ่มในสินค้าคงคลัง ในส่วนต่อไปนี้ คลังไอเท็ม

เพื่อให้ได้ล็อกอันสมบัติจากสินค้าคงคลังของคุณไปยังประสบการณ์ของคุณ:

1. ในแถบเมนู เลือก ดู แท็บ

2. ในส่วน แสดง คลิก กล่องเครื่องมือ รูป แสดง กล่องเครื่องมือ ขึ้นมา

   

3. ในหน้าต่าง กล่องเครื่องมือ คลิกที่แท็บ กระเป๋า แสดงผลการเรียงลำดับ โมเดลของฉัน

   

4. คลิกเมนูดรอปดาวน์แล้วเลือก แพ็กเกจของฉัน เรียงลำดับ

5. คลิกที่ ชิ้นส่วน UI หน้าจอสุดท้าย แล้วใน หน้าต่าง Explorer เลือก ส่วนประกอบที่เสร็จสิ้นแล้ว แล้วลากพวกเขาไปยัง 1> StarterGui บริการ1> คุณสามารถ

จําลองอุปกรณ์

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

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

เพื่อจะจำลองหน้าจอของคุณให้เล็กที่สุด:

1. ในแถบเมนู เลือก ทดสอบ แท็บ

2. ในส่วน จําลอง คลิก อุปกรณ์ ระเบียงมุมมองเปลี่ยนเพื่อสะท้อนอัตราส่วนรูปร่างของแล็ปท็อปเฉลี่ย

   

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

   

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

   

สร้างวัตถุ ScreenGUI

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

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

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

หลังจากที่คุณสร้างวัตถุ ScreenGui คุณสามารถสร้างและปรับแต่งลูกของมันตามวัตถุประสงค์ของแต่ละคอนเทนเนอร์ได

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

1. ใน หน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่บริการ StarterGui แล้วคลิกที่ไอคอน ⊕ เมนู上下컨เท็กส์.

2. ใส่ ScreenGUI

   

3. เปลี่ยนชื่อ ScreenGUI ตามความเป็นไปของรายการ UI ของเด็ก

4. ทำซ้ำกระบวนการนี้สำหรับแต่ละกลุ่มของรายการ UI ที่คุณต้องการแสดงบนหน้าจอของผู้เล่นทุกราย

   

UI เป้าหมาย

ตามความเป็นหัวหน้าของหน้าสีขาวจาก Wireframe Your Layouts นี้ส่วนนี้สอนคุณวิธีการใช้งาน UI เกมการรวมกลุ่ม UI นี้เกือบจะอยู่ด้า

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

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

1. สร้างคอนเทนเนอร์สำหรับส่วนประกอบทั้งหมด

   1. ใส่ โค้งกาศ ใน HUDGui วัตถุ ScreenGui

      1. ใน หน้าต่าง Explorer ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุ HUDGui ของลูกของมันแล้วคลิกที่ไอคอน ⊕ ตัวอักษร โค้งสมุดบรรทัด. เมนูบริบทัศน์แบบขั้นสูงปรากฏขึ้น
      2. จากเมนูบริบทัศน์ ใส่ โครงสร้าง

      

   2. เลือก เฟรมใหม่ แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง จุดศูนย์กลางของแนวโน้มในการเรียงลำดับตามลำดับของช่องตรงไปยังด้านบนของตัวเอง (50% จากด้านซ้ายไปขวาของแนวโน้ม และ 0% จากด้านบนไปของแนวโน้ม)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของเฟรมเป็นโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น 0.5, 0,0.03, 0 เพื่อตั้งเฟรมใกล้ด้านบนของหน้าจอ (50% จากซ้ายไปขวาของหน้าจอและ 3% จากด้านบนไปข้างล่างของหน้าจอเพื่อให้มีบ
      4. ตั้ง ขนาด เป็น {0.5, 0},{0.13, 0} เพื่อให้ส่วนที่เป็นรูปตัวอักษรของกรอบเรียงลำดับตั้งแต่ด้านบนของหน้าจอเพื่อดึงดูดผู้เล่น (50% ตามแนวตั้งและ 13% ตามแ
      5. ตั้ง ชื่อ เป็น เป้าหมาย

      

   3. (อpcional) ใส่ UIAspectRatioConstraint ใน เป้าหมาย เพื่อให้แน่ใจว่าสัญลักษณ์ของผู้เล่นจะมีขนาดเท่ากันไม่ว่าผู้เล่นจะมีขนาดหน้าจอเท่าไหร่ ตัวอ

2. สร้างคอนเทนเนอร์สำหรับวัตถุประกาศเหยื่อ

   1. ใส่ โค้งของแนวคิด ใน เป้าหมาย 2. เลือก เฟรมใหม่ แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง จุดศูนย์กลางของแนวโน้มในการเรียงลำดับตามลำดับของช่องตรงไปยังด้านบนของตัวเอง (50% จากด้านซ้ายไปขวาของแนวโน้ม และ 0% จากด้านบนไปของแนวโน้ม)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของเฟรมเป็นโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0, 0} เพื่อตั้งโครงในตรงกลางของคอนเทนเนอร์ (50% จากด้านซ้ายไปขวาของโครงพ่อและ 0% จากด้านบนไปข้างล่างของโครงพ่อ)
      4. ตั้ง ขนาด เป็น {1, 0},{0.67, 0} ให้เลือกรูปแบบ UI ส่วนประกอบจะครอบครองพื้นที่ในตัวอาหรับจากด้านบนไปด้านล่าง (100% ตามแนวตั้งและ 67% ตามแนวนอนของพ่อ)
      5. ตั้ง ชื่อ เป็น เป้าหมายแสดงผล

      

3. สร้างรายการชื่อตำแหน่ง

   1. ใส่ ImageLabel ใน แสดงผลเหยื่อ

   2. เลือก ImageLabel แล้วในหน้าต่าง Properties

      1. ตั้ง รุ้งอ้างจุดอ่อน เป็น 0.5, 1 เพื่อตั้งจุดศูนย์กลางของฉลากในด้านล่างกลางของตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 100% จากด้านบนไปข้างล่างของฉ
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง LayoutOrder เป็น -1
      4. ตั้ง ตําแหน่ง เป็น 0.5, 0,0.34, 0 เพื่อตั้งฉลากใกล้ด้านบนของเฟรม (50% จากซ้ายไปขวาของเฟรมพ่อและ 34% จากด้านบนของเฟรมพ่อ) และตั้ง ตําแหน
      5. ตั้ง ขนาด เป็น 0.46, 0,0.34, 0 0 เพื่อขยายพื้นที่แจ้งข้อความให้กว้างเกือบครึ่งของโค้ดพ่อ (46% ในแนวตั้งและ 34% ในแนวนอนของโค้ดพ่อ)
      6. ตั้งชื่อ ชื่อ ให้กับหัวข้อ
      7. ตั้ง รูปภาพ เป็น rbxassetid://14304828123 เพื่อแสดงโฉมทราเพเลียน
      8. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.15 เพื่อทำให้หัวข้อเป็นเกลียว

      

   3. (อpcional) ใส่ UIAspectRatioConstraint ใน ImageLabel เพื่อให้แน่ใจว่าสัญลักษณ์ของผู้ชื่อเรื่องยังคงเหมือนเดิมไม่ว่าผู้ชื่อเรื่องจะมีขนาดหน้าจอเท

   4. ใส่ TextLabel ใน หัวข้อ เพื่อแสดงชื่อเรื่อง

   5. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รุ่นออเตอร์พอยน์ท์ เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉลาก)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อย้ายฉลากไปยังกึ่งกลางของฉลากพ่อ (50% จากซ้ายไปขวาของฉลากพ่อและ 50% จากด้านบนไปด้านล่างของฉลากพ่อ)
      4. ตั้ง ขนาด เป็น 0.62, 0,0.55, 0 0.62, 0,0.55, 0 เพื่อขยายพื้นที่ข้อความเป็นมากกว่าครึ่งของป้ายพ่อ (62% ตามแนวตั้งและ 55% ตามแนวนอนของป้ายพ่อ)
      5. ตั้ง ชื่อ เป็น ชื่อเรื่อง 6. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต
      6. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ตัวอักษรมีความหนา
      7. ตั้ง ข้อความเป้าหมาย เป็น เป้าหมาย 9. เปิดใช้งาน TextScaled

      

4. สร้างรายการตัวเรียก

   1. ใส่ ImageLabel ใน แสดงผลเหยื่อ

   2. เลือก ImageLabel แล้วในหน้าต่าง Properties

      1. ตั้ง รุ้งอ้างจุดอ่อน เป็น 0.5, 1 เพื่อตั้งจุดศูนย์กลางของฉลากในด้านล่างกลางของตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 100% จากด้านบนไปข้างล่างของฉ
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น 0.5, 0,1, 0 0 เพื่อย้ายฉลากไปยังด้านล่างกลางของรอบแม่พระ (50% จากด้านซ้ายไปขวาของรอบแม่พระ และ 100% จากด้านบนไปขวาของรอบแม่
      4. ตั้ง ขนาด เป็น {0.89, 0},{0.66, 0} เพื่อขยายพื้นที่ข้อความเกือบเป็นความกว้างของเฟรมพ่อ (89% ในแนวตั้งและ 66% ในแนวนอนของเฟรมพ่อ)
      5. ตั้ง ชื่อ เป็น ร่างกาย 6. ตั้ง รูปภาพ เป็น rbxassetid://14304827265 เพื่อแสดงตัวเลื่อนขนาดกว้างขวาง
      6. ตั้ง สีภาพ3 เป็น 0, 0, 0 เพื่อสีเข้มภาพ
      7. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.3 เพื่อทำให้หัวข้อเป็นเกลียว

      

   3. (อpcional) ใส่ UIAspectRatioConstraint ใน ImageLabel เพื่อให้แน่ใจว่าสัญลักษณ์ของผู้เล่นจะไม่เปลี่ยนแปลงไปยังขนาดหน้าจอของผู้เล่น ตัวอย่างตั้งค

   4. ใส่ TextLabel ใน ตัวอักษร เพื่อแสดงข้อความ

   5. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รุ่นออเตอร์พอยน์ท์ เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉลาก)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อย้ายฉลากไปยังกึ่งกลางของฉลากพ่อ (50% จากซ้ายไปขวาของฉลากพ่อและ 50% จากด้านบนไปด้านล่างของฉลากพ่อ)
      4. ตั้ง ขนาด เป็น {0.85, 0},{0.39, 0} เพื่อขยายพื้นที่ข้อความเป็นสองเท่าของป้ายชื่อพ่อ (85% ในแนวตั้งและ 39% ในแนวนอนของป้ายชื่อพ่อ)
      5. ตั้ง ชื่อ ให้ BodyTextLabel 6. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต
      6. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ตัวอักษรมีความหนา
      7. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อให้ข้อความเป็นสีขาวต่อพื้นหลังที่มืด
      8. ตั้ง ข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข
      9. เปิดใช้งาน TextScaled

      

5. สร้างคอนเทนเนอร์สำหรับผู้นับเหยี่ยวทีม

   1. ใส่ โค้งของแนวคิด ใน เป้าหมาย 2. เลือก เฟรมใหม่ แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รุ้งAnchorPoint เป็น 0.5, 1 เพื่อตั้งจุดศูนย์กลางของฉลากในด้านล่างกลางของตัวเอง (50% จากด้านซ้ายไปขวาของเฟรมและ 100% จากด้านบนไปของเฟรม)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของเฟรมเป็นโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น 0.5, 0,1, 0 5> ในตัวอักษรที่อยู่ในตรงกลางของตัวอักษร (50% จากด้านซ้ายไปขวาของเฟรมพ่อและ 100% จากด้านบนไปข้างล่างของเฟรมพ่อ) เ
      4. ตั้ง ขนาด เป็น {0.44, 0},{0.27, 0} เพื่อให้การเลือก UI ส่วนประกอบใช้พื้นที่ประมาณครึ่งหนึ่งของกระเป๋าจากซ้ายไปขวา (44% แนวตั้งและ 27% แนวนอนของกรอบพ่อ
      5. ตั้ง ชื่อ เป็น TeamPointCounter

      

6. สร้างการปรับแต่งสำหรับนักเล่นทีม

   1. ใส่วัตถุ UIListLayout ในแถบจากขั้นตอนที่ 5
   2. เลือกวัตถุ UIListLayout แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง การเรียบเนียน เป็น 0.025, 0 เพื่อให้พื้นที่ระหว่างนักเคมีทีมในอนาคต 2. ตั้ง กรอกทิศทาง เป็น แนวตั้ง เพื่อให้แต่ละทีมนับเคียงกัน 3. ตั้ง การจัดตำแหน่งแนวตั้ง เป็น กึ่งกลาง เพื่อให้แต่ละทีมจัดตำแหน่งกันตรงกลาง

7. สร้างส่วนประกอบทีมสีเขียว

   1. ใส่ ImageLabel ใน TeamPointCounter

   2. เลือก ImageLabel แล้วในหน้าต่าง Properties

      1. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      2. ตั้ง ตําแหน่ง เป็น 0.5, 0,1, 0 0 เพื่อย้ายฉลากไปยังด้านล่างกลางของรอบแม่พระ (50% จากด้านซ้ายไปขวาของรอบแม่พระ และ 100% จากด้านบนไปขวาของรอบแม่
      3. ตั้ง ขนาด เป็น 0.5, 0,1, 0 0 เพื่อขยายแท็งแผงลงไปยังครึ่งของแท็งแผงพ่อ (50% ทางด้านข้างและ 100% ทางด้านข้างของแท็งแผงพ่อ)
      4. ตั้ง ชื่อ ให้ TeamACount 5. ตั้ง รูปภาพ เป็น rbxassetid://14304826831 เพื่อแสดงลายลายเส้นทาง
      5. ตั้ง สีของรูปภาพ3 เป็น 88, 218, 171 เพื่อสีเขียวของรูปภาพ

      

   3. กำหนดค่าละครอันที่กำหนดเองเพื่อติดตามว่าป้ายชื่อนี้สำหรับทีมสีเขียว

      1. ใน หน้าต่าง ลักษณะละเอียด ค้นหาไปยังส่วน คุณลักษณะ แล้วคลิกไอคอนบวก ป๊อปอัปจะปรากฏขึ้น
      2. ในฟิลด์ ชื่อ ใส่ สีทีม 3. ใน Type เมนูดรอปดาวน์เลือก BrickColor 4. คลิกปุ่ม บันทึก 5. ตั้งค่าค่านิยมใหม่ teamColor ให้กับ Mint

   4. ใส่ TextLabel ใน TeamACount器 เพื่อแสดงข้อความ

   5. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง จุดเรียงลำดับ เป็น 1, 0.5 เพื่อตั้งจุดเริ่มต้นของฉลากในตำแหน่งกึ่งกลางขวา (100% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปด้านล่างของฉลาก)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.95, 0},{0.5, 0} เพื่อย้ายฉลากไปที่ด้านขวาของฉลากพ่อ (95% จากซ้ายไปขวาของฉลากพ่อและ 50% จากด้านบนไปด้านล่างของฉลากพ่อ)
      4. ตั้ง ขนาด เป็น {0.85, 0},{0.39, 0} เพื่อขยายพื้นที่ข้อความเป็นสองเท่าของป้ายชื่อพ่อ (85% ในแนวตั้งและ 39% ในแนวนอนของป้ายชื่อพ่อ)
      5. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต
      6. ตั้ง น้ำหนัก เป็น ตัวหนังสือ เพื่อทำให้ตัวอักษรมีความหนา
      7. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อให้ข้อความเป็นสีขาวต่อพื้นหลังที่มืด
      8. ตั้ง ข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อค
      9. เปิดใช้งาน TextScaled 10. ตั้ง TextXAlignment เป็น ขวา

      

   6. ใส่วัตถุ UIStroke ใน TextLabel แล้วในหน้าต่าง ลักษณะลูกศร ตั้งค่า 1> สี1> เป็น 4> 8, 78, 524> เพื่อมุ่งเน้นด้วยสีเขียวดาร์คกรีน

      

8. สร้างรายการประตูทีมสีชมพู

   1. Duplicate TeamAICounter และลูกหลานของมัน

   2. เลือก TeamACount ซ้ำ แล้วใน หน้าต่าง คุณสมบัติ ที่

      1. ตั้ง ชื่อ เป็น TeamBCounter 2. ตั้ง รูปภาพ เป็น rbxassetid://14305849451 เพื่อแสดงการเปลี่ยนทิศทางในทิศทางตรงข้าม
      2. ตั้ง สีของรูปภาพ3 เป็น 255, 170, 255 เพื่อสีผิวรูปภาพสีชมพู
      3. ตั้งค่าค่า teamColor ให้เป็น Carnation Pink 3. เลือกลูก TextLabel ซึ่งเป็นลูกของ TeamBCounter แล้วในหน้า โปรพีพีเอส 1. ตั้ง AnchorPoint เป็น 0, 0.5 เพื่อตั้งจุดต้นของฉลากในด้านซ้ายกลางของตัวเอง (0% จากด้านซ้าย ไปขวาของฉลาก และ 50% จากด้านบน ไปด้านล่างของฉลาก)
      4. ตั้ง ตําแหน่ง เป็น {0.05, 0},{0.5, 0} เพื่อย้ายฉลากไปทางซ้ายของฉลากพ่อ (5% จากด้านซ้ายไปขวาของฉลากพ่อและ 50% จากด้านบนไปด้านล่างของฉลากพ่อ)
      5. ตั้ง TextXAlignment เป็น ซ้าย 4. เลือกลูก UIStroke ของ TeamBCounter แล้วในหน้าต่าง ลักษณะละคร ตั้งค่า 1> สี1> เป็น 4> 158, 18, 944> เพื่อเรียงลายด้วยสีสีเข้มสีชมพู

      

9. อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในตัวอย่าง Laser Tag ที่ไฟล์ที่เก็บข้อมูลที่ปรับปรุงโดยโปรแกรมว่าเป้าหมายคือตรวจตราและติดตามทีมงาน

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

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 ของ Blaster

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

ขอบกระดาน

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

เหมือนประสบการณ์อื่น ๆ แนวๆ ตัวอย่างเลเซอร์แท็กจะวางตำแหน่ง crosshair สภาพแวดล้อม

เพื่อสร้างความสมจริงของ crosshair ภายในประสบการณ์ Laser Tag

1. ใส่ ImageLabel ใน HUDGui วัตถุ ScreenGui

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

2. เลือก รูปแบบใหม่ แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง รูปภาพ เป็น rbxassetid://14400935446 2. ตั้ง รุ้งAnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในกลางของฉลาก (50% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉลาก) 3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 4. ตั้ง ชื่อ เป็น Crosshair 5. ตั้ง ตําแหน่ง เป็น {0.5,0},{0.5,0} เพื่อตั้งฉลากในตรงกลางของหน้าจอ 6. ตั้ง ScaleType เป็น ฟิต เพื่อให้รูปภาพพอดีในคอนเทนเนอร์ของมันและไม่ยืดเยื้อในขนาดหน้าจอที่แตกต่างกัน

3. (อpcional) ใส่ UIAspectRatioLimit ใน Crosshair ผู้เล่นตัวอย่

ตราหิต

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

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

1. ใส่ ImageLabel ใน Crosshair ImageLabel โอเค

   1. ใน หน้าต่าง Explorer ค้นหาไปยังบริการ StarterGui 2. เลี้ยวเหนือวัตถุลูกของมัน ลูกศร์ แล้วคลิกที่ไอคอน ⊕ รายละเอียด เมนู上下컨เท็กส์ต์
   2. จากเมนูบริบทัศน์ ใส่ ImageLabel

2. เลือก รูปแบบใหม่ แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง รูปภาพ เป็น rbxassetid://14401148736 เพื่อแสดงไอคอนตราหน้าตาของตัวเลือกสี่เหลี่ยมผืนผ้า 2. ตั้ง ด่านอ้างอิง เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลาก 3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 4. ตั้ง ตําแหน่ง เป็น {0.5,0},{0.5,0} เพื่อตั้งฉลากในตรงกลางของหน้าจอ 5. ตั้ง ชื่อ เป็น มาร์คจุดโดนยิง 6. ตั้ง ขนาด เป็น {0.6, 0},{0.06, 0} เพื่อลดขนาดของสี่เหลี่ยมผืนที่อยู่กลางของ crosshair 7. ตั้ง ความโปร่งใสของรูปภาพ เป็น 1 เพื่อให้เครื่องหมายการโจมตีสมบูรณ์ประหลาดใจ สคริปต์ในขั้นตอนต่อไปจะนำความโปร่งใสกลับไปเป็น 0 ทุกครั้งที่ผู้เล่นสร้างความโ

3. อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในตัวอย่าง Laser Tag ที่สถานที่ไฟล์ที่โปรแกรมในการแสดงตำแหน่งเมื่อวัตถุระเบิดส่งผลกระทบกับทีมศัตรู

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

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)

ตัวเลือก Blaster

ตัวเลือกเลเซอร์เป็นส่วนประกอบ UI ที่ผู้เล่นใช้เพื่อเลือกปืนเลเซอร์ของพวกเขาก่อนเข้าร่วมหรือเข้าร่วมอีกครั้งในรอบ ประสบการณ์การเลเซอร์เหล็กสามารถให

ขั้นตอนต่อไปนี้รายละเอียดวิธีการสร้างหลายคอนเทนเนอร์สำหรับกลุ่มของส่วนต่างๆ ของ UI ตัวอักษรโปรมปริญญาการนำทางและปุ่มเลือก และรายการปุ่มลูกศร สกริปต์จะ

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

เพื่อสร้างเครื่องเลเซอร์เลเซอร์ภายในประสบการณ์ Laser Tag ตัวอย่าง:

1. สร้างคอนเทนเนอร์สำหรับส่วนประกอบทั้งหมด

   1. ใส่ โค้งการแสดงผล ใน PickABlaster โอเอ็นต์.

      1. ใน หน้าต่าง Explorer ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่เหลี่ยมของมัน เลือก PickABlaster วัตถุแล้วคลิกที่ไอคอน ⊕ รูปแบบ เมนู上下컨텍สต์
      2. จากเมนูบริบทัศน์ ใส่ โครงสร้าง

      

   2. เลือกโค้งใหม่แล้วในหน้าต่าง คุณสมบัติ

      1. ตั้ง รุ้งAnchorPoint เป็น 0.5, 1 เพื่อตั้งจุดศูนย์กลางของเฟรมในด้านล่างของตัวเอง (50% จากด้านซ้ายไปขวาของเฟรมและ 100% จากด้านบนไปของเฟรม)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของเฟรมเป็นโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.9, 0} เพื่อตั้งโค้ดเฟรมใกล้ด้านล่างตรงกลางของหน้าจอ (50% จากด้านซ้ายไปขวาของหน้าจอและ 92.4% จากด้านบนไปข้างล่างขอ
      4. ตั้ง ขนาด เป็น {0.8, 0},{0.25, 0} เพื่อให้ส่วนประกอบของ UI เลื่อนผู้เล่นให้ความสนใจ (80% ในแนวตั้งและ 25% ในแนวนอน)
      5. ตั้ง ชื่อ เป็น ส่วนประกอบ

      

   3. (อpcional) ใส่ UIAspectRatioLimit ใน Component เพื่อให้แน่ใจว่าส่วนลึกของเฟรมและบุตรหลานของ UI จะไม่เปลี่ยนแปลงไปตามขนาดหน้าจอของผู้ใช้ ตัวอย่าง

2. สร้างคอนเทนเนอร์เพื่อให้การจัดกลุ่มขององค์ประกอบ UI

   1. ใส่ โครงการ ใน ส่วนประกอบ 2. เลือกโค้งใหม่แล้วในหน้าต่าง คุณสมบัติ

      1. ตั้ง จุดเรียงร้อยแห่งเส้นผ่านศูนย์กลางของตัวเอง (50% จากด้านซ้ายไปขวาของเฟรมและ 50% จากด้านบนไปด้านล่างของเฟรม) เพื่อตั้งจุดเรียงร้อยของเฟรมในตำแหน่งกึ่งกลา
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของเฟรมเป็นโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น 0.5, 0,0.375, 0 6> เพื่อตั้งโครงใกล้ด้านบนของคอนเทนเนอร์ (50% จากด้านซ้ายไปขวาของโครงพ่อและ 37.5% จากด้านบนไปของโครงพ่อ)
      4. ตั้ง ขนาด เป็น {1, 0},{0.75, 0} ให้เลือกรูปแบบ UI ส่วนประกอบจะครอบครอง 3/4 ของคอนเทนเนอร์ (100% แนวตั้งและ 75% แนวนอนของเฟรมพ่อ)
      5. ตั้ง ชื่อ ใน กรอบเลือก

      

3. สร้างแผงควบคุมสำหรับเครื่องเลเซอร์

   1. ใส่ รายการรูปภาพ ใน กรอบเลือก

   2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รุ้งอ้างจุดอ่อน เป็น 0.5, 1 เพื่อตั้งจุดศูนย์กลางของฉลากในด้านล่างกลางของตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 100% จากด้านบนไปข้างล่างของฉ
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง LayoutOrder เป็น -1
      4. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.22, 0} เพื่อตั้งฉลากใกล้ด้านบนของเฟรม (50% จากด้านซ้ายไปขวาของเฟรมพ่อและ 22% จากด้านบนไปของเฟรมพ่อ) และตั้งฉลา
      5. ตั้ง ขนาด เป็น {0.45, 0},{0.22, 0} เพื่อขยายพื้นที่แจ้งข้อความให้กว้างเกือบครึ่งของกรอบ (45% ในแนวตั้งและ 22% ในแนวนอนของกรอบพ่อ)
      6. ตั้ง ชื่อ เป็น หัวข้อ 7. ตั้ง รูปภาพ เป็น rbxassetid://14304828123 เพื่อแสดงโฉมทราเพเลียน
      7. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.15 เพื่อทำให้หัวข้อเป็นเกลียว

      

   3. (อpcional) ใส่ UIAspectRatioLimit ในฉลากเพื่อให้แน่ใจว่าสัดส่วนของฉลากจะเหมือนกันไม่ว่าขนาดหน้าจอของผู้เล่นจะเป็นเช่นไร ตัวอย่างตั้งค่า Class.UIAspectRatioLimit.

   4. ใส่ TextLabel ใน หัวข้อ เพื่อแสดงคำเรียกร้อง

   5. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รุ่นออเตอร์พอยน์ท์ เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉลาก)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อย้ายฉลากไปยังกึ่งกลางของฉลากพ่อ (50% จากซ้ายไปขวาของฉลากพ่อและ 50% จากด้านบนไปด้านล่างของฉลากพ่อ)
      4. ตั้ง ขนาด เป็น {0.6, 0},{0.55, 0} เพื่อขยายพื้นที่ข้อความเป็นสองเท่าของป้ายชื่อพ่อ (60% ในแนวตั้งและ 55% ในแนวนอนของป้ายชื่อพ่อ)
      5. ตั้ง ชื่อ เป็น ชื่อเรื่อง 6. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต
      6. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ตัวอักษรมีความหนา
      7. ตั้ง ข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็น
      8. เปิดใช้งาน TextScaled

      

4. สร้างคอนเทนเนอร์สำหรับปุ่ม blaster และลูกศรเลือกของคุณ

   1. ใส่ รายการรูปภาพ ใน กรอบเลือก

   2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ลบค่า รูปภาพ ปกติ
      2. ตั้ง รุ้งอ้างจุดอ่อน เป็น 0.5, 1 เพื่อตั้งจุดศูนย์กลางของฉลากในด้านล่างกลางของตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 100% จากด้านบนไปข้างล่างของฉ
      3. ตั้ง สีพื้นหลัง เป็น 0, 0, 0 เพื่อทำให้ฉากสีดำ
      4. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.3 เพื่อลดความโปร่งใสของแท็งในเลเติม และจับคู่ส่วนประกอบสีดำทั้งหมดในประสบการณ์
      5. ตั้ง ตําแหน่ง เป็น 0.5, 0,1, 0 5> ตั้งฉลากให้อยู่ในด้านล่างของเฟรม (50% จากด้านซ้ายไปขวาของเฟรมพ่อและ 100% จากด้านบนไปของเฟรมพ่อ) และตั้งฉลากให
      6. ตั้ง ขนาด เป็น {1, 0},{0.77, 0} เพื่อขยายพื้นที่แท็งแผ่นให้กว้างไปยังพื้นที่ด้านล่างแถบข้อความ (100% แนวตั้งและ 77% แนวนอนของพ่อของเฟรม)

      

   3. รอบโฉมมุมของคอนเทนเนอร์

      1. ใส่วัตถุ UICorner ในเครื่องหมาย
      2. เลือกวัตถุมุมใหม่, จาก หน้าต่าง Proprietades , ตั้ง CornerRadius ไว้ที่ 0.075, 0 เพื่อรอบโค้ง

      

5. สร้างคอนเทนเนอร์สำหรับปุ่มบลาสเตอร์ของคุณ

   1. ใส่ โค้งกาว ในแท็งค์จากขั้นตอนที่ 4
   2. เลือกโค้งใหม่แล้วในหน้าต่าง คุณสมบัติ

      1. ตั้ง จุดเรียงร้อยแห่งชุดแร่ เป็น 0.5, 0.5 เพื่อตั้งจุดเริ่มต้นของโครงสร้างใหม่ในตรงกลางของตัวเอง (50% จากด้านซ้ายไปขวาของโครงสร้างและ 50% จากด้าน
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของเฟรมเป็นโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งโค้ดในตัวอักษรกลางของป้ายชื่อของพ่อ (50% จากด้านซ้ายไปขวาของป้ายชื่อของพ่อ และ 50% จากด้านบนไปข้างล
      4. ตั้ง ขนาด เป็น {0.85, 0},{0.77, 0} เพื่อขยายพื้นที่เฟรมไปยังมากของแท็งแม่แพร์เลเบิล (85% ในแนวตั้งและ 77% ในแนวนอนของเลเบลพ่อ)
      5. ตั้ง ชื่อ เป็น คอนเทนเนอร์

      

6. สร้างพื้นที่อุ่นเครื่องให้สำหรับปุ่มเครื่องเป่าทั้งหมดในอนาคต

   1. ใส่วัตถุ UIListLayout ในแถบจากขั้นตอนที่ 5
   2. เลือกวัตถุรูปแบบใหม่, แล้วใน หน้าต่าง Proprieties ,

      1. ตั้ง พื้นที่ว่าง เป็น 0.035, 0 เพื่อให้พื้นที่ระหว่างปุ่มทั้งหมด
      2. ตั้ง กรอกทิศทาง เป็น แนวตั้ง เพื่อให้แต่ละปุ่มปรากฏข้างๆ กัน
      3. ตั้งทั้ง HorizontalAlignment และ VerticalAlignment ให้เป็น กึ่งกลาง เพื่อให้แต่ละปุ่มอยู่ในตำแหน่งกึ่งกลางของอื่น ๆ

7. สร้างปุ่มนำทางด้านซ้าย

   1. ใส่วัตถุ ImageButton ใน ImageLabel จากขั้นตอนที่ 4

   2. เลือกปุ่มใหม่, แล้วใน หน้าต่าง Proprieties ,

      1. ลบค่า รูปภาพ ปกติ
      2. ตั้ง AnchorPoint เป็น 0, 0.5 เพื่อตั้งจุดเริ่มต้นของปุ่มใหม่ในด้านซ้ายกลางของตัวเอง (0% จากด้านซ้ายไปขวาของปุ่ม และ 50% จากด้านบนไปข้างล่างของปุ่ม)
      3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.15 เพื่อให้ข้อมูลการมองเห็นเมื่อเลือกปุ่ม
      4. ตั้ง ตําแหน่ง เป็น {0.02, 0},{0.5, 0} เพื่อให้การรองรับพื้นที่บริเวณซ้ายของปุ่มจากคอนเทนเนอร์พ่อ (2% จากด้านซ้ายไปขวาของคอนเทนเนอร์พ่อ และ 50%
      5. ตั้ง ขนาด เป็น {0.04, 0},{0.33, 0} เพื่อให้ปุ่มเลือกเล็กกว่าปุ่มบลาสเตอร์ (4% ในแนวตั้งและ 33% ในแนวนอนของเค้าโครงพ่อ)
      6. ตั้ง ชื่อ เป็น ปุ่มนำทางซ้าย

      

   3. รอบโค้งของปุ่ม

      1. ใส่วัตถุ UICorner ในปุ่ม
      2. เลือกวัตถุมุมใหม่, จาก หน้าต่าง Proprietades , ตั้ง CornerRadius ไว้ที่ 0.1, 0 เพื่อรอบมุม

      

   4. ใส่ รูปแบบเครื่องหมายการณ์ภาพ ในปุ่ม

   5. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รุ่นออเตอร์พอยน์ท์ เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉลาก)
      2. ตั้ง ตําแหน่ง เป็น 0.45, 0,0.5, 0 5> ให้เฉพาะฉลากอยู่ในตําแหน่งกลางของปุ่มพ่อข
      3. ตั้ง ขนาด เป็น {0.8, 0},{0.8, 0} เพื่อขยายพื้นที่แท็งแผงลงด้านล่างของกรอบพ่อของตัวแทน (80% ในแนวตั้งและ 80% ในแนวนอนของพ่อของตัวแทน)
      4. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของรูปภาพเป็นสีโปร่งใสสมบูรณ์
      5. ตั้ง รูปภาพ เป็น rbxassetid://14309187238
      6. ตั้ง ScaleType เป็น ฟิต

      

8. สร้างปุ่มนำทางที่เหมาะสม

   1. Duplicate ปุ่มนำทางซ้าย .

   2. เลือกปุ่มที่ซ้ำกัน, แล้วใน หน้าต่าง Proprieties ,

      1. ตั้ง จุดเรียงร้อยแห่งเกราะเหล็ก เป็น 1, 0.5 เพื่อตั้งจุดเริ่มต้นของปุ่มใหม่ในตรงกลางของตัวเอง (100% จากด้านซ้ายไปขวาปุ่ม, และ 50% จากด้านบนไปข้า

      2. ตั้ง ตําแหน่ง เป็น 0.98, 0,0.5, 0 5> ให้การรองรับพื้นที่ว่างขวาของปุ่มจากคอนเทนเนอร์พ่อ (98% จากซ้ายไปขวาของคอนเทนเนอร์พ่อและ 50% จากด้านบนไป

      3. ตั้ง ชื่อ ให้ ปุ่มนำทางขวา 3. เลือก รูปแบบเค้าโครงภาพประกอบ ชิ้นส่วน

      4. ตั้ง การหมุน เป็น 180 เพื่อฟลิปรูปภาพ

      5. ตั้ง ตําแหน่ง เป็น 0.55, 0,0.5, 0 8> ในการตั้งฉลากใกล้กับปุ่มพ่อของบรรพบุรุษ (55%

      

9. สร้างปุ่ม เลือก 1. ใส่ รูปภาพButton ใน ส่วนประกอบ หมายเหตุว่ากระบวนการนี้เก็บปุ่มเลือกออกจาก เลือกเฟรม เพื่อให้คุณสามารถเพิ่มการออกแบบระหว่างส่วนหลักของส่วนประกอบจากปุ่มเลือกได

   2. เลือกปุ่มใหม่, แล้วใน หน้าต่าง Proprieties ,

      1. ลบค่า รูปภาพ ปกติ
      2. ตั้ง รุ้งAnchorPoint เป็น 0.5, 1 เพื่อตั้งจุดเริ่มต้นของปุ่มใหม่ในด้านล่างกลางของตัวเอง (50% จากด้านซ้าย ไปขวาของปุ่ม และ 100% จากด้านบน ไปด้านล่างของปุ
      3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.15 เพื่อให้ข้อมูลการมองเห็นเมื่อเลือกปุ่ม
      4. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.99, 0} เพื่อตั้งปุ่มใกล้กลางด้านล่างของคอนเทนเนอร์ (50% จากด้านซ้ายไปขวาและ 99% จากด้านบนไปข้างล่างของคอนเทนเนอร์
      5. ตั้ง ขนาด เป็น 0.17, 0,0.18, 0 17% แนวตั้งและ 18% แนวนอนของพ่อของเค้าโครงพ่อของเรา (17% ในแนวตั้งและ 18% ในแนวนอนของพ่อของเรา) เพื่อให้ปุ่มด้านล่างปุ่มบลาสเตอ
      6. ตั้ง ชื่อ เป็น ปุ่มเลือก

      

   3. รอบโค้งของปุ่ม

      1. ใส่วัตถุ UICorner ในปุ่ม
      2. เลือกวัตถุมุมใหม่, จาก หน้าต่าง Proprietades , ตั้ง CornerRadius ไว้ที่ 0.2, 0 เพื่อรอบโค้ง

      

   4. ใส่วัตถุ TextLabel แอ็คชัน

   5. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รุ่นออเตอร์พอยน์ท์ เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉลาก)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อย้ายฉลากไปยังกลางของปุ่ม (50% จากด้านซ้ายไปขวาของปุ่มพ่อและ 50% จากด้านบนไปข้างล่างของปุ่มพ่อ)
      4. ตั้ง ขนาด เป็น {0.9, 0},{0.55, 0} เพื่อขยายพื้นที่ข้อความเกือบจะเป็นสองเท่าของป้ายชื่อพ่อ (90% แนวตั้งและ 55% แนวตั้งของป้ายชื่อพ่อ)
      5. ตั้ง ชื่อ เป็น SelectTextLabel 6. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต
      6. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ตัวอักษรมีความหนา
      7. ตั้งค่า ข้อความเรื่อง เป็น เลือก 9. เปิดใช้งาน TextScaled

      

10. สร้างลังการประกอบลำแสง

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

       1. ลบค่า รูปภาพ ปกติ
       2. ตั้ง รุ้งAnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของปุ่มใหม่ในตัวเอง (50% จากด้านซ้ายไปขวาของปุ่ม และ 50% จากด้านบนไปข้างล่างของปุ่ม)
       3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.65 เพื่อให้ข้อมูลทางสายตาว่าปุ่มไม่ได้อยู่ในโฟกัส สคริปต์ในขั้นตอนที่ 12 ให้ข้อมูลการเห็นทางสายตาเมื่อปุ่มอยู่ในโฟกัส
       4. ตั้ง LayoutOrder เป็น 2
       5. ตั้ง ชื่อ เป็น BlasterButtonPrefab 6. ตั้ง ขนาด เป็น {0.8, 0},{0.8, 0}
       6. ตั้ง ความโปร่งใสของรูปภาพ เป็น 1 เพื่อทำให้รูปภาพโปร่งใสสมบูรณ์
    3. ใส่ UIAspectRatioConstraint ใน BlasterButtonPrefab ผู้เล่น
    4. รอบโค้งของปุ่ม

       1. ใส่วัตถุ UICorner ใน BlasterButtonPrefab 2. เลือก มุม UICorner แล้วใน หน้าต่างโปรพีเพอร์ตี้ ตั้ง CornerRadius ไว้ที่ 1> 0.05, 01> เพื่อรอบมุม
    5. ใส่ ImageLabel ใน BlasterButtonPrefab 7. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ลบค่า รูปภาพ ปกติ 2. ตั้ง รุ่นออเตอร์พอยน์ท์ เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉลาก) 3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 4. ตั้ง ตําแหน่ง เป็น {0.52, 0},{0.497, 0} เพื่อตั้งฉลากใกล้กลางปุ่มพ่อของมัน (52 5. ตั้ง ขนาด เป็น 1.20, 0,0.9, 0 1.20, 0,0.9, 0 เพื่อขยายพื้นที่แท็งแคบของปุ่มด้านนอก (120% ในแนวตั้งและ 90% ในแนวนอนของปุ่มพ่อ) 6. ตั้ง ScaleType เป็น ฟิต

11. อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในตัวอย่าง Laser Tag ที่เก็บไฟล์สถานที่ได้รับการจัดเก็บข้อมูลภายในตัวอย่าง อวาตาร์แ

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

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

เพื่อสร้างปุ่มระเบิดภายในประสบการณ์ Laser Tag ตัวอย่าง:

1. ใส่ ปุ่มรูปภาพ ใน HUDGui วัตถุ ScreenGui

   1. ใน หน้าต่าง Explorer ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุ HUDGui ของลูกของมันแล้วคลิกที่ไอคอน ⊕ รายละเอียด เมนูบริบทัศน์
   2. จากเมนูบริบทัศน์ ใส่ ปุ่มรูปภาพ

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

   1. ตั้ง รูปภาพ เป็น rbxassetid://18308375035 เพื่อแสดงไอคอนปุ่มระเบิด
   2. ตั้ง PressedImage เป็น rbxassetid://18308372558 เพื่อแสดงรุปแบบการแก้ไขของปุ่มระเบิดเมื่อผู้เล่นกดปุ่ม
   3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
   4. ตั้ง ชื่อ ให้ BlastButton 5. ตั้ง ScaleType เป็น ฟิต เพื่อให้รูปภาพพอดีในคอนเทนเนอร์ของมันและไม่ยืดเยื้อในขนาดหน้าจอที่แตกต่างกัน
   5. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.3 เพื่อลดความโปร่งใสของแท็งกี้เพื่อให้ตรงกับทุกส่วนของ UI สีดำในประสบการณ์

3. ใส่ UIAspectRatioConstraint ใน BlastButton เพื่อให้แน่ใจว่าอัตราส่วนของปุ่มจะเหมือนกันไม่ว่าผู้เล่นจะมีขนาดหน้าจอเท่าไหร่

4. อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในตัวอย่าง Laser Tag ที่เก็บไฟล์ไว้ในสถานที่ที่โปรแกรมใช้งานเมาส์เมื่อผู้ใช้ใช้ปุ่มเมาส์บนอุปกรณ์ที่รองรับการแกะสแน็ป

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

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

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

เพื่อสร้างส่วนประกอบของเลเซอร์ทางกำแพงภายในประสบการณ์ Laser Tag

1. ใส่ โค้งกาศ ใน HUDGui วัตถุ ScreenGui

   1. ใน หน้าต่าง Explorer ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุ HUDGui ของลูกของมันแล้วคลิกที่ไอคอน ⊕ ตัวอักษร โค้งสมุดบรรทัด. เมนูบริบทัศน์แบบขั้นสูงปรากฏขึ้น
   2. จากเมนูบริบทัศน์ ใส่ โครงสร้าง

2. เลือก เฟรมใหม่ แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง AnchorPoint เป็น 0, 1 เพื่อตั้งจุดศูนย์กลางของเฟรมในด้านล่างของตัวเอง (0% จากด้านซ้ายของเฟรม และ 100% จากด้านบนของเฟรม) 2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 3. ตั้ง ชื่อ เป็น PlayerDisplay 4. ตั้ง ตําแหน่ง เป็น {0.02, 0},{0.97, 0} เพื่อตั้งโค้ดเฟรมใกล้ด้านล่างซ้ายของหน้าจอ 5. ตั้ง ขนาด เป็น {0.23, 0},{0.08, 0} เพื่อทั้งสองส่วนของเฟรมทั้งสองส่วนของเฟรม 6. เปิดใช้งาน ClipsDescendants เพื่อตัดตัวลูก GuiObjects ที่ยืดเยื้อออกไปนอกเหนือขอบเฟรม

   

3. สร้างรูปร่างเหลี่ยม

   1. ใส่ รายการรูปภาพ ใน แสดงผู้เล่น 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง รูปภาพ เป็น rbxassetid://14304828123 เพื่อแสดงไอคอน trapezoid
      2. ตั้ง AnchorPoint เป็น 1, 1 เพื่อตั้งจุดต้นของฉลากในด้านล่างขวาของตัวเอง (100% จากซ้ายไปขวาของฉลากและ 100% จากด้านบนไปข้างล่างของฉลาก)
      3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      4. ตั้ง ชื่อ เป็น บล็อก 5. ตั้ง ตําแหน่ง เป็น {1,0},{1,0} เพื่อตั้งฉลากไว้ที่ด้านขวาของเฟรม
      5. ตั้ง ขนาด เป็น {1.858, 0},{0.581, 0} เพื่อขยายแท็งแคบของฉลากออกจากเค้าโครงและลดลงเหลือเพียงเศษเสี้ยวของเค้าโครงเท่านั้น
      6. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.15 เพื่อทำให้ฉลากเล็กน้อยใส่ใจได้
      7. ตั้ง ScaleType เป็น ฟิต เพื่อให้รูปภาพพอดีในคอนเทนเนอร์ของมันและไม่ยืดเยื้อในขนาดหน้าจอที่แตกต่างกัน

      

      1. ใส่ UIAspectRatioConstraint ใน บล็อก เพื่อให้แน่ใจว่าเอกสารและบุตรหลานของมัน UI เอกสารอาจมีขนาดเท่ากันไม่ว่าผู้เล่นจะมีขนาดหน้าจอเท่าไหร่
      2. เลือกข้อจํากัดใหม่แล้วใน หน้าต่างโปรพีเพอร์ตี้ ตั้งค่า AspectRatio เป็น 13.78

4. สร้างกล่องสำหรับภาพเล่าเรื่องของผู้เล่น

   1. ใส่ รายการรูปภาพ ใน แสดงผู้เล่น 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ลบสัญลักษณ์จำลองอยู่ในสมบัติของ รูปภาพ โปรแกรมสคริปต์ในขั้นตอนที่ 7 จะป้อนชื่อของผู้เล่นในชื่อภาพในเครื่องมือเรียกรูปภาพ
      2. ตั้ง AnchorPoint เป็น 0, 1 เพื่อตั้งจุดต้นของฉลากในด้านล่างซ้ายของตัวเอง (0% จากด้านซ้าย ไปขวาของฉลาก และ 100% จากด้านบน ไปด้านล่างของฉลาก)
      3. ตั้ง สีพื้นหลัง3 เป็น 0, 0, 0 เพื่อตั้งสีพื้นหลังของฉลากเป็นสีดำ
      4. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.3 เพื่อลดความโปร่งใสของแท็งในเลเติม และจับคู่ส่วนประกอบสีดำทั้งหมดในประสบการณ์
      5. ตั้ง ชื่อ เป็น ตัวผู้เล่น 6. ตั้ง ตําแหน่ง เป็น {0.11, 0},{1, 0} เพื่อตั้งฉลากไว้ที่ด้านซ้ายของรูปสี่เหลี่ยม
      6. ตั้ง ขนาด เป็น {0.23, 0},{1, 0} เพื่อขยายฉลาก
      7. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.15 เพื่อทำให้ฉลากเล็กน้อยใส่ใจได้
      8. ตั้ง ScaleType เป็น ฟิต เพื่อให้รูปภาพพอดีในคอนเทนเนอร์ของมันและไม่ยืดเยื้อในขนาดหน้าจอที่แตกต่างกัน

      

      1. ใส่ UIAspectRatioLimit ใน โปรไฟล์ผู้เล่น เพื่อให้แน่ใจว่าขนาดของเลเบลและบุตรหลานของ UI จะไม่เปลี่ยนแปลงไปยังผู้เล่นที่มีขนาดหน้าจอที่แตกต่างกัน
      2. ใส่ UICorner ใน PlayerPortrait แล้วในหน้าต่าง โปรพร็อพ ตั้ง 1> CornerRadius1> เป็น 4> 0.05, 04> เพื่อเรียกเหลี่ยมมุมเล็กน้อย

      

5. สร้างฉลากข้อความสำหรับชื่อผู้เล่น

   1. ใส่วัตถุ TextLabel ใน PlayerDisplay 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ตั้ง AnchorPoint เป็น 0, 0.5 เพื่อตั้งจุดเริ่มต้นของปุ่มใหม่ในด้านซ้ายกลางของตัวเอง (0% จากด้านซ้ายไปขวาของปุ่ม และ 50% จากด้านบนไปข้างล่างของปุ่ม)
      2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
      3. ตั้ง ชื่อ เป็น PlayerNameTextLabel 4. ตั้ง ตําแหน่ง เป็น {0.35, 0},{0.72, 0} เพื่อตั้งฉลากให้อยู่ทางด้านขวาของคอนเทนเนอร์ (35% จากด้านซ้ายไปขวาของฉลากแม่ของผู้ปกครอง และ 72% จากด้า
      4. ตั้ง ขนาด เป็น {0.52, 0},{0.3, 0} ให้เนื้อหนังสื่อความคิดเห็นสามารถครอบคลุมพื้นที่รูปร่างได้มากที่สุด (52% ในแนวตั้งและ 30% ในแนวนอนของเค้าโครงพ่อ)
      5. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต
      6. ตั้ง น้ำหนัก เป็น ตัวหนังสือ เพื่อทำให้ตัวอักษรมีความหนา
      7. ลบข้อความปลอมภายในสมบัติข้อความ ข้อความเท็กส์ โปรแกรมสคริปต์ในขั้นตอนที่ 7 จะใส่ชื่อผู้เล่นในชื่อข้อความ
      8. เปิดใช้งาน TextScaled 10. ตั้ง TextXAlignment เป็น ซ้าย

      

6. สร้างไอคอนและสีของทีมที่ปรากฏบênซ้ายของพอร์ตเทรตของผู้เล่น

   1. ใส่ ไฟล์เกียรติยศ ใน PlayerDisplay แล้วเปลี่ยนชื่อมันเป็น TeamIcons

   2. สร้างไอคอนทีมสีเขียวและสี

      1. ใส่ ImageLabel ใน TeamIcons 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง AnchorPoint เป็น 0, 1 เพื่อตั้งจุดต้นของฉลากในด้านล่างซ้ายของตัวเอง (0% จากด้านซ้าย ไปขวาของฉลาก และ 100% จากด้านบน ไปด้านล่างของฉลาก) 2. ตั้ง สีพื้นหลัง3 เป็น 88, 218, 171 เพื่อตั้งสีพื้นหลังของฉลากให้เป็นสีมิ้นท์กรีน 3. ตั้ง ชื่อ เป็น ไอคอนทีม 4. ตั้ง ตําแหน่ง เป็น {0, 0},{1, 0} เพื่อตั้งฉลากไว้ที่ด้านซ้ายของเฟรม 5. ตั้ง ขนาด เป็น {0.135, 0},{0.58, 0} เพื่อขยายชื่อเรื่องไปยังด้านซ้ายของชื่อผู้เล่น 6. ตั้ง ความโปร่งใสของรูปภาพ เป็น 1 เพื่อให้ป้ายชื่อโปร่งใส

      

      1. กำหนดค่าคุณสมบัติที่กำหนดเองเพื่อติดตามว่ารายการนี้เป็นของทีมสีเขียว ขั้นตอนนี้มีความสำคัญอย่างมากสำหรับสคริปต์ในขั้นตอนที่ 7

         1. ใน หน้าต่าง ลักษณะละเอียด ค้นหาไปยังส่วน คุณลักษณะ แล้วคลิกไอคอนบวก ป๊อปอัปจะปรากฏขึ้น
         2. ในฟิลด์ ชื่อ ใส่ สีทีม 3. ใน Type เมนูดรอปดาวน์เลือก BrickColor 4. คลิกปุ่ม บันทึก 5. ตั้งค่าค่านิยมใหม่ teamColor ให้กับ Mint 2. ใส่ UIAspectRatioConstraint ใน TeamAIcon เพื่อให้แน่ใจว่าส่วนประกอบของเลเบลและบุตรหลานจะมีความสมดุลของมุมมองขนาดเครื่องกำเนิดของผู้เล่น
      2. สร้างไอคอน

         1. ใส่ ImageLabel ใน TeamAIcon 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง รูปภาพ เป็น rbxassetid://14309678670 เพื่อแสดงไอคอนทีมสีเขียว 2. ตั้ง AnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลาก และ 50% จากด้านบนไปข้างล่างของฉลาก) 3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 4. ตั้ง ชื่อ เป็น ไอคอน 5. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากให้อยู่กึ่งกลางของฉลากพ่อของมัน 6. ตั้ง ขนาด เป็น {0.7, 0},{0.6, 0} เพื่อขยายชื่อเรื่อง 7. ตั้ง ScaleType เป็น ฟิต เพื่อให้รูปภาพพอดีในคอนเทนเนอร์ของมันและไม่ยืดเยื้อในขนาดหน้าจอที่แตกต่างกัน

      

   3. สร้างไอคอนทีม สีชมพู และสี.

      1. Duplicate TeamAIcon และลูกหลานของมัน
      2. เลือกไอคอนทีม ทีม ซ้ำ, แล้วในหน้าต่าง คุณสมบัติ 1. ตั้ง สีพื้นหลัง3 เป็น 255, 170, 255 เพื่อตั้งสีพื้นหลังของฉลากให้เป็นสีพาสเทลโปร่งใส 2. ตั้ง ชื่อ เป็น ไอคอนทีม 3. ตั้งค่าค่า teamColor ให้เป็น Carnation Pink 4. เลือกลูก ไอคอน ของ TeamBIcon แล้วในหน้าต่าง คุณสมบัติ ตั้งค่า 1>รูปภาพ1> เป็น 4> rbxassetid://143096785494> เพื่อแสดงไอคอนทีมสีชมพู

      

7. อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage สคริปต์ภายในตัวอย่าง Laser Tag ไฟล์ไฟล์ที่แสดงตำแหน่งผู้เล่นด้วยสีและไอคอนที่เหมาะสมของทีมในรอบ เกี่ยวกับเรา ติดต่อเรา - Class.ReplicatedStorage เรียน

สคริปต์ต่อไปต้องการชุดของสคริปต์โมดูลที่ทำงานร่วมกันเพื่อติดตั้งหน้าจอหลักของ Heads Up Display (HUD) รวมทั้ง startSyncingTeamColor , setPlayerName และ

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)

หน้าจอ Force Field

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

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

1. ใส่ ImageLabel ใน ForceFieldGui โอเคคุณส์ Class.ScreenGui

   1. ใน หน้าต่าง Explorer ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่เหนือวัตถุ ForceFieldGui ของมันแล้วคลิกที่ไอคอน ⊕ เมนู上下컨เท็กส์
   2. จากเมนูบริบทัศน์ ใส่ ImageLabel

2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง รูปภาพ เป็น rbxassetid://14462567888 2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.8 เพื่อให้ฟิลด์กระจายแสง 3. ตั้ง ขนาด เป็น {1, 0},{1, 0} เพื่อให้รูปภาพเต็มหน้าจอ (100% ในแนวตั้งและ 100% ในแนวนอนของหน้าพ่อ ScreenGUI) 4. ตั้ง ScaleType เป็น กระเบื้องขนาดเท่าไหร่ เพื่อให้กระเบื้องหกเหลี่ยมขนาดเท่าไหร่ทั่วหน้าจอ 5. ตั้ง ขนาดกระเบื้อง เป็น {0, 104},{0, 180}

   

3. ใส่วัตถุ UIGradient ในเครื่องหมาย

4. เลือกวัตถุเกรดใหม่แล้วในหน้าต่าง คุณสมบัติ 1. ตั้ง สี เป็นตารางสีที่เริ่มต้นด้วยสีน้ำเงินแล้วเปลี่ยนเป็นสีขาวแล้วเปลี่ยนเป็นสีน้ำเงินอีกครั้ง

   1. ตั้ง สี เป็น 120, 192, 250 เพื่อใช้สีฟ้าเบาให้กับหีบสีทั้งหมด

   2. คลิกที่สมบัติข้อมูลสี Color แล้วคลิกปุ่ม ⋯ ตัวเรียงลำดับสี

      

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

   3. คลิกและลากตามลำดับสีจนกว่าคุณจะถึง เวลา ของ 0.05 แล้วคลิกที่เล็กที่ด้านข้างของ สี เพื่อเปิดหน้าต่าง 1> สี1> ป๊อป

   4. เลือกสีขาวสดใสแล้วปิดหน้าต่าง pop-up

   5. คลิกและลากตามลำดับสีจนกว่าคุณจะได้รับ เวลา มูลค่าของ 0.95 แล้วเปิดหน้าต่าง สี อีกครั้งและเลือกสีขาวเหมือนเดิม

      

   6. ตั้ง การหมุน เป็น 225 เพื่อให้ส่วนสีน้ำเงินของคุณนี่เป็นสีน้ำเงินในมุมด้านบนซ้ายและด้านล่างขวา

      

   7. ตั้ง ความโปร่งใส เป็นตัวเลขที่ทำให้สนามแรงดูเหมือนว่ามันเป็นประกาย

      1. คลิกที่ ความโปร่งใส รายการแล้วคลิกปุ่ม ⋯ ตัวเลขที่ปรากฏขึ้นจะปรากฏขึ้นตามลำดับที่เริ่มต้นและสิ้นสุดของตัวเลขที่เรียกว่าค่าความโปร่งใสของส

      2. ตั้งค่าโปรไฟล์เวลาและมูลค่าต่อไปนี้ในลำดับตัวเลข:

      • เวลา = 0 , มูลค่า = 0> 0.250>
      • เวลา = .101 , มูลค่า = 0> 0.8750>
      • เวลา = .183 , มูลค่า = 0> 00>
      • เวลา = .3 , มูลค่า = 0> 10>
      • เวลา = .7 , มูลค่า = 0> 10>
      • เวลา = 1 , มูลค่า = 0> 0.90>

      

5. เลียนแบบ ImageLabel จากขั้นตอนที่ 2

6. เลือก UIGradient วัตถุภายในเครื่องหมายซ้ำ, แล้วใน หน้าต่าง Proprieties ,

   1. ตั้ง การหมุน เป็น -45 เพื่อสลับรูปภาพให้เกือบกันตามแกน Y

      

   2. แก้ไข ความโปร่งใส เพื่อให้เงาเรืองแสงมากขึ้น

      1. คลิกโปรไฟล์ ความโปร่งใส แล้วคลิกปุ่ม ⋯ ตัวเลขจะปรากฏขึ้น
      2. เลือกกรอบสี่ตัวที่สามแล้วคลิกปุ่ม ลบ

      

7. อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในตัวอย่าง Laser Tag ที่สถานที่ไฟล์ที่ปรับแต่งโปรแกรมเพื่อแสดงหน้าจอของฟิลด์กำลังเปลี่ยนเมื่อผู้เล่นเข้าร่วมหรือเข้าร่วมรอบ

สคริปต์ลูกค้าต่อไปนี้ ReplicatedStorage.ForceFieldClientVisuals สามารถแทนที่วิดีโอกราฟิก ForceField ที่มีอยู่ในประสบการ

สคริปต์นี้เริ่มต้นด้วยการฟังเมื่อ ForceField ถูกเพิ่มเข้าสู่ตัวละคร, ปิดการใช้งานวิดีโอของฟิลด์ของตัวละครเริ่มต้น, แล้วเปิดใช้งา

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- หากผู้เล่นเกิดที่จุดเกิดด้วย ForceField ถูกปิด
		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)

รีสปอร์นหน้าจอ

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

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

เพื่อสร้างหน้าจอ respawn ภายในประสบการณ์ Laser Tag

1. สร้างแบนเนอร์ข้อมูลกลาง

   1. ใส่ รูปแบบเครื่องหมายน้ำเงิน ในวัตถุ OutStateGui ScreenGui

      1. ใน หน้าต่าง Explorer ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุลูกของมัน OutStateGui แล้วคลิกที่ไอคอน ⊕ เมนู上下컨텍สต์. เมนูบริบทัศน์
      2. จากเมนูบริบทัศน์ ใส่ ImageLabel

   2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง รุ้งAnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของปุ่มใหม่ในตัวเอง (50% จากด้านซ้ายไปขวาของแท็งและ 50% จากด้านบนไปข้างล่างของแท็ง) 2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากในกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของป้ายชื่อ ScreenGUI และ 50% จากด้านบนไปด้านล่างของป้ายชื่อ ScreenGui) 4. ตั้ง ขนาด เป็น {0.48, 0},{0.06, 0} เพื่อขยายแท็งแผงล็อกอิน (48% ทางด้านข้างและ 6% ทางด้านขึ้นของพ่อ ScreenGUI) 5. ตั้ง ชื่อ เป็น บล็อก 6. ตั้ง รูปภาพ เป็น rbxassetid://14304827265 เพื่อให้รูปภาพเป็นรูปสามเหลี่ยม 7. ตั้ง สีภาพ เป็น 0,0,0 เพื่อทำให้ trapezoid สีดำ 8. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.3 เพื่อลดความโปร่งใสของแท็งใบแดงในประสบการณ์ และจับคู่ส่วนประกอบทั้งหมดของ UI สีดำในประสบการณ์

      

   3. ใส่ UIAspectRatioConstraint ใน บล็อก เพื่อให้แน่ใจว่าเอกสารและบุตรหลานของมัน UI เอกสารอาจมีขนาดเท่ากันไม่ว่าผู้เล่นจะมีขนาดหน้าจอเท่าไหร่

   4. เลือกข้อจํากัดใหม่แล้วใน หน้าต่างโปรพีเพอร์ตี้ ตั้งค่า AspectRatio เป็น 13.78

   5. ใส่ TextLabel ใน Block สำหรับข้อความน่ารู้

   6. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง AnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลาก และ 50% จากด้านบนไปข้างล่างของฉลาก) 2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากในตำแหน่งกลางของป้ายชื่อของพ่อ (50% จากซ้ายไปขวาของป้ายชื่อของพ่อและ 50% จากด้านบนไปด้านล่างของ 4. ตั้ง ขนาด เป็น {.85, 0},{0.55, 0} ให้ตัวอักษรสามารถครอบคลุมพื้นที่ส่วนใหญ่ของ trapezoid ได้ (85% ในแนวตั้งและ 55% ในแนวนอนของป้ายชื่อพ่อ) 5. ตั้ง ชื่อ ให้ BodyTextLabel 6. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต 7. ตั้ง น้ำหนัก เป็น ตัวหนังสือ เพื่อทำให้ตัวอักษรมีความหนา 8. ตั้ง ข้อความเป็นข้อความเรื่องการเกิดใหม่… ไว้ที่ Respawning… 9. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว 10. เปิดใช้งาน TextScaled

      

2. สร้างหัวข้อ

   1. ใส่ ImageLabel ใน บล็อก

   2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง รุ้งอ้างจุดอ่อน เป็น 0.5, 1 เพื่อตั้งจุดศูนย์กลางของฉลากในด้านล่างกลางของตัวเอง (50% จากด้านซ้ายไปขวาของฉลากและ 100% จากด้านบนไปข้างล่างของฉ 2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0, 0} เพื่อตั้งฉลากในด้านบนของฉลากพ่อ (50% จากซ้ายไปขวาของฉลากพ่อและ 0% จากด้านบนของฉลากพ่อ) และตั้ง {0.5, 0},{0, 0} 4. ตั้ง ขนาด เป็น {0.46, 0},{0.56, 0} เพื่อขยายแท็งแผ่ฉลาก (46% ในแนวตั้งและ 56% ในแนวนอนของฉลากพ่อ) 5. ตั้ง ชื่อ เป็น หัวข้อ 6. ตั้ง รูปภาพ เป็น rbxassetid://14304826985 เพื่อให้รูปภาพเป็นเฟดอันมุมมองหลาย 7. ตั้ง สีของภาพ เป็น 245, 46, 46 เพื่อให้สีแดงจมลงเพื่อแสดงว่าผู้เล่นอยู่ในระหว่างไม่ได้ใช้งานในรอบนี้

      

   3. ใส่ TextLabel ใน หัวข้อ สำหรับข้อความนิยาย

   4. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง AnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลาก และ 50% จากด้านบนไปข้างล่างของฉลาก) 2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 3. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากในตำแหน่งกลางของป้ายชื่อของพ่อ (50% จากซ้ายไปขวาของป้ายชื่อของพ่อและ 50% จากด้านบนไปด้านล่างของ 4. ตั้ง ขนาด เป็น {.85, 0},{0.55, 0} เพื่อให้ข้อความสามารถครอบคลุมพื้นที่ส่วนใหญ่ของพื้นที่ลดลง (85% ในแนวตั้งและ 55% ในแนวนอนของป้ายชื่อพ่อ) 5. ตั้ง ชื่อ เป็น ชื่อเรื่อง 6. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต 7. ตั้ง น้ำหนัก เป็น สีดำ เพื่อทำให้ตัวอักษรมีความหนา 8. ตั้ง ข้อความ เป็น TAGGED - YOU'RE OUT! 9. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว 10. เปิดใช้งาน TextScaled

      

3. สร้างเงารอบขอบของหน้าจอ

   1. ใส่ ImageLabel ใน OutStateGui 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง AnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลาก และ 50% จากด้านบนไปข้างล่างของฉลาก) 2. ตั้ง สีพื้นหลัง3 เป็น 0,0,0 เพื่อตั้งสีพื้นหลังของฉลากเป็นสีดำ 3. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.5 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสครึ่งหนึ่ง 4. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากในตรงกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของป้ายชื่อ ScreenGUI และ 50% จากด้านบนไปด้านล่างของป้ายชื่อ Screen 5. ตั้ง ขนาด เป็น {1, 0},{1, 0} เพื่อขยายแท็งแคปให้กว้างไปทั่วหน้าจอ (100% แนวตั้งและ 100% แนวตั้งของปูม ScreenGUI ของพ่อ) 6. ตั้ง ZIndex เป็น -1 เพื่อแสดงซีดหลัง UI อื่นๆ 7. ตั้ง ชื่อ เป็น หัวข้อ 8. ตั้ง รูปภาพ เป็น rbxassetid://14309518613 เพื่อให้รูปภาพเป็นเรือนกำแพง 9. ตั้ง ความโปร่งใสของรูปภาพ เป็น 0.1 เพื่อทำให้เงาเล็กน้อยที่เปล่งประกาย

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

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

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

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

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

เมื่อผู้เล่นเกิดใหม่พวกเขาจะได้รับ playerState ซึ่งเป็น SelectingBlaster แล้วจะเปิดใช้งาน onSelectingBlaster() โ

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()
	-- เปิดกล้องให้ผู้เล่นมองได้รอบ ๆ ขณะที่เลือก blaster
	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)

	-- ปิดการทำงาน blaster ในขณะที่ป้องกันตัวออก
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

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

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

	-- ปิดการทำงาน blaster ในล็อบบี้
	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)

สร้างวัตถุ SurfaceGui

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

SurfaceGui วัตถุมีทั้งหมด GuiObjects ที่ปรากฏบนพื้นผิวของส่วนในพื้นที่ 3D The ตัวอย่างเลเซอร์ tag ประส

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

1. ใน หน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่บริการ ReplicatedStorage แล้วคลิกที่ไอคอน ⊕ จากนั้นเมนูบริบทัศน์จะปรากฏขึ้น

2. จากเมนูบริบทัศน์ ใส่วัตถุ Part 3. ใส่วัตถุ ScreenGui ในส่วน

3. เปลี่ยนชื่อ SurfaceGui ตามความเป็นไปขององค์ประกอบ UI ของเด็ก

4. ทำซ้ำกระบวนการนี้สำหรับแต่ละส่วนของ UI ที่คุณต้องการแสดงบนพื้นผิวของชิ้นส่วนในพื้นที่ 3D

   

เครื่องคิดเวลา

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

เพื่อสร้างเครื่องชี้เวลาคูลดาวน์ภายในประสบการณ์ Laser Tag

1. สร้างส่วนที่จะรองรับวัตถุ SurfaceGui ของคุณ

   1. ใน หน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่ พื้นที่ทํางาน แล้วคลิกที่ไอคอน ⊕ เมนูบริบทัศน์
   2. จากเมนู上下컨텍สต์ใส่ชิ้นส่วน บล็อก ให้

2. ตําแหน่งและจัดตําแหน่งชิ้นส่วนรอบตําแหน่งที่ผู้เล่นจะถืออาวุธของพวกเขา, ใน หน้าต่าง Proprietades ,

   1. ตั้ง ความโปร่งใส เป็น 1 เพื่อให้ชิ้นส่วนโปร่งใสสมบูรณ์
   2. ตั้ง ชื่อ เป็น CooldownBarPrefab 3. ตั้ง ขนาด เป็น 0.169, 0.027, 2.537 เพื่อขยายส่วนลึกของผลิตภัณฑ์
   3. ปิด CanCollide และ CanQuery

3. ใส่ SurfaceGui ใน CooldownBarPrefab

4. เลือก SurfaceGui ใหม่ แล้วในหน้าต่าง คุณสมบัติ 1. ตั้ง หน้า ให้เป็น ด้านบน เพื่อให้ UI ปรากฏขึ้นด้านบน 2. ตั้งค่า LightInfluence และ MaxDistance ให้เป็น 0 3. ตั้ง PixelsPerStud เป็น 200

   

5. สร้างแถบสีดำ

   1. ใส่ ImageLabel ใน SurfaceGui 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

      1. ลบค่า รูปภาพ ปกติ
      2. ตั้ง AnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลาก และ 50% จากด้านบนไปข้างล่างของฉลาก)
      3. ตั้ง สีพื้นหลัง3 เป็น 0,0,0 เพื่อตั้งสีพื้นหลังของฉลากเป็นสีดำ
      4. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.4 เพื่อให้พื้นหลังของฉลากเป็นความโปร่งใสเล็กน้อย
      5. ตั้ง ตําแหน่ง เป็น 0.5, 0,0.5, 0 5> ในการตั้งฉลากในตรงกลางของคอนเทนเนอร์ (50% จากด้านซ้ายไปขวาของ SurfaceGui และ 50% จากด้านบนไปด้านล่างของ SurfaceGui)
      6. ตั้ง ขนาด เป็น {1, 0},{1, 0} เพื่อขยายแท็งแผงเป็นทั้งหน้า (100% แนวตั้งและ 100% แนวตั้งของพ่อ SurfaceGui ปกติ)
      7. ตั้ง ชื่อ เป็น คอนเทนเนอร์

      

6. รอบโฉมมุมของคอนเทนเนอร์

   1. ใส่วัตถุ UICorner ใน Container 2. เลือก มุม UICorner แล้วใน ตัวอย่าง Proprieties วินโดว์, ตั้ง CornerRadius ไว้ที่ 1> 0.15, 01> เพื่อเรียกเหลี่ยมมุมเล็กน้อย

      

7. สร้างแถบสีแดง

   1. ใส่ รายการรูปภาพ ใน คอนเทนเนอร์ 2. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ลบค่า รูปภาพ ปกติ 2. ตั้ง รุ่นออเตอร์พอยน์ท์ เป็น 1, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในด้านกลางของตัวเอง (100% จากด้านซ้ายไปขวาของฉลากและ 50% จากด้านบนไปข้างล่างของฉ 3. ตั้ง สีพื้นหลัง3 เป็น 172, 13, 13 เพื่อตั้งสีพื้นหลังของฉลากเป็นสีแดงสีเข้ม 4. ตั้ง ความโปร่งใสพื้นหลัง เป็น 0.2 เพื่อทำให้พื้นหลังของฉลากเป็นความโปร่งใสเล็กน้อย 5. ตั้ง ชื่อ เป็น Bar 6. ตั้ง ตําแหน่ง เป็น {1, 0},{0.5, 0} เพื่อตั้งฉลากในตำแหน่งกลางของคอนเทนเนอร์ (100% จากซ้ายไปขวาของฉลากบน, และ 50% จากด้านบนไปด้านล่างของฉลากบน) 7. ตั้ง ขนาด เป็น {0, 0},{1, 0} เพื่อยืดเครื่องหมายไปยังด้านบนของป้ายชื่อพ่อ (0% ตามแนวตั้งและ 100% ตามแนวนอนของป้ายพ่อ) นี้สเต็ปยังเป็นประโยช

8. รอบมุมของฉลาก

   1. ใส่วัตถุ UICorner ใน Bar 2. เลือก มุม UICorner แล้วใน ตัวอย่าง Proprieties วินโดว์, ตั้ง CornerRadius ไว้ที่ 1> 0.15, 01> เพื่อเรียกเหลี่ยมมุมเล็กน้อย

9. ย้าย CooldownBarPrefab ไปที่ ReplicatedStorage 1. สร้างโครงสร้างโฟลเดอร์เพื่อจัดเก็บวัตถุ UI ของคุณ ตัวอย่างใช้โฟลเดอร์ Instances ด้วยลูกโฟลเดอร์ Guis และลูกโฟลเดอร์ UI ต่างๆ

   

   2. ย้าย CooldownBarPrefab ไปยัง Guis

10. อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในตัวอย่าง Laser Tag ไฟล์ที่วางในสถานที่สคริปต์ที่ปรับแต่งเวลานับถอยหลังสำหรับผู้ใช้ในตอนท้ายของการยิงลาเซอร์ของพวกเขาแล้วจาก

สคริปต์ลูกค้า ReplicatedStorage.FirstPersonBlasterVisuals การเล่นเกมต้องการชุดของสคริปต์โมดู

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
	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
		-- นี่ยังทำลายแถบคูลดาวน์เนื่องจากมันเป็นลูกพี่ลูกน้องของเร็ว
		rigModel:Destroy()
		rigModel = nil
	end
end

-- วิธีรันเอฟเฟกต์วิดีโอของคนแรกเมื่อเกิดระเบิด
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- ผูกเรือของคุณกับกล้องถ้ามี
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- อัปเดต CFrame ของรุ่นต่อหน้ากล้อง และ RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- การเปลี่ยนแปลงวิดีโอเมื่อ blasterType เปลี่ยนแปลงในขณะที่เล่น
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 ภายในบริการ ReplicatedStorage สามารถแสดงได้

• OtherPlayerIndicatorGuiPrefab - แสดงวงกลมสีชมพูหรือสีเขียวเหนือหัวของผู้เล่นแต่ละรายเมื่อพวกเขากำลังใช้งานในรอบ
• TaggedOutIndicatorGuiPrefab - แสดงผลด้านบนหัวของผู้เล่นเมื่อพวกเขาถูกถอดออกจากรอบ

หลังจากที่คุณสร้างวัตถุ BillboardGui คุณสามารถสร้างและปรับแต่งลูกของมันตามวัตถุประสงค์ของแต่ละคอนเทนเนอร์ได้ GuiObjects ตา

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

1. ใน หน้าต่าง Explorer หยุดแล้ววางเมาส์ไว้บน BasePart หรือ Attachment แล้วคลิกที่ไอคอน 1> ⊕1> เมนูบริบทัศน์
2. จากเมนู上下컨텍สต์ใส่วัตถุ BillboardGui 3. เปลี่ยนชื่อ BillboardGui ตามความต้องการขององค์ประกอบ UI ของมัน
3. ทำซ้ำขั้นตอนนี้สำหรับแต่ละรายการ UI ที่คุณต้องแสดงให้เห็นด้านบนหัวของผู้เล่น

เครื่องชี้วัดทีม

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

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

1. ใส่วัตถุ BillboardGui ลงในริกชาร์จชั่วคราว

   1. ในแถบเมนู ไปที่แท็บ อวตาร แล้วคลิกที่ ผู้สร้างแผ่นขุด

      

   2. เลือกจากตัวเลือกที่มี ตัวอย่างใช้ R15 พิมพ์, รูปร่างกาย ผู้หญิง และ Rthro อวาตาร์ Rthro ใน viewport 3D และ ตาราง Explorer ภายใต้ชื่อ Rig

   3. ใน หน้าต่าง Explorer ค้นหาไปยังเมช หัว ของริก แล้วคลิกที่ไอคอน ⊕ คุณจะเห็นหน้า 1>⊕1> ของริก แล้วคลิกที่ไอคอน 4>⊕4> คุณจะเห็นหน้า 7>⊕7> ของริก Errors: Error: ห

   4. จากเมนูบริบทัศน์, ใส่ BillboardGui

      

2. เลือก BillboardGui ใหม่, แล้วใน หน้าต่าง Proprieties ,

   1. ตั้ง LightInfluence เป็น 0 เพื่อป้องกันไฟฟ้าสิ่งแวดล้อมจากการส่งผลต่อสีของตัวชี้วัด

   2. ตั้ง ชื่อ เป็น OtherPlayerIndicatorPrefab 3. ตั้ง ขนาด เป็น {0, 10},{0, 10} เพื่อทำให้ฉลากเล็กลงอย่างมาก

   3. ตั้ง StudsOffsetWorldSpace เป็น 0, 4, 0 เพื่อวางตำแหน่งมันเหนือหัวของริก

      

3. ใส่วัตถุ เฟรม ใน OtherPlayerIndicatorPrefab

4. เลือกโค้งใหม่แล้วในหน้าต่าง คุณสมบัติ 1. ตั้ง รุ้งAnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของเฟรม (50% จากด้านซ้ายไปขวาของแท็งแผ่น และ 50% จากด้านบนไปข้างล่างของแท็งแผ่น) 2. ตั้ง สีพื้นหลัง3 เป็น 255, 3, 0 เพื่อตั้งสีพื้นหลังของเฟรมเป็นสีแดงเป็นสีแท่งสี 3. ตั้ง ตําแหน่ง เป็น 0.5, 0,0.5, 0 5> เพื่อตั้งโครงสร้างไว้ในตรงกลางของคอนเทนเนอร์ (50% จากด้านซ้ายไปขวาของ BillboardGui และ 50% จากด้านบนไปข้างล่างของ Billboard 4. ตั้ง ขนาด เป็น {1, -2},{1, -2} เพื่อขายโค้ดรอบบอร์ดให้สั้นลงไปที่พื้นที่ผิวของ BillboardGui

   

5. ใส่วัตถุ UICorner ใน เฟรม เพื่อหมุนมุมทั้งหมด

   

6. ใส่วัตถุ UIStroke ใน เฟรม เพื่อออกโฉมวงกลมของตัวชี้วัด

   

7. ย้าย OtherPlayerIndicatorPrefab ไปที่ ReplicatedStorage

8. อ้างอิงสคริปต์ ReplicatedStorage ต่อไปในตัวอย่าง Laser Tag 1A ที่สถานที่ไฟล์ที่โปรแกรมใด ๆ จะแสดงเป็นเรือมุ่งหมายสำหรับผู้เล่นในรอบที่เปิดอยูนเว้นแต่พวกเขาอยู่ในทีมศัตรูแล

สคริปต์ต่อไปนี้ ReplicatedStorage.OtherPlayerIndicatorGuiSetup จะดำเนินการเมื่อผู้เล่นเข้าสู่สนามเพื่อรอบที่เปิดอ

หากผู้เล่นอื่นอยู่ในทีมเดียวกันการแสดงตำแหน่งทีมจะปรากฏเสมอ แม้ว่าพวกเขาจะซ่อนอยู่หลังวัตถุในพื้นที่ 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

		-- เพิ่มเฉพาะตัวชี้วัดสำหรับผู้เล่นเท่านั้นที่มีส่วนร่วมในรอบนี้
		if not otherPlayer.Team then
			return
		end

		-- หลีกเลี่ยงการเพิ่มตัวชี้วัดที่ซ้ำกันโดยไม่ต้องสร้างใหม่เฉพาะในกรณีที่ไม่มี
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- เครื่องชี้วัดจะอยู่ด้านบนเสมอเมื่อผู้เล่นเป็นมิตร

		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 ที่แจ้งให้ผู้เล่นเมื่อผู้เล่นอื่นไม่ได้อยู่ในรอบและกำลังเผชิญกับการเกิดใหม่ โดยทันทีผู้เล่นจะไม่

เพื่อสร้างเครื่องหมายที่ถูกป้ายชื่อภายในประสบการณ์ เลเซอร์แท็ก

1. ใส่วัตถุ BillboardGui เข้ากับเรือชั่วคราวเพื่อให้คุณสามารถดูการเปลี่ยนแปลงในแต่ละขั้นตอนของกระบวนการได้

   1. ในแถบเมนู ไปที่แท็บ อวตาร แล้วคลิกที่ ผู้สร้างแผ่นขุด 2. เลือกจากตัวเลือกที่มี ตัวอย่างใช้ R15 พิมพ์, รูปร่างกาย ชาย และ Rthro อวาตาร์ Rthro จะปรากฏทั้งใน 3D มุมมองและใน หน้าต่าง Explorer ภายใต
   2. ใน หน้าต่าง Explorer ค้นหาไปยังเมช หัว ของริก แล้วคลิกที่ไอคอน ⊕ คุณจะเห็นหน้า 1>⊕1> ของริก แล้วคลิกที่ไอคอน 4>⊕4> คุณจะเห็นหน้า 7>⊕7> ของริก Errors: Error: ห
   3. จากเมนูบริบทัศน์, ใส่ BillboardGui

2. เลือก BillboardGui ใหม่, แล้วใน หน้าต่าง Proprieties ,

   1. ตั้ง LightInfluence เป็น 0 เพื่อป้องกันไฟฟ้าสิ่งแวดล้อมจากการส่งผลต่อสีของตัวชี้วัด

   2. ตั้ง ชื่อ เป็น TaggedOutIndicatorGuiPrefab 3. ตั้ง ขนาด เป็น {3, 0},{0.5, 0} เพื่อขยายพื้นที่สำหรับฉลาก

   3. ตั้ง StudsOffset เป็น 0, 3.25, 0 เพื่อวางตำแหน่งมันเหนือหัวผู้เล่น

      

3. ใส่วัตถุ ImageLabel ใน TaggedOutIndicatorGuiPrefab

4. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้

   1. ตั้ง AnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลาก และ 50% จากด้านบนไปข้างล่างของฉลาก)
   2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์
   3. ตั้ง ชื่อ เป็น โครงสร้าง 4. ตั้ง ตําแหน่ง เป็น 0.5, 0,0.5, 0 5> ให้ฉลากไปยังกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของ BillboardGui และ 50% จากด้านบนไปด้านล่างของ BillboardGui)
   4. ตั้ง ขนาด เป็น {1, 0},{1, 0} เพื่อขยายแท็กให้กว้างไปทั่ว BillboardGui (100% แนวตั้งและ 100% แนวตั้งของ BillboardGui พ่อ)
   5. ตั้ง รูปภาพ เป็น rbxassetid://14304826985 เพื่อให้รูปภาพเป็นเฟดอันมุมมองหลาย
   6. ตั้ง สีของภาพ เป็น 245, 46, 46 เพื่อสีฉลากสีแดง

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

   

5. ใส่วัตถุ TextLabel ใน เฟรม

6. เลือกฉลากใหม่แล้วในหน้าต่าง โปรพีเพอร์ตี้ 1. ตั้ง AnchorPoint เป็น 0.5, 0.5 เพื่อตั้งจุดศูนย์กลางของฉลากในตัวเอง (50% จากด้านซ้ายไปขวาของฉลาก และ 50% จากด้านบนไปข้างล่างของฉลาก) 2. ตั้ง ความโปร่งใสพื้นหลัง เป็น 1 เพื่อให้พื้นหลังของฉลากเป็นสีโปร่งใสสมบูรณ์ 3. ตั้ง ชื่อ ให้ BodyTextLabel 4. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากให้อยู่กลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของเฉลี่ยและ 50% จากด้านบนไปด้านล่างของเฉลี่ย) 5. ตั้ง ขนาด เป็น {0.85, 0},{0.7, 0} เพื่อให้ข้อความสามารถครอบคลุมพื้นที่ส่วนใหญ่ของพื้นที่เรืองแสง (85% ในแนวตั้งและ 70% ในแนวนอนของป้ายชื่อภาพแม่ของพ่อ) 6. ตั้ง FontFace เป็น Montserrat เพื่อให้เหมาะกับความงามอนาคต 7. ตั้ง น้ำหนัก เป็น ตัวหนังสือ เพื่อทำให้ตัวอักษรมีความหนา 8. ตั้ง ข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้อความเป็นข้ 9. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว 10. เปิดใช้งาน TextScaled

   

7. ย้าย TaggedOutIndicatorGuiPrefab ไปยัง ReplicatedStorage

8. อ้างอิงสคริปต์ต่อไปนี้ ServerScriptService สคริปต์ภายในตัวอย่าง Laser Tag 1A ไฟล์ที่แสดงผลโปรแกรมตัวอย่างที่แสดงผลของเรือนำทางขณะที่ผู้เล่นกำลังเรียกคืนสู่โซนการเรียกคืนของทีม

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

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)
	-- เรียก onCharacterAdded ถ้าผู้เล่นมีตัวละครแล้ว
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- เรียก onCharacterAdded สำหรับทุกการเกิดตัวตัวละครในอนาคตสำหรับผู้เล่นนี้
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- เรียก onPlayerAdded สำหรับผู้เล่นที่อยู่ในเกมแล้ว
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- เรียก onPlayerAdded สำหรับผู้เล่นทุกคนในอนาคต
Players.PlayerAdded:Connect(onPlayerAdded)

ขอแสดงความยินดีกับการเสร็จสิ้นหลักสูตรการออกแบบ UI! ตอนนี้คุณมีประสบการณ์ในการสร้างสไตล์ศิลปะหรือการจัดเค้าโครงของการนำเสนอของคุณใน Studio ตั