स्प्राइट्स के चारों ओर रूपरेखा बनाने का कुशल तरीका

Question

मैं XNA का उपयोग गेम खेलने के लिए कर रहा हूं, और अपने स्प्राइट्स पर 'चयनित' प्रभाव को प्राप्त करने के लिए विभिन्न तरीकों से प्रयोग कर रहा हूं। मुझे जो परेशानी हो रही है वह यह है कि स्प्राइटबैच में प्रत्येक क्लिक करने योग्य एक से अधिक स्प्राइट का उपयोग करके खींचा जाता है (प्रत्येक वस्तु को 6 स्प्राइट तक बनाया जा सकता है)।

मैं इसकी सराहना करता हूं, अगर कोई मुझे सलाह दे सकता है कि मैं अपने एक्स पिक्सल के स्प्राइट्स के लिए एक रूपरेखा कैसे जोड़ सकता हूं (इसलिए रूपरेखा की चौड़ाई पूरे पिक्सेल की विभिन्न संख्या हो सकती है)।

अग्रिम में धन्यवाद,

• ग्रेग।

Answer 1

ऐसा करने का सबसे आसान तरीका है (इसलिए शायद सबसे अच्छा तरीका है, जब तक कि आप वास्तव में प्रदर्शन के लिए तैयार न हों) आपके स्प्राइट्स की दो प्रतियां होनी चाहिए।

• नियमित संस्करण
• एक "वसा", अनचाहे संस्करण - मूल रूप से आपके स्प्राइट एक्स-कई पिक्सेल "फैटर" का एक सफेद संस्करण है।

"वसा" संस्करण का उपयोग करके अपनी पूरी वस्तु खींचें, फिर शीर्ष पर नियमित संस्करण खींचें।

"वसा" संस्करण को सफेद बनाकर, आप गतिशील रूप से चयन रंग बदलने के लिए स्प्राइटबच के अंतर्निहित रंग टिनिंग का उपयोग कर सकते हैं।

आपकी "वसा" की स्थिति उत्पन्न करने के लिए, मैं एक कंटेंट पाइपलाइन एक्सटेंशन लिखने की सलाह देता हूं, जो आपके मूल स्प्राइट्स को स्वचालित रूप से ले सकता है, उनके अल्फा चैनल को पढ़ सकता है, प्रत्येक पिक्सेल के आसपास मूल छवि एक्स-कई पिक्सल में अधिकतम अल्फा चैनल का नमूना करके एक नया अल्फा चैनल बना सकता है, और RGB = (1,1,1) सेट करना।

आपको यह सुनिश्चित करना होगा कि आपके स्प्राइट्स में रूपरेखा जोड़ने के लिए पर्याप्त पारदर्शी सीमा है (आप सामग्री प्रोसेसर में यह जांच कर सकते हैं - और यदि आवश्यक हो तो कमरा भी बना सकते हैं)।

यदि आपके पास केवल कुछ स्प्राइट हैं, तो आप केवल एक अच्छे छवि संपादक (जीआईएमपी, फोटोशॉप) का उपयोग कर सकते हैं और इसे हाथ से कर सकते हैं: अल्फा चैनल का चयन, विस्तार, चयन, अल्फा का चयन, रंग चैनलों को सफेद रंग भरने के लिए।

Answer 2

मुझे लगता है कि आप जो एक स्प्राइट के लिए प्रत्येक वस्तु के पहले सभी टुकड़ों को आकर्षित करने की आवश्यकता। फिर मुझे लगता है कि स्प्राइट के किनारों का पता लगाने के लिए आपको एक शेडर लिखना होगा, जहां कभी भी यह एक किनारे पाता है, एक पिक्सेल ड्रा करता है। मैं वहाँ कुछ shaders वहाँ पहले से ही यह करने के लिए बाहर है, जो या तो आप का उपयोग करें या पोर्ट बैठ सकती है उम्मीद है।

Comments

इस तरह के शेडर आश्चर्यजनक रूप से लिखने के लिए परेशान हैं, मैंने सुना है (हमने इसे अपने 3 डी गेम में इस्तेमाल किया और भद्दे किनारे वाले मामलों में भागते रहे)। एक बात जिस पर आप विचार करना चाहते हैं, वह एक विशिष्ट रंग (जैसे 0, 255, 255, 0) के साथ सीधे स्प्राइट बनावट में रूपरेखा तैयार कर रही है, और जब स्प्राइट का चयन किया जाता है, तो सिर्फ उस रंग को रूपांतरित करना होगा। फिर शेडर एक तुच्छ रंग परिवर्तन है, और आपके पास रूपरेखा और किसी भी विवरण पर कलाकार का उच्च स्तर है।

Answer 3

