फ्लैश एनीमेशन कैशिंग उदाहरण

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



इस आलेख में एनिमेटेड क्लिप को कैशिंग करने की विधि के बारे में पहले ही कहा जा चुका है।

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



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

निर्णय

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



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



कैशिंग के लिए मुख्य वर्ग कोड:



public class MyCache extends Sprite

{

private var _clip: Sprite = null ;



public function MyCache(clip: Sprite, framesCount: int )

{

_clip = clip;

_framesCount = framesCount;

_bitmap = new Bitmap( null , PixelSnapping.AUTO, true );

addChild(_bitmap);

mouseEnabled = false ;

}



private var _bitmap: Bitmap = null ;



private var _frames: Array = new Array();

private var _framesCount: int = 0;

private var _currentFrame: int = 0;

private var _onEnd: Function = null ;

private var _loop: Boolean = true ;



public function play(loop: Boolean = true , onEnd: Function = null ): void

{

_currentFrame = 0;

_loop = loop;

_onEnd = onEnd;

addEventListener(Event.ENTER_FRAME, onEnterFrame);

}



public function stop(): void

{

removeEventListener(Event.ENTER_FRAME, onEnterFrame);

if (_onEnd != null )

_onEnd( this );

}



private function createCache(clip: Sprite): Object

{

var rect: Rectangle = clip.getRect(clip);

var bmpData: BitmapData = new BitmapData(rect.width, rect.height, true , 0x00000000);

var m: Matrix = new Matrix();

m.translate(-rect.x, -rect.y);

m.scale(clip.scaleX, clip.scaleY);

bmpData.draw(clip, m);



return { "frame" : bmpData, "x" : rect.x, "y" : rect.y };

}



private function cachNextFrame(): void

{

if (_frames.length < _framesCount)

{

_clip.dispatchEvent( new Event(Event.ENTER_FRAME));

_frames.push(createCache(_clip));

}

}



private function onEnterFrame(e: Event): void

{

cachNextFrame();



if (_currentFrame < _frames.length)

{

var bmpData: Object = _frames[_currentFrame];

_bitmap.bitmapData = bmpData.frame;

_bitmap.x = bmpData.x;

_bitmap.y = bmpData.y;

}

else

{

if (_loop)

_currentFrame = 0;

else

stop();

}

_currentFrame++;

}

}



* This source code was highlighted with Source Code Highlighter .





public class MyCache extends Sprite

{

private var _clip: Sprite = null ;



public function MyCache(clip: Sprite, framesCount: int )

{

_clip = clip;

_framesCount = framesCount;

_bitmap = new Bitmap( null , PixelSnapping.AUTO, true );

addChild(_bitmap);

mouseEnabled = false ;

}



private var _bitmap: Bitmap = null ;



private var _frames: Array = new Array();

private var _framesCount: int = 0;

private var _currentFrame: int = 0;

private var _onEnd: Function = null ;

private var _loop: Boolean = true ;



public function play(loop: Boolean = true , onEnd: Function = null ): void

{

_currentFrame = 0;

_loop = loop;

_onEnd = onEnd;

addEventListener(Event.ENTER_FRAME, onEnterFrame);

}



public function stop(): void

{

removeEventListener(Event.ENTER_FRAME, onEnterFrame);

if (_onEnd != null )

_onEnd( this );

}



private function createCache(clip: Sprite): Object

{

var rect: Rectangle = clip.getRect(clip);

var bmpData: BitmapData = new BitmapData(rect.width, rect.height, true , 0x00000000);

var m: Matrix = new Matrix();

m.translate(-rect.x, -rect.y);

m.scale(clip.scaleX, clip.scaleY);

bmpData.draw(clip, m);



return { "frame" : bmpData, "x" : rect.x, "y" : rect.y };

}



private function cachNextFrame(): void

{

if (_frames.length < _framesCount)

{

_clip.dispatchEvent( new Event(Event.ENTER_FRAME));

_frames.push(createCache(_clip));

}

}



private function onEnterFrame(e: Event): void

{

cachNextFrame();



if (_currentFrame < _frames.length)

{

var bmpData: Object = _frames[_currentFrame];

_bitmap.bitmapData = bmpData.frame;

_bitmap.x = bmpData.x;

_bitmap.y = bmpData.y;

}

else

{

if (_loop)

_currentFrame = 0;

else

stop();

}

_currentFrame++;

}

}



