สร้างเมตร HUD

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

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

องค์ประกอบ HUD ทั่วไปคือเครื่องวัดสุขภาพที่มีไอคอนทางด้านซ้ายซึ่งสามารถปรับเป็นแถบเวลา แถบความคืบหน้า หรือคล้ายคลึงกัน

In-game view showing custom health meter in upper-right region.

โดยใช้ สถานีอวกาศเสี่ยงภัย เป็นสถานที่เริ่มต้นและ UI Fundamentals - HUD Meter เป็นสถานที่อ้างอิงสิ้นสุด บทแนะนำนี้แสดงให้เห็น:

  • การตั้งค่าและการใช้ ตัวจําลองอุปกรณ์ เพื่อทดสอบการออกแบบของคุณบนหน้าจอจําลองหลายตัว
  • การใช้ StarterGui เป็นทั้งคอนเทนเนอร์ออกแบบและที่เก็บของ
  • วิธีการตำแหน่ง/ขนาดองค์ประกอบ UI รอบการควบคุม Roblox ที่ติดตั้งไว้และช่องเก็บ/เกาะอุปกรณ์ เช่น ช่องกล้องบนโทรศัพท์ที่ทันสมัย
  • วิธีเปลี่ยนเครื่องวัดสุขภาพ Roblox เริ่มต้นด้วยเครื่องวัดสุขภาพของคุณและเชื่อมต่อกับระดับสุขภาพของตัวละคร
  • วิธีการเคลื่อนไหวส่วนกลางของเมตรวัดสุขภาพและตั้งสีระหว่างจุดเกลียดสีห้าสี (สีแดง สีส้ม สีเหลือง สีมะนาว สีเขียว)

เปิดใช้งานตัวจําลองอุปกรณ์

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

วิธีที่ดีที่สุดในการทดสอบการออกแบบ UI บนแพลตฟอร์มต่างๆ คือ ตัวจําลองอุปกรณ์ของ Studio Device Emulatorเครื่องมือนี้ให้การเลือกล่วงหน้าของอุปกรณ์และสามารถให้คุณเพิ่มการตั้งค่าที่กําหนดเองของคุณเองได้

  1. เปิดแม่แบบ สถานีอวกาศเสี่ยงภัย ใน Studio

  2. จากแท็บ ทดสอบ เปิดใช้งานเครื่องมือ อุปกรณ์

    Device button indicated in Test tab

  3. จากแถบที่อยู่เหนือมุมมองหลักโดยตรง เลือกการจำลองโทรศัพท์เช่น iPhone X หรือ Samsung Galaxy A51 จากนั้นตั้งขนาดมุมมองเป็น พอดีกับหน้าต่าง เพื่อใช้พื้นที่สูงสุดใน Studio

    Device Emulator settings options indicated at top of viewport window.

สร้างคอนเทนเนอร์หน้าจอ

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

Diagram of how a ScreenGui clones from StarterGui to a player's PlayerGui

เพื่อใส่ว่างเปล่า ScreenGui :

  1. ในหน้าต่าง สํารวจ ค้นหาคอนเทนเนอร์ StarterGui

    Explorer window showing the StarterGui container.

  2. เลื่อนเมาส์ไปที่คอนเทนเนอร์ คลิกปุ่ม ⊕ และใส่ ScreenGui

    ScreenGui inserted into the StarterGui container.

  3. เปลี่ยนชื่อคอนเทนเนอร์ใหม่ HUDContainer เพื่อสะท้อนวัตถุประสงค์

    ScreenGui renamed to HUDContainer.

ใช้พื้นที่ปลอดภัย

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

Mobile device showing Roblox top bar buttons and device cutout.

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

Mobile device showing the core UI safe area.

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

ScreenInsets set to CoreUISafeInsets.

  1. ในหน้าต่าง สํารวจ เลือก HUDContainer

    Explorer window showing the HUDContainer selected.

  2. ในหน้าต่าง คุณสมบัติ ตั้งค่าคุณสมบัติ ScreenInsets เป็น DeviceSafeInsets

    ScreenInsets set to DeviceSafeInsets in the Properties window.

ตั้งการเว้นวรรคขอบ

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

Screen container with padding around all edges.

