स्प्राइट एनिमेशन बेस्ट प्रैक्टिस

Question

मैं इस बारे में बेहतर जानकारी प्राप्त करना चाहता हूं कि वास्तविक दुनिया के लोग अपने एनीमेशन को कैसे संभाल रहे हैं।

क्या आप 1 बड़ी छवि लोड करते हैं और फिर एनीमेशन फ्रेम के आधार पर अलग-अलग आयतें बनाते हैं?

क्या आप एक्स छवि फ़ाइलों को एक सरणी में लोड करते हैं और एनीमेशन फ्रेम के आधार पर सरणी में आइटम आकर्षित करते हैं?

आप विभिन्न स्प्राइट्स के लिए एनिमेशन की विभिन्न लंबाई होने से कैसे निपटते हैं।

कहते हैं कि एक चरित्र चलने में 4 - 8 फ्रेम लगते हैं, और समुद्र तट पर लहरें केवल 2 - 3 फ्रेम लेती हैं। आप उस स्थिति को कैसे संभालेंगे? निचे देखो

Dim Waves(1) as Sprite
Dim Char(5) as Sprite

Sub Animate()
     Frame += 1
     Draw Char(Frame)
     Draw Waves(Frame)
     If Frame = 5 Then Frame = 0
End Sub

जाहिर है लहरों की एक त्रुटि के साथ समाप्त होगा।

या क्या आपके पास अपने स्वयं के एनीमेशन के बारे में चिंता है, और फ्रेम के बारे में बिल्कुल भी परवाह नहीं है। प्रत्येक स्प्राइट होने के अपने स्वयं के एनीमेशन लूप जानते हैं?

Answer 1

जिस तरह से मैंने इसे अतीत में किया है वह एनीमेशन डेटा को एनीमेशन प्लेबैक से अलग करके है । एक Animationतो बुनियादी तौर पर की एक सरणी बन सकता है Framesऔर कुछ गुण है कि वर्णन कैसे एनीमेशन व्यवहार करना चाहिए (अगर यह लूप, आदि)।

मैं आमतौर पर एक छवि लोड करता हूं और इसके टुकड़े खींचता हूं।

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

कुछ भी है कि एक एनीमेशन खेलने की जरूरत है अपने ही है AnimationPlayerजो एक को इंगित किया जा सकता है Animation। प्लेयर ऑब्जेक्ट एनीमेशन खेलने का ध्यान रखता है और "वर्तमान फ्रेम" को उपलब्ध करता है।

मेरे लिए इसका फायदा यह था कि मेरे पास एक ही उदाहरण हो सकता है कि एक ही समय में Animationकई ऑब्जेक्ट इंगित हो सकते हैं और विभिन्न भागों को खेल सकते हैं। बस AnimationPlayerएक अलग Animationवस्तु को इंगित करके और प्लेबैक को रीसेट करके एनिमेशन को बदलना आसान था ।

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

Comments

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

— उदार

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

— ज़ैक द ह्यूमन

अच्छा काम कर रहे उदाहरण, वाह अंगूठे। इसकी सिफारिश करेंगे।

— DFectuoso

इस तरह के एनीमेशन की एक महत्वपूर्ण सीमा यह है कि आकृति को एक अलग कोण से नहीं देखा जा सकता है - दर्शक से दूर चलना, दर्शक की ओर चलना, आदि या क्या मैं गलत हूं?

— माजिद फौलादपुर

@MajidFouladpour मुझे नहीं लगता कि इस तकनीक के उपयोग से किसी तरह की सीमा मौजूद है। आपके पास प्रत्येक "देखने के कोण" के लिए बस अलग-अलग एनिमेशनडेटा ऑब्जेक्ट हैं।

— ज़ैक द ह्यूमन

Answer 2

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

तो स्प्राइट में एक एनीमेशन होगा जो खुद को अपडेट करता है।

Answer 3

क्यों नहीं, आपके प्रत्येक ऑब्जेक्ट के लिए फ़्रेमों की संख्या संग्रहीत है? व्यक्तिगत रूप से मैं अपने कंस्ट्रक्टर में अपनी वस्तुओं के लिए एनीमेशन में फ़्रेम की संख्या को पास करता हूं, फिर मेरे पास एक मानक चेतन () फ़ंक्शन है जो एनीमेशन में फ़्रेम की मात्रा में लेता है।

Answer 4

यह कार्यान्वयन पर निर्भर करता है। अपने इंजन में, मैं Direct3D और DirectDraw दोनों में एनीमेशन करता हूं।

DirectDraw में मैं एक बड़ी छवि बनाता हूं। यह सब सिस्टम मेमोरी में वैसे भी जमा हो जाता है, जो अंततः डेटा के एक-आयामी ब्लॉक में आता है।

पेशेवरों:

• फ्रेम के बीच स्थानांतरित करने के लिए आसान है। स्टार्ट पॉइंटर को बदलें, हर y और आप गोल्डन हैं, पिच (कुल छवि चौड़ाई) जोड़ें।

विपक्ष:

• केवल एक फ्रेम को स्क्रीन पर कॉपी नहीं कर सकते, आपको इसे मैन्युअल रूप से करना होगा।

• स्मृति का विशाल ब्लॉक। चारों ओर हलचल फ्रेम एक दंड पर आता है।

Direct3D में मैं अलग बनावट का उपयोग करता हूं। ऐसा इसलिए है क्योंकि मुझे किसी उपकरण की बनावट सीमाओं का कोई पता नहीं है, इसलिए मुझे नहीं पता कि क्या यह बनावट का भी समर्थन करता है जो पूरी छवि का आकार है।

पेशेवरों:

• आप स्क्रीन पर सीधे एक फ्रेम कॉपी कर सकते हैं, क्योंकि वे सभी अलग-अलग इकाइयां हैं।

विपक्ष:

• स्मृति संरेखण की कमी।

Answer 5

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

Dim Waves as Sprite
Dim Char as Sprite

Sub Animate()
     Char.update()
     Waves.update()
End Sub

हर बार एक स्प्राइट के अपडेट () विधि को कॉल किया जाता है, यह जानता है कि क्या इसे पिछली बार के समान फ्रेम को फिर से तैयार करना चाहिए, इसके वर्तमान एनीमेशन में अगले फ्रेम पर जाएं, एक नए एनीमेशन में बदलाव, आदि।

यह जोड़ा घड़ी / मंच प्रतिपादन की गति को समायोजित करने के लिए फ्रामर्ट को समायोजित करने के लिए बहुत आसान बनाने का अतिरिक्त लाभ है, क्योंकि एकमात्र परिवर्तन यह है कि आप कितनी बार चेतन () कहते हैं।