पारदर्शी पिक्सल में पारदर्शिता के साथ भावनाएं या पीएनजी कलाकृतियां भी होती हैं

2 डी गेम के बारे में बात करते हैं। चाहे जिस प्लेटफ़ॉर्म पर वे विकसित हों - लगभग हमेशा वे 3D एक्सेलेरेटर का उपयोग 2D स्प्राइट्स (iOS, Android, PC ... यहां तक ​​कि फ्लैश पहले से ही ऐसा करने के लिए सीखते हैं) के उत्पादन के लिए करेंगे।

और सब कुछ ठीक रहेगा जब तक आप अपनी तस्वीर को स्केल नहीं करना चाहते। और फिर आप पाएंगे कि इससे पहले, पूरी तरह से जुड़ने वाली टाइलें सीम का अधिग्रहण करेगी, और स्प्राइट्स के किनारों के साथ अजीब लाइनें दिखाई देंगी।



आप टाइल्स को ओवरलैप करने की कोशिश करेंगे, लेकिन सीम अभी भी बने रहेंगे ... और आप अपने दिमाग को रैक करना शुरू कर देंगे।

और यह सब बदकिस्मत पारदर्शी पिक्सल के बारे में है! यह पता चला है कि उनके पास रंग भी है।

यह समझने के लिए कि यह क्यों हो रहा है, आपको यह समझने की आवश्यकता है कि जीपीयू कैसे पैमाना बनाता है। वह ऐसा नहीं करता है जैसा ग्राफ संपादक करते हैं। और यहाँ बिंदु पारदर्शिता है।

यह समझ में आता है, यह 3 डी गेम और वहां की बनावट के लिए बहाना है, लेकिन यह कलाकृतियों का कारण होगा यदि आप स्प्राइट पर एक स्थिति रखते हैं जब पूरी तरह से अपारदर्शी पिक्सेल पूरी तरह से पारदर्शी एक से जुड़ा होता है (जो पिक्सेल कला के मामले में दिखाई देने की बहुत संभावना है। आदि)।

पारदर्शिता और पीएनजी के बारे में।

मान लीजिए कि हमारे पास एक नीले वर्ग की तस्वीर है जहां एक बग स्थिति मौजूद है - अपारदर्शी पिक्सेल पूरी तरह से पारदर्शी से सटे हुए हैं:



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

ऊपर की छवि के साथ स्थिति में, निम्न चित्र आसानी से बाहर निकल सकता है:



यानी पारदर्शी पिक्सेल सफ़ेद होंगे। लेकिन कब से वे पूरी तरह से पारदर्शी हैं - हम इसे कभी नहीं देखेंगे और सबकुछ ठीक हो जाएगा।

पारदर्शिता, GPU और स्केलिंग।

अब देखते हैं कि कैसे एक ग्राफिक्स कार्ड पारदर्शिता के साथ बनावट को मापता है।

इस मामले को सरल बनाने के लिए, यह अलग से रंगीन चैनल और अलग से अल्फा चैनल को मापता है। उदाहरण के लिए, जब उपरोक्त बनावट को 80% तक बढ़ाया जाए (किसी भी पैमाने के साथ एक बग दिखाई देगा), तो हमें निम्नलिखित चित्र मिलते हैं:



आप देखते हैं?

GPU ने पारदर्शिता सीमा से परे उन लोगों के साथ बॉर्डर ब्लू पिक्सल्स को मिश्रित किया (क्योंकि यह अल्फा से अलग रंग चैनल को स्केल करता था और यह पारदर्शी या नहीं तो कोई फर्क नहीं पड़ता था)। नतीजतन, सीमा पिक्सेल सफेद रंग के साथ मिश्रित हो गए और पूरी तरह से समझ से बाहर हो गए।

जाहिर है, यदि आप इस तरह के स्प्राइट को काला करने की कोशिश करते हैं, तो हम स्पष्ट रूप से सीम देखेंगे।

और, मुझे लगता है, यह स्पष्ट है कि स्प्राइट को ऐसी कलाकृतियों से क्यों बचाया गया है, जिसकी सीमा धीरे-धीरे पारदर्शिता में परिवर्तित हो जाती है, और 1 से 0 तक तेजी से नहीं कूदती है।

कैसे लड़ें?

अब जब हम जानते हैं कि यह क्या है, हम जानते हैं कि इससे कैसे निपटना है। हमें बॉर्डर से मिलते-जुलते रंग के लिए सीमाओं से सटे पारदर्शी पिक्सल्स की आवश्यकता होती है। इसके अलावा, यदि हम स्प्राइट के मस्तूल के पैमाने को 2 गुना से कम कर देते हैं, तो हमें कई पिक्सेल की चौड़ाई के साथ छवि के "किनारा" का ख्याल रखना होगा। लेकिन यह कैसे करें?

सबसे आसान तरीका मैंने पाया कि फ़ोटोशॉप में एक दूसरी परत बनाई गई है, इसे मुख्य एक के नीचे रखें, इसे धब्बा के साथ धुंधला करें और पारदर्शिता को 1% पर सेट करें। नतीजतन, हमारी छवि के चारों ओर के पिक्सल लगभग अदृश्य (1% पारदर्शिता) होंगे, लेकिन यह सीमा के समान रंग होने की गारंटी है। बेशक, ब्लर प्रभाव हर स्प्राइट के लिए उपयुक्त नहीं है। कहीं न कहीं आप इनमें से 4 (1%) लेयर बना सकते हैं, लेकिन इन्हें ब्लब न करें, लेकिन बस इन्हें अलग-अलग दिशाओं में घुमाएं ...

सामान्य तौर पर, मुझे आशा है कि किसी को यह जानकारी उपयोगी लगेगी।