สร้างมิเตอร์ HUD

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

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

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

มุมมองในเกมที่แสดงมิเตอร์สุขภาพที่กำหนดเองในพื้นที่มุมขวาบน.

โดยใช้ Hazardous Space Station เป็นจุดเริ่มต้นและ UI Fundamentals - HUD Meter เป็นจุดอ้างอิงที่เสร็จสมบูรณ์ บทช่วยสอนนี้จะแสดงให้เห็นถึง:

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

เปิดใช้งาน Device Emulator

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

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

  1. เปิดเทมเพลต Hazardous Space Station ใน Studio

  2. จากเมนู Test ของ Studio ให้เปิดใช้งาน Device Emulator

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

    ตัวเลือกการตั้งค่า Device Emulator ที่ระบุไว้ที่ด้านบนของหน้าต่างมุมมอง.

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

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

แผนภาพแสดงวิธีการที่ ScreenGui โคลนจาก StarterGui ไปยัง PlayerGui ของผู้เล่น

เพื่อแทรก ScreenGui ที่ว่างเปล่า:

  1. ในหน้าต่าง Explorer ให้ค้นหาคอนเทนเนอร์ StarterGui

    หน้าต่าง Explorer แสดงคอนเทนเนอร์ StarterGui.

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

    ScreenGui ถูกแทรกเข้าไปในคอนเทนเนอร์ StarterGui.

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

    ScreenGui เปลี่ยนชื่อเป็น HUDContainer.

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

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

อุปกรณ์เคลื่อนที่แสดงปุ่มแถบด้านบนของ Roblox และการตัดของอุปกรณ์.

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

อุปกรณ์เคลื่อนที่แสดงพื้นที่ปลอดภัยของ UI หลัก.

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

ScreenInsets ตั้งค่าเป็น CoreUISafeInsets.

  1. ในหน้าต่าง Explorer ให้เลือก HUDContainer

    หน้าต่าง Explorer แสดง HUDContainer ที่เลือก.

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

    ScreenInsets ตั้งค่าเป็น DeviceSafeInsets ในหน้าต่าง Properties.

ตั้งค่าการpadding ขอบ

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

คอนเทนเนอร์หน้าจอที่มี padding รอบขอบทั้งหมด.

วิธีหนึ่งในการใช้ padding กับคอนเทนเนอร์ UI คือการแทรกตัวปรับ UIPadding:

  1. แทรกตัวปรับ UIPadding ลงใน HUDContainer

    HUDContainer ที่มีตัวปรับ UIPadding ถูกแทรก.

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

    หน้าต่าง Properties แสดงตัวปรับ UIPadding ที่ตั้งค่าเป็น 0, 16 สำหรับขอบทั้งหมด.

สร้างมิเตอร์สุขภาพ

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

ส่วนประกอบพื้นฐานที่ใช้สำหรับมิเตอร์สุขภาพ.

สร้างกรอบหลัก

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

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

    กรอบใหม่ในมุมมอง.

  2. เปลี่ยนชื่ออินสแตนซ์กรอบใหม่เป็น MeterBar

    กรอบใหม่ถูกแทรกและเปลี่ยนชื่อเป็น MeterBar.

จัดตำแหน่งกรอบ

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

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

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

ช่วงการปรับขนาดสำหรับแกน X และ Y ของคอนเทนเนอร์.

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

จุดยึดกรอบในมุมขวาบนของมัน.

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

    หน้าต่าง Explorer แสดงกรอบ MeterBar ที่เลือก.

  2. ในหน้าต่าง Properties ให้ป้อน 1, 0, 0, 0 สำหรับ Position และกด Enter Studio จะเพิ่มวงเล็บโดยอัตโนมัติเพื่อสร้าง UDim2 เป็น {1, 0},{0, 0}

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

    กรอบถูกจัดตำแหน่งใหม่ในมุมขวาบนของคอนเทนเนอร์.

เปลี่ยนขนาดกรอบ

เช่นเดียวกับตำแหน่ง ขนาดของ Size ของวัตถุ UI จะถูกแทนที่ด้วยชุดพิกัด UDim2 ที่ประกอบด้วยค่า Scale และ Offset สำหรับทั้งแกน X และ Y

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

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

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

    กรอบถูกปรับขนาดเป็น 35% กว้างและ 5% สูง.

สไตล์กรอบ

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

