นำออกแบบไปใช้ใน Studio

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

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

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

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

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

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

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

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

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

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

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

**กับดักทรงพลิงย้อนกลับ** rbxassetid://14304827304

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

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

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

ไอคอนตัวบ่งบอกการโจมตี rbxassetid://14401148777

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

**การจางเบื้องหน้า** rbxassetid://14309518632

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

Final Screen UI Components

Reference the completed version of the UI designs with these 2D assets.

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

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

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

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

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

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

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

สร้างวัตถุ ScreenGui

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

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

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

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

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

อินเทอร์เฟซผู้ใช้เป้าหมาย

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

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

เพื่อสร้างอินเทอร์เฟซผู้ใช้เป้าหมายใหม่อย่างแม่นยำภายในประสบการณ์ แท็กเลเซอร์ ตัวอย่าง:

สร้างคอนเทนเนอร์สำหรับส่วนประกอบทั้งหมด
1. ใส่ กรอบ ใน HUDGui ScreenGui วัตถุ
  1. ในหน้าต่าง สํารวจ ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุลูกของมัน HUDGui จากนั้นคลิกไอคอน ⊕ จะปรากฏเมนูบริบท
  2. จากเมนูบริบทใส่ กรอบ
2. เลือก กรอบใหม่ จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 0 เพื่อตั้งจุดเริ่มต้นของกรอบที่ด้านบนกลางของตัวเอง (50% จากด้านซ้ายไปขวาของกรอบและ 0% จากด้านบนลงล่างของกรอบ)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของกรอบโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.03, 0} เพื่อตั้งกรอบใกล้ส่วนกลางของหน้าจอ (50% จากซ้ายไปขวาของหน้าจอและ 3% จากด้านบนลงด้านล่างของหน้าจอเพื่อให้มีช่องว่างเล็กน้อย)
  4. ตั้ง ขนาด เป็น {0.5, 0},{0.13, 0} เพื่อให้องค์ประกอบของกรอบใช้ส่วนใหญ่ของด้านบนของหน้าจอเพื่อดึงความสนใจของผู้เล่น (50% แนวนอนและ 13% แนวตั้ง)
  5. ตั้ง ชื่อ เป็น เป้าหมาย .
3. (เลือกได้) ใส่ ข้อจํากัดอัตราส่วน UI ใน เป้าหมาย เพื่อให้แน่ใจว่าอัตราส่วนของป้ายยังคงเหมือนเดิมไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใดตัวอย่างตั้งค่าคุณสมบัติ UIAspectRatioConstraint.AspectRatio ของมันเป็น 7
สร้างคอนเทนเนอร์สำหรับวัตถุตอบสนองของเป้าหมาย
1. ใส่ กรอบ ใน เป้าหมาย .
2. เลือก กรอบใหม่ จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 0 เพื่อตั้งจุดเริ่มต้นของกรอบที่ด้านบนกลางของตัวเอง (50% จากด้านซ้ายไปขวาของกรอบและ 0% จากด้านบนลงล่างของกรอบ)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของกรอบโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0, 0} เพื่อตั้งกรอบไว้ตรงกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของกรอบพ่วง และ 0% จากด้านบนลงด้านล่างของกรอบพ่วง)
  4. ตั้ง ขนาด เป็น {1, 0},{0.67, 0} เพื่อให้ส่วนประกอบ UI การเลือกใช้พื้นที่ประมาณมากกว่าครึ่งของภาชนะจากด้านบนลงด้านล่าง (100% แนวนอนและ 67% แนวตั้งของกรอบพ่วง)
  5. ตั้ง ชื่อ เป็น การแสดงเป้าหมาย .
สร้างองค์ประกอบชื่อ
1. ใส่ แท็บรูปภาพ ใน จอแสดงเป้าหมาย .
2. เลือก แท็บรูปภาพ จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 1 เพื่อตั้งจุดเริ่มต้นของป้ายชื่อในด้านล่างกลางของตัวเอง (50% จากซ้ายไปขวาของป้ายและ 100% จากด้านบนไปด้านล่างของป้าย)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ลำดับเลย์เอาต์ เป็น -1
  4. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.34, 0} เพื่อตั้งฉลากใกล้ด้านบนของกรอบ (50% จากซ้ายไปขวาของกรอบพ่วง และ 34% จากด้านบนลงล่างของกรอบพ่วง)
  5. ตั้ง ขนาด เป็น {0.46, 0},{0.34, 0} เพื่อขยายพื้นที่เตือนใจให้เกือบครึ่งของกรอบ (46% แนวนอนและ 34% แนวตั้งของกรอบพ่วง)
  6. ตั้ง ชื่อ ให้เป็นหัวข้อ
  7. ตั้ง รูปภาพ เป็น rbxassetid://14304828123 เพื่อแสดงทรงสี่เหลี่ยมผืนผ้า
  8. ตั้ง ความโปร่งใสของภาพ เป็น 0.15 เพื่อทำให้หัวข้อเป็นครึ่งโปร่งใส
3. (ตัวเลือก) ใส่ ข้อจํากัดอัตราส่วน UI ใน ป้ายชื่อภาพ เพื่อให้แน่ใจว่าอัตราส่วนของป้ายยังคงเหมือนเดิมไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใดตัวอย่างตั้งค่าคุณสมบัติ UIAspectRatioConstraint.AspectRatio ของมันเป็น 13.781 .
4. ใส่ ฉลากข้อความ ใน หัวข้อ เพื่อแสดงชื่อ
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} เพื่อขยายพื้นที่ข้อความเกินครึ่งหนึ่งของแท็บพ่วง (62% แนวนอนและ 55% แนวตั้งของแท็บพ่วง)
  5. ตั้ง ชื่อ เป็น HeaderTextLabel .
  6. ตั้ง FontFace ให้เป็น Montserrat เพื่อให้เข้ากับความสวยงามในอนาคต
  7. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้ง ข้อความ เป็น เป้าหมาย .
  9. เปิดใช้งาน TextScaled
สร้างองค์ประกอบพร้อมท์
1. ใส่ แท็บรูปภาพ ใน จอแสดงเป้าหมาย .
2. เลือก แท็บรูปภาพ จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 1 เพื่อตั้งจุดเริ่มต้นของป้ายชื่อในด้านล่างกลางของตัวเอง (50% จากซ้ายไปขวาของป้ายและ 100% จากด้านบนไปด้านล่างของป้าย)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ตำแหน่ง เป็น {0.5, 0},{1, 0} เพื่อย้ายฉลากไปที่ด้านล่างกลางของกรอบพ่วง (50% จากด้านซ้ายไปด้านขวาของกรอบพ่วง และ 100% จากด้านบนไปด้านล่างของกรอบพ่วง)
  4. ตั้ง ขนาด เป็น {0.89, 0},{0.66, 0} เพื่อขยายพื้นที่ข้อความให้เกือบถึงความกว้างเต็มของกรอบแม่ (89% ในแนวนอนและ 66% ในแนวตั้งของกรอบแม่)
  5. ตั้ง ชื่อ เป็น ร่างกาย .
  6. ตั้ง รูปภาพ เป็น rbxassetid://14304827265 เพื่อแสดงทรายสีกลับด้าน
  7. ตั้ง สีภาพ 3 เป็น 0, 0, 0 เพื่อย้อมสีภาพดำ
  8. ตั้ง ความโปร่งใสของภาพ เป็น 0.3 เพื่อทำให้หัวข้อเป็นครึ่งโปร่งใส
3. (ตัวเลือก) ใส่ ข้อจํากัดอัตราส่วน UI ใน ป้ายชื่อภาพ เพื่อให้แน่ใจว่าอัตราส่วนของป้ายยังคงเหมือนเดิมไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใดตัวอย่างตั้งค่าคุณสมบัติ UIAspectRatioConstraint.AspectRatio ของมันเป็น 13.781
4. ใส่ ฉลากข้อความ ใน ร่างกาย เพื่อแสดงคำเตือน
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 เพื่อให้เข้ากับความสวยงามในอนาคต
  7. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความขาวกับพื้นหลังมืด
  9. ตั้ง ข้อความ เป็น แท็กที่ต่อต้านผู้เล่นเพื่อทำคะแนน! ทีมแรกที่มีคะแนน %d ชนะ 10. เปิดใช้งาน TextScaled
