ฉันจะแสดงแถบสุขภาพที่มีรูปร่างผิดปกติได้อย่างไร

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

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

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

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

2d graphics

— msd7734
แหล่งที่มา

"N̶a̶n̶o̶m̶a̶c̶h̶i̶n̶e̶s̶ Shaders, บุตรชาย"

— Mukesh Ingham

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

— Richard Tingle

แถบสุขภาพรูปหัวใจเป็นอย่างไร "แก้ไขได้อย่างง่ายดาย"?

— MooseBoys

@ MooseBoys ฉันกำลังพูดถึงสุขภาพที่มีพื้นฐานจากหัวใจไม่ใช่รูปหัวใจ คิดถึงเกม Legend of Zelda ขออภัยที่ไม่ชัดเจน

— msd7734

@RichardTingle ความคิดที่ดี :)

— Jon

คำตอบ:

มีวิธีที่ง่ายมากในการบรรลุเป้าหมายนี้ด้วยเฉดสีคุณต้องมีพื้นผิวสาม *: แถบสุขภาพที่ว่างเปล่าพื้นผิวแถบสุขภาพและหน้ากากที่มีการไล่ระดับของการกระจายสุขภาพที่มีหนึ่งสุดขั้ว (เช่นค่าอัลฟาที่มืดที่สุด อื่น ๆ ในปลายอื่น ๆ มันแสดงให้เห็นได้ดีที่สุดบนรูปภาพฉันไม่สามารถวาดเส้นโค้งลาดแบบเส้นตรงได้ แต่ฉันมั่นใจว่าศิลปินของคุณจะไม่มีปัญหาใด ๆ : ตอนนี้ในตัวอย่าง shader ทั้งพื้นผิวและเกณฑ์ค่าหน้ากากทิ้งพิกเซลทั้งหมดที่ไม่ใช่ สว่างกว่าเกณฑ์การป้อนข้อมูล (ขึ้นอยู่กับอินพุตสุขภาพ shader%)
คุณทำได้ใช้สูตรทางคณิตศาสตร์สำหรับปิดบังแทนพื้นผิว แต่ถ้าคุณทำอย่างนั้นคุณจะยังคง จำกัด มากกับรูปร่างที่คุณสามารถ (= สูตรธรรมดา) เพื่อสร้างด้วยสูตรดังกล่าว - และการค้นหานั้นไม่สำคัญ
* ดูความคิดเห็น

— wondra
แหล่งที่มา

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

— bcrist

คุณไม่ต้องการความมืดมิดหรือดำมากนักคุณสามารถใช้ช่องอัลฟาเพื่อกำจัดพิกเซลที่คุณไม่ต้องการ

— Jack Aidley

@ JackAidley แน่ใจว่าจะเป็นไปได้ แต่ฉันต้องการโซลูชันที่ยืดหยุ่นที่สุดเท่าที่จะเป็นไปได้ - ในชื่อ AAA ส่วนใหญ่คุณไม่มี HP เพียงแค่ "สีแดง" แต่มันเป็นพื้นผิว

— พุธที่

@ bbc จุดดีฉันคิดว่ามันเป็นการเพิ่มประสิทธิภาพ แต่ฉันไม่สามารถวาดได้อย่างถูกต้องดังนั้นฉันจึงตัดสินใจที่จะทำให้มันง่ายที่สุดเท่าที่จะทำได้

— พุธที่

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

— Random832

ดำเนินการทางคณิตศาสตร์ในฐานะผู้เชิดพิกเซล:

บน CPU ให้คำนวณ HealthDirection และ 'dot product ด้วย V2

บน GPU ให้คำนวณทิศทางปกติให้อยู่ห่างจากจุดกึ่งกลางสำหรับแต่ละพิกเซล เปรียบเทียบผลิตภัณฑ์แต่ละจุดกับ HealthDirections 'เพื่อเลือกว่าจะแรเงา "พื้นหลัง" หรือสี

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

วาดแท่งก่อนใช้อัลกอริทึมกับรูปสี่เหลี่ยม; สีเอาต์พุตระหว่าง rangeMin และ rangeMax (สามารถอบ) และคลิป () หรือเอาท์พุทโปร่งใสทุกที่อื่น ถัดไปวาดเทพดา (แก้ไข) เหนือมันโดยใช้อัลฟา ฉันติดตามบาร์ของคุณใน CAD เติมน้ำท่วมแล้ว "magic wanded" รูปร่างสีทึบใน Paint เพื่อลบ ฉันดูเหมือนอึเนื่องจากการผสม AutoCAD และโปรแกรมระบายสีด้วยมือ สมมติว่าคุณผสมผสานขอบด้านในเพื่อความโปร่งใสของคุณจะมีลักษณะที่สมบูรณ์แบบ

เส้นขอบสีขาวคือขีด จำกัด ของรูปสี่เหลี่ยม มันและ X สีแดงใช้สำหรับการอ้างอิงเท่านั้น:

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

— จอน
แหล่งที่มา

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

— Jack Aidley

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

— Jon

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

— Jack Aidley

@ JackAidley แต่ไม่มีพื้นหลังเทพดา? รุ้งถูกวาดโดยใช้เพียงสี่ตำแหน่งในโลก 3 เท่านั้น ไม่มี UV ไม่มี "พื้นหลังสไปรต์" นอกจากนี้คุณยังมีความกังวลใจว่า pixel shader กำลังจะจมอยู่กับการทำงานของคณะสี่คนเล็ก ๆ บ้างไหม? นอกจากนี้คลิป RangeMin และ RangeMax () ส่วนใหญ่ของชิ้นส่วนเหล่านั้นทันที

— Jon

คุณจะต้องมี sprite พื้นหลังเพื่อให้ได้เส้นขอบตามที่แสดงในภาพต้นฉบับ หากคุณไม่ใช้สิ่งเหล่านี้ใช่วิธีการจะแตกต่างกัน

— Jack Aidley