กรอบที่มีสไตล์ด้วยความทึบ ขอบ และมุมโค้ง.

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

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

    กรอบถูกปรับสไตล์ใหม่ด้วยพื้นหลังมืดและความทึบ 25%.

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

    หน้าต่าง Explorer แสดงกรอบ MeterBar ที่มีตัวปรับ UIStroke เป็นลูก.

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

    กรอบถูกปรับสไตล์ใหม่ด้วยตัวปรับ UIStroke.

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

  1. แทรกอินสแตนซ์ UICorner ลงในกรอบ MeterBar

    หน้าต่าง Explorer แสดงกรอบ MeterBar ที่มีตัวปรับ UICorner เป็นลูก.

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

    มุมกรอบถูกโค้งด้วยตัวปรับ UICorner.

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

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

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

  1. แทรก Frame เป็นลูกลงในกรอบ MeterBar

  2. เปลี่ยนชื่ออินสแตนซ์กรอบใหม่เป็น InnerFill

    หน้าต่าง Explorer แสดงกรอบหลัก MeterBar ที่มีกรอบลูกชื่อ InnerFill.

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

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

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

    กรอบการเติมภายในถูกจัดตำแหน่งใหม่และปรับขนาดเพื่อเติมเต็มกรอบหลักทั้งหมด.

  4. เพื่อให้ตรงกับรูปร่าง "แผ่น" ของกรอบหลัก ให้แทรก UICorner เพิ่มเติมลงใน InnerFill

    หน้าต่าง Explorer แสดงกรอบ InnerFill ที่มีตัวปรับ UICorner เป็นลูก.

  5. เมื่อเลือกตัวปรับ UICorner ใหม่ ให้ตั้งค่าคุณสมบัติ CornerRadius เป็น 0.5, 0 เพื่อให้ตรงกับรูปร่าง "แผ่น" ของกรอบหลัก MeterBar

    มุมกรอบการเติมภายในถูกโค้งด้วยตัวปรับ UICorner.

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

    กรอบการเติมภายในถูกเปลี่ยนสีเป็นสีเขียวเพื่อแสดงสุขภาพที่ดี.

เพิ่มไอคอน

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

ป้ายภาพของหัวใจถูกเพิ่มเพื่อแสดงให้เห็นถึงมิเตอร์สุขภาพได้ชัดเจนยิ่งขึ้น.

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

  2. เปลี่ยนชื่ออินสแตนซ์ป้ายใหม่เป็น Icon

    หน้าต่าง Explorer แสดงกรอบ MeterBar ที่มีป้าย ImageLabel เป็นลูก.

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

    หน้าต่าง Properties แสดง ZIndex ของ ImageLabel ตั้งค่าเป็น 2.

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

    ป้ายภาพของหัวใจถูกเพิ่มลงในกรอบ MeterBar.

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

    หน้าต่าง Explorer แสดง ImageLabel ที่มีตัวปรับ UIAspectRatioConstraint เป็นลูก.

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

    • AnchorPoint = 0.5, 0.5 (จุดยึดกลาง)
    • BackgroundTransparency = 1 (โปร่งใส 100%)
    • Position = 0, 0, 0.5, 0 (ด้านซ้ายของมิเตอร์และศูนย์แนวตั้ง)
    • Size = 2, 0, 2, 0 (200% ขนาดรวมของกรอบ MeterBar ซึ่งถูกจำกัดที่ 1:1 โดย UIAspectRatioConstraint)
    ป้ายภาพของหัวใจถูกจัดตำแหน่งใหม่และปรับขนาดพร้อมกับพื้นหลังที่โปร่งใส.

จำกัดขนาด

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

Device Emulator ตั้งค่าให้จำลองอุปกรณ์แท็บเล็ต. การจำลองบนอุปกรณ์แท็บเล็ตที่มีแถบมิเตอร์สูงกว่าที่ต้องการ.

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

  1. แทรก UISizeConstraint ลงในกรอบ MeterBar

    หน้าต่าง Explorer แสดงกรอบ MeterBar ที่มีตัวปรับ UISizeConstraint เป็นลูก.

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

    หน้าต่าง Properties แสดง MaxSize ของ UISizeConstraint ตั้งค่าเป็น inf, 20.

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

การจำลองบนโทรศัพท์.

แทนที่มิเตอร์สุขภาพเริ่มต้น

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

มิเตอร์สุขภาพเริ่มต้นทับซ้อนและซ้ำซ้อนกับมิเตอร์สุขภาพที่กำหนดเอง.

ปิดมิเตอร์เริ่มต้น

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

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

    หน้าต่าง Explorer แสดงคอนเทนเนอร์ StarterPlayerScripts ภายในคอนเทนเนอร์ StarterPlayer.

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

    หน้าต่าง Explorer แสดงสคริปต์ไคลเอนต์ HideDefaultHealthMeter ใหม่ภายในคอนเทนเนอร์ StarterPlayerScripts.

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

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

    HideDefaultHealthMeter
    local StarterGui = game:GetService("StarterGui")

    

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

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

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

