Pixi.js: रेटिना सपोर्ट

को निर्मित 2 मार्च 2014 · 66टिप्पणियाँ · स्रोत: pixijs/pixi.js

रेटिना डिस्प्ले पर, PIXI से खींची गई आकृतियाँ धुंधली दिखती हैं। मैंने इस बारे में एक फोरम पोस्ट बनाने की कोशिश की लेकिन यह वास्तव में कहीं नहीं गया। मैंने इस पर और गौर किया, और समस्या को बेहतर ढंग से प्रदर्शित करने में मदद करने के लिए सामान्य कैनवास बनाम PIXI के उदाहरणों के साथ-साथ सेटअप किया। यहाँ एक बेला है

और एक स्क्रीनशॉट

मुझे यकीन नहीं है कि पिक्सी कैनवास संदर्भ को स्केल करने के मेरे प्रयास पर सौदा w/अजीब काली पृष्ठभूमि क्या है ... मैंने इसे गलत तरीके से किया होगा या ढांचे में कुछ और रास्ते में आ रहा है या गड़बड़ हो गया है प्रसंग को संशोधित करना।

ऐसा लगता है कि PIXI devicePixelRatio जाँच करके और फिर उसके अनुसार कैनवास + संदर्भ गुणों को समायोजित करके अंतर्निहित रेटिना समर्थन जोड़ सकता है, लेकिन मुझे यकीन नहीं है कि इसके अन्य निहितार्थ क्या हो सकते हैं।

स्रोत

arahlf

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

एक सीएसएस विधि जो कैनवास का उपयोग करके मेरे लिए काम करती है (बिना pixi.js के)
canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }
बस मामले में यह किसी की मदद कर सकता है।

370417 23 फ़र॰ 2016

❤4

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

मैं इस बग से सहमत हूं। एक संदर्भ के रूप में, इसे सामान्य रूप से इस प्रकार संभाला जा सकता है: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

यह पाठ के साथ भी एक मुद्दा है।

dcascais 10 अप्रैल 2014

मान लें कि आपके पास 2 के डिवाइस पिक्सेल अनुपात के साथ एक रेटिना स्क्रीन है और आप एक कुरकुरा दिखने वाला 400x300 कैनवास प्राप्त करना चाहते हैं। इसे प्राप्त करने के लिए आपको PIXI रेंडरर को अपने वांछित कैनवास आयामों के साथ डिवाइस पिक्सेल अनुपात (800x600) से गुणा करके प्रारंभ करना होगा और फिर मैन्युअल रूप से सीएसएस का उपयोग करके कैनवास को 400x300 तक स्केल करना होगा। और फिर, निश्चित रूप से, आपको इस स्केलिंग को अपनी सभी गणनाओं में शामिल करना होगा: स्थिति, फ़ॉन्ट आकार, लाइन की चौड़ाई, लोड की गई संपत्ति, आदि।

मैं कुछ इस तरह उपयोग कर रहा हूँ:

var canvas = document.getElementById('game'),
    scale = window.devicePixelRatio,
    width = 400,
    height = 300,
    renderer = PIXI.autoDetectRenderer(width * scale, height * scale, canvas);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

n1313 23 अप्रैल 2014

👍2

GurudayalKhalsa 30 अप्रैल 2014

इससे जल्द निपटने की कोई योजना है? हर आकार, स्थिति, फ़ॉन्ट आकार को मापना वास्तव में दर्दनाक है। खासकर जब मानक कैनवास के साथ ऐसा करने का एक आसान तरीका है।

bmantuano 1 मई 2014

इस पुस्तकालय के आकार को करना मुश्किल है, क्योंकि यह इस बात पर निर्भर करता है कि आपके स्प्राइट्स हिप्पी हैं या नहीं। हमने इसे यूजरलैंड में रखा है क्योंकि हम नहीं जानते कि हिप्पी के लिए आपका कौन सा स्प्राइट स्केल करना है, यदि कोई हो, और कब; लेकिन आप कर सकते हो।