สร้างคอนเทนเนอร์สำหรับเคาน์เตอร์ทีมของเป้าหมาย
1. ใส่ กรอบ ใน เป้าหมาย .
2. เลือก กรอบใหม่ จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 1 เพื่อตั้งจุดเริ่มต้นของแท็บในด้านล่างกลางของตัวเอง (50% จากซ้ายไปขวาของกรอบและ 100% จากด้านบนไปด้านล่างของกรอบ)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของกรอบโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ตำแหน่ง เป็น {0.5, 0},{1, 0} เพื่อตั้งกรอบในด้านล่างกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของกรอบพ่วง และ 100% จากด้านบนลงล่างของกรอบพ่วง)
  4. ตั้ง ขนาด เป็น {0.44, 0},{0.27, 0} เพื่อให้ส่วนประกอบ UI สำหรับการเลือกใช้พื้นที่น้อยกว่าครึ่งหนึ่งของคอนเทนเนอร์จากซ้ายไปขวา (44% แนวนอนและ 27% แนวตั้งของกรอบแม่)
  5. ตั้ง ชื่อ เป็น TeamPointCounter .
สร้างการจัดเตรียมสำหรับเครื่องนับทีม
1. ใส่วัตถุ UIListLayout ลงในกรอบจากขั้นตอนที่ 5
2. เลือกวัตถุ UIListLayout จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง การเว้นวรรค เป็น 0.025, 0 เพื่อให้พื้นที่ระหว่างเครื่องนับทีมในอนาคต 2. ตั้ง ทิศทางการเติม เป็น แนวนอน เพื่อให้แต่ละทีมนับถอยตามกัน 3. ตั้ง การจัดตำแหน่งแนวนอน เป็น กลาง เพื่อให้แต่ละทีมนับตรงกลางของกันและกัน
สร้างองค์ประกอบนับทีมสีเขียว
1. ใส่ แท็บรูปภาพ ใน TeamPointCounter .
2. เลือก แท็บรูปภาพ จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
  2. ตั้ง ตำแหน่ง เป็น {0.5, 0},{1, 0} เพื่อย้ายฉลากไปที่ด้านล่างกลางของกรอบพ่วง (50% จากด้านซ้ายไปด้านขวาของกรอบพ่วง และ 100% จากด้านบนไปด้านล่างของกรอบพ่วง)
  3. ตั้ง ขนาด เป็น {0.5, 0},{1, 0} เพื่อขยายฉลากให้กว้างครึ่งของกรอบพ่วง (50% ในแนวนอนและ 100% ในแนวตั้งของกรอบพ่วง)
  4. ตั้ง ชื่อ เป็น TeamACounter .
  5. ตั้ง รูปภาพ เป็น rbxassetid://14304826831 เพื่อแสดงการจางไปในทิศทาง
  6. ตั้ง สีภาพ3 เป็น 88, 218, 171 เพื่อย้อมสีภาพให้เป็นสีเขียวมิ้นท์
3. กำหนดค่าตัวละครที่กำหนดเองเพื่อติดตามว่าป้ายชื่อนี้สำหรับทีมสีเขียว
  1. ในหน้าต่าง คุณสมบัติ ให้นำทางไปที่ส่วน คุณลักษณะ จากนั้นคลิกไอคอนบวก จะปรากฏหน้าต่างป๊อปอัพ
  2. ในฟิลด์ ชื่อ ใส่ สีทีม 3. ในเมนูการเลือกแบบ ประเภท ให้เลือก BrickColor 4. คลิกที่ปุ่ม บันทึก 5. ตั้งค่าคุณสมบัติใหม่ teamColor เป็น Mint
4. ใส่ ฉลากข้อความ ใน TeamACounter เพื่อแสดงคำเตือน
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. ซ้ำ TeamAICounter และลูกหลานของมัน
2. เลือกที่ซ้ำ TeamACounter จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง ชื่อ เป็น TeamBCounter . 2. ตั้ง รูปภาพ เป็น rbxassetid://14305849451 เพื่อแสดงการจางไปในทิศทางตรงกันข้าม 3. ตั้ง สีภาพ3 เป็น 255, 170, 255 เพื่อย้อมสีภาพกุหลาบสีชมพู 4. ตั้งค่าคุณสมบัติ สีทีม เป็น กุหลาบสีชมพู 3. เลือกลูก แท็กข้อความซ้ำ ของ TeamBCounter จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง จุดยึด เป็น 0, 0.5 เพื่อตั้งจุดกำเนิดของแท็บใหม่ในด้านซ้ายกลางของตัวเอง (0% จากด้านซ้ายไปขวาของแท็บ และ 50% จากด้านบนลงล่างของแท็บ) 2. ตั้ง ตำแหน่ง เป็น {0.05, 0},{0.5, 0} เพื่อย้ายฉลากไปทางซ้ายของฉลากบิดา (5% จากซ้ายไปขวาของฉลากบิดา และ 50% จากด้านบนไปด้านล่างของฉลากบิดา) 3. ตั้ง TextXAlignment เป็น ซ้าย .
3. เลือกทารกซ้ำ UIStroke ของ TeamBCounter จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง สี เป็น เพื่อระบุเส้นด้วยสีชมพูเข้ม
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตำแหน่งตัวอย่าง แท็กเลเซอร์ ซึ่งอัปเดตเป้าหมายตามคำสั่งโปรแกรมและติดตามจุดทีมได้

สคริปต์ต่อไปต้องการชุดของสคริปต์โมดูลที่ทำงานร่วมกันเพื่อตั้งค่าหน้าจอแสดงข้อมูลหลัก (HUD) รวมถึง setObjective และ startSyncingTeamPointsหลังจากที่ผู้เล่นเข้าร่วมรอบและเลือกบลาสเตอร์ของตนแล้ว สคริปต์นี้จะตรวจสอบให้องค์ประกอบ HUD 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 นี้ใช้พื้นที่หน้าจอส่วนใหญ่ใกล้กลางหน้าจอเพราะมันทำหน้าที่เป็นจุดเน้นเพื่อดึงความสนใจของผู้เล่นไปที่การกระทำในพื้นที่ 3D และมีความสำคัญมากที่สุดสำหรับการเล่นเกม

เส้นสายตาข้าม

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

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

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

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

เครื่องหมายตี

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

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

ใส่ แท็บรูปภาพ ใน เส้นสายตา ImageLabel วัตถุ
1. ในหน้าต่าง สํารวจ ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุลูกของมัน เส้นสายตา จากนั้นคลิกไอคอน ⊕ แสดงเมนูบริบท
2. จากเมนูบริบทใส่ แท็บรูปภาพ
เลือกฉลากภาพใหม่ ImageLabel จากนั้นในหน้าต่าง คุณสมบัติ
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} เพื่อลดขนาดของสี่เหลี่ยมที่อยู่รอบกลางของเส้นตัดขวาง
7. ตั้ง ความโปร่งใสของภาพ เป็น 1 เพื่อทำให้เครื่องหมายการโจมตีโปร่งใสอย่างสมบูรณ์สคริปต์ในขั้นตอนต่อไปเปลี่ยนความโปร่งใสกลับเป็น 0 ทุกครั้งที่ระเบิดของผู้เล่นสร้างผลกระทบกับผู้เล่นอีกคนหนึ่งในทีมศัตรู
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตัวอย่าง แท็กเลเซอร์ ซึ่งแสดงเครื่องหมายการโจมตีเมื่อระเบิดสร้างผลกระทบกับผู้เล่นในทีมศัตรูโดยการโปรแกรม

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

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

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

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

