एनडब्ल्यू/नोड वेबकिट - छवि डीकोड्स अगर यह पहले से ही दिखाई दे रहा है

Question

मैं वर्तमान में JavaScript(pure js) आधारित गेम पर काम कर रहा हूं। गेम में 5 बड़े स्प्राइट शीट्स शामिल हैं (उदाहरण के लिए 2861 × 768 और 4096 × 4864)। जब खेल शुरू होता है, तो सभी 5 स्प्राइट शीट कैनवास तत्वों के लिए पहले से लोड की जाती हैं। उनमें से तीन sprites एक एनीमेशन का प्रतिनिधित्व करते हैं, जहां प्रत्येक स्प्राइट में 75 फ्रेम होते हैं। जब एक स्प्राइट अपनी एनीमेशन के साथ समाप्त होता है, तो मैं इसे छुपाता हूं और अगली स्प्राइट प्रदर्शित करता हूं। जब दूसरा स्प्राइट एनिमेटिंग खत्म करता है, तो मैं इसे छुपाता हूं और तीसरा/आखिरी वाला प्रदर्शित करता हूं।

जब दूसरा या तीसरा स्प्राइट प्रदर्शित होने वाला है, तो 0.5 एस -1 एस की एक छोटी देरी होती है। छवि डीकोड किया जा रहा है।

ऐसा कुछ ऐसा नहीं है जो पहली बार होता है, यह ऐसा होता है जो हमेशा होता है। और वह एनीमेशन हर 5 मिनट दोहराता है, और छोटी देरी हमेशा होती है।

कारण मैं प्रीलोडिंग के लिए कैनवास तत्वों का उपयोग कर रहा हूं, मैंने सोचा कि वेबकिट कुछ समय के लिए डीकोडेड छवियों को फेंक देगा और कैनवास तत्व वेबकिट को स्मृति से हटाने से रोक देगा। लेकिन यह काम नहीं करता है।

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

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

संपादित करें [2016/03/04]: मैंने कैनवास के साथ एक मोड बनाया और परिणाम भी बदतर है। यह बहुत कम है। और देरी वही बना हुआ है। केवल एनडब्लू में, समस्या क्रोम में नहीं है और न ही फ़ायरफ़ॉक्स में।

कैनवास मोड - lags:

डिफ़ॉल्ट (एचटीएमएल) मोड - सही काम करता है:

Codepen: मेरे रेंडरर http://codepen.io/anon/pen/JXPWXX

नोट: तो मैं उन अन्य छिपाने opacity:0.2 के साथ opacity:0 के बजाय तत्व, समस्या नहीं होती है। लेकिन, मैं उन्हें इस तरह छुपा नहीं सकता क्योंकि वे अभी भी दिखाई देते हैं। उन्हें दिखाई नहीं देना चाहिए। अगर मैं opacity:0.01 जोड़ता हूं तो यह दिखाई नहीं देता है और क्रोम में समस्या नहीं होती है, लेकिन फिर भी एनडब्ल्यू में बनी रहती है।

एनडब्ल्यू में, जब मैं अस्पष्टता से swtich: 0.2 से अस्पष्टता: 1, एक छवि डीकोड संसाधित किया जा रहा है। क्रोम ब्राउजर में वही बात नहीं होती है।

nw.js v0.12.3 
io.js v1.2.0 
Chromium 41.0.2272.76 
commit hash: 591068b-b48a69e-27b6800-459755a-2bdc251-1764a45 

तीन छवि स्प्राइट 14.4MB, 14.9MB और 15.5MB आकार के होते हैं:

मैं निम्नलिखित संस्करण का उपयोग कर रहा हूँ। प्रत्येक स्प्राइट में 75 फ्रेम होते हैं।

यह क्यों हो रहा है और मैं इसे कैसे रोक सकता हूं?

Answer 1

नया एनडब्ल्यू संस्करण शायद 1 9 .04.2016 को जारी होने के बाद से सीधे Google क्रोम पर स्विच करने का प्रयास करें। उसके बाद एनडब्ल्यू उम्मीदवारों को हर क्रोमियम रिलीज के साथ जारी रखेगा।

आपको क्रोम में एक ही समस्या नहीं होनी चाहिए।

Answer 2

मैं नहीं बल्कि कैनवस छुपा से स्प्राइट के बीच स्विच करने, फिर, कैनवस से डेटा सरणी पुनः प्राप्त करने के ctx.putImageData(idata, 0, 0)idata = ctx.getImageData(0, 0, canvas.width, canvas.height) का उपयोग कर सलाह देते हैं।

Answer 3

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

ध्यान दें कि एक अनपॅक 4000x4000 स्प्राइट शीट 64 मेगाबाइट्स रैम (4 बाइट्स (= आरजीबीए) प्रति पिक्सेल) का उपयोग करेगी, तो शायद यह सुनिश्चित करना बेहतर हो सकता है कि अगली छवि समय से थोड़ी देर पहले "गर्म हो जाए" , उन सभी को हर समय अनपॅक किए बिना रखे?