englercj 1 मई 2014

अरे @englercj । स्प्राइट्स से, क्या आपका मतलब उपयोगकर्ता द्वारा लोड की गई संपत्ति से है?

dcascais 1 मई 2014

@dcascais हाँ

englercj 1 मई 2014

@englercj आपके उत्तर के लिए धन्यवाद।

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

इसमें ग्राफिक्स संदर्भ पर गतिशील रूप से प्रस्तुत की जा रही सामग्री, टेक्स्ट और लोड की गई संपत्तियां शामिल हैं।

अन्य प्लेटफ़ॉर्म मानते हैं कि विभिन्न स्क्रीन घनत्वों के लिए उचित संपत्ति प्रदान करना उपयोगकर्ता की ज़िम्मेदारी है, लेकिन आंतरिक रूप से स्केल फैक्टर प्रॉपर्टी के साथ काम करते हैं जिससे आप आसानी से तय कर सकते हैं कि आप किस डिस्प्ले घनत्व को लक्षित करना चाहते हैं। मुझे आश्चर्य है कि क्या यह पिक्सी उपयोगकर्ताओं के लिए एक आसान तरीका होगा। उन्हें केवल उचित संपत्तियों के बारे में चिंता करने दें और सुनिश्चित करें कि स्केल फैक्टर सही ढंग से सेट है।

क्या आपके पास कोई सुझाव है कि मंच पर जोड़ी गई सामग्री की अपेक्षित स्केलिंग कैसे प्राप्त करें?

प्रदर्शन सूची में प्रत्येक आइटम के x, y, चौड़ाई और ऊंचाई मानों को मैन्युअल रूप से स्केल करना और टेक्स्ट के मामले में, उचित आकार के साथ फ़ॉन्ट नाम वाले विभिन्न स्ट्रिंग्स को परिभाषित करना बहुत बोझिल और बग प्रवण हो सकता है यदि आप एक बड़े के साथ काम कर रहे हैं परियोजना।

धन्यवाद।

dcascais 2 मई 2014

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

englercj 2 मई 2014

@englercj , मैंने इसे सैंडबॉक्स में करने की कोशिश की थी और जब इसने चीजों को उचित आकार में वापस उड़ा दिया, तो इसने उन्हें पिक्सेलेटेड छोड़ दिया। क्या आप अलग व्यवहार की उम्मीद करेंगे?

bmantuano 12 मई 2014

@bmantuano मुझे उम्मीद है कि इसे उस एल्गोरिदम के साथ बढ़ाया जाएगा जिसे चुना गया था (निकटतम, रैखिक, बाइबिक, आदि)।

englercj 12 मई 2014

चाड, यहाँ उत्तर देने के लिए धन्यवाद। स्केलिंग एल्गोरिदम के लिए, क्या आप PIXI.scaleModes का संदर्भ लेते हैं? यदि ऐसा है, तो लगता है कि बाइक्यूबिक विकल्प नहीं है।

dcascais 13 मई 2014

@englercj यहां कुछ JSFiddles हैं जो दिखाते हैं कि हम उच्च रेज डिस्प्ले पर कुरकुरा टेक्स्ट और ग्राफिक्स (गतिशील रूप से तैयार, संपत्ति नहीं) प्राप्त करने के लिए क्या करने की कोशिश कर रहे हैं।

कैनवास स्केलिंग और स्केल किए गए मुख्य डिस्प्ले ऑब्जेक्ट कंटेनर (सही आकार लेकिन धुंधले और कुछ मुद्दों के साथ)
http://jsfiddle.net/hsv8Q

कैनवास स्केलिंग (कुरकुरा लेकिन गलत आकार और कुछ मुद्दों के साथ दिखाता है)
http://jsfiddle.net/hsv8Q/1

