मैं गैर-समान स्प्राइट आयामों के साथ स्प्राइट शीट कैसे संभाल सकता हूं?


14

के साथ एक spritesheet के लिए असमान स्प्राइट आयाम, मैं कैसे प्राप्त कर सकते हैं सीमांकन-आयतों प्रत्येक व्यक्ति स्प्राइट के लिए (यानी नीले बॉक्स में छवि निम्नलिखित / मैं केवल कुछ उदाहरण आकर्षित किया)?

मैं यह निर्धारित करना चाहूंगा: offset_x, offset_y, width, height

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

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

EDIT: टिप्पणियों और उत्तरों के माध्यम से पढ़ने के बाद, मैंने इसे और अधिक समावेशी बनाने के लिए अपने प्रश्न को फिर से परिभाषित किया। एक खेल में स्प्राइटशीट का उपयोग करने की वास्तविक प्रक्रिया। पहले, इस प्रश्न में यह बिंदु था कि लोग गैर-समान आयामों के स्प्राइटशीट का उत्पादन क्यों करते हैं और मैं इससे कैसे निपट सकता हूं।


1
यह मुझे लगता है कि वे सभी समान आकार वाले हैं, जो स्थान रंग से नहीं भरा जा रहा है वह सिर्फ पिक्सेल है जिसमें अल्फा सेट शून्य है।
डेरेक

जवाबों:


8

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

यदि आपके पास यह मेटा डेटा नहीं है, तो आपको इसे स्वयं लेखक करना होगा। सबसे सटीक तरीका वह है जो आपने अपने प्रश्न में कहा था, जिसे सिर्फ हाथ से करना है। इसमें थोड़ा समय लग सकता है, लेकिन नए स्प्राइट बनाने की तुलना में यह शायद तेज़ है।


यह - ऑटो-डिटेक्शन पर आधारित दृष्टिकोणों के अपने उपयोग होते हैं, व्यवहार में वे नकचढ़ा और त्रुटि-प्रवण होते हैं। आप पहले से ही स्प्राइट (अपने स्प्राइट की उत्पत्ति के लिए मेटाडाटा जरूरत करना , सही एक मूल है?) तो अतिरिक्त डेटा शायद ही बहुत ज्यादा एक बोझ की है। कलाकार को हमेशा आपके ऐप से बेहतर पता होना चाहिए कि व्यक्तिगत स्प्राइट का आकार क्या है।
स्टीवन स्टैडनिक

+1। आपूर्ति स्प्राइट के साथ मेटाडाटा इसे हल करने की गारंटी है sanely
बार्टेक बैंचेविज़ जूल

5

आप प्रत्येक स्प्राइट की बाउंडिंग आयतों का पता लगाने के लिए छवि पर विश्लेषण कर सकते हैं, उन बाउंडिंग आयतों को छाँट सकते हैं (शायद न्यूनतम एक्स को बढ़ाकर, फिर वाई) और आपके पास बाउंडिंग क्षेत्रों का एक सेट होगा जो स्प्राइट शीट के फ्रेम के अनुरूप है।

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

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


1
+1। मैं मानता हूं कि सही स्प्राइट सीमा को खोजने के लिए कुछ कंप्यूटर-धारणा / छवि-हेरफेर कौशल की आवश्यकता है। कभी-कभी यह असंभव भी हो सकता है, उदाहरण के लिए यदि आप कछुए को शेल एनीमेशन में देखते हैं। यह अन्य एनीमेशन फ्रेम के सापेक्ष उस सही स्थिति को निर्धारित करने के लिए कठिन होने जा रहा है। और क्यों के रूप में : यह बनावट अंतरिक्ष के इष्टतम उपयोग के कारण सबसे अधिक संभावना है। और आमतौर पर निर्देशांक के साथ एक फ़ाइल को इस तरह के स्प्रिटशीट के साथ आपूर्ति की जानी चाहिए, लेकिन यदि आप इसे Google छवि खोज से केवल ले रहे हैं, तो इस जानकारी की कमी हो सकती है।
बंमज़ैक

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

4

