एक ब्राउज़र में, एक विशाल स्प्रिटशीट या कई (10000) विभिन्न पीएनजी के उपयोग करना सबसे अच्छा है?

Question

मैं jQuery में एक गेम बना रहा हूं, जहां मैं लगभग 10000 32x32 टाइल्स का उपयोग करता हूं। अब तक, मैं उन सभी का अलग-अलग उपयोग कर रहा हूं (कोई स्प्राइट शीट नहीं)। एक औसत नक्शा लगभग 2000 टाइलों का उपयोग करता है (कभी-कभी पीएनजी के सभी अलग-अलग विभाजनों का पुन: उपयोग किया जाता है) और प्रदर्शन स्थिर (क्रोम) से थोड़ा अंतराल (फ़ायरफ़ॉक्स) तक होता है। इनमें से प्रत्येक div CSS का उपयोग करके पूरी तरह से स्थित है। उन्हें हर टिक को अपडेट करने की आवश्यकता नहीं है, बस एक नया नक्शा लोड होने पर।

क्या यह प्रदर्शन के लिए बेहतर होगा कि सीएसएस बैकग्राउंड-पोजिशनिंग का उपयोग करते हुए डिवोर्स के लिए स्प्राइटशीट विधियों का उपयोग करें, जैसे गेमआईवाई करता है?

आपका अग्रिम में ही बहुत धन्यवाद!

Comments

नक्शे के लिए आपको 10 000 टाइलों की आवश्यकता कहां है? मेरा सुझाव है कि आप उपयोगकर्ता के सभी नक्शे को अपलोड / ड्रा न करें। बस एक हिस्सा दिखाओ, जो दिखाई दे रहा है। जब उपयोगकर्ता चलता है, तो अगला भाग लोड करें। जिस तरह से हर 3 डी ग्राफिक्स काम करता है।

— डेले

एक औसत मानचित्र 2000 विभिन्न टाइलों का उपयोग करता है, या सिर्फ 2000 कुल टाइलें? आपके द्वारा बनाए जा रहे नक्शे कितने बड़े हैं?

— निक लार्सन

क्या आपने पृष्ठभूमि के रूप में एक या कुछ बड़ी छवियों का उपयोग करने और सीमाओं के लिए बहुभुज टक्कर का पता लगाने पर विचार किया है?

— SAHornickel

Answer 1

मेरा सुझाव

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

मेरा सुझाव है मध्यम जमीन देता : उदाहरण के लिए 1024 × टाइल आकार 32 × 32 के लिए, कई उचित आकार के पीएनजी । हो सकता है कि थीम द्वारा वर्गीकृत किया गया हो (उदाहरण के लिए, वन टाइल्स के साथ एक पीएनजी, पहाड़ की टाइलों के साथ एक, शहर की टाइलों के साथ एक और - मुझे आपके गेम की थीम नहीं पता है, लेकिन आपको विचार मिलता है)।

कैश दक्षता के बारे में ध्यान दें

मेमोरी एक्सेस दक्षता के कारण, आपको कभी नहीं करना चाहिए अपनी स्प्राइटशीट भी चौड़ा करना । 128 × 8192 छवि से ब्लिंगिंग टाइलें हमेशा 8192 × 128 छवि से ब्लिटिंग की तुलना में तेज़ होंगी।

कल्पना कीजिए कि आप 8192 × 128 की छवि में पहली टाइल को ब्लिट करना चाहते हैं। सरलता के लिए, मान लें कि 1 पिक्सेल 1 बाइट है। पिक्सल की पहली दो पंक्तियों को इस तरह से रखा गया है (कोशिकाओं में मेमोरी में उनकी बाइट संख्या होती है):

┌────┬────┬───┬────┬──────────┬─────┐
│  0 │  1 │...│ 31 │   ....   │ 8191│ 1st line of pixels: bytes 0 to 8191
├────┼────┼───┼────┼──────────┼─────┤
│8192│8193│...│8223│   ....   │16383│ 2nd line of pixels: bytes 8192 to 16383
├────┼────┼───┼────┼──────────┼─────┤
│ .. │ .. │...│ .. │   ....   │ ... │