สร้างคอนเทนเนอร์สำหรับส่วนประกอบทั้งหมด
1. ใส่ กรอบ ในวัตถุ PickABlaster ScreenGui
  1. ในหน้าต่าง สํารวจ ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุลูกของมัน PickABlaster จากนั้นคลิกไอคอน ⊕ แสดงเมนูบริบท
  2. จากเมนูบริบทใส่ กรอบ
2. เลือกกรอบใหม่จากนั้นในหน้าต่าง คุณสมบัติ จะ
  1. ตั้ง จุดยึด เป็น 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. (ตัวเลือก) ใส่ ข้อจํากัดอัตราส่วน UIAspectRatio ใน ส่วนประกอบ เพื่อให้แน่ใจว่าอัตราส่วนเฟรมและองค์ประกอบ UI ของลูกๆ ยังคงเหมือนเดิมไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใดตัวอย่างตั้งค่าคุณสมบัติ UIAspectRatioConstraint.AspectRatio ของมันเป็น 5
สร้างคอนเทนเนอร์เพื่อจัดกลุ่มองค์ประกอบ UI
1. ใส่ กรอบ ใน ส่วนประกอบ 2. เลือกกรอบใหม่จากนั้นในหน้าต่าง คุณสมบัติ จะ
  1. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดเริ่มต้นของกรอบในกลางของตัวเอง (50% จากซ้ายไปขวาของกรอบและ 50% จากด้านบนลงด้านล่างของกรอบ)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของกรอบโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.375, 0} เพื่อตั้งกรอบใกล้ด้านบนกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของกรอบพ่วง และ 37.5% จากด้านบนไปด้านล่างของกรอบพ่วง)
  4. ตั้ง ขนาด เป็น {1, 0},{0.75, 0} เพื่อให้ส่วนประกอบ UI การเลือกใช้พื้นที่ 3/4 ของคอนเทนเนอร์ (100% แนวนอนและ 75% แนวตั้งของกรอบพ่วง)
  5. ตั้ง ชื่อ เป็น กรอบการเลือก .
สร้างคำเตือนสำหรับตัวเลือกบลาสเตอร์
1. ใส่ แท็บรูปภาพ ใน กรอบเลือก .
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 1 เพื่อตั้งจุดเริ่มต้นของป้ายชื่อในด้านล่างกลางของตัวเอง (50% จากซ้ายไปขวาของป้ายและ 100% จากด้านบนไปด้านล่างของป้าย)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ลำดับเลย์เอาต์ เป็น -1
  4. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.22, 0} เพื่อตั้งฉลากใกล้ด้านบนของกรอบ (50% จากซ้ายไปขวาของกรอบพ่วง และ 22% จากด้านบนลงล่างของกรอบพ่วง)
  5. ตั้ง ขนาด เป็น {0.45, 0},{0.22, 0} เพื่อขยายพื้นที่เตือนใจให้เกือบครึ่งของกรอบ (45% แนวนอนและ 22% แนวตั้งของกรอบพ่วง)
  6. ตั้ง ชื่อ เป็น หัวข้อ .
  7. ตั้ง รูปภาพ เป็น rbxassetid://14304828123 เพื่อแสดงทรงสี่เหลี่ยมผืนผ้า
  8. ตั้ง ความโปร่งใสของภาพ เป็น 0.15 เพื่อทำให้หัวข้อเป็นครึ่งโปร่งใส
3. (ตัวเลือก) ใส่ ข้อจํากัดอัตราส่วน UI ในแท็บเพื่อให้แน่ใจว่าอัตราส่วนของแท็บยังคงเหมือนเดิมไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใดตัวอย่างตั้งค่าคุณสมบัติ UIAspectRatioConstraint.AspectRatio เป็น 13.78
4. ใส่ ฉลากข้อความ ใน หัวข้อ เพื่อแสดงคำเตือน
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. ตั้ง ชื่อ เป็น HeaderTextLabel .
  6. ตั้ง FontFace ให้เป็น Montserrat เพื่อให้เข้ากับความสวยงามในอนาคต
  7. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้ง ข้อความ เป็น เลือกบลาสเตอร์ 9. เปิดใช้งาน TextScaled
สร้างคอนเทนเนอร์สำหรับปุ่มบลาสเตอร์และลูกศรการเลือกของคุณ
1. ใส่ แท็บรูปภาพ ใน กรอบเลือก .
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ลบค่าเริ่มต้น รูปภาพ เดิม
  2. ตั้ง จุดยึด เป็น 0.5, 1 เพื่อตั้งจุดเริ่มต้นของป้ายชื่อในด้านล่างกลางของตัวเอง (50% จากซ้ายไปขวาของป้ายและ 100% จากด้านบนไปด้านล่างของป้าย)
  3. ตั้ง สีพื้นหลัง เป็น 0, 0, 0
  4. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 0.3 เพื่อลดความทึบของฉลากลง 30% และจับคู่องค์ประกอบ UI สีดำทั้งหมดในประสบการณ์
  5. ตั้ง ตำแหน่ง เป็น {0.5, 0},{1, 0} เพื่อตั้งฉลากไปที่ด้านล่างกลางของกรอบ (50% จากซ้ายไปขวาของกรอบพ่วง และ 100% จากด้านบนลงล่างของกรอบพ่วง)
  6. ตั้ง ขนาด เป็น {1, 0},{0.77, 0} เพื่อขยายพื้นที่ฉลากไปยังพื้นที่ด้านล่างของแท็บ (100% แนวนอนและ 77% แนวตั้งของกรอบพ่วง)
3. ตัดมุมของคอนเทนเนอร์
  1. ใส่วัตถุ UICorner ในแท็บ
  2. เลือกวัตถุมุมใหม่จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง รัศมีมุม เป็น 0.075, 0 เพื่อทำให้มุมกลม
สร้างคอนเทนเนอร์สำหรับปุ่มบลาสเตอร์ของคุณ
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. ตั้ง ชื่อ เป็น คอนเทนเนอร์ .
สร้างการเว้นวรรคสำหรับปุ่มบลาสเตอร์ทั้งหมดในอนาคต
1. ใส่วัตถุ UIListLayout ลงในกรอบจากขั้นตอนที่ 5
2. เลือกวัตถุเลย์เอาต์ใหม่แล้วในหน้าต่าง คุณสมบัติ 1. ตั้ง การเว้นวรรค เป็น 0.035, 0 เพื่อให้พื้นที่ระหว่างปุ่มทั้งหมดในอนาคต 2. ตั้ง ทิศทางการเติม เป็น แนวนอน ดังนั้นแต่ละปุ่มจะแสดงข้างๆ กัน 3. ตั้งค่าทั้ง การจัดตำแหน่งแนวนอน และ การจัดตำแหน่งแนวตั้ง ให้อยู่ที่ กลาง ดังนั้นแต่ละปุ่มจะสอดคล้องกับตรงกลางของกันและกัน
สร้างปุ่มเมนูซ้าย
1. ใส่วัตถุ ปุ่มภาพ ใน แท็บรูปภาพ จากขั้นตอนที่ 4
2. เลือกปุ่มใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ลบค่าเริ่มต้น รูปภาพ เดิม
  2. ตั้ง จุดยึด เป็น 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. ตั้ง ชื่อ เป็น NavigationButtonLeft .
3. ตัดมุมของปุ่ม
  1. ใส่วัตถุ UICorner ในปุ่ม
  2. เลือกวัตถุมุมใหม่จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง รัศมีมุม เป็น 0.1, 0 เพื่อทำให้มุมกลม