วิธีหนึ่งในการใช้การจัดเตรียมพื้นที่ให้กับตัวปรับแต่ง UI คือการสอดแทรก UIPadding ตัวปรับแต่ง:

  1. ใส่ตัวแก้ไข UIPadding ใน HUDContainer

    HUDContainer with UIPadding modifier inserted.

  2. เมื่อเลือกวัตถุใหม่ UIPadding ให้ป้อนค่าของ 0, 16 สำหรับขอบทั้งหมดของคอนเทนเนอร์ ( PaddingBottom , PaddingLeft , PaddingRight , PaddingTop )สิ่งนี้ใช้การเว้นวรรค 16 พิกเซลรอบตัวคอนเทนเนอร์ ไม่ว่าความละเอียดของหน้าจอจะเป็นอย่างไร

    Properties window showing the UIPadding modifier with 0, 16 set for all edges.

สร้างเมตรวัดสุขภาพ

ด้วยการกำหนดค่าตัวจัดเก็บหน้าจอ คุณสามารถเริ่มสร้างเมตรวัดสุขภาพโดยใช้วัตถุ UI Roblox เช่น เฟรม และ ป้ายภาพ

Basic components used for the health meter.

สร้างกรอบพ่อแม่

คล้ายกับการออกแบบแอปพลิเคชันเช่น Figma และ Photoshop, Frame ใน Roblox ใช้เป็นภาชนะสำหรับวัตถุ UI อื่นๆสำหรับบทแนะนำนี้ เครื่องวัดสุขภาพทั้งหมดจะอยู่ในกรอบพ่อแม่เดียว ทำให้เรียบง่ายในการเคลื่อนย้ายไปตามตำแหน่งต่างๆ ของ HUD

  1. ใส่ Frame ใน HUDContainer กรอบใหม่ปรากฏในมุมบนซ้ายเป็นสีขาวว่างเปล่า

    New frame in viewport.

  2. เปลี่ยนชื่อตัวอย่างกรอบใหม่เป็น MeterBar

    New frame inserted and renamed to MeterBar.

ตำแหน่งกรอบ

ใน Roblox ตำแหน่งของวัตถุ UI จะถูกแทนที่ด้วยชุดข้อมูล UDim2 ที่มีค่า Scale และ Offset สำหรับทั้งแกน X และ Y :

  • Scale ค่าเป็นตัวแทนของ เปอร์เซ็นต์ ของขนาดของคอนเทนเนอร์ตามแกนที่เหมาะสม, เพิ่มขึ้นเป็นค่าใด ๆ Offset ค่า
  • Offset ค่าแทนจำนวน พิกเซล ที่จะเลื่อนวัตถุบนแกนที่เหมาะสมเพิ่มขึ้นจากค่าใดๆ Scale ค่า

เพื่อตำแหน่งวัตถุ UI ในมุมขวาบนของตัวคอนเทนเนอร์หน้าจอ Scale เป็นวิธีที่ดีที่สุดเพราะค่า X ของ 1 (100%) เป็นขอบขวาของตัวคอนเทนเนอร์ ไม่ว่าจะเป็นขนาดพิกเซลทางกายภาพของหน้าจอเช่นเดียวกันมูลค่าเครื่องชั่ง Y ของ 0 (0%) ที่สูงสุดของคอนเทนเนอร์

Scale ranges for the X and Y axes of a container.

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

Frame anchor point in its upper-right corner.

  1. ในหน้าต่าง สํารวจ เลือกกรอบ MeterBar ที่คุณใส่ไว้ก่อนหน้านี้

    Explorer window showing the MeterBar frame selected.

  2. ในหน้าต่าง คุณสมบัติ ใส่ 1, 0, 0, 0 สำหรับ Position และกด Enterสตูดิโอจะเพิ่มเครื่องหมายกำบังโดยอัตโนมัติเพื่อสร้าง UDim2 ของ {1, 0},{0, 0}

  3. ใส่ 1, 0 สำหรับคุณสมบัติ AnchorPointตอนนี้เฟรมควรตำแหน่งในมุมบนด้านขวาของพื้นที่ปลอดภัยของอุปกรณ์ เล็กน้อยเล็กน้อยจากขอบเนื่องจากการ การเว้นวรรค

    Frame repositioned in upper-right corner of container.

ปรับขนาดกรอบ