मैंने उस तरह के गैर-समान स्प्रिटशीट के लिए अपना खुद का उपकरण बनाया। यह एडिटिंग ऑफ़सेट्स, वगैरह की सुविधा देता है। यहां आपको एक विचार देने के लिए एक स्क्रीनशॉट दिया गया है:

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


ऐसा लगता है कि आप एक समान स्प्राइटशीट बनाते हैं जिसमें गैर-वर्दी वाले से केवल एक एनीमेशन होता है? या मैं इसका गलत मतलब निकाल रहा हूं?
बेन

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

एक बहुत साफ उपकरण की तरह लगता है जो आपने वहां बनाया था। उपकरण साझा करने का मन है?
एक्यूप्रटेरी

@eckyputrady, im माफ करना, लेकिन यह पूरा होने से बहुत दूर है लेकिन मैं एक और टूल की सलाह देता हूं (जो मूल रूप से मुझे प्रेरित करता है)। : आप यहाँ इसे पा सकते हैं colourclash.com/sprite_buddy/sprite_buddy.html
Anonymouse

0

बुनावट की जाँच करें

http://www.texturepacker.com/

यह इस तरह से एक फ़ाइल को आउटपुट करता है (आपकी पहले से तय सेटिंग्स के आधार पर)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

इस डेटा का उपयोग करके, आप आसानी से छवि से अलग आयतों को पकड़ सकते हैं।


यह सवाल का उपयोग करने के लिए कौन सी तकनीक नहीं है। बस एक उपकरण के लिंक के साथ जवाब देना और इसके आउटपुट का एक उदाहरण मेरे विचार में पर्याप्त नहीं है।
माइकलहाउस

-1

spritebuddy.com ने मेरे लिए बहुत अच्छा काम किया है। साइट पर स्वयं कोई सहायता नहीं मिल सकी, लेकिन Google समूह की यह पोस्ट इसे वास्तव में अच्छी तरह बताती है। यह आपके स्प्राइट्स के लिए सीमा का स्वत: अनुमान लगाता है, आपको इसे समायोजित करने देता है, और आपको एनीमेशन अनुक्रम में व्यवस्थित करने देता है। फिर यह JSON या XML में इस सब के लिए एक मेटाडेटा फ़ाइल को थूकता है। फिर आपको बस इतना करना है कि सही बाउंडिंग आयतों को प्राप्त करने के लिए अपने गेम में उस डेटा फ़ाइल को पार्स करें।


1
यह सवाल का उपयोग करने के लिए कौन सी तकनीक नहीं है। इसके अलावा, यह उपकरण पहले से ही एक टिप्पणी में सुझाया गया था।
MichaelHouse

मैंने अपना उत्तर अपडेट किया, लेकिन मैं असहमत हूं कि यह ओपी के सवाल का जवाब नहीं देता है: "मैं जो निर्धारित करना चाहता हूं वह हैं: ऑफसेट_ एक्स, ऑफसेट_वाई, चौड़ाई, ऊंचाई।" गेम रन-टाइम (जो बहुत गैर-निष्पादित होगा) पर या इससे पहले निर्दिष्ट नहीं किया जाना चाहिए या नहीं। जैसा कि "EDIT: [...] मैंने इसे और अधिक समावेशी बनाने के लिए अपने प्रश्न को फिर से जोड़ दिया। एक गेम में स्प्राइटशीट का उपयोग करने की वास्तविक प्रक्रिया," यह मेरी प्रक्रिया है। मैं spritebuddy का उपयोग करके उपयुक्त JSON फ़ाइल उत्पन्न करता हूं, फिर मुझे अपने खेल में उस डेटा को प्राप्त करने की आवश्यकता है जो मुझे चाहिए।
CletusW

1
@CletusW: अच्छे उत्तर बताएंगे कि यह टूल आपकी प्रक्रिया के लिए इतनी अच्छी तरह से क्यों काम करता है, यह क्या करता है और यह कैसे मदद करता है, आदि। मुझे आपका जवाब पढ़ने में सक्षम होना चाहिए और फिर पता होना चाहिए कि कैसे एक टूल का चयन करें या अपना खुद का लिखें। यदि आप अपने पसंदीदा उदाहरण से लिंक करते हैं, तो यह सिर्फ एक बोनस है, उत्तर का मांस नहीं।
सीन मिडिलिच
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.