Pixi.js: دعم شبكية العين

أنا أتفق مع هذا الخطأ. كمرجع ، هذه هي الطريقة التي يمكن التعامل بها بشكل طبيعي: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

هذه أيضًا مشكلة في النص.

لنفترض أن لديك شاشة شبكية مع جهاز PixelRatio 2 وترغب في الحصول على لوحة قماشية 400x300 واضحة المظهر. للحصول على ذلك ، تحتاج إلى تهيئة عارض PIXI بأبعاد اللوحة القماشية التي تريدها مضروبة في devicePixelRatio (800x600) ثم مقياس حجم اللوحة يدويًا إلى 400x300 باستخدام css. وبعد ذلك ، بالطبع ، سيتعين عليك دمج هذا القياس في جميع حساباتك: المواضع ، وأحجام الخطوط ، وعرض الخطوط ، والأصول المحملة ، إلخ.

أنا أستخدم شيئًا كهذا:

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';

+1

أي خطط لمعالجة هذا قريبا؟ إن الحاجة إلى قياس كل حجم وموضع وحجم الخط أمر مؤلم حقًا. خاصة عندما تكون هناك طريقة بسيطة إلى حد ما للقيام بذلك باستخدام اللوحة القماشية القياسية.

من الصعب عمل حجم هذه المكتبة ، لأنه يعتمد على ما إذا كانت النقوش المتحركة الخاصة بك هي hidpi أم لا. لقد احتفظنا بها في userland لأننا لا نعرف ما هي النقوش المتحركة الخاصة بك لتوسيع نطاق hidpi ، إن وجدت ، ومتى ؛ لكنك تفعل.

يا englercj . بواسطة العفاريت ، هل تقصد الأصول المحملة من قبل المستخدم؟

dcascais نعم

englercj شكرا

حاليًا ، إذا تم تغيير حجم عرض العارض باستخدام خدعة CSS (الموضحة في الرابط السابق) للحصول على دقة عرض مناسبة ، فإن أي شيء تتم إضافته إلى الجزء الرئيسي ثم يتم عرضه باستخدام طريقة عرض العارض المقاسة لا يتم تحجيمه وفقًا لذلك ، فإنه يحافظ على البكسل الخاص به القيم ، أي نصف الحجم بشكل أساسي.

يتضمن ذلك المحتوى الذي يتم عرضه ديناميكيًا في سياق الرسومات والنصوص والأصول التي تم تحميلها.

تفترض الأنظمة الأساسية الأخرى أن مسؤولية توفير الأصول المناسبة لكثافات الشاشة المختلفة تقع على عاتق المستخدم ، لكن الأجزاء الداخلية تعمل بسلاسة من خلال خاصية عامل القياس التي تتيح لك بسهولة تحديد كثافة العرض التي ترغب في استهدافها. أتساءل عما إذا كان هذا سيكون نهجًا أبسط لمستخدمي Pixi. السماح لهم بالقلق فقط بشأن الأصول المناسبة والتأكد من تعيين عامل المقياس بشكل صحيح.

هل لديك اقتراح حول كيفية تحقيق القياس المتوقع للمحتوى المضاف إلى المسرح؟

قياس قيم x و y والعرض والارتفاع يدويًا لكل عنصر في قائمة العرض وفي حالة النص ، يمكن أن يصبح تحديد السلاسل المختلفة التي تحتوي على أسماء خطوط بالحجم المناسب أمرًا مرهقًا للغاية وعرضة للأخطاء إذا كنت تتعامل مع مجموعة كبيرة مشروع.

شكرا.

مثير للاهتمام ، أود أن أرى كيف تعمل بعض هذه الأنظمة. بقدر ما تحجيم كل عنصر على حدة ، لا يبدو أن هذا هو السبيل للذهاب. نظرًا لأن هذا رسم بياني للمشهد ، ألا يمكنك فقط توسيع نطاق DOC الجذر بشكل مناسب؟

englercj ، لقد جربت هذا في صندوق رمل وبينما كان يفجر الأشياء احتياطيًا إلى الحجم المناسب ، فقد تركها منقطة. هل تتوقع سلوكًا مختلفًا؟

bmantuano أتوقع أن يتم تحجيمها باستخدام الخوارزمية التي تم اختيارها (الأقرب ، الخطي ، المكعب ، إلخ).

تشاد ، شكرا على الرد هنا. بالنسبة لخوارزمية القياس ، هل تشير إلى PIXI.scaleModes؟ إذا كان الأمر كذلك ، فيبدو أن الخيار bicubic غير موجود.

englercj فيما يلي بعض JSFiddles التي تُظهر ما نحاول القيام به للحصول على نصوص ورسومات واضحة (مرسومة ديناميكيًا ، وليس أصولًا) على شاشات عالية الدقة.

تحجيم اللوحة القماشية وحاوية كائن شاشة العرض الرئيسية المقاسة (حجم صحيح لكن ضبابي ومع بعض المشكلات)
http://jsfiddle.net/hsv8Q

تحجيم اللوحة القماشية (يظهر حجمًا هشًا ولكن خاطئًا ومع بعض المشكلات)
http://jsfiddle.net/hsv8Q/1

لا تحجيم (حجم صحيح لكن ضبابي)
http://jsfiddle.net/hsv8Q/2

نأمل أن يساعدك هذا على فهم ما نعنيه. أخبرنا إذا كان هناك شيء آخر يجب أن نحاول القيام به.

شكرا dcascais لإضافة تلك englercj ، الأول هو ما كنت

bmantuano لسوء الحظ ، ليس لدي جهاز HDPI لاختبار واحد :( سأترك هذا الجهاز لـ photonstorm لإلقاء نظرة عليه.

englercj ، شكرًا للنظر فيه حتى الآن. نقدر المساعدة. arahlf و @ n1313 ، هل وجدت حلاً؟

لا ليس بعد :(

bmantuano ، ما زلت أستخدم النهج الموضح في تعليقي السابق وليس لدي أي مشاكل على الإطلاق.

هل كان هناك أي تحرك في هذا الشأن؟ لقد استخدمت طريقة القياس @ n1313 المذكورة ولكنها تدمر FPS على أجهزة شبكية العين.

أيه أفكار؟

arahlf و @ n1313 ، تشك للردود.

GoodBoyDigital ، هل هذا على

GoodBoyDigital @ أردت فقط إضافة صوتي هنا. أنا أعمل على لعبة Massively Multiplayer Online باستخدام Pixi.js لأننا حددناها على أنها المحرك الأكثر أداءً هناك ، لكننا نؤذي حقًا دعم عرض شبكية العين!

كما يحدث ، أنا في الواقع في منتصف الطريق من خلال إضافة دعم شبكية العين :) شاهد هذه المساحة ..

ممتاز: +1:

تضمين التغريدة شكرا للتحديث. نتطلع إلى ذلك.

تضمين التغريدة شكرا جزيلا لرجوعك إلي بسرعة. أعلم أنه من الصعب قول ذلك بشكل عام ، ولكن هل يمكنك أن تعطيني تقديرًا دقيقًا للغاية عندما تعتقد أنه سيتم دعم شبكية العين لـ Pixi؟

لن أمسكك بالتقدير أو أشتكي إذا لم يتم ذلك في هذا الإطار الزمني - فقط فضولي بشكل عام إلى متى تعتقد أننا سننتظر!

مرحبًا يا رفاق - قمت للتو بتحميل فرع "dev-retina" الجديد إلى git hub. سيكون الأمر رائعًا إذا كان بإمكانك جميعًا اللعب. هناك الكثير من الأجزاء المتحركة هناك ، لذا من الجيد اختبارها مع بعض المشاريع الحقيقية قبل دمجها في فرع التطوير.

لدى العارض الآن معلمة خيار. أحد الخيارات الجديدة هو الدقة. لذلك لتعيين العارض على شبكية العين ، يمكنك إنشاء عارض مثل هذا:

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

يجب أن يبدو كل شيء كما هو .. لكن الدقة ستكون أعلى :)

BaseTextures لديها أيضًا دقة الآن أيضًا. إذا كانت الصورة عالية الدقة ، فستحتاج إلى ضبط الدقة على 2. طريقة ضبط الدقة على اثنين تلقائيًا عند التحميل هي إلحاق الصورة بـ @ 2x إلى اسم الصورة.