เช่นตำแหน่ง, Size ของวัตถุ UI จะถูกแทนที่ด้วยชุดข้อมูลเชิงพิกัด UDim2 ที่มีค่า Scale และ Offset สำหรับทั้งแกน X และ Y โดยค่าเริ่มต้นขนาดของกรอบใหม่คือ {0, 100},{0, 100} , หมายถึง 100 พิกเซล ทั้งในความกว้าง ( X ) และความสูง ( Y )ในขณะที่ค่าพิกเซลที่เคร่งครัดมีประโยชน์ในบางกรณี องค์ประกอบ UI จํานวนมากจะขยายได้อย่างมีประสิทธิภาพมากขึ้นในหลายหน้าจอเมื่อตั้งค่าเป็น เปอร์เซ็นต์ ของขนาดทั้งหมดของภาชนะหน้าจอ

  1. เมื่อเลือกกรอบ MeterBar แล้ว ให้เข้าถึงหน้าต่าง คุณสมบัติ และนําทางไปยังคุณสมบัติ Size

  2. ใส่ค่าของ 0.35, 0, 0.05, 0 เพื่อตั้งขนาดเปอร์เซ็นต์ 35% กว้างและ 5% สูงโดยไม่มีการเลื่อนพิกเซล

    Frame resized to 35% wide and 5% tall.

สไตล์กรอบ

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

Frame styled with opacity, border, and rounded corners.

  1. เมื่อเลือกกรอบ MeterBar ให้ใส่ 0 สำหรับคุณสมบัติ BackgroundColor3สตูดิโอจะแปลงโดยอัตโนมัติเป็นค่า RGB ของ .

  2. ใส่ 0.75 สำหรับคุณสมบัติ BackgroundTransparencyใน Roblox ความโปร่งใสอยู่ระหว่าง 0 สำหรับทึบสนิทสุดๆ ถึง 1 สำหรับโปร่งใสสุดๆ ดังนั้น 0.75 จึงเท่ากับความทึบ 25% ในแอปพลิเคชันอื่นๆ เช่น Figma หรือ Photoshop

    Frame restyled with dark background and 25% opacity.

  3. ใส่วัตถุ UIStroke ที่มีประสิทธิภาพในการแก้ไข UI ซึ่งเพิ่มเส้นขอบที่ปรับแต่งได้ ได้ ให้กับกรอบ

    Explorer window showing the MeterBar frame with a child UIStroke modifier.

  4. เมื่อเลือกใหม่ UIStroke เลือกคุณสมบัติต่อไปนี้:

    Frame restyled with a UIStroke modifier.

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

  1. ใส่ตัวอย่าง UICorner ในกรอบ แดชบอร์ด

    Explorer window showing the MeterBar frame with a child UICorner modifier.

  2. เมื่อเลือกใหม่ UICorner แล้วตั้ง CornerRadius เป็น 0.5, 0การใช้ค่าเครื่องชั่ง ขนาด (50%) แทนค่าพิกเซลจะสะดวกเป็นพิเศษสำหรับแถบเมตรเพราะมันรับประกันว่ามีเส้นโค้งที่สมบูรณ์แบบไม่ว่าคอนเทนเนอร์จะสูงหรือกว้างแค่ไหน

    Frame corners rounded with a UICorner modifier.

สร้างการเติมภายใน

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

Inner fill frame added to parent frame to represent the character's variable health.

  1. ใส่ลูก Frame ลงในกรอบ แดชบอร์ด

  2. เปลี่ยนชื่อตัวอย่างกรอบใหม่เป็น การเติมภายใน

    Explorer window showing the parent MeterBar frame with a child frame named InnerFill.

  3. เมื่อเลือก การเติมภายใน ให้ตั้งค่าคุณสมบัติต่อไปนี้:

    • AnchorPoint = 0, 0.5 (ขอบซ้ายและศูนย์กลางแนวตั้ง)
    • Position = 0, 0, 0.5, 0
    • Size = 1, 0, 1, 0

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

    Inner fill frame repositioned and resized to fill entire parent frame.

  4. เพื่อจับคู่รูปแบบ "เม็ด" ของกรอบพ่อ ใส่ UICorner เพิ่มเติมใน การเติมภายใน

    Explorer window showing the InnerFill frame with a child UICorner modifier.

  5. เมื่อเลือกตัวแก้ไขใหม่ แล้วตั้งค่าคุณสมบัติ ของมันเป็น เพื่อให้ตรงกับรูปแบบ "pill" ของกรอบ เมตรบาร์

    Inner fill frame corners rounded with a UICorner modifier.

  6. เพื่อแทนที่ที่ดีกว่าที่เครื่องวัดเต็มแสดงถึงสุขภาพที่ดี เลือก การเติมภายใน และตั้งค่าคุณสมบัติ BackgroundColor3 ของมันเป็น [0, 225, 50] (ในภารกิจต่อไปคุณจะ สคริปต์ สีนี้เพื่อเปลี่ยนตามสุขภาพจริง)

    Inner fill frame recolored green to represent good health.