आवश्यकताओं के आधार पर, जो भी प्रभावी हो सकता है वह सिर्फ स्प्राइट के लिए एक मांग पर रूपरेखा तैयार कर रहा है। मैं मान रहा हूं कि आपके स्प्राइट्स में पारदर्शिता है, और केवल आयत होने के बजाय अनियमित रूप से आकार में हैं (जबकि यह उस के लिए ठीक काम करेगा, रूपरेखा आयताकार तुच्छ होना चाहिए)।

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

ध्यान दें कि आपको यह हर ड्रॉ करने की ज़रूरत नहीं है (हालांकि मुझे लगता है कि आप कर सकते हैं), लेकिन स्प्राइट्स को स्विच करते समय बस नई रूपरेखा बनाएं।

Comments

हाँ, यह वही है जो मैं सुझाव देना चाहता था। मौजूदा स्प्राइट के तहत, मूल स्प्राइट के बाएं, दाएं, ऊपर और नीचे के हिस्से पर नकाबपोश स्प्रिट 1 पिक्सेल रेंडर करें। कई खेलों ने इस पद्धति का उपयोग पाठ को रेखांकित करने के लिए, या ड्रॉप छाया बनाने के लिए 4 में से केवल 2 पदों के साथ किया।

— काज

Answer 4

सबसे सरल जानवर बल दृष्टिकोण प्रत्येक स्प्राइट की दो प्रतियां, एक सामान्य और एक हाइलाइट किया गया है। फिर हाइलाइट होने पर बस उन्हें स्वैप करें।

यदि आपको स्मृति समाप्त हो गई है तो अधिक जटिल होने की आवश्यकता नहीं है। इसके अलावा, जब आपको हाइलाइट किया जाता है, तो आप कलाकारों के लुक पर पूरा नियंत्रण रख सकते हैं।

Comments

मुझे लगता है कि समस्या का हिस्सा यह है कि ओपी का कहना है कि प्रत्येक वस्तु को कई स्प्राइट से बनाया जा सकता है। इसलिए मुझे लगता है कि रूपरेखा प्रत्येक घटक स्प्राइट के आसपास एक अलग रूपरेखा होने के बजाय, संयुक्त वस्तु की रूपरेखा होनी चाहिए।

— क्रिस होवे

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

— अटैकिंगहोबो

Answer 5

कैसे प्रत्येक स्प्राइट के बारे में, एक और स्प्राइट भी है जो बेस स्प्राइट की एक रूपरेखा है। जब एक उल्लिखित वस्तु खींचते हैं, तो बेस स्प्राइट्स को खींचते हैं, फिर संयुक्त रेंडरिंग का मुखौटा बनाते हैं, फिर मास्क को छोड़कर आउटलाइन स्प्राइट्स को खींचते हैं।

Comments

क्यों न केवल रूपरेखा स्प्राइट को आकर्षित किया जाए और उनके ऊपर नियमित स्प्राइट को आकर्षित किया जाए?

— क्रिस होवे

ऐसा नहीं करने का एक कारण (या क्रिस का सुझाव) है क्योंकि यह बनावट बनावट से दोगुना उपयोग करता है; एक और कारण यह है कि कलाकार वर्कफ़्लो बकवास है, क्योंकि आपको हर बार एक स्प्राइट को बदलने के लिए दो फ़ाइलों को अपडेट करने की आवश्यकता होती है।

ठीक है, हाँ, तुम आदर्श रूप से दो वास्तविक प्रेत संपत्ति नहीं होगी। यदि आप अपने स्प्राइट्स के लिए अल्फा-परीक्षण का उपयोग कर रहे हैं तो आप आउटलाइन को स्प्राइट में डाल सकते हैं और इसे अपने पारदर्शी क्षेत्रों की तुलना में थोड़ा अधिक अल्फा दे सकते हैं। फिर अल्फा परीक्षण संदर्भ मान को नियंत्रित करके आप यह नियंत्रित कर सकते हैं कि रूपरेखा दिखाई दे रही है या नहीं। मैं केवल यह कह रहा था कि यदि आपके पास स्प्राइट्स के 2 संस्करण हैं (चाहे उसकी 2 संपत्ति या एक ही संपत्ति के 2 राज्य) आपको पहले रूपरेखा संस्करण, और फिर सामान्य संस्करण आकर्षित करना चाहिए। इस तरह से आपको किसी भी फैंसी शेड, मास्क या किसी भी चीज़ की आवश्यकता नहीं है।

— क्रिस होवे