لذلك إذا قمت بالتحميل قل: [email protected] ، فستفترض pixi أن لديها دقة 2.

الأفضل أن يكون لديك مسرحية حقا! لكن يرجى طرح الأسئلة لأن هذا قد لا يكون مستقيماً كما يبدو :)

+1

يا مات. هذا يبدو رائعا! تمكنت من الحصول على Canvas لتقديم نصوص وأصول لطيفة ونقية. يبدو أنه يتم التعامل مع الحجم والموضع بشكل صحيح بقدر ما اختبرت.

الشيء الوحيد الذي يبدو أنني أواجه مشكلات معه هو إجراءات رسم رسومات Pixi. لا أستطيع أن أجعل هؤلاء يقدمون بشكل هش. ومع ذلك ، فإن حجم وموضع العرض صحيح.

يجب أن تكون الكائنات الرسومية شبكية العين أيضًا؟ هل تقوم بالتخزين المؤقت كصورة نقطية في ملف
كائن الرسومات بالصدفة؟ أم أنها PIXI.graphics مباشرة؟

في الثلاثاء ، 9 سبتمبر 2014 الساعة 5:32 مساءً ، كتب dcascais [email protected] :

يا مات. هذا يبدو رائعا! لقد تمكنت من جعل اللوحة القماشية لطيفة
ونصوص وأصول واضحة. يبدو أنه يتم التعامل مع الحجم والموضع بشكل صحيح
بقدر ما اختبرت.

الشيء الوحيد الذي يبدو أنني أواجه مشكلات معه هو Pixi.Graphics
إجراءات الرسم. لا أستطيع أن أجعل هؤلاء يقدمون بشكل هش. ال
حجم وموضع العرض صحيح ، رغم ذلك.

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

مات غروفز

_ الشريك الفني_

هاتف: 07708 114496 :: www.goodboydigital.com
الطابق الأول ، الوحدة 9 ب ، كوينز يارد ، وايت بوست لين ، لندن ، E9 5EN
goodboy ©. كل الحقوق محفوظة.

GoodBoyDigital @ عند وصف المشكلة فاتني جزء من التكوين لدي. الإعداد الذي أملكه هو PIXI.Sprite بنسيج يعتمد على كائن PIXI.Graphics.

لقد أنشأت JSFiddle للمساعدة في وصف المشكلة والعرض الناتج:
يعرض هذا إخراج الرسومات الباهتة إذا حصل PIXI.Sprite على نسيج يعتمد على PIXI.
http://jsfiddle.net/hsv8Q/13/

هذا الإعداد مع الاستخدام المباشر لـ PIXI. تعمل الرسومات بشكل جيد:
http://jsfiddle.net/hsv8Q/7/

مسكتك! لا تقلق - أعرف بالضبط سبب ذلك :)
سوف نعلمك بمجرد تعديله. تا!

مرحبًا GoodBoyDigital ، شكرًا لدعم شبكية العين! يأتي في وقت رائع أيضًا ، حيث نحتاجه لعملائنا :)

إحدى المشكلات التي لاحظتها في فرع شبكية العين: التقديم أفضل ، لكن مناطق الإصابة غير محاذية. تم تحجيم اللوحة القماشية ، لكن مناطق الإصابة ليست كذلك. لذا إذا أردت أن ألمس زرًا في منتصف الشاشة ، يجب أن ألمس منتصف الربع العلوي الأيسر من الشاشة لألمسه بالفعل.

في هذه الشاشة ، إذا كنت أرغب في الضغط على الزر الموجود في الوسط ، يجب أن أضرب الدائرة البرتقالية (التي أضفتها لاحقًا كمثال) لأضغط عليها بالفعل. الضربة لا تتسع مع البقية.

حول معلمة "الدقة" في وظيفة autodetectRenderer ؛ يمكننا فقط استخدام "window.devicePixelRatio" أليس كذلك؟

لقد وجدت حلاً سريعًا / قذرًا للمشكلة التي وصفتها أعلاه. يبدو أن المشكلة موجودة في وظائف onTouchStart و onTouchMove و onTouchEnd الخاصة بـ InteractionManager. يمكن إصلاحه عن طريق تغيير حساب touchData.global.x و touchData.global.y في هاتين الدالتين وتقسيمهما على this.resolution.