4. ใส่วัตถุ ImageLabel เข้าไปในปุ่ม
5. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดกำเนิดของแท็บใหม่ในกลางของตัวเอง (50% จากซ้ายไปขวาของแท็บ และ 50% จากด้านบนไปด้านล่างของแท็บ)
  2. ตั้ง ตำแหน่ง เป็น {0.45, 0},{0.5, 0} เพื่อตั้งฉลากใกล้กลางปุ่มพ่วงของมัน (45% จากซ้ายไปขวาของปุ่มพ่วง และ 50% จากด้านบนไปด้านล่างของปุ่มพ่วง)ค่านี้ไม่อยู่ตรงกลางเพราะลูกศรไม่ มองเห็นได้อย่างสวยงาม ว่ามันอยู่ในตรงกลางของปุ่มที่ {0.5, 0},{0.5, 0}
  3. ตั้ง ขนาด เป็น {0.8, 0},{0.8, 0} เพื่อขยายพื้นที่ฉลากไปยังพื้นที่ด้านล่างของแท็บ (80% แนวนอนและ 80% แนวตั้งของกรอบพ่วง)
  4. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของภาพโปร่งใสอย่างสมบูรณ์
  5. ตั้ง รูปภาพ เป็น rbxassetid://14309187238 .
  6. ตั้ง ประเภทสเกล เป็น พอดี
สร้างปุ่มนำทางที่ถูกต้อง
1. ซ้ำ ปุ่มนําทางซ้าย .
2. เลือกปุ่มซ้ำแล้วในหน้าต่าง คุณสมบัติ 1. ตั้ง จุดยึด เป็น 1, 0.5 เพื่อตั้งจุดกำเนิดของปุ่มใหม่ในตรงกลางด้านขวาของตัวเอง (100% จากซ้ายไปขวาของปุ่มและ 50% จากด้านบนไปด้านล่างของปุ่ม) 2. ตั้ง ตําแหน่ง เป็น {0.98, 0},{0.5, 0} เพื่อให้การจัดเตรียมช่องว่างด้านขวาของปุ่มจากคอนเทนเนอร์ราก (98% จากซ้ายไปขวาของป้ายชื่อราก และ 50% จากด้านบนไปด้านล่างของป้ายชื่อราก) 3. ตั้ง ชื่อ เป็น NavigationButtonRight .
3. เลือกวัตถุลูก ImageLabel
  1. ตั้ง การหมุน เป็น 180 เพื่อพลิกภาพ
  2. ตั้ง ตำแหน่ง เป็น {0.55, 0},{0.5, 0} เพื่อตั้งฉลากใกล้กลางปุ่มพ่วงของมัน (55% จากซ้ายไปขวาของปุ่มพ่วง และ 50% จากด้านบนไปด้านล่างของปุ่มพ่วง)ค่านี้ไม่อยู่ตรงกลางเพราะลูกศรไม่ มองเห็นได้อย่างสวยงาม ว่ามันอยู่ในตรงกลางของปุ่มที่ {0.5, 0},{0.5, 0}
สร้างปุ่ม เลือก
1. ใส่ ปุ่มภาพ ใน ส่วนประกอบ สังเกตว่ากระบวนการนี้จะเก็บปุ่มเลือกแยกจาก SelectionFrame เพื่อให้คุณสามารถเพิ่มการจัดเตรียมระหว่างส่วนหลักของส่วนประกอบจากปุ่มเลือกได้
2. เลือกปุ่มใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ลบค่าเริ่มต้น รูปภาพ เดิม
  2. ตั้ง จุดยึด เป็น 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% แนวตั้งของกรอบพ่วง)
  6. ตั้ง ชื่อ เป็น ปุ่มเลือก .
3. ตัดมุมของปุ่ม
  1. ใส่วัตถุ UICorner ในปุ่ม
  2. เลือกวัตถุมุมใหม่จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง รัศมีมุม เป็น 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. ตั้ง ชื่อ เป็น เลือกฉลากข้อความ .
  6. ตั้ง FontFace ให้เป็น Montserrat เพื่อให้เข้ากับความสวยงามในอนาคต
  7. ตั้ง น้ำหนัก เป็น ปานกลาง เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้ง ข้อความ เป็น เลือก .
  9. เปิดใช้งาน TextScaled
สร้างปุ่มบลาสเตอร์ล่วงหน้า
1. ในบริการ ReplicatedStorage สร้างโครงสร้างโฟลเดอร์เพื่อจัดระเบียบวัตถุ UI ของคุณตัวอย่างใช้ไฟล์โฟลเดอร์ ตัวอย่าง ที่มีฟอลเดอร์ลูก Guis 2. ใส่วัตถุ ปุ่มภาพ ในโฟลเดอร์ Guis 3. เลือกปุ่มใหม่จากนั้นในหน้าต่าง คุณสมบัติ 1. ลบค่าเริ่มต้น รูปภาพ เดิม 2. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดต้นกำเนิดของปุ่มใหม่ในกลางของตัวเอง (50% จากซ้ายไปขวาของปุ่มและ 50% จากด้านบนไปด้านล่างของปุ่ม) 3. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 0.65 เพื่อให้ข้อเสนอแนะภาพการใช้งานที่ปุ่มไม่ได้อยู่ในโฟกัสสคริปต์ในขั้นตอนที่ 12 ให้การตอบรับภาพระยะไกลเมื่อปุ่มอยู่ในโฟกัส 4. ตั้ง ลำดับเลย์เอาต์ เป็น 2 5. ตั้ง ชื่อ เป็น BlasterButtonPrefab . 6. ตั้ง ขนาด เป็น {0.8, 0},{0.8, 0} . 7. ตั้ง ความโปร่งใสของภาพ เป็น 1 เพื่อทำให้ภาพโปร่งใสสมบูรณ์
2. ใส่ UIAspectRatioConstraint ใน BlasterButtonPrefab เพื่อให้แน่ใจว่าอัตราส่วนของปุ่มยังคงเหมือนเดิมภายในส่วนประกอบไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใด
3. ตัดมุมของปุ่ม
  1. ใส่วัตถุ UICorner ใน BlasterButtonPrefab 2. เลือก UICorner จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง CornerRadius เป็น 0.05, 0 เพื่อตัดเหลี่ยม
4. ใส่ แท็บรูปภาพ ใน BlasterButtonPrefab .
5. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ 1. ลบค่าเริ่มต้น รูปภาพ เดิม 2. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดกำเนิดของแท็บใหม่ในกลางของตัวเอง (50% จากซ้ายไปขวาของแท็บ และ 50% จากด้านบนไปด้านล่างของแท็บ) 3. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์ 4. ตั้ง ตำแหน่ง เป็น {0.52, 0},{0.497, 0} เพื่อตั้งฉลากใกล้กับปุ่มพ่วงของมัน (52% จากซ้ายไปขวาของปุ่มพ่วง และ 49.7% จากด้านบนไปด้านล่างของปุ่มพ่วง)ค่านี้ไม่ได้อยู่ตรงกลางเพราะบลาสเตอร์ไม่ มองเห็นได้อย่างสวยงาม เหมือนอยู่ตรงกลางของปุ่มที่ {0.5, 0},{0.5, 0} 5. ตั้ง ขนาด เป็น {1.20, 0},{0.9, 0} เพื่อขยายพื้นที่ป้ายชื่อด้านนอกปุ่ม (120% แนวนอนและ 90% แนวตั้งของปุ่มบนพ่วง) 6. ตั้ง ประเภทสเกล เป็น พอดี
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตัวอย่าง แท็กเลเซอร์ ซึ่งแสดงปุ่มสำหรับแต่ละบลาสเตอร์โดยอัตโนมัติ ขยายปุ่มเมื่อผู้เล่นเลือกปุ่มที่ไม่ได้อยู่ในโฟกัส และติดตั้งการเลือกบลาสเตอร์ของผู้เล่นกับอวาตาร์ของตน

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

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

