XNA ड्रा: खेल के ग्राफिक्स में सुधार

सभी को नमस्कार।

Habré पर मेरे सभी आठ लेख खेल देव पर लेख हैं, उनमें से ज्यादातर XNA जैसे अद्भुत ढांचे से जुड़े हैं। XNA के साथ पहले परिचित एक संगीत खिलौना बनाने के बारे में एक लेख था, फिर लेखों की जटिलता बढ़ी, मैंने कण प्रणालियों के बारे में लिखना शुरू किया, और फिर शेड्स और शेड्स के बारे में।

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



यदि रुचि है - निवास के तहत।

परिचय

हम फिर से गेम्स के 2 डी कंपोनेंट पर टच करेंगे और केवल पिक्सेल शेड्स के साथ काम करेंगे।

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

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

विरूपण (विकृति)

आपकी आंख को पकड़ने वाला सबसे पहला प्रभाव विकृति है:


इस प्रभाव को एक विशेष shader द्वारा संसाधित नहीं किया जाता है, सामान्य तौर पर, यह उस लेख के समान है जो मैंने पहले लिखा था।

आइए उस विस्फोट प्रभाव को देखें।

निम्नलिखित बनावट यहाँ उपयोग किए जाते हैं:


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

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

जोड़ा सौंदर्य के लिए - विस्फोट से कण, पट्टी पर सबसे बड़ी बनावट। लेकिन यह ध्यान देने योग्य है कि खिलाड़ी उसे कभी भी सीधा नहीं देखेगा। यह विकृत है और काफी जल्दी गायब हो जाता है।

एक कण प्रणाली बनाने वाले शुरुआती लोगों के लिए कुछ सुझाव दें:

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

HUD विरूपण

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

उदाहरण के लिए, एक खिलाड़ी की मृत्यु:


यह shader पहले की तरह ही है - छवि विरूपण। हालांकि, मौलिक रूप से उससे अलग है। विकृतियां विकृति मानचित्र से नहीं आती हैं, लेकिन गणितीय सूत्रों से, आइए shader कोड देखें (shader समझने में जितना आसान है):

float force; //  ""  float timer; //  ,   . float random1; //   float random2; //   float initialization; //   ""  float desaturation_float; //    sampler TextureSampler : register(s0); float4 main(float4 color : COLOR0, float2 texCoord : TEXCOORD0) : COLOR0 { texCoord.y += cos(texCoord.x) * timer * 0.0002f * force; //  if(initialization > 0) { texCoord.x += cos(texCoord.y) * initialization; //  } if(texCoord.y > random1 && texCoord.y < random2) //  { float moving = force; if(timer > 100) moving *= -1.0; texCoord.x += timer / 5000.0 * moving * random2; color *= 1 + random2 * force; } if(timer < 20 && force > 0.3) //   { color.b = random2; color.g = random1; } if(timer > 50) //  "" { color *= 1 + random1/3 * (1 + force); } float4 source = tex2D(TextureSampler, texCoord); float4 sourceR = tex2D(TextureSampler, texCoord + float2(0.01*force*random1, 0)); sourceR.g = 0; sourceR.b = 0; float4 sourceB = tex2D(TextureSampler, texCoord - float2(0.01*force*force*random2, 0)); sourceB.r = 0; sourceB.g = 0; float4 sourceG = tex2D(TextureSampler, texCoord - float2(0.01*force*((random1+random2) / 2), 0)); sourceG.r = 0; sourceG.b = 0; float4 output = (sourceR+sourceB+sourceG); output.a = source.a; float greyscale = dot(output.rgb, float3(0.3, 0.59, 0.11)); output.rgb = lerp(greyscale, output.rgb, 1.0 - desaturation_float); return color * output; } technique HUDDisplacer { pass DefaultPass { PixelShader = compile ps_2_0 main(); } } 

कोड काफी सरल है, और अपने आप में shader का परिणाम शानदार दिखता है।

स्थैतिक बनावट से गतिशील बनावट

कम जीवन से "जीवित" बनावट बनाना। उदाहरण के लिए, कुछ लोगों ने देखा - ऊपर वीडियो में दूर के सितारों की झिलमिलाहट। यद्यपि, बनावट स्वयं स्थिर है।

इस shader पर विचार करें:

 float modifer; //   sampler TextureSampler : register(s0); float4 main(float4 color : COLOR0, float2 texCoord : TEXCOORD0) : COLOR0 { float4 output = tex2D(TextureSampler, texCoord); float greyscale = dot(output.rgb, float3(0.3, 0.59, 0.11)); if(greyscale > 0.2) { color *= 1 + (modifer*greyscale / 1.5); if(greyscale > 0.8) { color *= 1 + (modifer*2); } } return color * output; } technique BackgroundShader { pass DefaultPass { PixelShader = compile ps_2_0 main(); } } 