कोई स्केलिंग नहीं (सही आकार लेकिन धुंधली)
http://jsfiddle.net/hsv8Q/2

उम्मीद है कि इससे आपको यह समझने में मदद मिलेगी कि हमारा क्या मतलब है। हमें बताएं कि क्या कुछ और है जिसे हमें आजमाना चाहिए।

dcascais 14 मई 2014

धन्यवाद @dcascais उन @englercj , पहला वह है जो आप सुझाव दे रहे थे, है ना? क्या आप वहां उच्च डीपीआई डिवाइस पर पिक्सेलेशन देख पा रहे हैं?

bmantuano 22 मई 2014

@bmantuano दुर्भाग्य से मेरे पास एक परीक्षण करने के लिए एक @GoodBoyDigital या @photonstorm के लिए इसे छोड़ने जा रहा हूं।

englercj 22 मई 2014

@englercj , अब तक इसे देखने के लिए धन्यवाद। मदद की सराहना करें। @arahlf और @ n1313 , क्या आपको कोई समाधान मिला है?

bmantuano 29 मई 2014

नहीं अभी तक नहीं :(

arahlf 29 मई 2014

@bmantuano , मैं अभी भी अपनी पिछली टिप्पणी में वर्णित दृष्टिकोण का उपयोग कर रहा हूं और इसमें कोई समस्या नहीं है।

n1313 9 जून 2014

क्या इस पर कोई आंदोलन हुआ है? मैंने उल्लेखित स्केलिंग विधि @ n1313 का उपयोग किया है, लेकिन यह रेटिना उपकरणों पर FPS को नष्ट कर रहा है।

कोई विचार?

SamBenson 4 जुल॰ 2014

उत्तर के लिए @arahlf और @ n1313 , thx।

@GoodBoyDigital , क्या यह आपके रडार पर है? केवल एक विचार प्राप्त करने में मददगार होगा यदि यह कुछ ऐसा है जिसकी हम भविष्य के अपडेट में उम्मीद कर सकते हैं या हमें इसके आसपास हैक करने की आवश्यकता है या नहीं।

bmantuano 7 अग॰ 2014

@GoodBoyDigital बस यहाँ अपनी आवाज़ जोड़ना चाहता था। मैं Pixi.js का उपयोग करते हुए एक बड़े पैमाने पर मल्टीप्लेयर ऑनलाइन गेम पर काम कर रहा हूं क्योंकि हमने इसे सबसे अधिक प्रदर्शन करने वाले रेंडरिंग इंजन के रूप में पहचाना है, लेकिन हम वास्तव में रेटिना डिस्प्ले सपोर्ट के लिए आहत हैं!

chiubaka 5 सित॰ 2014

जैसा कि होता है, मैं वास्तव में रेटिना समर्थन जोड़ने के माध्यम से आधा रास्ता हूँ :) इस स्थान को देखें ..

GoodBoyDigital 5 सित॰ 2014

बहुत बढ़िया: +1:

krzysztof-o 5 सित॰ 2014

@GoodBoyDigital , यह शानदार है! अद्यतन के लिए धन्यवाद। इसके लिए आगे देख रहे हैं।

bmantuano 5 सित॰ 2014

@GoodBoyDigital यह कमाल है! इतनी जल्दी मेरे पास वापस आने के लिए बहुत-बहुत धन्यवाद। मुझे पता है कि यह कहना मुश्किल है, लेकिन क्या आप मुझे एक बहुत ही ढीला बॉलपार्क अनुमान दे सकते हैं जब आपको लगता है कि पिक्सी के लिए रेटिना समर्थन किया जाएगा?

अगर उस समय सीमा में ऐसा नहीं किया गया तो मैं आपको अनुमान या शिकायत नहीं रखूंगा-- बस उत्सुकता से आम तौर पर आपको लगता है कि हम कितनी देर तक प्रतीक्षा करेंगे!

chiubaka 8 सित॰ 2014