ใส่ ปุ่มภาพ ใน HUDGui ScreenGui วัตถุ
1. ในหน้าต่าง สํารวจ ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุลูกของมัน HUDGui จากนั้นคลิกไอคอน ⊕ แสดงเมนูบริบท
2. จากเมนูบริบทใส่ ปุ่มรูปภาพ
ในหน้าต่างมุมมอง เคลื่อนปุ่มไปที่ตำแหน่งที่นิ้วของผู้เล่นพักโดยธรรมชาติเพื่อให้คุณสามารถรับความรู้สึกทางสายตาของปุ่มที่จะมีลักษณะอย่างไรบนอุปกรณ์ของผู้เล่นได้ จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง รูปภาพ เป็น rbxassetid://18308375035 เพื่อแสดงไอคอนปุ่มระเบิด 2. ตั้ง ภาพถูกกด เป็น rbxassetid://18308372558 เพื่อแสดงรูปแบบย้อนกลับของไอคอนปุ่มระเบิดเมื่อผู้เล่นกดปุ่ม 3. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์ 4. ตั้ง ชื่อ เป็น ปุ่มระเบิด . 5. ตั้ง ประเภทเครื่องชั่ง เป็น พอดี เพื่อให้ภาพพอดีกับภาชนะและไม่ยืดในขนาดหน้าจอที่แตกต่างกัน 6. ตั้ง ความโปร่งใสของภาพ เป็น 0.3 เพื่อลดความทึบของแท็บให้ตรงกับองค์ประกอบ UI สีดําทั้งหมดในประสบการณ์
ใส่ UIAspectRatioConstraint ใน BlastButton เพื่อให้แน่ใจว่าอัตราส่วนของปุ่มจะยังคงเหมือนเดิมไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใด
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตัวอย่าง แท็กเลเซอร์ ซึ่งแสดงปุ่มบลาสเตอร์โดยอัตโนมัติเมื่อผู้เล่นใช้การป้อนสัมผัสบนอุปกรณ์ที่รองรับการป้อนสัมผัส

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

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

อินเทอร์เฟซผู้เล่น

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

ตัวบ่งบอกผู้เล่น

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

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

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

ใส่ กรอบ ใน HUDGui ScreenGui วัตถุ
1. ในหน้าต่าง สํารวจ ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุลูกของมัน HUDGui จากนั้นคลิกไอคอน ⊕ จะปรากฏเมนูบริบท
2. จากเมนูบริบทใส่ กรอบ
เลือก กรอบใหม่ จากนั้นในหน้าต่าง คุณสมบัติ
1. ตั้ง จุดยึด เป็น 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 เด็กที่ขยายไปนอกกรอบ
สร้างรูปทรงเหลี่ยมผืนผ้า
1. ใส่ แท็บรูปภาพ ใน PlayerDisplay .
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง รูปภาพ เป็น rbxassetid://14304828123 เพื่อแสดงไอคอนทรงสี่เหลี่ยมผืนผ้า
  2. ตั้ง จุดยึด เป็น 1, 1 เพื่อตั้งจุดเริ่มต้นของแท็บในด้านล่างขวาของตัวเอง (100% จากซ้ายไปขวาของแท็บ และ 100% จากด้านบนลงล่างของแท็บ)
  3. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
  4. ตั้ง ชื่อ เป็น บล็อก .
  5. ตั้ง ตำแหน่ง เป็น {1,0},{1,0} เพื่อตั้งฉลากไปทางด้านขวาของกรอบ
  6. ตั้ง ขนาด เป็น {1.858, 0},{0.581, 0} เพื่อขยายฉลากนอกกรอบและย่อให้สั้นเกินครึ่งหนึ่งของความยาวของกรอบ
  7. ตั้ง ความโปร่งใสของภาพ เป็น 0.15 เพื่อทำให้ฉลากเป็นใสเล็กน้อย
  8. ตั้ง ประเภทเครื่องชั่ง เป็น พอดี เพื่อให้ภาพพอดีกับภาชนะและไม่ยืดในขนาดหน้าจอที่แตกต่างกัน
  1. ใส่ ข้อจํากัดอัตราส่วน UIAspectRatio ใน บล็อก เพื่อให้แน่ใจว่าแท็บและองค์ประกอบ UI ของลูกๆ ยังคงมีอัตราส่วนเดียวกันไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใด
  2. เลือกข้อจํากัดใหม่จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง อัตราส่วนความสวยงาม เป็น 13.78
สร้างกล่องสำหรับภาพวาดของผู้เล่น
1. ใส่ แท็บรูปภาพ ใน PlayerDisplay .
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ลบค่าที่ชั่วคราว assetID ภายในคุณสมบัติ รูปภาพ สคริปต์ในขั้นตอนที่ 7 สอดภาพของผู้เล่นเข้าไปในป้ายชื่อภาพโดยเป็นการโปรแกรม
  2. ตั้ง จุดยึด เป็น 0, 1 เพื่อตั้งจุดเริ่มต้นของแท็บในด้านล่างซ้ายของตัวเอง (0% จากซ้ายไปขวาของแท็บและ 100% จากด้านบนไปด้านล่างของแท็บ)
  3. ตั้ง สีพื้นหลัง3 เป็น 0, 0, 0 เพื่อตั้งสีพื้นหลังของป้ายเป็นสีดำ
  4. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 0.3 เพื่อลดความทึบของฉลากลง 30% และจับคู่องค์ประกอบ UI สีดำทั้งหมดในประสบการณ์
  5. ตั้ง ชื่อ เป็น PlayerPortrait .
  6. ตั้ง ตำแหน่ง เป็น {0.11, 0},{1, 0} เพื่อตั้งฉลากไปทางด้านซ้ายของรูปทรงเหลี่ยม
  7. ตั้ง ขนาด เป็น {0.23, 0},{1, 0} เพื่อย่อป้ายชื่อ
  8. ตั้ง ความโปร่งใสของภาพ เป็น 0.15 เพื่อทำให้ฉลากเป็นใสเล็กน้อย
  9. ตั้ง ประเภทเครื่องชั่ง เป็น พอดี เพื่อให้ภาพพอดีกับภาชนะและไม่ยืดในขนาดหน้าจอที่แตกต่างกัน
  1. ใส่ ข้อจํากัดอัตราส่วน UIAspectRatio ใน PlayerPortrait เพื่อให้แน่ใจว่าแท็บและองค์ประกอบ UI ของลูกหลานของมันยังคงมีอัตราส่วนเดียวกันไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใด
  2. ใส่ UICorner ใน PlayerPortrait จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง CornerRadius เป็น 0.05, 0 เพื่อทำให้มุมโค้งเล็กน้อย
สร้างฉลากข้อความสำหรับชื่อผู้เล่น
1. ใส่วัตถุ TextLabel เข้าไปใน PlayerDisplay 2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0, 0.5 เพื่อตั้งจุดกำเนิดของปุ่มใหม่ในด้านซ้ายกลางของตัวเอง (0% จากด้านซ้ายไปขวาของปุ่ม และ 50% จากด้านบนลงล่างของปุ่ม)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ชื่อ เป็น PlayerNameTextLabel .
  4. ตั้ง ตำแหน่ง เป็น {0.35, 0},{0.72, 0} เพื่อตั้งฉลากไปทางด้านขวาของคอนเทนเนอร์ (35% จากซ้ายไปขวาของฉลากบิดา และ 72% จากด้านบนไปด้านล่างของฉลากบิดา)
  5. ตั้ง ขนาด เป็น {0.52, 0},{0.3, 0} เพื่อให้ข้อความสามารถใช้พื้นที่รูปร่างหลายเหลี่ยมได้มากที่สุด (52% แนวนอนและ 30% แนวตั้งของกรอบพ่วง)
  6. ตั้ง FontFace ให้เป็น Montserrat เพื่อให้เข้ากับความสวยงามในอนาคต
  7. ตั้ง น้ำหนัก เป็น ห้าวหาญ เพื่อทำให้ฟอนต์หนาขึ้น
  8. ลบข้อความชั่วคราวภายในคุณสมบัติ ข้อความ สคริปต์ในขั้นตอนที่ 7 จะสอดแนมชื่อผู้เล่นลงในแท็บข้อความโดยการโปรแกรม
  9. เปิดใช้งาน TextScaled 10. ตั้ง TextXAlignment เป็น ซ้าย .