เพิ่มไอคอน

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

Image label of heart added to more clearly indicate a health meter.

  1. ใส่ ImageLabel ลงในกรอบ MeterBar วัตถุนี้ช่วยให้คุณสามารถใช้สินทรัพย์ภาพ 2D ที่อัปโหลดเป็นฉลากไปยัง Roblox ได้

  2. เปลี่ยนชื่อตัวอย่างเลเบลใหม่เป็น ไอคอน

    Explorer window showing the MeterBar frame with a child ImageLabel.

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

    Properties window showing the ZIndex of the ImageLabel set to 2.

  4. ค้นหาคุณสมบัติของไอคอน และใส่ ซึ่งเป็นการอ้างอิงถึงภาพหัวใจที่อัปโหลดล่วงหน้า (ถ้าต้องการ คุณสามารถนำเข้าภาพของคุณเองและใช้รหัสสินค้าได้)

    Image label of heart added to MeterBar frame.

  5. เพื่อให้แน่ใจว่าไอคอน ImageLabel เสมออยู่ในอัตราส่วน 1:1 ใส่ UIAspectRatioConstraintแม้ว่าข้อจํากัดนี้ จะมีคุณสมบัติที่ปรับแต่งได้เพื่อควบคุมอัตราส่วนด้าน คุณสามารถปล่อยให้มูลค่าเริ่มต้นได้อย่างเดิม

    Explorer window showing the ImageLabel with a child UIAspectRatioConstraint.

  6. เมื่อเลือก ไอคอน แล้ว ให้เสร็จสิ้นรูปลักษณ์และตำแหน่งโดยการเปลี่ยนคุณสมบัติต่อไปนี้:

    • AnchorPoint = 0.5, 0.5 (จุดยึดกลาง)
    • BackgroundTransparency = 1 (โปร่งใส 100%)
    • Position = 0, 0, 0.5, 0 (ด้านซ้ายของเมตรและศูนย์กลางแนวตั้ง)
    • Size = 2, 0, 2, 0 (200% ของขนาดทั้งหมดของกรอบ MeterBar ถูกจำกัดเป็น 1:1 โดย UIAspectRatioConstraint )
    Image label of heart repositioned and resized with background fill made transparent.

จำกัดขนาด

ในขณะที่ความสูงของเครื่องชั่ง แบบสเกล ของ 0.05 (5%) บนหน้าจอโทรศัพท์ที่ทันสมัยและมอนิเตอร์เกมที่มีอัตราส่วน 16:9 หรือกว้างกว่านั้น เครื่องวัดอาจดูสูงเกินไปเล็กน้อยบนหน้าจอแท็บเล็ตและโทรศัพท์เก่า ๆคุณสามารถตรวจสอบได้โดยจำลองแท็บเล็ตเช่น iPad รุ่นที่ 7 จาก ตัวจำลองอุปกรณ์

Device Emulator set to emulate a tablet device. Emulation on tablet device with meter bar taller than desired.

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

  1. ใส่ UISizeConstraint ลงในกรอบ MeterBar

    Explorer window showing the MeterBar frame with a child UISizeConstraint.

  2. เมื่อเลือกข้อจำกัดใหม่แล้ว ตั้งค่าคุณสมบัติ ของมันเป็น เพื่อจำกัดความสูงไว้ที่ 20 พิกเซลในขณะที่ไม่บังคับใช้ข้อจำกัดด้านความกว้าง

    Properties window showing the MaxSize of the UISizeConstraint set to inf, 20.

ตอนนี้แถบเมตรจะรักษาความสูงที่สม่ำเสมอมากขึ้นระหว่างหน้าจอที่กว้างและสูงขึ้น

Emulation on phone.

เปลี่ยนมิเตอร์สุขภาพเริ่มต้น

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

Default health meter overlapping and duplicating the custom health meter.

ปิดใช้งานเมตรเริ่มต้น