यदि पिक्सेल की चमक ( ग्रेस्केल ) 20% से अधिक है - एक मामूली झिलमिलाहट बनाई जाती है, अगर 80% से अधिक - मजबूत।
यह चित्र में नहीं दिखाया जा सकता है, वीडियो में सब कुछ दिखाई दे रहा है।

खैर, दो और प्रभावों पर विचार करें जो वीडियो में नहीं हैं और उन्हें नए संस्करणों में लागू किया गया है।

ब्लूम (चमक प्रभाव)

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

तस्वीरों में उदाहरण:
दृश्य चमक:


मूल दृश्य:


तैयार दृश्य:


एक shader कोड पर विचार करें, इसमें दो भाग होते हैं, एक shader जो चमक निकालता है और एक shader जो अंतिम छवि बनाता है।
एक अर्क की सूची जो चमक को निकालती है:

 sampler TextureSampler : register(s0); float4 main(float2 texCoord : TEXCOORD0) : COLOR0 { float4 c = tex2D(TextureSampler, texCoord); float BloomThreshold = 0.1; return saturate((c - BloomThreshold) / (1 - BloomThreshold)); } technique ThresholdEffect { pass DefaultPass { PixelShader = compile ps_2_0 main(); } } 

अंतिम परिणाम देने वाले शेडर की सूची बनाना:

 texture bloomMap; sampler TextureSampler : register(s0); sampler BloomSampler : samplerState { Texture = bloomMap; MinFilter = Linear; MagFilter = Linear; AddressU = Clamp; AddressV = Clamp; }; // -  const float2 offsets[12] = { -0.326212, -0.405805, -0.840144, -0.073580, -0.695914, 0.457137, -0.203345, 0.620716, 0.962340, -0.194983, 0.473434, -0.480026, 0.519456, 0.767022, 0.185461, -0.893124, 0.507431, 0.064425, 0.896420, 0.412458, -0.321940, -0.932615, -0.791559, -0.597705, }; float4 AdjustSaturation(float4 color, float saturation) { float grey = dot(color, float3(0.3, 0.59, 0.11)); return lerp(grey, color, saturation); } float4 main(float4 color : COLOR0, float2 texCoord : TEXCOORD0) : COLOR0 { float BlurPower = 0.01; // 0.01 float BaseIntensity = 1; float BloomIntensity = 0.4; // 0.4 float BaseSaturation = 1; float BloomSaturation = 1; float4 original = tex2D(TextureSampler, texCoord); //  float4 sum = tex2D(BloomSampler, texCoord); for(int i = 0; i < 12; i++){ sum += tex2D(BloomSampler, texCoord + BlurPower * offsets[i]); } sum /= 13; original = AdjustSaturation(original, BaseSaturation) * BaseIntensity; sum = AdjustSaturation(sum, BloomSaturation) * BloomIntensity; return sum + original; } technique BloomEffect { pass DefaultPass { PixelShader = compile ps_2_0 main(); } } 

मोशन ब्लर

खैर, अंतिम प्रभाव, यह गति धब्बा, अन्य प्रभावों के साथ संयोजन में, उन्हें "कोमलता" देता है, हम तेजी से माउस को स्थानांतरित करते हैं:



यह लागू किया गया है, भी, काफी सरल:

 float rad = direction_move.x; float xOffset = cos(rad); float yOffset = sin(rad); for(int idx=0; idx<15; idx++) { texCoord.x = texCoord.x - 0.001 * xOffset * direction_move.y; texCoord.y = texCoord.y - 0.001 * yOffset * direction_move.y; c += tex2D(TextureSampler, texCoord); } c /= 15; 

जहां direction_move मोशन वेक्टर है।

निष्कर्ष

ऐसी चीजों की मदद से - आप अपने खेल को एक बड़ा "ट्विस्ट" दे सकते हैं, और इस तरह की चीजें काफी सरलता से की जाती हैं।

इस पर, मुझे लगता है, 2 डी गेम पर "कोर्स" समाप्त हो गया है, थोड़ी देर बाद मैं तीन-आयामी गेम बनाने के बारे में लिखना शुरू कर दूंगा।

पीएस इस गेम का निर्माण (वीडियो में एक) - सबसे अधिक संभावना इस स्तर पर रहेगी। मेरे पास इतने बड़े प्रोजेक्ट पर अकेले काम करने के लिए पर्याप्त संसाधन (समय, उत्साह, प्रेरणा) नहीं है - आत्महत्या।

PSS गलतियों / त्रुटियों के बारे में एक विशाल अनुरोध, मुझे एक व्यक्तिगत संदेश लिखें, एक उपयोगी शब्दार्थ भार के बिना टिप्पणी न लिखें।

PSSS नए संपर्कों से खुश होंगे ;-)

मैं आपको सफलता की कामना करता हूं!