สร้างไอคอนและสีทีมที่แสดงทางด้านซ้ายของภาพวาดของผู้เล่น
1. ใส่ โฟลเดอร์ ใน PlayerDisplay จากนั้นเปลี่ยนชื่อใหม่เป็น ไอคอนทีม
2. สร้างไอคอนทีมสีเขียว และสี และสี
  1. ใส่ แท็บรูปภาพ ใน ไอคอนทีม .
  2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง จุดยึด เป็น 0, 1 เพื่อตั้งจุดเริ่มต้นของแท็บในด้านล่างซ้ายของตัวเอง (0% จากซ้ายไปขวาของแท็บและ 100% จากด้านบนไปด้านล่างของแท็บ) 2. ตั้ง สีพื้นหลัง3 เป็น 88, 218, 171 เพื่อตั้งสีพื้นหลังของป้ายเป็นสีเขียวมิ้นท์ 3. ตั้ง ชื่อ เป็น TeamAIcon . 4. ตั้ง ตำแหน่ง เป็น {0, 0},{1, 0} เพื่อตั้งฉลากไปทางด้านซ้ายของกรอบ 5. ตั้ง ขนาด เป็น {0.135, 0},{0.58, 0} เพื่อลดป้ายชื่อไปทางซ้ายของภาพโปรไฟล์ผู้เล่น 6. ตั้ง ความโปร่งใสของภาพ เป็น 1 เพื่อทำให้ฉลากโปร่งใส
  1. กำหนดค่าตัวละครที่กำหนดเองเพื่อติดตามว่าป้ายชื่อนี้สำหรับทีมสีเขียว ขั้นตอนนี้มีความสำคัญมากสำหรับสคริปต์ในขั้นตอนที่ 7
    
    ในหน้าต่าง คุณสมบัติ ให้นำทางไปที่ส่วน คุณลักษณะ จากนั้นคลิกไอคอนบวก จะปรากฏหน้าต่างป๊อปอัพ
    
    ในฟิลด์ ชื่อ ใส่ สีทีม 3. ในเมนูการเลือกแบบ ประเภท ให้เลือก BrickColor 4. คลิกที่ปุ่ม บันทึก 5. ตั้งค่าคุณสมบัติใหม่ teamColor เป็น Mint 2. ใส่ ข้อจํากัดอัตราส่วน UIAspectRatio ใน TeamAIcon เพื่อให้แน่ใจว่าแล็บเบลและองค์ประกอบ UI ของลูกหลานยังคงมีอัตราส่วนเดียวกันไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใด
  2. สร้างไอคอน
    
    ใส่ แท็บรูปภาพ ใน TeamAIcon .
    
    เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง รูปภาพ เป็น rbxassetid://14309678670 เพื่อแสดงไอคอนทีมสีเขียว 2. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดเริ่มต้นของแท็บในกลางของตัวเอง (50% จากซ้ายไปขวาของแท็บและ 50% จากด้านบนลงด้านล่างของแท็บ) 3. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์ 4. ตั้ง ชื่อ เป็น ไอคอน . 5. ตั้ง ตําแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากให้อยู่กลางฉลากพ่วงของมัน 6. ตั้ง ขนาด เป็น {0.7, 0},{0.6, 0} เพื่อย่อป้ายชื่อ 7. ตั้ง ประเภทเครื่องชั่ง เป็น พอดี เพื่อให้ภาพพอดีกับภาชนะและไม่ยืดในขนาดหน้าจอที่แตกต่างกัน
3. สร้างไอคอนทีมสีชมพู และสี และสี
  1. ซ้ำ TeamAIcon และลูกหลานของมัน
  2. เลือกที่ซ้ำ TeamAIcon จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง สีพื้นหลัง3 เป็น 255, 170, 255 เพื่อตั้งสีพื้นหลังของฉลากเป็นสีกุหลาบชมพู 2. ตั้ง ชื่อ เป็น TeamBIcon . 3. ตั้งค่าคุณสมบัติ สีทีม เป็น กุหลาบสีชมพู 4. เลือกที่ซ้ำ ไอคอน ของ TeamBIcon จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง รูปภาพ เป็น rbxassetid://14309678549 เพื่อแสดงไอคอนทีมสีชมพู
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตัวอย่าง แท็กเลเซอร์ ซึ่งแสดงตัวบ่งบอกผู้เล่นด้วยสีและไอคอนที่เหมาะสมในขณะที่ผู้เล่นกำลังใช้งานในรอบ

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

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

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

สคริปต์ไคลเอนต์ต่อไปนี้ 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)

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

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

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

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

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

สร้างแบนเนอร์ข้อมูลกลาง
1. ใส่ แท็บรูปภาพ ใน OutStateGui ScreenGui วัตถุ
  1. ในหน้าต่าง สํารวจ ค้นหาไปยังบริการ StarterGui 2. เลื่อนเมาส์ไปที่วัตถุลูกของมัน OutStateGui จากนั้นคลิกไอคอน ⊕ แสดงเมนูบริบท
  2. จากเมนูบริบทใส่ แท็บรูปภาพ
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 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 เพื่อทำให้ทรงสี่เหลี่ยมดำ
  8. ตั้ง ความโปร่งใสของภาพ เป็น 0.3 เพื่อลดความทึบของฉลากลง 30% และจับคู่องค์ประกอบ UI สีดำทั้งหมดในประสบการณ์
3. ใส่ ข้อจํากัดอัตราส่วน UIAspectRatio ใน บล็อก เพื่อให้แน่ใจว่าแท็บและองค์ประกอบ UI ของลูกๆ ยังคงมีอัตราส่วนเดียวกันไม่ว่าขนาดหน้าจอของผู้เล่นจะเท่าใด
4. เลือกข้อจํากัดใหม่จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง อัตราส่วนความสวยงาม เป็น 13.78
5. ใส่ ฉลากข้อความ ใน บล็อก สําหรับข้อความข้อมูล
6. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 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. ตั้ง ชื่อ เป็น BodyTextLabel .
  6. ตั้ง FontFace ให้เป็น Montserrat เพื่อให้เข้ากับความสวยงามในอนาคต
  7. ตั้ง น้ำหนัก เป็น ห้าวหาญ เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้ง ข้อความ เป็น กำลังเกิดใหม่… 9. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว
  9. เปิดใช้งาน TextScaled
สร้างหัวข้อ
1. ใส่ แท็บภาพ ใน บล็อก
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 0.5, 1 เพื่อตั้งจุดเริ่มต้นของป้ายชื่อในด้านล่างกลางของตัวเอง (50% จากซ้ายไปขวาของป้ายและ 100% จากด้านบนไปด้านล่างของป้าย)
  2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
  3. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0, 0} เพื่อตั้งฉลากที่ด้านบนกลางของฉลากพ่วง (50% จากซ้ายไปขวาของฉลากพ่วง และ 0% จากด้านบนลงล่างของฉลากพ่วง)
  4. ตั้ง ขนาด เป็น {0.46, 0},{0.56, 0} เพื่อขยายฉลาก (46% แนวนอนและ 56% แนวตั้งของฉลากแม่)
  5. ตั้ง ชื่อ เป็น หัวข้อ .
  6. ตั้ง รูปภาพ เป็น rbxassetid://14304826985 เพื่อทำให้ภาพเป็นการจางไปในทิศทางหลายทิศทาง
  7. ตั้ง สีภาพ เป็น 245, 46, 46 เพื่อทำให้สีเลือดหายไปเป็นสัญญาณว่าผู้เล่นไม่ได้ใช้งานชั่วคราวในขณะที่ถูกแท็กออกจากรอบ
3. ใส่ ป้ายชื่อข้อความ ใน หัวข้อ สำหรับข้อความข้อมูล
4. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ตั้ง จุดยึด เป็น 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. ตั้ง ชื่อ เป็น HeaderTextLabel .
  6. ตั้ง FontFace ให้เป็น Montserrat เพื่อให้เข้ากับความสวยงามในอนาคต
  7. ตั้ง น้ำหนัก เป็น สีดํา เพื่อทำให้ฟอนต์หนาขึ้น
  8. ตั้ง ข้อความ เป็น ถูกแท็ก - คุณออกแล้ว! 9. ตั้ง TextColor3 เป็น 255, 255, 255 เพื่อทำให้ข้อความเป็นสีขาว
  9. เปิดใช้งาน TextScaled
