मैं अनियमित रूप से आकार वाले स्वास्थ्य सलाखों को कैसे संसाधित कर सकता हूं?


35

पारंपरिक आयताकार या हृदय-आधारित स्वास्थ्य पट्टी का मुद्दा कुछ अच्छी तरह से समझा और आसानी से हल किया गया है। लेकिन अधिक "रचनात्मक रूप से आकार वाले" स्वास्थ्य सलाखों के लिए स्वीकृत समाधान क्या है, जैसे नीचे दिए गए मॉकअप में?

खाली स्वास्थ्य पूर्ण स्वास्थ्य, आंशिक स्वास्थ्य

ऐसा करने का स्पष्ट तरीका "इन-इन-स्प्राइट्स" होगा, इसलिए तीसरी छवि स्वयं का स्प्राइट होगा, साथ ही साथ स्वास्थ्य के विभिन्न स्तरों के लिए कई अन्य संक्रमण भी होंगे। लेकिन यह वास्तव में असंगत लगता है और स्वास्थ्य राज्यों के बीच एक चिकनी संक्रमण बनाने के लिए इन-बेटवेन्स की संख्या बड़ी होगी।

एकमात्र ऐसा विचार जो मैं ले सकता हूं, वह है "खाली स्वास्थ्य" के शीर्ष पर "पूर्ण स्वास्थ्य" स्प्राइट को ओवरले करना और स्वास्थ्य के प्रत्येक टिक का प्रतिनिधित्व करने के लिए पिक्सेल निर्देशांक के स्प्राइट और प्री-बेक सेट को सेट करना और फिर उन्हें स्वास्थ्य के लिए अपारदर्शी या पारदर्शी बनाना। ऊपर या नीचे जाता है।

मैं इस प्रश्न को भाषा और मंच अज्ञेय के रूप में प्रस्तुत करना चाहता हूं, लेकिन यदि यह उत्तर में मदद करता है तो किसी भी भाषा / पुस्तकालय / ढांचे में एक ठोस नमूना प्रदान करने के लिए स्वतंत्र महसूस करता है।


5
"N "a̶n̶o̶m̶a̶c̶h̶i̶n̶e̶s̶ शेडर्स, बेटा"
मुकेश

मुझे लगता है कि संक्रमण को गणितीय रूप से परिभाषित किया जा सकता है, वहां से आप कंप्यूटर को निर्देशांक की गणना कर सकते हैं कि उन्हें प्रीबेक करने के बजाय पिक्सेल निर्देशांक दिखाए जाएं
रिचर्ड

दिल के आकार का स्वास्थ्य पट्टी "आसानी से हल" कैसे होता है?
MooseBoys

1
@MooseBoys मैं दिल पर आधारित स्वास्थ्य के बारे में बात कर रहा था, न कि दिल के आकार की। ज़ेल्डा गेम्स के लीजेंड के बारे में सोचें। अधिक स्पष्ट नहीं होने के लिए क्षमा करें।
msd7734

@ रीचर्ड टिंगल, अच्छा विचार :)
जॉन

जवाबों:


48

शेडर्स के साथ इसे प्राप्त करने का एक बहुत ही सरल तरीका है, आपको तीन * बनावट की आवश्यकता है: खाली स्वास्थ्य बार, स्वास्थ्य पट्टी बनावट और एक वितरण के साथ स्वास्थ्य वितरण की ढाल के साथ एक छोर पर (जैसे कि अंधेरा काला या सबसे पारदर्शी अल्फा मूल्य नहीं) दूसरे छोर पर। यह छवि पर सबसे अच्छा दिखाया गया है, मैं वर्तमान में केवल रैखिक एक घुमावदार ढाल आकर्षित करने में असमर्थ हूं - लेकिन मुझे यकीन है कि आपके कलाकारों को कोई परेशानी नहीं होगी: यहाँ छवि विवरण दर्ज करें अब, shader नमूने में दोनों बनावट और मुखौटा मूल्य को थ्रेसहोल्ड करते हैं, सभी पिक्सेल को त्यागते हैं जो नहीं है इनपुट थ्रेशोल्ड की तुलना में उज्जवल (स्वास्थ्य% shader इनपुट के आधार पर)।
आप कर सकते थेएक बनावट के बजाय मास्किंग के लिए गणितीय सूत्र का उपयोग करें, लेकिन अगर आपने ऐसा किया है, तो आप अभी भी बहुत आकार तक सीमित होंगे जो आप (= सरल वाले) उक्त सूत्रों के साथ बनाने में सक्षम हैं - और एक को ढूंढना तुच्छ नहीं है।
* टिप्पणियाँ देखें


