Pixi.js एनिमेटेड gif फ़ाइल से स्प्राइटशीट एनीमेशन या मूवीक्लिप उत्पन्न करता है

Question

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

मैं एक jsfiddle कि इनपुट में पिछले किसी भी छवि आप लोड होगा है, लेकिन यह केवल पहली फ्रेम लोड करता है:

http://jsfiddle.net/40k7g0cL/

var animatedGif = PIXI.Sprite.fromImage('http://i.imgur.com/egzJbiI.gif'); 

लेकिन pixi.js संपत्ति लोडर केवल लोड करने के लिए लग सकता है एनिमेटेड .gif फ़ाइल का पहला फ्रेम और बाकी नहीं।

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

क्या एनिमेटेड .gif छवि को लोड करने का कोई आसान तरीका है, इसे स्वचालित रूप से स्प्राइटशीट या मूवीक्लिप या यहां तक ​​कि बनावट ऑब्जेक्ट्स की एक सरणी में परिवर्तित कर दिया गया है?

यदि पहले से ही pixi.js में कोई आसान समाधान नहीं है, तो क्या मुझे .gif को संसाधित करने और प्रत्येक फ्रेम को मैन्युअल रूप से अलग करने के लिए शायद jsgif जैसे कुछ का उपयोग करके मुझे अपनी प्लगइन लिखनी होगी?

ब्राउजर (जावास्क्रिप्ट में) में एक एनिमेटेड .gif क्लाइंट-साइड से स्प्राइटशीट उत्पन्न करने के बारे में कोई सुझाव उपयोगी हो सकता है।

Answer 1

क्षमा करें, इसे pixi.js. के साथ सीधे प्राप्त करने का कोई तरीका नहीं है।

सुझाव के रूप में, ऐसा लगता है कि jsgif क्लाइंट साइड जावास्क्रिप्ट के लिए gif का ही निम्न स्तर के कार्यान्वयन है। इसके अलावा, libgif-js नामक एक कांटा मौजूद है, विश्लेषण करने के लिए थोड़ा आसान है, और यह स्प्राइटशीट बनाने के लिए एक सुराग प्रदान कर सकता है।

प्रक्रिया अलग करने के लिए फ्रेम होगा:

• लोड छवि डेटा।
  यदि आपका ऐप ऑनलाइन है, तो आपको स्थानीय फाइलों को पढ़ने के लिए फ़ाइल एपीआई (see here) का उपयोग करना होगा।
  आपको gif के कच्चे डेटा के साथ ArrayBuffer या String मिल जाएगा, जिसे new Stream(data) पर भेजा जा सकता है।
  कॉल parseGIF(stream, handler):

• डेटा पार्स। दूसरी लाइब्रेरी इस प्रक्रिया को समझने में बहुत मदद कर सकती है।
  आपको जो चाहिए (चौड़ाई, ऊंचाई, फ्रेम ...) प्राप्त करने के लिए हैंडलर और कॉलबैक अनुकूलित करें।

• अपने नियमों के अनुसार अपने SpriteSheet बनाएँ:
  यदि आप ImageData के रूप में फ्रेम बचाने के लिए, एक छिपे हुए कैनवास का उपयोग सही स्थिति में उन्हें आकर्षित करने के लिए बनाने के लिए (यह एक ही है कि पार्स में हो सकता है) के लिए चुना आपकी स्प्राइटशीट।

• अंतिम छवि ले लो और इसका इस्तेमाल करते हैं:
  आप उदाहरण के लिए, का उपयोग कर सकते, canvas.toDataURL(*format*) (प्रथम, SpriteSheet आयामों को कैनवास का आकार बदलने) एक बेस 64 यूआरएल के रूप में छवि को पाने के लिए।