สร้างเอฟเฟกต์จางรอบขอบหน้าจอ
1. ใส่ ImageLabel ใน OutStateGui 2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ 1. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดเริ่มต้นของแท็บในกลางของตัวเอง (50% จากซ้ายไปขวาของแท็บและ 50% จากด้านบนลงด้านล่างของแท็บ) 2. ตั้ง สีพื้นหลัง3 เป็น 0,0,0 เพื่อตั้งสีพื้นหลังของป้ายเป็นสีดำ 3. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 0.5 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสกลางทาง 4. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากไว้ตรงกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของ ScreenGui พ่อ และ 50% จากด้านบนลงด้านล่างของ ScreenGui พ่อ) 5. ตั้ง ขนาด เป็น {1, 0},{1, 0} เพื่อขยายฉลากไปทั่วหน้าจอ (100% แนวนอนและ 100% แนวตั้งของหน้าจอพ่วง) 6. ตั้ง ZIndex เป็น -1 เพื่อแสดงการจางเบื้องหลังองค์ประกอบ UI อื่น 7. ตั้ง ชื่อ เป็น หัวข้อ . 8. ตั้ง รูปภาพ เป็น rbxassetid://14309518613 เพื่อทำให้รูปภาพเลือนราง 9. ตั้ง ความโปร่งใสของภาพ เป็น 0.1 เพื่อทำให้การจางเล็กน้อยเป็นใส
เพื่อปรับปรุงประสิทธิภาพ คุณสามารถข้ามสินทรัพย์ภาพและใช้วัตถุ UIGradient ด้วยลำดับตัวเลขความโปร่งใสที่กําหนดเองเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเทคนิคการจางนี้ ดู ตัวปรับแต่งรูปลักษณ์ UI - เกรดเฉด
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตัวอย่าง แท็กเลเซอร์ ซึ่งแสดงหน้าจอการเกิดใหม่โดยอัตโนมัติเมื่อสุขภาพของผู้เล่นถึงศูนย์และพวกเขากำลังอยู่ในกระบวนการเกิดใหม่กลับไปยังโซนเกิดของทีมของพวกเขา

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

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

ผู้เล่นไม่สามารถย้ายในสนามได้
ผู้เล่นไม่สามารถย้ายกล้องได้
ผู้เล่นไม่สามารถใช้บลาสเตอร์ของตนได้
The StarterGui.OutStateGui กลายเป็นพิเศษเปิดใช้งานได้เฉพาะ

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


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?)
	-- 贵Layers มีรายการของ guis ที่ควรตั้งค่าไว้อย่างเฉพาะเจาะจง
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

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

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

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

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

	-- กำหนดเวลาการทำลายฟิลด์โลจิสติกเมื่อผู้เล่นเริ่มเล่น
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- ปิดการควบคุมเมื่อถูกแท็กออก
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

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

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

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

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

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

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

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

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

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

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

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

สร้างวัตถุ SurfaceGui

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

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

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

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

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

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

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

สร้างส่วนเพื่อถือวัตถุ SurfaceGui ของคุณ
1. ในหน้าต่าง สํารวจ เลื่อนเมาส์ไปที่ พื้นที่ทํางาน จากนั้นคลิกไอคอน ⊕ แสดงเมนูบริบท
2. จากเมนูบริบทใส่ส่วน บล็อก ส่วนนี่เป็นตำแหน่งชั่วคราวสำหรับส่วนเพื่อให้คุณสามารถมองเห็นการเปลี่ยนแปลงในแต่ละขั้นตอนของกระบวนการได้
ตำแหน่งและกำหนดทิศทางของชิ้นส่วนรอบตำแหน่งที่ตัวละครของผู้เล่นจะถือบลาสเตอร์ จากนั้นในหน้าต่าง คุณสมบัติ
1. ตั้ง ความโปร่งใส เป็น 1 เพื่อทำให้ชิ้นส่วนโปร่งใสอย่างสมบูรณ์
2. ตั้ง ชื่อ เป็น CooldownBarPrefab .
3. ตั้ง ขนาด เป็น 0.169, 0.027, 2.537 เพื่อขยายชิ้นส่วนให้มีขนาดเท่าความยาวของเลเซอร์
4. ปิดใช้งาน CanCollide และ CanQuery
ใส่ SurfaceGui ใน CooldownBarPrefab
เลือก SurfaceGui ใหม่ จากนั้นในหน้าต่าง คุณสมบัติ
1. ตั้ง ใบหน้า ให้ ด้านบน เพื่อให้ UI แสดงขึ้นไปด้านบน
2. ตั้ง อิทธิพลแสง และ ระยะสูงสุด เป็น 0
3. ตั้ง พิกเซลต่อสตัด เป็น 200 .
สร้างแถบสีดํา
1. ใส่ แท็บรูปภาพ ใน SurfaceGui .
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
  1. ลบค่าเริ่มต้น รูปภาพ เดิม
  2. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดเริ่มต้นของแท็บในกลางของตัวเอง (50% จากซ้ายไปขวาของแท็บและ 50% จากด้านบนลงด้านล่างของแท็บ)
  3. ตั้ง สีพื้นหลัง3 เป็น 0,0,0 เพื่อตั้งสีพื้นหลังของป้ายเป็นสีดำ
  4. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 0.4 เพื่อทำให้พื้นหลังของฉลากเป็นครึ่งโปร่งใส
  5. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากไว้ตรงกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของ SurfaceGui พ่อ และ 50% จากด้านบนลงด้านล่างของ SurfaceGui พ่อ)
  6. ตั้ง ขนาด เป็น {1, 0},{1, 0} เพื่อขยายฉลากไปทั่วส่วน (100% แนวนอนและ 100% แนวตั้งของ SurfaceGui พ่วง)
  7. ตั้ง ชื่อ เป็น คอนเทนเนอร์ .
ตัดมุมของคอนเทนเนอร์
1. ใส่วัตถุ UICorner ลงใน คอนเทนเนอร์ 2. เลือก UICorner จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง CornerRadius เป็น 0.15, 0 เพื่อทำให้มุมโค้งเล็กน้อย
สร้างแถบสีแดง
1. ใส่ ฉลากภาพ ใน คอนเทนเนอร์ .
2. เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ 1. ลบค่าเริ่มต้น รูปภาพ เดิม 2. ตั้ง จุดยึด เป็น 1, 0.5 เพื่อตั้งจุดเริ่มต้นของป้ายชื่อในจุดกลางด้านขวาของตัวเอง (100% จากซ้ายไปขวาของป้าย และ 50% จากด้านบนไปด้านล่างของป้าย) 3. ตั้ง สีพื้นหลัง3 เป็น 172, 13, 13 เพื่อตั้งสีพื้นหลังของป้ายเป็นสีแดงเข้ม 4. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 0.2 เพื่อทำให้พื้นหลังของฉลากเป็นใสเล็กน้อย 5. ตั้ง ชื่อ เป็น บาร์ . 6. ตั้ง ตำแหน่ง เป็น {1, 0},{0.5, 0} เพื่อตั้งฉลากที่ด้านขวากลางของคอนเทนเนอร์ (100% จากซ้ายไปขวาของฉลากบิดา และ 50% จากด้านบนไปด้านล่างของฉลากบิดา) 7. ตั้ง ขนาด เป็น {0, 0},{1, 0} เพื่อยืดฉลากไปที่ด้านบนของฉลากแม่ (0% แนวนอนและ 100% แนวตั้งของฉลากแม่)ขั้นตอนนี้ยังเป็นประโยชน์สำหรับพฤติกรรมที่เกิดขึ้นในสคริปต์ในขั้นตอน 8
ตัดมุมของฉลาก
1. ใส่วัตถุ UICorner ใน แถบ 2. เลือก UICorner จากนั้นในหน้าต่าง คุณสมบัติ ตั้ง CornerRadius เป็น 0.15, 0 เพื่อทำให้มุมโค้งเล็กน้อย
ย้าย CooldownBarPrefab ไปที่ ReplicatedStorage
1. สร้างโครงสร้างโฟลเดอร์เพื่อจัดระเบียบวัตถุ UI ของคุณ ตัวอย่างใช้โฟลเดอร์ Instances ที่มีลูกโฟลเดอร์ Guis
2. ย้าย CooldownBarPrefab ไปยัง Guis
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตำแหน่งตัวอย่าง แท็กเลเซอร์ ซึ่งจะเชื่อมต่อเมตรคูลดาวน์กับผู้เล่นที่ยิงลำแสงของพวกเขาแล้วแอนิเมชั่นแถบสีแดงหลังจากผู้เล่นยิงลำแสงของพวกเขา

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

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

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

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

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