เพื่อปิดใช้งานเครื่องวัดสุขภาพเริ่มต้นคุณจะใช้สคริปต์ไคลเอนต์ ( ) ภายใน ( ) ที่เรียก ( ) ภายใน ( )

  1. ในหน้าต่าง สํารวจ ขยายคอนเทนเนอร์ StarterPlayer และค้นหาคอนเทนเนอร์ StarterPlayerScripts ภายใน

    Explorer window showing the StarterPlayerScripts container inside the StarterPlayer container.

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

    Explorer window showing the new HideDefaultHealthMeter client script inside the StarterPlayerScripts container.

  3. เมื่อคุณใส่สคริปต์ใหม่ จะเปิดในแท็บตัวแก้ไขสคริปต์ใหม่โดยอัตโนมัติ (ถ้าไม่ได้ คลิกสองครั้งที่สคริปต์ในหน้าต่าง สํารวจ )

    ใส่โค้ดต่อไปนี้ภายในสคริปต์ HideDefaultHealthMeter :

    ซ่อนเมตรสุขภาพเริ่มต้น
    local StarterGui = game:GetService("StarterGui")

    

    -- ซ่อนเมตรสุขภาพเริ่มต้น

    StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)
    บรรทัดจุดประสงค์
    1ได้รับการอ้างอิงถึงบริการหลัก ซึ่งเป็นตัวแทนของคอนเทนต์เดียวกันที่คุณสร้างเมตรวัดสุขภาพที่กำหนดเองและซึ่งมีเนื้อหาสำรองในคอนเทนเนอร์ สำหรับแต่ละผู้เล่นที่เข้าร่วมประสบการณ์
    4เรียกวิธีการ SetCoreGuiEnabled() ของบริการและสั่งให้เครื่องวัดสุขภาพเริ่มต้นถูกปิดใช้งาน ( false )

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

Default health meter disabled.

ฟังการเปลี่ยนแปลงสุขภาพ

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

  1. ในหน้าต่าง สํารวจ ค้นหาคอนเทนเนอร์ StarterCharacterScripts ภายใน StarterPlayer

    Explorer window showing the StarterCharacterScripts container inside the StarterPlayer container.

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

    Explorer window showing the new UpdateCustomMeter client script inside the StarterCharacterScripts container.

  3. ในหน้าต่างเครื่องแก้ไขสำหรับสคริปต์ UpdateCustomMeter รหัส:

    อัปเดตเมตร์ที่กำหนดเอง
    local Players = game:GetService("Players")

    

    -- การอ้างอิงถึงผู้เล่นท้องถิ่น, ตัวละคร, และมนุษย์นอยด์

    local player = Players.LocalPlayer

    local character = player.Character

    local humanoid = character:WaitForChild("Humanoid")

    

    -- การอ้างอิงถึงกรอบภายในของแถบวัด

    local playerGui = player:WaitForChild("PlayerGui")

    local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

    

    -- สีลำดับเฉดเดียน (สีแดง สีส้ม สีเหลือง สีมะนาว สีเขียว)

    local gradient = {

    	Color3.fromRGB(225, 50, 0),

    	Color3.fromRGB(255, 100, 0),

    	Color3.fromRGB(255, 200, 0),

    	Color3.fromRGB(150, 225, 0),

    	Color3.fromRGB(0, 225, 50)

    }

    

    -- ฟังก์ชันเพื่อรับสีในลำดับโทนจากจุดทศนิยม

    local function getColorFromSequence(fraction: number): Color3

    	-- แต่ละสีในเฉดสีกำหนดจุดเริ่มต้นและ/หรือจุดสิ้นสุดของส่วน

    	local numSections = #gradient - 1

    

    	-- แต่ละส่วนแทนที่ส่วนหนึ่งของ 1

    	local sectionSize = 1 / numSections

    

    	-- ตรวจสอบว่าส่วนที่ขอเป็นจำนวนเศษเสี้ยวอยู่ในส่วนใด

    	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

    

    	-- รับสีที่จุดเริ่มต้นและจุดสิ้นสุดของส่วน

    	local sectionColorStart = gradient[sectionStartIndex]

    	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

    

    	-- ปรับเปอร์เซ็นต์ให้เป็นตัวเลขตั้งแต่ 0 ถึง 1 ภายในส่วน

    	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

    

    	-- เลอร์ประหว่างจุดเริ่มต้นและจุดสิ้นสุดตามสัดส่วนที่ปรับให้เหมาะสม

    	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)

    end

    

    local function onHealthChanged()

    	-- คำนวณสุขภาพใหม่เป็นร้อยละของสูงสุด

    	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

    

    	-- ตั้งแถบเป็นเป้าหมายขนาดใหม่/สี

    	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)

    	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)

    end

    

    -- ฟังการเปลี่ยนแปลงในสุขภาพของหุ่นยนต์

    humanoid.HealthChanged:Connect(onHealthChanged)

    

    -- ตั้งค่าขนาดและสีแถบเริ่มต้น (หรือรีเซ็ต) ให้เป็นสุขภาพปัจจุบัน

    onHealthChanged()
    บรรทัดจุดประสงค์
    4 ‑ 6ได้รับการอ้างอิงถึง Player ท้องถิ่น, รูปแบบ Character ของพวกเขา, และคลาส Humanoid ภายในนั้น
    9 ‑ 10รับการอ้างอิงถึงวัตถุ การเติมภายใน ของเมตรซึ่งต้องได้รับการปรับขนาดและเปลี่ยนสีตามการเปลี่ยนแปลงสุขภาพของตัวละคร
    13 ‑ 19ประกาศชุดสีห้าสี (สีแดง สีส้ม สีเหลือง สีมะนาว สีเขียว) เพื่อเปลี่ยนสีเมตรในจุดต่างๆ; ตัวอย่างเช่น สีเขียวสำหรับสุขภาพ 100% สีเหลืองสำหรับ 50% สีแดงสำหรับ 0% หรือสีผสมในสัดส่วนใดก็ได้ระหว่างจุดกุญแจ
    22 ‑ 41ฟังก์ชันช่วยที่ส่งคืนการผสมสีระหว่างจุดสีเฉดระหว่างใดก็ได้
    43 ‑ 50ฟังก์ชันที่จัดการการเปลี่ยนแปลงใดๆ ต่อสุขภาพที่นี่มันคำนวณสุขภาพใหม่เป็นเปอร์เซ็นต์ของตัวละคร MaxHealth ปรับขนาด การเติมภายใน ให้เป็นเปอร์เซ็นต์ดังกล่าวและเปลี่ยนสีเป็นสีที่ส่งคืนจากฟังก์ชัน getColorFromSequence()
    53การเชื่อมต่อหลัก อีเวนต์ ซึ่งตรวจพบการเปลี่ยนแปลง Health ที่ส่งกลับจากเซิร์ฟเวอร์และเรียกใช้ฟังก์ชัน onHealthChanged()
    56เริ่มต้น (เมื่อตัวละครเกิดหรือเกิดใหม่) เรียกฟังก์ชัน onHealthChanged() เพื่อขนาดและสี เติมภายใน ในเปอร์เซ็นต์ที่ถูกต้องโดยปกติจะเป็นความกว้างเต็มและสีเขียว

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