तो पहले शीर्षक की पहली पंक्ति को धुंधला करने के लिए , ब्राउज़र इंजन बाइट्स 0को31 पुनः प्राप्त करेगा । दूसरी पंक्ति को धुंधला करने के लिए , यह बाइट्स 8192को8223 पुनः प्राप्त करेगा , और इसी तरह 32 वीं पंक्ति तक जहां बाइट्स 253952को253983 पुनः प्राप्त किया जाए।

संसाधित बाइट्स की कुल संख्या 32 × 32 होगी। हालाँकि, कुल मेमोरी रेंज 253984 बाइट्स से अधिक है। एक आधुनिक सीपीयू पर, इसका मतलब है 32 या 33 कैश स्टॉल । इसके विपरीत, यदि छवि 128 × 8192 थी, तो मेमोरी रेंज केवल 4000 बाइट्स होगी, जिसका अर्थ है कि दो कैश स्टालों से अधिक नहीं।

क्योंकि आज के सीपीयू बहुत तेज़ हैं, कैश स्टॉल बहुत महंगे हैं और हैंग कंपटीशन हैं। तो 8192 × 128 छवि के बजाय 128 × 8192 छवि का उपयोग करना संभावित रूप से 8 गुना तेज है, कम से कम सिद्धांत में। व्यवहार में यह निर्भर करेगा कि ब्लिटिंग कैसे लागू की जाती है: यह संभव है कि अंतर्निहित इंजन समस्या को कम करने के लिए टाइलों में छवियों को विभाजित करता है।

यह सही तरीके से व्याख्या करना आसान नहीं है और मुझे बहुत विस्तार की उम्मीद नहीं थी। मुझे आशा है कि यह समझ में आता है!

Comments

"यह भी ध्यान दें कि मेमोरी एक्सेस दक्षता के कारण, आपको अपनी स्प्राइटशीट को कभी भी चौड़ा नहीं करना चाहिए। 128 × 8192 छवि से टाइलें हमेशा 8192 × 128 छवि से ब्लिटिंग की तुलना में तेज़ होंगी।" - अच्छी जिज्ञासा, क्या आप कृपया विस्तार से बताएंगे?

— :)

@DevilWithin: मैंने समस्या को समझाने की कोशिश की है; मुझे बताएं कि क्या मैं पर्याप्त स्पष्ट हूं!

— सैम होसेवर

कैश दक्षता सामान आकर्षक है। क्या आपके पास उस अंतर पर कोई संख्या है जो फ्रैमरेट के संबंध में बनाता है?

— ग्रेगोरी एवरी-वियर

क्या यह एक समस्या है, क्रियान्वयन विशिष्ट जैसा दिखता है, लेकिन अगर एपीआई इस तरह से टेक्सगल्स पर कार्य करता है, तो यह निश्चित रूप से ध्यान में रखना महत्वपूर्ण है, धन्यवाद :)

— ग्रिम्सहॉव

@DevilWithin: मैंने जो लिखा है वह केवल एक सीपीयू के लिए मान्य है - एक GPU, बड़े पैमाने पर समानांतर होने के कारण, बहुत अलग कैश सेटिंग्स हैं और यादृच्छिक उपयोग के लिए अनुकूलित, अपने स्वयं के आंतरिक प्रारूप का उपयोग करके बनावट को संग्रहीत करेगा। यही कारण है कि ओपनजीएल में वर्ग, पावर-ऑफ-टू टेक्सचर की सिफारिश की जाती है, और मैं उस नियम का पालन टाइल्स के लिए भी करूंगा।

— सैम होसेवर

Answer 2

एक विशाल स्प्रिटशीट (संभावना) आपको बेहतर प्रदर्शन देने वाली है, बस इसलिए कि लैग का एक सबसे बड़ा कारण ब्राउज़र अनुरोध से सर्वर तक ब्राउज़र की गोल यात्रा है। 10,000 HTTP कॉल बहुत अधिक समय लेने वाली है, 1 HTTP कॉल की तुलना में अधिक है जो 10,000 बड़ी फ़ाइल को लौटाती है।

इस खेल की संरचना और आपके द्वारा बनाए जा रहे HTML के आधार पर, लैग को कम करने के लिए आप अन्य चीजों का उपयोग कर सकते हैं।