इस ब्लॉग में मैं आपको अपनी पसंदीदा तकनीक दिखाऊंगा जिसे मैं अपने वागाबोंड गेम में सक्रिय रूप से उपयोग करता हूं: पैलेट्स को बदलना।

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

छवि तैयार करना

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

वास्तव में, कुछ छवि प्रारूप इस संग्रहण विधि का समर्थन करते हैं। उदाहरण के लिए, पीएनजी प्रारूप में अनुक्रमित रंगों को बचाने की क्षमता है। दुर्भाग्य से, कई इमेज लोडिंग लाइब्रेरी रंग की एक सरणी बनाते हैं, भले ही छवि को अनुक्रमित मोड में सहेजा गया हो। यह एसएफएमएल पुस्तकालय मैं उपयोग करने के लिए भी लागू होता है। अंदर, यह stb_image का उपयोग करता है, जो स्वचालित रूप से छवियों के "पैलेट को हटा देता है", अर्थात्। इसी पैलेट रंग के साथ अनुक्रमणिका बदलता है।

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

यहाँ एक उदाहरण है जिसे हम प्राप्त करने की अपेक्षा करते हैं:


इसे प्राप्त करने के लिए, मैं एक छोटे पायथन फ़ंक्शन का उपयोग करता हूं जो पिलो लाइब्रेरी का उपयोग करता है:

import io import numpy as np from PIL import Image def convert_to_indexed_image(image, palette_size): # Convert to an indexed image indexed_image = image.convert('RGBA').convert(mode='P', dither='NONE', colors=palette_size) # Be careful it can remove colors # Save and load the image to update the info (transparency field in particular) f = io.BytesIO() indexed_image.save(f, 'png') indexed_image = Image.open(f) # Reinterpret the indexed image as a grayscale image grayscale_image = Image.fromarray(np.asarray(indexed_image), 'L') # Create the palette palette = indexed_image.getpalette() transparency = list(indexed_image.info['transparency']) palette_colors = np.asarray([[palette[3*i:3*i+3] + [transparency[i]] \ for i in range(palette_size)]]).astype('uint8') palette_image = Image.fromarray(palette_colors, mode='RGBA') return grayscale_image, palette_image 

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

शेडर

छवियों को तैयार करने के बाद, हम पैलेट को बदलने के लिए एक shader लिखने के लिए तैयार हैं। एक पैलेट को एक शेडर में स्थानांतरित करने के लिए दो रणनीतियां हैं: आप एक बनावट या एक सजातीय सरणी का उपयोग कर सकते हैं। मुझे एक सजातीय सरणी का उपयोग करना आसान लगा, इसलिए मैंने इसका उपयोग किया।

यहाँ मेरा shader है, मैंने इसे GLSL में लिखा है, लेकिन मुझे लगता है कि इसे shaders बनाने के लिए दूसरी भाषा में आसानी से स्थानांतरित किया जा सकता है:

 #version 330 core in vec2 TexCoords; uniform sampler2D Texture; uniform vec4 Palette[32]; out vec4 Color; void main() { Color = Palette[int(texture(Texture, TexCoords).r * 255)]; } 

हम वर्तमान पिक्सेल के लाल चैनल को पढ़ने के लिए सिर्फ एक बनावट का उपयोग करते हैं। लाल चैनल 0 से 1 तक की सीमा में एक अस्थायी बिंदु मान है, इसलिए हम इसे 255 से गुणा करते हैं और इसे 0 से 255 तक मूल ग्रे स्तर प्राप्त करने के लिए int परिवर्तित करते हैं, जो छवि में संग्रहीत होता है। अगला हम पैलेट से रंग प्राप्त करने के लिए इसका उपयोग करते हैं।

लेख की शुरुआत में एनीमेशन इन-गेम स्क्रीनशॉट से लिया गया है जिसमें मैं चरित्र के शरीर का रंग बदलने के लिए निम्नलिखित पैलेट का उपयोग करता हूं: