Pixi.js: कैनवास का आकार बदलते समय, एक सफेद पृष्ठभूमि टिमटिमाती है

को निर्मित 3 दिस॰ 2016 · 7टिप्पणियाँ · स्रोत: pixijs/pixi.js

मैं एक साधारण स्टैंडअलोन फ़ंक्शन के साथ कैनवास का आकार बदलता हूं, जैसे:

function resizeCanvas(width, height) {
    game.canvas.width = width;
    game.canvas.height = height;
    game.canvas.style.width = width / game.resolution + 'px';
    game.canvas.style.height = height / game.resolution + 'px';
}

और जब गेम बूटअप होता है, तो मैं ऐसा कुछ करता हूं:

game.renderer = new PIXI.WebGLRenderer(
    game.canvas.width,
    game.canvas.height,
    {
         view: game.canvas,
         backgroundColor: 0x000000,
     }
);

// recompute viewport size & canvas size with  browser window size 
game.scaler.update();  

// resize  renderer with new size.
game.renderer.resize(game.viewportWidth, game.viewportHeight);

परीक्षण का मामला बहुत सरल है: एक छोटी पीएनजी छवि बनाएं।

ब्राउज़र: macOS 10.12 . के लिए क्रोम 55

सफारी ठीक है।

मुझे पता है कि शायद यह क्रोम का एक मुद्दा है, लेकिन मुझे आशा है कि इसे ठीक करने के लिए एक हैक तरीका है।

धन्यवाद

💾 v4.x (Legacy)

स्रोत

finscn

सबसे उपयोगी टिप्पणी

ओ धन्यवाद! @mickdekkers यह कमाल है, कॉलिंग रेंडर तुरंत इसे ResizeObserver कॉलबैक के साथ काम करता है।

inukshuk 11 सित॰ 2017

🎉4 ❤2

सभी 7 टिप्पणियाँ

मैं इस बग को ठीक करने के लिए इस तरह के कोड का उपयोग करता हूं:

    game.renderer.resize(game.viewportWidth - 1, game.viewportHeight);
    setTimeout(function() {
        game.renderer.resize(game.viewportWidth, game.viewportHeight);
    }, 1);

यह बहुत बदसूरत है ， मुझे इससे बेहतर सुझाव कौन दे सकता है

निश्चित रूप से सबसे अच्छा तरीका यह है कि इसकी रिपोर्ट क्रोम टीम को करें।
कौन कर सकता था? इस बग का वर्णन करने के लिए मेरी अंग्रेजी बहुत कमजोर है。

finscn 3 दिस॰ 2016

नया क्रोम नहीं यह मुद्दा।

finscn 12 जन॰ 2017

मैं पुष्टि करना चाहता हूं कि यह अभी भी डेस्कटॉप सफारी (नवीनतम) और एज पर होता है। पिक्सी वी4.3.0।

संपादित करें: छद्म कोड में, हम कुछ ऐसा कर रहे थे:

handleWindowDimensionChange(function() {
renderer.resize(window.innerWidth, window.innerHeight)
});

विंडो का आकार बदलना दोनों उल्लिखित ब्राउज़रों में बदसूरत झिलमिलाहट का कारण बनता है। क्रोम या फ़ायरफ़ॉक्स नहीं।

nthapaliya 25 फ़र॰ 2017

क्या किसी को पता है कि आकार बदलने पर संभावित रूप से झिलमिलाहट का कारण क्या हो सकता है? मुझे इलेक्ट्रॉन में एक ही समस्या है (विभिन्न संस्करणों के साथ परीक्षण किया गया है, लेकिन मूल रूप से, क्रोमियम 56, 58 और 59) और पिक्सी 4.5.5 (लिनक्स और मैकओएस पर परीक्षण किया गया) लेकिन केवल एक विचित्र परिदृश्य में:

मैं डोम में एक कंटेनर तत्व के आधार पर रेंडरर (वेबजीएल) का आकार बदल रहा हूं: यदि विंडो का आकार बदल दिया गया है या जावास्क्रिप्ट में लागू एक आकार बदलने योग्य विजेट द्वारा ट्रिगर किया गया है तो कंटेनर तत्व आकार बदल सकता है। अब, अगर मैं विंडो के resize और विजेट के कस्टम resize हैंडलर ( mousemove ईवेंट के आधार पर) में रेंडरर का आकार बदलता हूं, तो सब ठीक है , लेकिन अगर मैं नए ResizeObserver उपयोग करता हूं

अवलोकन के एक जोड़े:

झिलमिलाहट पूरे कैनवास के साफ होने के कारण होती है (जैसे ओपी का उल्लेख है, मेरे मामले में यह सफेद नहीं है लेकिन पारदर्शी है): यह स्पष्ट रूप से दिखाई देता है जब मैं देव-उपकरण में स्क्रीनशॉट के साथ एक प्रदर्शन रिकॉर्डिंग करता हूं: कैनवास लगभग खाली है आकार बदलने के दौरान 100ms।
मैंने माना कि यह एक प्रदर्शन/समय का मुद्दा है जिसमें ResizeObserver अधिक बार आग लगती है, लेकिन ऐसा नहीं है: मुझे दोनों परिदृश्यों में तुलनीय आवृत्ति मिलती है।
इसके अलावा, मैं स्वयं आकार बदलने का प्रयास कर रहा हूं, इसलिए वास्तविक कॉल की आवृत्ति renderer.resize दोनों ही मामलों में समान है; यह भी कॉल किसी भी ईवेंट हैंडलर में नहीं होता है, लेकिन इसमें देरी होती है, इसलिए मुझे लगता है कि समय को दोष देने की संभावना नहीं है।
मेरा अगला अनुमान यह था कि ResizeObserver द्वारा बताए गए मान भिन्न हैं; यह कंटेनर के कंटेंट बॉक्स को बाउंडिंग बॉक्स नहीं बताता है, लेकिन चूंकि इसमें कोई बॉर्डर या पैडिंग शामिल नहीं है, इसलिए मान समान हैं। इसके अलावा, मैं दोनों परिदृश्यों में आयामों को पूर्ण पिक्सेल में गोल कर रहा हूं। वास्तव में, दोनों आयामों को सेट किया जा रहा है और आवृत्ति दोनों ही मामलों में बहुत समान हैं।
अगर मैं थ्रॉटल टाइमआउट को लगभग 500ms या उससे अधिक तक बढ़ा दूं तो झिलमिलाहट बंद हो जाती है
विंडो/विजेट ईवेंट हैंडलर का उपयोग करके मुझे getBoundingClientRect() का उपयोग करके कंटेनर को मापने की आवश्यकता है - इस कॉल को सहेजने के लिए (फिर से पेंट करने के कारण) वास्तव में ResizeObserver का उपयोग करने का एक बड़ा कारण है लेकिन मुझे लगा अतिरिक्त रंग की कमी किसी कारण से झिलमिलाहट पैदा कर सकती है। इसलिए मैंने आकार बदलने से पहले getBoundingClientRect() एक अनावश्यक कॉल जोड़ा, लेकिन कोई फायदा नहीं हुआ।

मैं बहुत चिंतित नहीं हूं, क्योंकि एक व्यवहार्य समाधान है ( ResizeObserver बजाय दो अलग-अलग हैंडलर का उपयोग करके), लेकिन मैं वास्तव में जानना चाहता हूं कि इसका क्या कारण है। मैंने autoResize और antialias भी बंद कर दिया लेकिन इससे कोई फर्क नहीं पड़ा। कोई विचार मैं और क्या कोशिश कर सकता था?

inukshuk 10 सित॰ 2017

@inukshuk मेरे मामले में समाधान वास्तव में सरल हो गया: आकार बदलने के बाद बस render पर कॉल करें।

app.renderer.resize(width, height)
// Immediately render because resizing clears the canvas
app.render()

इसने मेरे लिए झिलमिलाहट की समस्या को ठीक कर दिया। ध्यान रखें कि यदि आपके पास एनिमेशन चल रहे हैं, तो यह आपके अगले अपडेट लूप तक केवल अंतिम फ्रेम प्रदर्शित करेगा और यह "फ्रीजिंग" प्रभाव दे सकता है। यदि आप इसे सुचारू रूप से चलाना चाहते हैं, तो आप रेंडर को कॉल करने से पहले अपने अपडेट फ़ंक्शन को कॉल करना चाहेंगे।

mickdekkers 11 सित॰ 2017

👍3

inukshuk 11 सित॰ 2017

🎉4 ❤2

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।

lock[bot] 24 फ़र॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Pixi.js: कैनवास का आकार बदलते समय, एक सफेद पृष्ठभूमि टिमटिमाती है

सबसे उपयोगी टिप्पणी

सभी 7 टिप्पणियाँ

संबंधित मुद्दों