9
बहुत सारे मामलों में (ओपी के उदाहरण सहित) रंग के लिए एक अलग बनावट का उपयोग करना ओवरकिल है। ज्यादातर मामलों में आप सिर्फ रंगों के लिए ग्रेस्केल मास्क ढाल को रंगों के लिए वर्दी के रूप में निर्दिष्ट कर सकते हैं, जबकि अभी भी एक निश्चित सीमा से नीचे किसी भी मुखौटा मूल्यों को खारिज कर सकते हैं।
bcrist

1
आपको वास्तव में काले रंग की नहीं सबसे काले रंग की जरूरत है, आप जिन पिक्सल को नहीं चाहते हैं उन्हें बाहर निकालने के लिए अल्फा चैनल का उपयोग कर सकते हैं।
जैक आइडली

1
@ जेकएडली को यकीन है कि यह संभव होगा, लेकिन मैं समाधान को जितना संभव हो उतना लचीला चाहता था - ज्यादातर एएए खिताबों में आपके पास न केवल "लाल" एचपी है, लेकिन यह बनावट वाला है।
वंद्रा

1
@bcrist अच्छी बात है, मैंने इसे एक अनुकूलन के रूप में सुझाव देने पर विचार किया। लेकिन मैं इसे ठीक से नहीं खींच सकता था इसलिए मैंने इसे यथासंभव सरल रखने और कार्यान्वयन के लिए अनुकूलन को छोड़ने का फैसला किया।
वंद्रा

@wondra ओपी में उदाहरण देखो सहित कई मामलों के लिए आप एक प्रक्रियात्मक ढाल का उपयोग कर सकते हैं, या एक आयामी रंग लुकअप (मुखौटा स्तर इनपुट के साथ), बनावट के बजाय।
रैंडम 832 16

34

एक पिक्सेल shader के रूप में गणितीय रूप से लागू किया गया:

CPU पर, HealthDirection और V2 के साथ इसके 'डॉट प्रोडक्ट' की गणना करें यहाँ छवि विवरण दर्ज करें

GPU पर, प्रत्येक पिक्सेल के लिए केंद्र बिंदु से दूर एक सामान्यीकृत दिशा की गणना करें। प्रत्येक डॉट उत्पाद की तुलना HealthDirections 'से करें कि क्या "पृष्ठभूमि", या रंग को छाया करना है। यहाँ छवि विवरण दर्ज करें

यदि आप इस एल्गोरिथ्म को "उल्टा" करते हैं और दूसरी दिशा से काम करते हैं, तो आप प्रत्येक पिक्सेल की दिशा को एक प्रतिशत में "अन-स्लेर्प" कर सकते हैं और प्रत्येक को हेल्थपेरेंट से तुलना कर सकते हैं। प्रत्येक पिक्सेल के प्रतिशत की गणना के साथ, GPU पर लाल से हरे रंग में फीका करने के लिए तुच्छ हो जाता है।