มิเตอร์สุขภาพเริ่มต้นถูกปิดใช้งาน.

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

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

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

    หน้าต่าง Explorer แสดงคอนเทนเนอร์ StarterCharacterScripts ภายในคอนเทนเนอร์ StarterPlayer.

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

    หน้าต่าง Explorer แสดงสคริปต์ไคลเอนต์ UpdateCustomMeter ใหม่ภายในคอนเทนเนอร์ StarterCharacterScripts.

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

    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

    

    	-- Lerp ระหว่างจุดเริ่มต้นและจุดสิ้นสุดตามเศษส่วนที่ทำให้เป็นปกติ

    	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ได้รับการอ้างอิงถึงวัตถุ InnerFill ของมิเตอร์ซึ่งต้องปรับขนาดและเปลี่ยนสีเมื่อสุขภาพของตัวละครเปลี่ยนแปลง
    13‑19ประกาศอาร์เรย์ของสีห้าสี (แดง ส้ม เหลือง ไลม์ เขียว) เพื่อเปลี่ยนสีมิเตอร์ที่จุดต่าง ๆ เช่น สีเขียวสำหรับสุขภาพ 100% สีเหลืองสำหรับ 50% สีแดงสำหรับ 0% หรือการผสมที่ใด ๆ ระหว่างจุดกุญแจ
    22‑41ฟังก์ชันช่วยซึ่งส่งคืนการผสมสีระหว่างจุดสีในเกรเดียนต์ใด ๆ
    43‑50ฟังก์ชันที่จัดการการเปลี่ยนแปลงใด ๆ ในสุขภาพ ที่นี่มันคำนวณสุขภาพใหม่เป็นเปอร์เซ็นต์ของ MaxHealth ของตัวละคร ปรับขนาด InnerFill ให้ตรงกับเปอร์เซ็นต์นั้น และเปลี่ยนสีให้ตรงกับสีที่ส่งคืนจากฟังก์ชัน getColorFromSequence()
    53การเชื่อมต่อ เหตุการณ์ หลักที่ตรวจจับการเปลี่ยนแปลง Health ที่ทำซ้ำจากเซิร์ฟเวอร์และเรียกใช้ฟังก์ชัน onHealthChanged()
    56ตั้งค่า (หรือรีเซ็ต) ขนาด/สีของมิเตอร์ให้ตรงกับสุขภาพปัจจุบันในตอนแรก (เมื่อเกิดตัวละครหรือเกิดใหม่) โดยปกติจะเป็นความกว้างเต็มและสีเขียว

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

ทำให้มิเตอร์บาร์เคลื่อนไหว

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

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

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

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

    local TweenService = game:GetService("TweenService")

    

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

    local player = Players.LocalPlayer

    local character = player.Character

    local humanoid = character:WaitForChild("Humanoid")

    

    -- คุณสมบัติของ Tween

    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

    

    	-- Lerp ระหว่างจุดเริ่มต้นและจุดสิ้นสุดตามเศษส่วนที่ทำให้เป็นปกติ

    	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)

    end

    

    local function onHealthChanged()

    	-- คำนวณสุขภาพใหม่เป็นเปอร์เซ็นต์ของสูงสุด

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

    

    	-- Tween มิเตอร์ไปยังขนาด/สีใหม่

    	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แทนที่จะตั้งค่าขนาดและสีของมิเตอร์อย่างง่าย ๆ ตาม เวอร์ชันก่อนหน้า ประกาศตาราง tweenGoal ที่มีขนาด/สีเป้าหมาย สร้างการทำให้เคลื่อนไหวใหม่โดยใช้พารามิเตอร์ tweenInfo และ tweenGoal และเล่นการทำให้เคลื่อนไหวใหม่

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

เพิ่มเอฟเฟกต์ความเสียหาย

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

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

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

    UpdateCustomMeter
    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")

    

    -- คุณสมบัติของ Tween

    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

    

    	-- Lerp ระหว่างจุดเริ่มต้นและจุดสิ้นสุดตามเศษส่วนที่ทำให้เป็นปกติ

    	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)

    end

    

    local function onHealthChanged()

    	-- คำนวณสุขภาพใหม่เป็นเปอร์เซ็นต์ของสูงสุด

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

    

    	-- Tween มิเตอร์ไปยังขนาด/สีใหม่

    	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

    

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

    		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])) โดยไม่มีความอิ่มตัว

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

©2026 Roblox Corporation. Roblox, โลโก้ Roblox และ Powering Imagination เป็นส่วนหนึ่งของเครื่องหมายการค้าที่จดทะเบียน และไม่ได้จดทะเบียนของเราในสหรัฐฯ และประเทศอื่นๆ
เงื่อนไข·ความเป็นส่วนตัว·การเข้าถึง·ฝ่ายบริการช่วยเหลือ
ภาษาไทย