يبدو أن هذا يحل المشكلة ، ولكن قد يكون هناك حل أفضل بكثير.

تضمين التغريدة
لقد قمت بتعديل عناصر منطقة الإصابة في آخر التزام لي. هل تحاول مع أحدث إصدار الثابتة والمتنقلة؟ تا!

مرحبًا GoodBoyDigital ، شكرًا على الرد السريع والدعم ، ولكن هل من الممكن ألا يكون الالتزام الذي تتحدث عنه موجودًا على Github حتى الآن؟

GillesVermeulen - يجب أن يكون اللمس جيدًا الآن. كنت أقوم فقط بتطبيق تغيير القرار على أحداث الماوس. اسمحوا لي أن أعرف ما إذا كان كل شيء يعمل بشكل جيد بالنسبة لك الآن. شكرا!

بعد الظهر dcascais ! لقد دفعت للتو إصلاحًا لفرع شبكية العين والذي سيتيح لك تحديد دقة وظيفة إنشاء النسيج.

لذلك للحصول على قوام شبكي هش ولطيف ، كل ما يمكنك القيام به:

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

اسمحوا لي أن أعرف كيف يعمل ذلك بالنسبة لك. شكرا!

تضمين التغريدة هذا الآن يعمل بشكل جيد. أنا أقدر التحديث على هذا.

كسؤال عام. هل واجهت أنت أو غيرك أشياء أخرى مثل مشكلات الأداء أو الذاكرة أو التعطل بناءً على هذا التحديث عالي الدقة؟

شكرا لك مات.

سعيد لسماع ذلك!

أتمنى لو كانت هناك رصاصة سحرية لذلك! لسوء الحظ ، ستؤثر الدقة الأعلى على الأداء واستهلاك الذاكرة حيث سيتم مضاعفة كل شيء بشكل أساسي. تشغل صور Retina 2x من الذاكرة وسيحتاج webGL / Canvas إلى عرض مشهد ب 2x أكبر عدد من وحدات البكسل. على أجهزة الذاكرة / وحدة المعالجة المركزية المنخفضة ، قد يكون هذا قاتلًا حقيقيًا ، لذا من المهم جدًا توخي الحذر عند القيام بأي شيء بدقة عالية.

ألن يكون هؤلاء المحسوبون 4x؟ أليس كذلك مضمونًا إلى حد كبير أن الأشخاص الذين لديهم شاشات شبكية سيكون لديهم أجهزة كمبيوتر سريعة أيضًا؟

iirelu صحيح بالفعل! 4x قدر!
نعم ، لا أتخيل أنه ستكون هناك أية مشكلات على أجهزة الكمبيوتر المزودة بشاشة شبكية لأنها ستكون متطورة جدًا.

من المرجح أن تظهر مشكلات الذاكرة نفسها على الأجهزة المحمولة التي تحتوي على شاشات شبكية.

GoodBoyDigital ، شكرًا لتحديث وظائف اللمس. كان نفس الإصلاح المؤقت الخاص بي ويبدو أنه يقوم بالخدعة.

عن الأداء: منذ وقت قريب ، كنت أختبر الأشياء في CocoonJS على IOS7. الأداء أفضل بالتأكيد مقارنةً بـ iOS Webview القياسي الذي تستخدمه أشياء مثل Phonegap ، ولكن يبدو أن أشكال الرسم مرهقة للغاية والأشكال ليست مصقولة كما هو الحال في Safari. أتخيل أن هذا مرتبط بـ CocoonJS وليس له علاقة كبيرة بـ Pixi.

بمجرد تطبيق مرشح على نسيج شبكية العين (@ 2x) ، يبدو أن جميع المواضع متوقفة.

شكرا على التنبيه @ Joomoreno ! سوف نتأكد من إلقاء نظرة: +1:

مجرد سؤال صغير حول واجهة برمجة التطبيقات التي تقدمها: ألا يوجد صدام بين PIXI.autodetectRenderer(width, height, optionObject) و PIXI.autodetectRenderer(width, height, view, antialias, transparent )؟
هل سيجعل ذلك الوسيطة optionObject الوسيطة السادسة من التوقيع الثاني كما هو موضح في src/pixi/utils/Detector.js ؟ لست متأكدًا تمامًا من أي مكان آخر أضعه فيه ، لأن الحجة الثالثة هي عنصر DOMElement ، أليس كذلك؟