เคลื่อนไหวแถบเมตร

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

  1. เข้าถึงแท็บตัวแก้ไขสคริปต์สำหรับสคริปต์ UpdateCustomMeter ที่คุณแก้ไขก่อนหน้านี้

  2. เลือกบรรทัดทั้งหมด ( CtrlA หรือ ⌘A ) แล้ววางลงบนพวกเขา ( CtrlV หรือ ⌘V ) ด้วยรหัสต่อไปนี้:

    อัปเดตเมตร์ที่กำหนดเอง
    local Players = game:GetService("Players")

    local TweenService = game:GetService("TweenService")

    

    -- การอ้างอิงถึงผู้เล่นท้องถิ่น, ตัวละคร, และมนุษย์นอยด์

    local player = Players.LocalPlayer

    local character = player.Character

    local humanoid = character:WaitForChild("Humanoid")

    

    -- คุณสมบัติระหว่างทวีน

    local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

    

    -- การอ้างอิงถึงกรอบภายในของแถบวัด

    local playerGui = player:WaitForChild("PlayerGui")

    local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

    

    -- สีลำดับเฉดเดียน (สีแดง สีส้ม สีเหลือง สีมะนาว สีเขียว)

    local gradient = {

    	Color3.fromRGB(225, 50, 0),

    	Color3.fromRGB(255, 100, 0),

    	Color3.fromRGB(255, 200, 0),

    	Color3.fromRGB(150, 225, 0),

    	Color3.fromRGB(0, 225, 50)

    }

    

    -- ฟังก์ชันเพื่อรับสีในลำดับโทนจากจุดทศนิยม

    local function getColorFromSequence(fraction: number): Color3

    	-- แต่ละสีในเฉดสีกำหนดจุดเริ่มต้นและ/หรือจุดสิ้นสุดของส่วน

    	local numSections = #gradient - 1

    

    	-- แต่ละส่วนแทนที่ส่วนหนึ่งของ 1

    	local sectionSize = 1 / numSections

    

    	-- ตรวจสอบว่าส่วนที่ขอเป็นจำนวนเศษเสี้ยวอยู่ในส่วนใด

    	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

    

    	-- รับสีที่จุดเริ่มต้นและจุดสิ้นสุดของส่วน

    	local sectionColorStart = gradient[sectionStartIndex]

    	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

    

    	-- ปรับเปอร์เซ็นต์ให้เป็นตัวเลขตั้งแต่ 0 ถึง 1 ภายในส่วน

    	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

    

    	-- เลอร์ประหว่างจุดเริ่มต้นและจุดสิ้นสุดตามสัดส่วนที่ปรับให้เหมาะสม

    	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)

    end

    

    local function onHealthChanged()

    	-- คำนวณสุขภาพใหม่เป็นร้อยละของสูงสุด

    	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

    

    	-- แบ่งเส้นแนวกลางไปยังเป้าหมายขนาด/สีใหม่

    	local tweenGoal = {

    		Size = UDim2.new(healthFraction, 0, 1, 0),

    		BackgroundColor3 = getColorFromSequence(healthFraction)

    	}

    	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)

    	meterBarTween:Play()

    end

    

    -- ฟังการเปลี่ยนแปลงในสุขภาพของหุ่นยนต์

    humanoid.HealthChanged:Connect(onHealthChanged)

    

    -- ตั้งค่าขนาดและสีแถบเริ่มต้น (หรือรีเซ็ต) ให้เป็นสุขภาพปัจจุบัน

    onHealthChanged()
    บรรทัดจุดประสงค์
    2ได้รับการอ้างอิงถึง TweenService เพื่อใช้งานฟังก์ชันการทวีนในสคริปต์
    10สร้างคอนสตรัคเตอร์ TweenInfo ที่กำหนดระยะเวลาที่ตั้งใจของวัยรุ่น สไตล์การผ่อนคลาย และ ทิศทางการผ่อนคลาย
    52 ‑ 57แทนที่จะตั้งขนาดและสีของแถบเป็นในรุ่นก่อนหน้า , ประกาศตาราง ที่มีขนาดเป้าหมาย/สี, สร้าง tween ใหม่โดยใช้พารามิเตอร์ และ และเล่น tween ใหม่

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

