ครีเอเตอร์
เริ่มใช้งาน
คู่มือการใช้งานระดับกลาง
เส้นทางขั้นสูง

สร้างมาตรวัด HUD

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

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

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

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

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

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

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

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

วิธีที่ดีที่สุดในการทดสอบการออกแบบ 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 objects (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.

ตั้งค่าช่องว่างที่ขอบ

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

หน้าจอคอนเทนเนอร์พร้อมช่องว่างรอบๆ ทุกขอบ.

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

  1. แทรกตัวแก้ไข UIPadding ลงใน HUDContainer

    HUDContainer พร้อมตัวแก้ไข UIPadding ที่แทรกอยู่.

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

    หน้าต่าง Properties แสดงตัวแก้ไข UIPadding ด้วยค่า 0, 16 ที่ตั้งค่าไว้สำหรับทุกขอบ.

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

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

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

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

คล้ายกับแอปพลิเคชันการออกแบบเช่น Figma และ Photoshop, Frame ใน Roblox ทำหน้าที่เป็นคอนเทนเนอร์สำหรับ UI objects อื่น ๆ สำหรับบทเรียนนี้ มาตรวัดสุขภาพทั้งหมดจะถูกเก็บไว้ในกรอบหลักเดียว ทำให้โยกย้ายในหลายการจัดวาง 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%) แสดงถึงขอบด้านบนของคอนเทนเนอร์

ช่วงค่า Scale สำหรับแกน 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

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

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

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

    หน้าต่าง Explorer แสดงกรอบ InnerFill พร้อมตัวปรับ UICorner.

  5. ในขณะที่เลือกตัวปรับ UICorner ใหม่ ให้กำหนดคุณสมบัติ CornerRadius เป็น 0.5, 0 เพื่อให้ตรงกับรูปร่าง “ถั่ว” ของกรอบพ่อแม่ MeterBar

    มุมกรอบเติมภายในกลมด้วยตัวปรับ UICorner.

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

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

เพิ่มไอคอน

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

ป้ายภาพของหัวใจที่เพิ่มขึ้นเพื่อบ่งบอกถึงมาตรวัดสุขภาพ.

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

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

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

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

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

  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

    

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

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

เคลื่อนที่บาร์มาตรวัด

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

    

    	-- Normalize fraction ให้เป็นตัวเลขตั้งแต่ 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 ที่บ่งบอกระยะเวลา tween ภายในรวมถึง รูปแบบการตื่น และ ทิศทางการตื่น
    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

    

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

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

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