ตัวบ่งบอกทีม

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

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

ใส่วัตถุ BillboardGui เข้าไปในแรมชั่วคราว
1. จากแท็บ อวตาร ในแถบเครื่องมือ คลิก ตัวสร้างรูปแบบ 2. เลือกจากตัวเลือกที่มีอยู่ตัวอย่างใช้ประเภทริก R15 ร่างกายแบบหญิง และอวาตาร์ Rthro ริกจะแสดงทั้งในมุมมอง 3D และในหน้าต่าง สํารวจ ภายใต้ชื่อ Rig 3. ในหน้าต่าง สํารวจ เรียกดูไปที่เมทริกซ์ลูกบุตรของริก หัว จากนั้นคลิกไอคอน ⊕ แสดงเมนูบริบท
2. จากเมนูบริบทใส่ BillboardGui
เลือก BillboardGui ใหม่ จากนั้นในหน้าต่าง คุณสมบัติ
1. ตั้ง อิทธิพลแสง เป็น 0 เพื่อป้องกันไม่ให้แสงสิ่งแวดล้อมมีผลต่อสีของตัวบ่งบอก
2. ตั้ง ชื่อ เป็น OtherPlayerIndicatorPrefab .
3. ตั้ง ขนาด เป็น {0, 10},{0, 10} เพื่อทำให้ฉลากเล็กลงอย่างมาก
4. ตั้ง StudsOffsetWorldSpace เป็น 0, 4, 0 เพื่อตำแหน่งบนหัวของแรงงาน
ใส่วัตถุ กรอบ ใน OtherPlayerIndicatorPrefab
เลือกกรอบใหม่จากนั้นในหน้าต่าง คุณสมบัติ จะ
1. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดเริ่มต้นของกรอบในกลางของตัวเอง (50% จากซ้ายไปขวาของฉลากและ 50% จากด้านบนไปด้านล่างของฉลาก)
2. ตั้ง สีพื้นหลัง3 เป็น 255, 3, 0 เพื่อตั้งสีพื้นหลังของกรอบเป็นสีแดงเป็นสีชั่วคราว
3. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งกรอบไปยังกลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของ BillboardGui พ่อ และ 50% จากด้านบนลงด้านล่างของ BillboardGui พ่อ)
4. ตั้ง ขนาด เป็น {1, -2},{1, -2} เพื่อลดขนาดกรอบไปยังพื้นที่พื้นผิวของ BillboardGui
ใส่วัตถุ UICorner ใน กรอบ เพื่อทำให้มุมทั้งหมดกลมสมบูรณ์
ใส่วัตถุ UIStroke ใน กรอบ เพื่อสร้างวงกลมของตัวบ่งบอก
ย้าย OtherPlayerIndicatorPrefab ไปที่ ReplicatedStorage
อ้างอิงสคริปต์ต่อไปนี้ ReplicatedStorage ภายในไฟล์ตัวอย่าง แท็กเลเซอร์ 1A ซึ่งแสดงตัวบ่งบอกทีมสำหรับผู้เล่นแต่ละคนในรอบที่กำลังใช้งานโดยอัตโนมัติ เว้นแต่พวกเขาอยู่ในทีมศัตรูและถูกปิดกั้น

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

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

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

ใส่วัตถุ BillboardGui ในริกชั่วคราวเพื่อให้คุณสามารถแสดงภาพการเปลี่ยนแปลงในแต่ละขั้นตอนของกระบวนการได้
1. จากแท็บ อวตาร ในแถบเครื่องมือ คลิก ตัวสร้างรูปแบบ 2. เลือกจากตัวเลือกที่มีอยู่ตัวอย่างใช้ประเภทริก R15 ร่างกายแบบผู้ชาย และอวาตาร์ Rthro ริกจะแสดงทั้งในมุมมอง 3D และในหน้าต่าง สํารวจ ภายใต้ชื่อ Rig 3. ในหน้าต่าง สํารวจ เรียกดูไปที่เมทริกซ์ลูกบุตรของริก หัว จากนั้นคลิกไอคอน ⊕ แสดงเมนูบริบท
2. จากเมนูบริบทใส่ BillboardGui
เลือก BillboardGui ใหม่ จากนั้นในหน้าต่าง คุณสมบัติ
1. ตั้ง อิทธิพลแสง เป็น 0 เพื่อป้องกันไม่ให้แสงสิ่งแวดล้อมมีผลต่อสีของตัวบ่งบอก
2. ตั้ง ชื่อ เป็น TaggedOutIndicatorGuiPrefab 3. ตั้ง ขนาด เป็น {3, 0},{0.5, 0} เพื่อขยายพื้นที่สําหรับป้ายชื่อ
3. ตั้ง StudsOffset เป็น 0, 3.25, 0 เพื่อวางไว้บนหัวของผู้เล่น
ใส่วัตถุ แท็บเล็ตภาพ ใน TaggedOutIndicatorGuiPrefab
เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
1. ตั้ง จุดยึด เป็น 0.5, 0.5 เพื่อตั้งจุดเริ่มต้นของแท็บในกลางของตัวเอง (50% จากซ้ายไปขวาของแท็บและ 50% จากด้านบนลงด้านล่างของแท็บ)
2. ตั้ง ความโปร่งใสของพื้นหลัง เป็น 1 เพื่อทำให้พื้นหลังของฉลากโปร่งใสอย่างสมบูรณ์
3. ตั้ง ชื่อ เป็น กรอบ .
4. ตั้ง ตำแหน่ง เป็น {0.5, 0},{0.5, 0} เพื่อตั้งฉลากให้อยู่กลางของคอนเทนเนอร์ (50% จากซ้ายไปขวาของ BillboardGui พ่อ และ 50% จากด้านบนลงด้านล่างของ BillboardGui พ่อ)
5. ตั้ง ขนาด เป็น {1, 0},{1, 0} เพื่อขยายฉลากไปทั่ว BillboardGui (100% แนวนอนและ 100% แนวตั้งของ BillboardGui พ่วง)
6. ตั้ง รูปภาพ เป็น rbxassetid://14304826985 เพื่อทำให้ภาพเป็นการจางไปในทิศทางหลายทิศทาง
7. ตั้ง สีภาพ เป็น 245, 46, 46 เพื่อย้อมฉลากสีแดง
เพื่อปรับปรุงประสิทธิภาพ คุณสามารถข้ามสินทรัพย์ภาพและใช้วัตถุ UIGradient ด้วยลำดับตัวเลขความโปร่งใสที่กําหนดเองเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเทคนิคการจางนี้ ดู ตัวปรับแต่งรูปลักษณ์ UI - เกรดเฉด
ใส่วัตถุ TextLabel เข้าไปใน กรอบ
เลือกฉลากใหม่จากนั้นในหน้าต่าง คุณสมบัติ
1. ตั้ง จุดยึด เป็น 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
ย้าย TaggedOutIndicatorGuiPrefab ไปที่ ReplicatedStorage
อ้างอิงสคริปต์ต่อไปนี้ ServerScriptService ภายในไฟล์ตัวอย่าง แท็กเลเซอร์ 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)
	-- เรียก 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)

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

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

Final Screen UI Components

ในหน้านี้