अरे दोस्तों - अभी नई "देव-रेटिना" शाखा को git हब में अपलोड किया है। यह इक्का होगा यदि आप सभी एक नाटक कर सकते हैं। वहाँ बहुत सारे चलते हुए हिस्से हैं, इसलिए लगा कि इसे देव शाखा में विलय करने से पहले कुछ वास्तविक परियोजनाओं के साथ इसका परीक्षण करना अच्छा होगा।

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

PIXI.autodetectRenderer(100, 100, {resolution:2})

सब कुछ एक जैसा दिखना चाहिए.. लेकिन संकल्प अधिक होगा :)

बेसटेक्स्चर का भी अब एक संकल्प है। यदि छवि एक उच्च रिज़ॉल्यूशन वाली है तो आपको रिज़ॉल्यूशन को 2 पर सेट करने की आवश्यकता होगी। लोड होने पर रिज़ॉल्यूशन को स्वचालित रूप से दो पर सेट करने का तरीका छवि को @ 2x के साथ छवि नाम में जोड़ना है।

इसलिए यदि आप कहते हैं: [email protected] में लोड करते हैं तो

वास्तव में एक नाटक करना सबसे अच्छा है! लेकिन कृपया प्रश्न पूछें क्योंकि यह शायद उतना सीधा नहीं है जितना लगता है :)

GoodBoyDigital 8 सित॰ 2014

RobinQu 9 सित॰ 2014

अरे मैट। यह बहुत अच्छा लग रहा है! मैं अच्छा और कुरकुरा पाठ और संपत्ति प्रस्तुत करने के लिए कैनवास प्राप्त करने में सक्षम था। जहां तक मैंने परीक्षण किया है, आकार और स्थिति सही ढंग से संभाली गई प्रतीत होती है।

मुझे लगता है कि केवल एक चीज जिसमें समस्या आ रही है वह है पिक्सी। ग्राफिक्स ड्राइंग प्रक्रिया। मुझे लगता है कि उन्हें कुरकुरा रूप से प्रस्तुत करने के लिए नहीं मिल रहा है। हालांकि, प्रतिपादन का आकार और स्थिति सही है।

dcascais 9 सित॰ 2014

ग्राफिक्स ऑब्जेक्ट भी रेटिना होना चाहिए? क्या आप बिटमैप के रूप में कैशिंग कर रहे हैं?
ग्राफिक्स वस्तु संयोग से? या यह सीधे PIXI.graphics है?

मंगल सितम्बर 9, 2014 5:32 प्रधानमंत्री पर dcascais [email protected] लिखा है:

अरे मैट। यह बहुत अच्छा लग रहा है! मैं कैनवास को अच्छा प्रस्तुत करने में सक्षम था
और कुरकुरा पाठ और संपत्ति। ऐसा लगता है कि आकार और स्थिति सही ढंग से संभाली गई है
जहाँ तक मैंने परीक्षण किया है।
केवल एक चीज जिसमें मुझे समस्या आ रही है वह है Pixi.Graphics
ड्राइंग प्रक्रियाएं। मुझे लगता है कि उन्हें कुरकुरा रूप से प्रस्तुत करने के लिए नहीं मिल रहा है। NS
हालांकि, प्रतिपादन का आकार और स्थिति सही है।
-
इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

मैट ग्रोव्स
_तकनीकी भागीदार_
टेलीफोन: 07708 114496 :: www.goodboydigital.com
फर्स्ट फ्लोर, यूनिट 9बी, क्वींस यार्ड, व्हाइट पोस्ट लेन, लंदन, E9 5EN
गुडबॉय ©। सर्वाधिकार सुरक्षित।

GoodBoyDigital 9 सित॰ 2014

@GoodBoyDigital समस्या का वर्णन करते समय मेरे पास मौजूद कॉन्फ़िगरेशन का हिस्सा छूट गया। मेरे पास जो सेटअप है वह एक PIXI है। एक PIXI.Graphics ऑब्जेक्ट पर आधारित बनावट के साथ स्प्राइट।

मैंने इस मुद्दे और परिणामी प्रतिपादन का वर्णन करने में सहायता के लिए एक JSFiddle बनाया:
यदि PIXI.Sprite को PIXI पर आधारित बनावट मिलती है तो यह धुंधली ग्राफिक्स आउटपुट दिखाता है।
http://jsfiddle.net/hsv8Q/13/

PIXI.Graphics के सीधे उपयोग के साथ यह सेटअप ठीक काम करता है:
http://jsfiddle.net/hsv8Q/7/

dcascais 10 सित॰ 2014

गोचा! कोई चिंता नहीं - मुझे पता है कि इसका क्या कारण है :)
एक बार इसकी ट्वीक करने के बाद आपको बताएंगे। टा!

GoodBoyDigital 10 सित॰ 2014

अरे @GoodBoyDigital , रेटिना सपोर्ट के लिए धन्यवाद! यह बहुत अच्छे समय पर भी आता है, क्योंकि हमें अपने क्लाइंट के लिए इसकी आवश्यकता होती है :)

एक समस्या मैंने रेटिना शाखा में देखी: प्रतिपादन बेहतर है, लेकिन हिट क्षेत्रों को गलत तरीके से संरेखित किया गया है। कैनवास स्केल किया गया है, लेकिन हिट क्षेत्र नहीं हैं। तो अगर मैं स्क्रीन के केंद्र में एक बटन को छूना चाहता हूं, तो मुझे वास्तव में इसे छूने के लिए स्क्रीन के बाएं-ऊपरी हिस्से के केंद्र को स्पर्श करना होगा।

kaatje_retina_offset
इस स्क्रीन में, अगर मैं केंद्र में बटन हिट करना चाहता हूं, तो मुझे वास्तव में इसे हिट करने के लिए नारंगी सर्कल (जिसे मैंने बाद में एक उदाहरण के रूप में जोड़ा) में हिट करना होगा। हिटारिया बाकी के साथ स्केल नहीं करता है।

autodetectRenderer फ़ंक्शन में "रिज़ॉल्यूशन" पैरामीटर के बारे में; हम सिर्फ "window.devicePixelRatio" का उपयोग कर सकते हैं?

GillesVermeulen 11 सित॰ 2014

मैंने ऊपर वर्णित समस्या के लिए एक त्वरित/गंदा समाधान पाया। ऐसा लगता है कि समस्या इंटरेक्शनमैनेजर के ऑन टचस्टार्ट, ऑन टचमोव और ऑन टचएंड फ़ंक्शंस में स्थित है। यह उन कार्यों में touchData.global.x और touchData.global.y की गणना को बदलकर और उन्हें this.resolution द्वारा विभाजित करके तय किया जा सकता है।

ऐसा लगता है कि इस मुद्दे को ठीक कर दिया गया है, लेकिन एक बेहतर समाधान हो सकता है।

GillesVermeulen 11 सित॰ 2014

नमस्ते @GillesVermeulen
मैंने अपने आखिरी कमिट में हिट एरिया स्टफ को ट्वीक किया। कृपया नवीनतम संस्करण के साथ प्रयास करेंगे? टा!

GoodBoyDigital 12 सित॰ 2014

अरे @GoodBoyDigital , त्वरित उत्तर और समर्थन के लिए धन्यवाद, लेकिन क्या यह संभव है कि आप जिस प्रतिबद्धता के बारे में बात कर रहे हैं वह अभी तक जीथब पर नहीं है?

GillesVermeulen 12 सित॰ 2014

@GillesVermeulen - स्पर्श अब अच्छा होना चाहिए। मैं केवल माउस ईवेंट में रिज़ॉल्यूशन परिवर्तन लागू कर रहा था। मुझे बताएं कि क्या यह अब आपके लिए ठीक काम करता है। धन्यवाद!

GoodBoyDigital 12 सित॰ 2014

दोपहर @dcascais ! मैंने अभी रेटिना शाखा में एक फिक्स को धक्का दिया है जो आपको जेनरेटटेक्चर फ़ंक्शन के संकल्प को परिभाषित करने देगा।

तो एक अच्छी कुरकुरी रेटिना बनावट के लिए आप यह सब कर सकते हैं:

var retinaTexture = myGraphicsObject.generateTexture(2)
var normalTexture = myGraphicsObject.generateTexture(1)
var smallTexture = myGraphicsObject.generateTexture(0.5)

मुझे बताएं कि यह आपके लिए कैसे काम करता है। धन्यवाद!

GoodBoyDigital 14 सित॰ 2014

@GoodBoyDigital नाइस! यह अब काफी अच्छा काम करता है। मैं इस पर अद्यतन की सराहना करता हूं।

एक सामान्य प्रश्न के रूप में। क्या आप या अन्य इस उच्च रिज़ॉल्यूशन अपडेट के आधार पर प्रदर्शन, मेमोरी या क्रैशिंग समस्याओं जैसी अन्य चीज़ों में चले गए हैं?

धन्यवाद, मैट।

dcascais 15 सित॰ 2014

सुनकर खुशी हुई!

काश उसके लिए कोई जादू की गोली होती! दुर्भाग्य से उच्च रिज़ॉल्यूशन वास्तव में प्रदर्शन और मेमोरी खपत को प्रभावित करेगा क्योंकि आप अनिवार्य रूप से सब कुछ आकार में दोगुना हो जाएगा। रेटिना छवियां 2x अधिक मेमोरी लेती हैं और वेबजीएल / कैनवास को 2x पिक्सेल के साथ एक दृश्य प्रस्तुत करने की आवश्यकता होगी। कम मेमोरी/सीपीयू उपकरणों पर यह एक वास्तविक हत्यारा हो सकता है इसलिए उच्च रेज के साथ कुछ भी करते समय सावधान रहना बहुत महत्वपूर्ण है।

GoodBoyDigital 15 सित॰ 2014

क्या वे 4x नहीं होंगे? क्या यह बहुत अधिक गारंटी नहीं है कि रेटिना डिस्प्ले वाले लोगों के पास भी तेज़ कंप्यूटर होंगे?

iirelu 15 सित॰ 2014

@iirelu वास्तव में सच है! 4x जितना!
हां, मुझे नहीं लगता कि रेटिना डिस्प्ले वाले कंप्यूटरों पर कोई समस्या होगी क्योंकि वे काफी हाई-एंड होंगे।

स्मृति समस्याओं के उन मोबाइल उपकरणों पर प्रकट होने की अधिक संभावना होगी जिनमें रेटिना स्क्रीन होती है।

GoodBoyDigital 15 सित॰ 2014

@GoodBoyDigital , स्पर्श कार्यों के अद्यतन के लिए धन्यवाद। यह मेरे अस्थायी सुधार जैसा ही था और ऐसा लगता है कि यह चाल चल रहा है।

प्रदर्शन पर: हाल ही में मैं आईओएस 7 पर कोकूनजेएस में सामान का परीक्षण कर रहा हूं। फोनगैप जैसी चीजों द्वारा उपयोग किए जाने वाले मानक आईओएस वेबव्यू की तुलना में प्रदर्शन निश्चित रूप से बेहतर है, लेकिन आकृतियों को चित्रित करना बहुत कर लगाने वाला लगता है और आकार सफारी की तरह एंटी-अलियास नहीं हैं। मुझे लगता है कि यह कोकूनजेएस से संबंधित है और इसका पिक्सी से बहुत कम लेना-देना है।

GillesVermeulen 17 सित॰ 2014