سيستخدم الإصدار التالي من pixi توقيع الأسلوب الجديد ، وهذا تغيير متقطع.

englercj شكرا جزيلا

يحتوي كائن الخيارات على جميع الخيارات السابقة والخيارات الجديدة. لا تتم إزالة الوظيفة ، ما عليك سوى تمرير الخيارات بشكل مختلف:

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

أوه ، سهل! شكرا جزيلا على هذا. : +1:

دعم شبكية العين موجود في فرع التطوير الآن. الرجاء إخباري إذا وجد أي شخص أية مشكلات به: +1: الإغلاق حاليًا.

أواجه مشكلة مع macbook pro الشبكية.

أنا لا أستخدم {resolution:2} .

يعرض عرض المرحلة وحدات البكسل الشبكية الحقيقية. في حالتي هو 2540 بكسل. يتم عرض الأنسجة بضعف حجمها كما أن عرضها ليس بدقة 1: 1 بكسل شبكية العين أيضًا. لذا فإن الصورة مقاس 300 × 200 تشغل 600 × 400 بكسل شبكية ، لكن العرض يُرجع 300.

هل هذا سلوك متوقع؟

PierBover نعم ، لم يتغير ارتفاع / عرض الكائن فعليًا. يتم تقديمها فقط بدقة مختلفة.

englercj لكن كيف توجد أبعاد في البكسل الحقيقي

مرحبًا يا رفاق ، هل أفعل شيئًا خاطئًا هنا. إذا قمت بعمل دقة CanvasRenderer الخاصة بي 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

سؤال StackOverflow
http://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size

في هذا العدد وفي منشور المدونة هذا http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ تم ذكر صور شبكية العين لتحتاج إما @ 2x أو a @ x2 قبل الامتداد . أفترض أن الصحيح هو @ 2x . هل هذا صحيح؟

@ 2x صحيح. يمكن أن يكون اسم مجلد أو ملحق باسم الصورة.

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

Adireddy شكرا. هذا نصف المعركة. هل لديك أي فكرة عن سبب تحجيم لوحة الرسم الخاصة بي بدلاً من زيادة الدقة؟

نفس المشكلة هنا لشبكية العين ، أي استخدام للقرار: 2 ، يجعل بعض PIXI.Text موضع إرساء خطأ. لا تساعد إعادة قياس حجم اللوحة القماشية في CSS كثيرًا. اضطررت إلى ضبط الدقة على 1 ، ومضاعفة حجم خط النص الخاص بي ، ثم تكبيره إلى النصف.

وحتى مع ذلك ، لا يزال النص لا يبدو سلسًا.

مرحبًا Elyx0 ، يمكنك تجربة المكون الإضافي النصي الخاص بي للجوال المتاح هنا: https://github.com/JiDW/pixi-cocoontext

هل يحل مشكلتك؟

مرحبًا JiDW ، لقد

تضمين التغريدة

أفكر في دعم أجهزة DPI عالية في مشروعي ، لذلك أتساءل:

تم تحجيم اللوحة القماشية ، لكن مناطق الإصابة ليست كذلك.

هل تم حل هذا في PixiJS؟ (على سبيل المثال في إصدار أحدث / أحدث)

يا tobireif ، أعتقد ذلك نعم. لم تواجه المشكلة لفترة طويلة ، ولكن هذا مع Pixi v2. لا أعتقد أنها مشكلة في الإصدار الأحدث أيضًا.

تضمين التغريدة شكرا!

طريقة CSS عملت معي باستخدام Canvas (بدون 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; }
فقط في حالة هذا يمكن أن يساعد أي شخص.

أهلا !

أواجه مشكلة في مشروعي الأخير: http://romaincazier.com/davatars/

لا يمكنني الحصول على دقة البكسل الصحيحة على الكائنات الخاصة بي ... لا أعرف ما إذا كان الأمر يتعلق بجهاز العرض أو الرسومات التي قمت بإنشاء الأنسجة منها ، ولكن في كلتا الحالتين قمت بإضافة window.devicePixelRatio ولكن لا يبدو ذلك أن يكون لها أي تأثير.

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.