मैंने एक HTML5 कैनवस और जेएस गेम बनाया है जो क्रोम (30 एफपीएस) में एक डेस्कटॉप या लैपटॉप पर बहुत अच्छा चलता है, लेकिन मोबाइल सफारी पर मुझे केवल 8 एफपीएस मिलते हैं। क्या फ्रैमरेट को बढ़ाने के लिए कोई सरल उपाय या ट्रिक्स हैं?
मैंने एक HTML5 कैनवस और जेएस गेम बनाया है जो क्रोम (30 एफपीएस) में एक डेस्कटॉप या लैपटॉप पर बहुत अच्छा चलता है, लेकिन मोबाइल सफारी पर मुझे केवल 8 एफपीएस मिलते हैं। क्या फ्रैमरेट को बढ़ाने के लिए कोई सरल उपाय या ट्रिक्स हैं?
जवाबों:
दुर्भाग्य से, जवाब कम आकर्षित करना है। मैं कैनवास आधारित अनुप्रयोगों के साथ अड़चन पाया है (किसी भी मंच पर, वास्तव में) यह समय वास्तव में पिक्सल खींचने के लिए है।
यहाँ कुछ चीजें हैं:
कई कैनवास परतों का उपयोग करें। अपनी वस्तुओं को दूसरी परत पर ले जाते समय अपनी पृष्ठभूमि को एक परत पर खींचें (बिल्कुल पृष्ठभूमि परत के शीर्ष पर स्थित)। (नोट: मैंने मोबाइल सफारी पर इसकी कोशिश नहीं की है, लेकिन यह अन्य प्लेटफार्मों पर मदद कर सकता है)
केवल रेड्रा स्प्राइट्स जो बदल गए हैं। यह मुश्किल है लेकिन निश्चित रूप से प्रदर्शन को बढ़ाता है। यह विचार करना है कि किसी स्प्राइट को दोबारा तैयार करने की आवश्यकता है या नहीं और रीड्रॉव को केवल उन स्प्राइट्स की जरूरत है जो उनके पीछे की पृष्ठभूमि के साथ हैं। (यह भी अन्य वस्तुओं कि झरना अतिव्यापी हो सकता है झरना करने की जरूरत है।)
क्रोम पर विकास के साथ बात यह है कि ए) इसका जावास्क्रिप्ट इंजन (वी 8) नरक के रूप में तेज है और बी) नवीनतम संस्करण (7,8,9) सभी में कुछ जीपीयू त्वरण है जब यह कैनवास रेंडरिंग की बात आती है। इस तथ्य के साथ युग्मित है कि मोबाइल हार्डवेयर सिर्फ आपके डेस्कटॉप / लैपटॉप के समान शक्तिशाली नहीं है, इसका मतलब है कि मोबाइल सफारी पर समान प्रदर्शन के पास कहीं भी प्राप्त करना वास्तव में मुश्किल होगा।
मुझे लगता है, इस समय के लिए, सबसे अच्छा तरीका यह हो सकता है कि अपने गेम को मोबाइल सफारी में लक्ष्य गो से प्राप्त करें और ऐसा गेम बनाने की कोशिश करें, जो रेडर इंटेंसिव न हो।
यह एक लंबा शॉट है, लेकिन क्या आपका गेम DIV स्प्राइट्स पर संचालित हो सकता है, इसके बजाय CSS ट्रांस्फ़ॉर्म करता है? मैं यह कहता हूं क्योंकि मुझे सीएसएस ट्रांसफॉर्मेशन और बदलाव के साथ आईओएस उपकरणों पर चीजों को घुमाने के साथ कुछ अद्भुत प्रदर्शन मिल रहा है।
ये ठीक से हार्डवेयर के साथ त्वरित प्रतीत होते हैं, विचित्र कैविट के साथ कि आपको किक करने के लिए त्वरण के लिए ट्रांसफ़ॉर्म (यानी ट्रांसफ़ॉर्म 3 डी के बजाय ट्रांसफॉर्मेशन) के लिए 3 डी फॉर्म का उपयोग करना चाहिए। यह वास्तव में बहुत चिकनी है, और आईओएस सिस्टम कार्यान्वयन का समर्थन करता है। फार्म जहां आप सीधे 16 तत्व फ्लोट मैट्रिक्स सेट करते हैं, जो मेरे लिए बहुत सुविधाजनक है।
मैं इस बात से बहुत प्रभावित हूं कि यह कितना सुचारू रूप से समाप्त हो रहा है, कि मैं इस तरह से लिखे गए एक साधारण गेम प्रोजेक्ट की कोशिश करने के लिए सार्थक हूं।
लाइन ड्राइंग के मामले में, स्ट्रोक कहने से पहले कई लाइनटॉ कमांड के रूप में संयोजित करें।
यह और कुछ अन्य टिप्स: http://dt.deviantart.com/blog/38471599/
सब कुछ @ गोसुब ने प्लस कहा:
जो भी गणित आप कर रहे हैं, उसे देखें कि क्या अधिक कुशल एल्गोरिदम का उपयोग करने के लिए वैसे भी है।
छोटी छवियों का उपयोग करें। 2 की छवि शक्तियों के आयाम बनाने का प्रयास करें
देखें कि क्या आप कैनवास पर अल्फा सम्मिश्रण से छुटकारा पा सकते हैं या सीएसएस ऑप्सिटी संपत्ति का उपयोग नहीं कर सकते हैं।
कृपया अपने परिणाम वापस भेजें। यह जानना दिलचस्प होगा कि किन चीजों ने सबसे ज्यादा मदद की।
मुझे एक पुराने धागे का जवाब जोड़ने से नफरत होगी - लेकिन मुझे आश्चर्य है कि किसी ने भी इसका उल्लेख नहीं किया।
जब आप अपना पहला गेम लिख रहे हों, तो बस उन्हें लिखें कि आप उनसे काम के प्रदर्शन की उम्मीद कैसे करेंगे। ऊपर की तकनीकें प्रदर्शन को उच्च रखने के लिए अच्छे शुरुआती बिंदु हैं - लेकिन असली चाल प्रोफाइलर है। यदि आप क्रोम या फ़ायरफ़ॉक्स में अपने एप्लिकेशन को प्रोफाइल करते हैं (संकेत: बहुत सारे तरीकों का उपयोग करें ताकि आप सटीक बाधाओं को देख सकें; इसलिए आपको बाद में सामान को स्थानांतरित करने की आवश्यकता नहीं है - आपको इसे वैसे भी करना चाहिए।), आपको देखने का अतिरिक्त लाभ मिलता है। सटीक समय परिणाम। मेरे मामले में, मैंने देखा कि लगातार ब्राउजर को रीडायरेक्ट करने से ब्राउजर का 80% समय लग जाता है। जब मैं रास्ते से हट गया, तब मैंने अन्य कॉलों को क्रमशः 40% और अधिक लेने का देखा। एक या दो घंटे के बाद, मैंने एफपीएस का पर्याप्त लाभ देखा।
मैं आपके परिणामों से भी सुनना चाहूंगा। मैं एक ही काम करने की कोशिश कर रहा हूं। मैंने पाया कि बहुत सारे गणित करना ठीक है लेकिन जैसे ही आप एक कैनवास डालते हैं तो उसकी मानसिक स्थिति और फ्रेम दर गिर जाती है।
मेरे पास एक अग्रभूमि उपरिशायी थी जिसने प्रभाव प्रदर्शित किया। यह एक बहुत ही उच्च गुणवत्ता वाली छवि थी लेकिन अल्फा सामान ने इसे इतना धीमा कर दिया कि मैंने इसे प्रति सेकंड अधिक फ्रेम के बदले में पूरी तरह से गिरा दिया।
एक और बात मैंने भारी गणित के कुछ काम करने के लिए PHP का उपयोग करने के लिए की थी। मेरे पास बड़े डेटासेट थे, लेकिन डेटा की गणना करने और दिखाने के लिए जावास्क्रिप्ट प्राप्त करने के बजाय, मैंने PHP को काम करने देने और जावास्क्रिप्ट को परिणाम दिखाने देने का फैसला किया। यह ज्यादा समय नहीं बचा था क्योंकि जावास्क्रिप्ट गणित के साथ "sehr gut" है।
मुझे लगता है कि यह आपकी पूरी साइट HTML5 में है इसलिए पृष्ठभूमि कार्यकर्ता के साथ खेलने का प्रयास करें।
आशा है कि मैंने मदद की और कृपया अपने परिणाम साझा करें।