जैसे ही आप किसी रेटिना (@2x) बनावट पर फ़िल्टर लागू करते हैं, ऐसा लगता है कि सभी स्थितियाँ बंद हो गई हैं।

joaomoreno 22 सित॰ 2014

सिर ऊपर करने के लिए धन्यवाद @joaomoreno ! एक नज़र डालना सुनिश्चित करेंगे: +1:

GoodBoyDigital 22 सित॰ 2014

आपके द्वारा प्रस्तुत API के बारे में बस एक छोटा सा प्रश्न: क्या PIXI.autodetectRenderer(width, height, optionObject) और PIXI.autodetectRenderer(width, height, view, antialias, transparent के बीच कोई टकराव नहीं है)?
क्या यह optionObject तर्क को दूसरे हस्ताक्षर से छठा तर्क बना देगा जैसा कि src/pixi/utils/Detector.js में वर्णित है? मुझे पूरा यकीन नहीं है कि इसे और कहां रखा जाए, क्योंकि तीसरा तर्क पहले से ही एक डोमेलेमेंट है, है ना?

kdex 29 सित॰ 2014

पिक्सी का अगला संस्करण नई विधि हस्ताक्षर का उपयोग करेगा, यह एक महत्वपूर्ण परिवर्तन है।

englercj 29 सित॰ 2014

@englercj आपकी त्वरित प्रतिक्रिया के लिए बहुत-बहुत धन्यवाद। क्या छोड़े गए विकल्प अभी भी किसी अन्य तरीके से सुलभ रहेंगे?

kdex 30 सित॰ 2014

विकल्प ऑब्जेक्ट में पिछले सभी विकल्प और नए होते हैं। कार्यक्षमता को हटाया नहीं जा रहा है, आप बस विकल्पों को अलग तरीके से पास करते हैं:

https://github.com/GoodBoyDigital/pixi.js/blob/dev/src/pixi/utils/Detector.js#L14 -L19

englercj 30 सित॰ 2014

ओह, आसान! इसके लिए बहुत धन्यवाद। :+1:

kdex 1 अक्तू॰ 2014

रेटिना सपोर्ट अभी देव ब्रांच में है। अगर किसी को इसके साथ कोई समस्या मिलती है तो कृपया मुझे बताएं: +1: अभी के लिए बंद करना।

GoodBoyDigital 14 अक्तू॰ 2014

मुझे रेटिना मैकबुक प्रो में समस्या हो रही है।

मैं {resolution:2} का उपयोग नहीं कर रहा हूं।

मंच की चौड़ाई वास्तविक रेटिना पिक्सेल लौटाती है। मेरे मामले में यह 2540 पिक्सल है। बनावट उनके आकार के दोगुने पर प्रस्तुत की जाती है और उनकी चौड़ाई वास्तविक 1:1 रेटिना पिक्सेल में भी नहीं होती है। तो एक 300 x 200 छवि 600 x 400 रेटिना पिक्सेल पर कब्जा कर लेती है, लेकिन चौड़ाई 300 लौटाती है।

क्या यह अपेक्षित व्यवहार है?

PierBover 15 मार्च 2015

@PierBover हां, वस्तु की ऊंचाई/चौड़ाई वास्तव में नहीं बदली है। यह सिर्फ एक अलग संकल्प पर प्रस्तुत किया गया है।

englercj 15 मार्च 2015

@englercj लेकिन असली पिक्सल और

PierBover 15 मार्च 2015

हे दोस्तों, क्या मैं यहाँ कुछ गलत कर रहा हूँ। अगर मैं रेटिना डिस्प्ले के लिए अपने कैनवास रेंडरर के रिज़ॉल्यूशन 2 को बनाता हूं तो यह मेरे कैनवास को दो बार आकार और मेरी @x2 छवियों को चार गुना आकार देता है।

    <strong i="7">@scale</strong> = window.devicePixelRatio
    width = 960/<strong i="8">@scale</strong>
    height = 556/<strong i="9">@scale</strong>

    renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:@scale})
    container = document.getElementById 'container'
    container.appendChild renderer.view