एल्गोरिथ्म को क्वाड पर लागू करने वाले पहले ड्रॉ करें; रेंजमिन और रेंजमैक्स (बेक किया जा सकता है) और क्लिप () या आउटपुट के पारदर्शी रंग जहां हर जगह पारदर्शी हो। अगला, अल्फ़ा का उपयोग करके, इसके ऊपर (संशोधित) स्प्राइट खींचें। मैंने CAD में आपके बार को ट्रेस किया, उसे बाढ़ से भर दिया, फिर उसे हटाने के लिए पेंट में सॉलिड कलर की आकृति "मैजिक वंडेड" कर दी। ऑटोकैड और पेंट के मिश्रण के कारण मेरा हाथ बकवास की तरह दिखता है; यह मानते हुए कि आप अंदरूनी किनारों को पारदर्शी बनाते हैं, आपका रंग एकदम सही लगेगा ।

सफेद बॉर्डर क्वाड की सीमा है। यह और लाल X केवल संदर्भ के लिए हैं:

यहाँ छवि विवरण दर्ज करें

"छेद के साथ स्प्राइट" को स्वास्थ्य पट्टी के रूप में एक ही समय में प्रदान करने की आवश्यकता नहीं है। उन्हें सभी स्वास्थ्य बार पूरा होने के बाद, एक बार में सभी तैयार करना चाहिए। चूंकि एल्गोरिथ्म छायादार में स्व-निहित है, इसलिए आप इसमें इंस्टेंसिंग भी जोड़ सकते हैं और फिर, सभी इंस्ट्रूमेंट्स को एक इंस्टेंड ड्रॉ कॉल के साथ जोड़ सकते हैं। स्क्रीन पर प्रत्येक स्वास्थ्यवर्धक को आकर्षित करने के लिए 2 ड्राइन्स्टेंट (...) कॉल लेने चाहिए और "पागल तेज़" होना चाहिए।


1
यदि आप इस तरह से एक परिपत्र फैशन में नकाब उतारने जा रहे हैं, तो आप इसे केवल एक परिपत्र फीका के लिए साजिशों को बदलकर और अधिक कुशलता से लागू कर सकते हैं।
जैक आइडली

@ जेकएडली, कृपया अधिक विशिष्ट बनें, क्योंकि मैं इस मास्किंग पर विचार नहीं करता हूं; प्रगति पट्टी पूरी तरह से प्रदान की जाती है, केवल दो त्रिकोणों पर, पहले नमूने के बाद कोई नमूना नहीं। स्प्राइट में बस एक छेद होता है और अंत में पूरी चीज़ को "प्रीटेट" करता है। (यह एक प्रकार का मुखौटा है, लेकिन एल्गोरिथ्म के अभिन्न अंग के रूप में नहीं?) धन्यवाद
जॉन 12

आप जो कर रहे हैं वह एक पृष्ठभूमि के ऊपर रंगीन पट्टी के नकाबपोश संस्करण को चित्रित करने के बराबर है, जिसमें पहले से ही ग्रे रंग है। क्योंकि आपके तरीके के लिए एक कस्टम शेडर की आवश्यकता होती है और आप प्रत्येक पिक्सेल को लिखते हैं, जो आपके द्वारा आकृति के केवल वांछित भाग को खींचने की तुलना में धीमी विधि के साथ समाप्त होता है।
जैक एडले

@JackAidley, लेकिन कोई पृष्ठभूमि स्प्राइट नहीं है? इंद्रधनुष केवल चार फ्लोट 3 विश्व स्थितियों का उपयोग करके तैयार किया गया है; नो यूवी, नो "बैकग्राउंड स्प्राइट"। इसके अलावा, आपको लगता है कि पिक्सेल shader कुछ छोटे quads पर काम करने के लिए परेशान हो रहा है? इसके अलावा, RangeMin और RangeMax क्लिप () उन टुकड़ों के अधिकांश, तुरन्त।
जॉन

मूल छवि में दिखाए गए अनुसार सीमाओं को प्राप्त करने के लिए आपको एक पृष्ठभूमि स्प्राइट की आवश्यकता होगी; यदि आप इन को छोड़ रहे हैं, तो हां, तरीके अलग हैं।
जैक ऐडले
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.