เพิ่มเอฟเฟกต์การโจมตี

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

  1. เข้าถึงแท็บตัวแก้ไขสคริปต์สำหรับสคริปต์ UpdateCustomMeter ที่คุณแก้ไขก่อนหน้านี้

  2. เลือกบรรทัดทั้งหมดและวางโค้ดต่อไปนี้บนพวกเขา:

    อัปเดตเมตร์ที่กำหนดเอง
    local Workspace = game:GetService("Workspace")

    local Players = game:GetService("Players")

    local TweenService = game:GetService("TweenService")

    

    -- การอ้างอิงถึงผู้เล่นท้องถิ่น, ตัวละคร, และมนุษย์นอยด์

    local player = Players.LocalPlayer

    local character = player.Character

    local humanoid = character:WaitForChild("Humanoid")

    

    -- คุณสมบัติระหว่างทวีน

    local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

    

    -- ตัวแปรเพื่อเก็บ/แคชสุขภาพตัวละคร

    local cachedHealth = humanoid.Health / humanoid.MaxHealth

    

    -- รับ (หรือสร้าง) เอฟเฟกต์การแก้ไขสีภายในกล้องผู้เล่น

    local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)

    colorCorrection.Name = "DamageColorEffect"

    

    -- การอ้างอิงถึงกรอบภายในของแถบวัด

    local playerGui = player:WaitForChild("PlayerGui")

    local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill

    

    -- สีลำดับเฉดเดียน (สีแดง สีส้ม สีเหลือง สีมะนาว สีเขียว)

    local gradient = {

    	Color3.fromRGB(225, 50, 0),

    	Color3.fromRGB(255, 100, 0),

    	Color3.fromRGB(255, 200, 0),

    	Color3.fromRGB(150, 225, 0),

    	Color3.fromRGB(0, 225, 50)

    }

    

    -- ฟังก์ชันเพื่อรับสีในลำดับโทนจากจุดทศนิยม

    local function getColorFromSequence(fraction: number): Color3

    	-- แต่ละสีในเฉดสีกำหนดจุดเริ่มต้นและ/หรือจุดสิ้นสุดของส่วน

    	local numSections = #gradient - 1

    

    	-- แต่ละส่วนแทนที่ส่วนหนึ่งของ 1

    	local sectionSize = 1 / numSections

    

    	-- ตรวจสอบว่าส่วนที่ขอเป็นจำนวนเศษเสี้ยวอยู่ในส่วนใด

    	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize

    

    	-- รับสีที่จุดเริ่มต้นและจุดสิ้นสุดของส่วน

    	local sectionColorStart = gradient[sectionStartIndex]

    	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart

    

    	-- ปรับเปอร์เซ็นต์ให้เป็นตัวเลขตั้งแต่ 0 ถึง 1 ภายในส่วน

    	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize

    

    	-- เลอร์ประหว่างจุดเริ่มต้นและจุดสิ้นสุดตามสัดส่วนที่ปรับให้เหมาะสม

    	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)

    end

    

    local function onHealthChanged()

    	-- คำนวณสุขภาพใหม่เป็นร้อยละของสูงสุด

    	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)

    

    	-- แบ่งเส้นแนวกลางไปยังเป้าหมายขนาด/สีใหม่

    	local tweenGoal = {

    		Size = UDim2.new(healthFraction, 0, 1, 0),

    		BackgroundColor3 = getColorFromSequence(healthFraction)

    	}

    	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)

    	meterBarTween:Play()

    

    	-- แสดงเอฟเฟกต์ความเสียหายหากสุขภาพใหม่ต่ำกว่าสุขภาพที่บันทึกไว้

    	if healthFraction < cachedHealth then

    		-- บันทึกค่าสุขภาพใหม่

    		cachedHealth = healthFraction

    

    		-- ตั้งการแก้ไขสีเป็นสีแดงเป็นสีเริ่มต้นก่อนที่จะเปลี่ยนสี

    		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)

    		colorCorrection.Saturation = 2.5

    

    		-- เปลี่ยนสีกลับเป็นสีขาว (เป็นกลางและไม่มีการเปลี่ยนแปลงสีจากปกติ)

    		local colorCorrectionTweenGoal = {

    			TintColor = Color3.fromRGB(255, 255, 255),

    			Saturation = 0

    		}

    		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)

    		colorCorrectionTween:Play()

    	end

    end

    

    -- ฟังการเปลี่ยนแปลงในสุขภาพของหุ่นยนต์

    humanoid.HealthChanged:Connect(onHealthChanged)

    

    -- ตั้งค่าขนาดและสีแถบเริ่มต้น (หรือรีเซ็ต) ให้เป็นสุขภาพปัจจุบัน

    onHealthChanged()
    บรรทัดจุดประสงค์
    14ตั้งค่าการอ้างอิงชั่วคราว ( cachedHealth ) เพื่อติดตามปริมาณสุขภาพของตัวละครระหว่างการเปลี่ยนแปลง เพื่อให้คุณสามารถเปรียบเทียบได้ว่าการเปลี่ยนแปลงนั้นต่ำกว่า (ความเสียหาย)
    17 ‑ 18ในการสร้างตัวละครเริ่มต้นสร้างลิงก์ใหม่ ColorCorrectionEffect ภายในตัวเล่นปัจจุบันของผู้เล่น Camera หรือรับการอ้างอิงถึงตัวเดียวกันในการเกิดใหม่ในภายหลังโดยการประกอบผลกระทบการประมวลผลภาพนี้ กับกล้องของผู้เล่น เฉพาะหน้าจอท้องถิ่นของพวกเขาเท่านั้น ไม่ใช่หน้าจอของผู้เล่นทุกคนบนเซิร์ฟเวอร์
    68 ‑ 83แรกทำการตรวจสอบเงื่อนไขเพื่อยืนยันว่าการเปลี่ยนแปลงสุขภาพต่ำกว่าค่า cachedHealth ซึ่งบ่งบอกถึงความเสียหาย; ถ้าเป็นเช่นนั้นก็ตั้ง cachedHealth เป็นค่าใหม่ต่อไป มันตั้งสี ColorCorrectionEffect ให้เป็น [255, 25, 25] (สีแดง) ที่มีความอิ่มตัวสูงกว่า จากนั้นวัยรุ่นแก้ไขสีกลับเป็นค่าเริ่มต้นของสีขาวเปล่า ( [255, 255, 255] ) โดยไม่มีความอิ่มตัว

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