* This source code was highlighted with Source Code Highlighter .





प्रत्येक फ्रेम के लिए बिटमैप को सही ढंग से स्थिति देने के लिए, तस्वीर के अलावा, इसकी ऑफसेट अतिरिक्त रूप से संग्रहीत की जाती है।



जैसा कि ऊपर उल्लेख किया गया है, कैशिंग रेंडरिंग के पहले चरण में किया जाता है और प्रदर्शन में वृद्धि केवल बाद के लॉन्च के दौरान ध्यान देने योग्य होगी। इसलिए, एनीमेशन पूरा होने के बाद, ऑब्जेक्ट को हटाया नहीं जाना चाहिए, लेकिन भविष्य में उपयोग के लिए पूल में सहेजा जाना चाहिए।



पूल बेस क्लास



public class MyCachePool

{

protected function createEffect(): MyCache

{

return null ;

}



private var _pool: Array = new Array();



public function show(owner: Sprite, px: int , py: int , loop: Boolean = true ): void

{

var effect: MyCache = getEffect();



owner.addChild(effect);

effect.x = px;

effect.y = py;

effect.play(loop, onEnd);

}



private function getEffect(): MyCache

{

if (_pool.length > 0)

{

var idx: int = Math.round((Math.random() * (_pool.length - 1)));

var rez: MyCache = _pool[idx];

_pool.splice(idx, 1);

return rez;

}



return createEffect();

}



private function onEnd(effect: MyCache): void

{

_pool.push(effect);

}

}



* This source code was highlighted with Source Code Highlighter .





public class MyCachePool

{

protected function createEffect(): MyCache

{

return null ;

}



private var _pool: Array = new Array();



public function show(owner: Sprite, px: int , py: int , loop: Boolean = true ): void

{

var effect: MyCache = getEffect();



owner.addChild(effect);

effect.x = px;

effect.y = py;

effect.play(loop, onEnd);

}



private function getEffect(): MyCache

{

if (_pool.length > 0)

{

var idx: int = Math.round((Math.random() * (_pool.length - 1)));

var rez: MyCache = _pool[idx];

_pool.splice(idx, 1);

return rez;

}



return createEffect();

}



private function onEnd(effect: MyCache): void

{

_pool.push(effect);

}

}



* This source code was highlighted with Source Code Highlighter .





यह वर्ग आधार है। एक विशिष्ट प्रभाव के लिए, आपको एक नया वर्ग इनहेरिट करना होगा और नीचे दिए गए अनुसार createEffect फ़ंक्शन को ओवरराइड करना होगा।



एक विशेष प्रभाव के लिए एक व्युत्पन्न पूल वर्ग।



public class BoomCachPool extends MyCachePool

{

override protected function createEffect():MyCache

{

return new MyCache( new gBoom(), 20);

}

}



* This source code was highlighted with Source Code Highlighter .





public class BoomCachPool extends MyCachePool

{

override protected function createEffect():MyCache

{

return new MyCache( new gBoom(), 20);

}

}



* This source code was highlighted with Source Code Highlighter .





GBoom वर्ग एक फिल्म है जो एक swc फ़ाइल से एक परियोजना को निर्यात की जाती है। कैशिंग के लिए फ़्रेम की संख्या को प्रयोगात्मक रूप से चुना गया था।



नीचे परीक्षण के परिणाम हैं।







चित्रा 1 - कैशिंग के बिना कण





चित्रा 2 - कैशिंग के साथ कण



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

निष्कर्ष

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



परियोजना का स्रोत कोड यहां डाउनलोड किया जा सकता है ।



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



विषय पर लिंक:

• एनिमेटेड क्लिप के अनुकूलन के बारे में फ्लैश - आलेख में ग्राफिक्स रेंडरिंग का प्रदर्शन और अनुकूलन
  
  
• Partigen - एक बहुत अच्छा कण प्रणाली (दुर्भाग्य से भुगतान)
  
  
• टच माई पिक्सेल - फ़्रेम पर कैशिंग एनिमेशन के लिए कक्षाओं का एक सेट (अपने वर्तमान रूप में, यह नेस्टेड फ़्रेम के लिए उपयुक्त नहीं है)।