स्टैक ओवरफ्लो प्रश्न
http://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size

brenwell 19 मार्च 2015

इस अंक में और इस ब्लॉग पोस्ट में http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ रेटिना छवियों को विस्तार से पहले @2x या @ x2 की आवश्यकता के लिए उल्लेख किया गया है . मुझे लगता है कि सही @2x है । क्या यह सही है?

brenwell 19 मार्च 2015

@2x सही है। यह एक फ़ोल्डर का नाम हो सकता है या छवि के नाम से जोड़ा जा सकता है।

assets/@2x/image.png or assets/[email protected]

adireddy 19 मार्च 2015

@Adireddy धन्यवाद। वह आधी लड़ाई है। कोई विचार क्यों संकल्प बढ़ने के बजाय मेरे कैनवास को बढ़ाया गया है?

brenwell 19 मार्च 2015

रेटिना के लिए यहाँ वही समस्या, रिज़ॉल्यूशन का कोई भी उपयोग: 2, कुछ PIXI बनाता है। टेक्स्ट एंकर की स्थिति गलत है। CSS में कैनवास को वापस करने से बहुत मदद नहीं मिलती है। मुझे संकल्प को 1 पर सेट करना था, अपने टेक्स्ट फ़ॉन्ट आकार को दोगुना करना था, फिर इसे आधा करना था।

और इसके साथ ही पाठ अभी भी सहज नहीं दिखता है।

Elyx0 2 मई 2015

हाय Elyx0, आप यहां उपलब्ध मोबाइल के लिए मेरे टेक्स्ट प्लगइन को आजमा सकते हैं: https://github.com/JiDW/pixi-cocoontext

क्या यह आपके मुद्दों को ठीक करता है?

JiDW 2 मई 2015

हाय @JiDW , मैंने आखिरकार इसे ठीक कर दिया। मैं नंगे PIXI.js का उपयोग कर रहा हूं इसलिए मेरे लिए कोई कोकून नहीं है, मेरा दृश्य कैनवास ठीक से सेटअप नहीं था। धन्यवाद

Elyx0 3 मई 2015

@GillesVermeulen

मैं अपनी परियोजना में उच्च डीपीआई उपकरणों का समर्थन करने पर विचार कर रहा हूं, इसलिए मैं सोच रहा हूं:

कैनवास स्केल किया गया है, लेकिन हिट क्षेत्र नहीं हैं।

क्या इसे पिक्सीजेएस में हल किया गया है? (उदाहरण के लिए बाद के/हाल के संस्करण में)

tobireif 17 फ़र॰ 2016

अरे @tobireif , मुझे ऐसा लगता है हाँ। लंबे समय से समस्या नहीं है, लेकिन यह पिक्सी v2 के साथ है। मुझे नहीं लगता कि यह नए संस्करण के साथ भी कोई समस्या है।

GillesVermeulen 17 फ़र॰ 2016

@GillesVermeulen अच्छा लगता है! धन्यवाद!

tobireif 17 फ़र॰ 2016

370417 23 फ़र॰ 2016

❤4

नमस्ते !

मुझे अपने पिछले प्रोजेक्ट में कोई समस्या आ रही है: http://romaincazier.com/davatars/

मुझे अपनी वस्तुओं पर सही पिक्सेल रिज़ॉल्यूशन नहीं मिल रहा है ... मुझे नहीं पता कि यह रेंडरर या ग्राफिक्स के बारे में है जिससे मैंने बनावट बनाई है, लेकिन दोनों ही मामलों में मैंने window.devicePixelRatio जोड़ा है लेकिन ऐसा नहीं लगता है कोई प्रभाव होना।

romaincazier 27 मई 2016

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

lock[bot] 24 फ़र॰ 2019

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

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

Pixi.js: रेटिना सपोर्ट

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

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

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