प्रति सप्ताह 2 डी स्क्रॉल शूटर

और यह सब कैसे मीठा शुरू हुआ

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


लाइटफोर्स, कमोडोर 64, 1986

ध्यान दें, कट के नीचे बड़ी तस्वीरें हैं।

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

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

आप वीडियो द्वारा परिणाम का मूल्यांकन कर सकते हैं:


लेख के दौरान स्क्रीनशॉट वीडियो से थोड़ा अलग हैं, वास्तव में, केवल पृष्ठभूमि उनमें बदल जाती है, थोड़ा अधिक आकर्षक।

लंबन

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

सिद्धांत से अभ्यास तक

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

दूर की योजना

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

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

औसत योजना

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

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

मुख्य योजना

मुख्य योजना एक गेम है, इसलिए गेम ऑब्जेक्ट्स के अलावा कुछ भी नहीं होगा। मेरे लिए यह आसान नहीं था कि मैं मर जाऊं और स्क्रीनशॉट न ले सकूं, मैंने दुश्मनों को बंद कर दिया, इसलिए अफसोस कि विस्फोटों और दुश्मनों का कोई प्रभाव नहीं है।

अग्रभूमि

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

कचरा

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

इतना

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

इसके विपरीत बड़ा बना रहा, हालांकि, ऐसे स्पष्ट रंग अंतर ध्यान देने योग्य नहीं हैं। सबसे चौकस पाठकों ने देखा है कि सूरज सही ढंग से नहीं खींचा गया है। यह दृश्य के पीछे है, और केवल खेल की वस्तुओं और अग्रभूमि द्वारा सामने और अतिव्यापी होना चाहिए। हम सही कर रहे हैं।

अब मैं सिर्फ एक लापता स्पर्श जोड़ूंगा ...

इतना बेहतर है। लेकिन यह केवल एक प्रक्रिया के बाद होने वाला शेडर है। चारों ओर प्रकाश छायादार। यह कैसे काम करता है?

यह कैसे काम करता है?

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

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

ऊपर किरणों के लिए एक बनावट है, नीचे एक सामान्य प्रतिपादन है
इस बनावट को वॉल्यूमेट्रिक प्रकाश की किरणों में बदलने के लिए, हमें इसे एक shader के साथ संसाधित करना होगा, जिसका कोड मैं लेख के अंत में संलग्न करूंगा। परिणाम फोटोशॉप से ​​रेडियल धब्बा प्रभाव के समान है, जो, संक्षेप में, प्रकाश स्रोत के निर्देशांक के लिए समायोजित किया गया है।

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

चारों ओर प्रकाश की किरणों के साथ छोड़ दिया, सही के बिना

इसके बजाय एक फिर से शुरू

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

उपकरण

मैंने अपने परिचित उपकरणों का उपयोग किया, अर्थात्: Direct3D9, HLSL और बाइनरी इफेक्ट कोड बनाने के लिए Microsoft कंपाइलर के लिए मेरी अपनी रूपरेखा। मुख्य कोड Embarcadero Delphi XE3 में लिखा गया है। मैं FilterForge 3.0 में पृष्ठभूमि बनावट प्रदान की।

शेडर

sampler2D DiffuseMap : register(s0); float2 LightPos : register(c0); float4 Params : register(c1); float4 std_PS(vertexOutput Input) : COLOR { float4 Output; int NumSamples = 20; float Weight = 1.0; float Density = 0.5; float Exposure = 0.25; float2 DeltaTexCoord = (Input.TexCoord - LightPos); DeltaTexCoord *= 1.0 / NumSamples * Density; float3 Diff = tex2D(DiffuseMap, Input.TexCoord); float illuminationDecay = 1.0; for (int i = 0; i < NumSamples; i++) { Input.TexCoord -= DeltaTexCoord; float3 sample = tex2D(DiffuseMap, Input.TexCoord); sample *= illuminationDecay * Weight; Diff += sample; illuminationDecay *= 0.9;//Decay; } Output = float4(Diff * Exposure, 1); return Output; } 

युपीडी:
स्रोत कोड और बायनेरी bitbucket.org पर रिपॉजिटरी से लिए जा सकते हैं