IOS में फ़्रेम एनिमेशन और शेड्स

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

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





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

नतीजतन, शेडर्स की मदद से हमारी योजना को महसूस करना संभव था - हम दो बनावट के साथ एक आयत खींचते हैं और पिक्सेल shader की मदद से हम तय करते हैं कि क्या दिखाना है। इस तरह के एक शेडर को लागू करने के लिए, हमें दो नमूनों की आवश्यकता होती है, इसी बनावट पर दो आयताकार क्षेत्र और चार मान - मिंट, मिक्सी, मैक्स, मैक्स, जिसके द्वारा बनावट को स्विच किया जाएगा।

मैं यह नोट करना चाहता हूं कि बनावट पर आयतों के निर्देशांक की गणना पूरी तस्वीर के लिए की जाती है और बीच के लिए वे पड़ोसी फ्रेम पर कब्जा कर लेंगे - यह डरावना नहीं है, shader अतिरिक्त पिक्सेल काट देगा।

हमारे चार मापदंडों को निम्नलिखित योजना के अनुसार चार घटकों में से एक वेक्टर के रूप में पारित किया जा सकता है:



इसके अलावा, इस योजना के बाद, हम स्विच करने के लिए एक पिक्सेल शेडर लिखते हैं:

precision mediump float; uniform sampler2D u_texture; // base texture uniform sampler2D u_overlay; // overlay texture uniform vec4 u_overlayRect; // in texture coordinates (minX, minY, maxX, maxY) varying vec4 v_fragmentColor; varying vec2 v_texCoord; // base texture coordinates varying vec2 v_overlayTexCoord; // extrapolated overlay texture coordinates void main() { if (v_overlayTexCoord.x > u_overlayRect.x && v_overlayTexCoord.y > u_overlayRect.y && v_overlayTexCoord.x < u_overlayRect.z && v_overlayTexCoord.y < u_overlayRect.w) { gl_FragColor = v_fragmentColor * texture2D(u_overlay, v_overlayTexCoord); } else { gl_FragColor = v_fragmentColor * texture2D(u_texture, v_texCoord); } } 

उसके बाद, हम सभी फ़्रेमों को एक बनावट में लाते हैं (चार के बजाय!)



और स्क्रीन पर एक उंगली की गति के जवाब में एनीमेशन का आनंद लें और कम स्मृति चेतावनी के बिना!