क्रिस के विचार में योग्यता है; यदि आप 2 फ़ाइलें (या समान संपत्ति) अपडेट करते हैं, तो इससे बचा जा सकता है यदि आप अपनी संपत्ति / सामग्री पाइपलाइन के हिस्से के रूप में चलने वाले आउटलाइन स्प्राइट के लिए अल्फा उत्पन्न करने के लिए एक उपकरण का उत्पादन करते हैं। बनावट स्मृति एक समस्या हो सकती है या नहीं भी हो सकती है, लेकिन अलग-अलग रूपरेखा स्प्राइट अत्यधिक डीएक्सटी संपीड़ित होनी चाहिए; संभवतः 1/6 वीडियो बनावट में मूल बनावट का आकार और कोई निष्ठा हानि के साथ।

— जंपर

Answer 6

अलग-अलग ट्रेड ऑफ के साथ कुछ अलग समाधान।

सबसे आसान: ऑब्जेक्ट को कई बार सपाट रंग का उपयोग करके रेंडर करें और पोजिशन को छोड़ें (ऑफ़ द लेफ्ट, अप, डाउन, राईट आदि), इससे जो भी आप इसके शीर्ष पर रेंडर करेंगे, उसका एक आउटलाइन वर्जन तैयार होगा, लेकिन इसमें प्रदर्शन लागत और नहीं होगी बहुत सारे अतिरिक्त रेंडर के बिना वसा सीमाओं के लिए अनुमति दें। 4x के साथ एक या दो पिक्सेल बॉर्डर ठीक हो सकता है।

सबसे तेज: बनावट को बढ़ाएं और एक प्रति है जो पहले से ही सीमाबद्ध है, या सिर्फ सीमा है, या एक सपाट ग्रेस्केल 8-बिट मुखौटा है जिसे आप एक छाया में रंग सकते हैं। यह संभवतः स्मृति की लागत पर तेज होगा।

सर्वश्रेष्ठ: मेरी राय, लेकिन आपकी वस्तु का प्रतिनिधित्व दूरी क्षेत्र (SDF) का प्रतिनिधित्व करना सबसे अच्छा समाधान होगा। ये बनावट स्रोत बनावट की तुलना में बहुत छोटी हो सकती हैं और फिर भी उपयोगी डेटा को कैप्चर कर सकती हैं। अनिवार्य रूप से प्रत्येक पिक्सेल एनकोड करता है कि इसे उत्पन्न करने के लिए उपयोग की जाने वाली वस्तु से कितनी दूर है। हाथ में इस डेटा के साथ, आप चमक से लेकर रूपरेखा तक सभी प्रकार के प्रभाव लिख सकते हैं। बॉर्डर आकार और रंग आदि में बदल सकता है, और अभी भी एक अपेक्षाकृत सस्ते shader और केवल एक अतिरिक्त ड्रॉ है। डाउनसाइड टूलींग है, और प्रीप्रोसेसिंग है।

Answer 7

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

संपादित करें: हालांकि, जैसा कि आप टिप्पणियों से देख सकते हैं, यह एक अच्छा विचार नहीं है।

Comments

बस एक स्प्राइट को स्केल करने से एक सही रूपरेखा नहीं मिलती है

— इयान

मुझे नहीं लगता कि यह होगा, लेकिन यह आसान होगा।

— कम्युनिस्ट डक

बहुत सारी चीजें आसान हैं लेकिन समस्या का समाधान नहीं है। किसी भी तरह के दिलचस्प सिल्हूट के साथ स्प्राइट के लिए एक स्केल-अप पूर्ण कचरा पैदा करेगा।

स्केलिंग केवल ठोस वर्ग या गोलाकार वस्तुओं के लिए अच्छी लगेगी। यदि आकार वास्तव में चौड़ा है, या लंबा है, या अंतराल है तो यह वास्तव में बुरा लगेगा।

— अटैकिंगहोबो

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

— डैश-टॉम-बैंग

Answer 8

मैं स्प्राइट को स्केल करने से सहमत हूं। सबसे आसान मार्ग से, और आप इसे विशेष रूप से इस उद्देश्य के लिए अतिरिक्त स्प्राइट बनाने के बिना किसी भी प्रेत का चयन करने के लिए लागू कर सकते हैं।

• यानी स्प्राइटऑटलाइन.काले = स्प्राइटऑरिजिनल.स्केल * 0.1 एफ; spriteOutline.Color = नया रंग (255, 0, 0, 255);

Answer 9

मूल स्प्राइट के रंग को बाह्यरेखा रंग से बदलें (या यदि आप चाहें तो इसे टिंट भी कर सकते हैं)। इस फ्लैट-शेडेड या टिंटेड स्प्रेंडर को 1 पिक्सेल ऑफसेट के साथ चार बार रेंडर करें: x, y = (- 1, -1), तब (+ 1, -1), फिर (-1, + 1) तब (+1 , +1)। सभी स्प्राइट्स के लिए दोहराएं जो ऑब्जेक्ट बनाते हैं।

उसके बाद, मूल स्प्राइट्स को उचित क्रम में शीर्ष पर (0,0) पर रेंडर करें।