Pixi.js: الرسوم المتحركة المتذبذبة لأوراق الرموز المتحركة على نظام iOS

تم إنشاؤها على ١٦ فبراير ٢٠١٧ · 29تعليقات · مصدر: pixijs/pixi.js

مثال: http://moonrat.co.uk/html5/pixi-ios-animation-bug/

ما تراه هو 3 أحجام للرسوم المتحركة ، x0.5 في الأعلى ، ثم x0.75 في المنتصف و x1 في الأسفل. على الجانب الأيسر ، يتم أخذ مسار العرض العادي ، وعلى الجانب الأيمن ، تستخدم الرسوم المتحركة الثلاثة صورة بيكسي.

الآن ، أرى فقط هذه المشكلة على أجهزة iOS في وضع WebGL_. أي متصفح آخر ، حتى Safari على جهاز Mac ، يعمل بشكل جيد للغاية. iOS في وضع Canvas ، جيد تمامًا. لكن أجهزة iOS (iPads و iPhone) التي تستخدم WebGL ...

اقترح ivanpopelyshev إعطاء pixi-picture فرصة لتقديم عرض أكثر دقة ، وهو مفيد في معظم الأجهزة ، ولكن ليس على الإطلاق ، ونادرًا ما يحل المشكلة

فيما يلي قائمة بكيفية ظهور جميع أجهزة iOS التي أطلعت عليها في المثال أعلاه

iPad Mini 2: 10.0.2 - اهتزازات pixi ، و pixi-picture لا تفعل ذلك
iPad 4: 8.4 - اهتزاز pixi ، صورة pixi تفعل ذلك ، لكن أقل من ذلك
iPad Air: 10.2 - اهتزازات pixi ، صورة pixi لا تفعل ذلك
آيباد إير: 10.3 - بيكسي يهز ، صورة بيكسي لا تفعل ذلك
iPad Air2: 8.3 - اهتزازات pixi ، و pixi-picture تفعل ذلك ، لكن أقل من ذلك

iphone 4s: 9.1 - اهتزاز pixi ، صورة pixi تفعل ذلك ، لكن أقل من ذلك
iphone 4s: 9.2.1 - بيكسي يهز ، صورة بيكسي تفعل ، لكن أقل من ذلك
آيفون 5: 9.1 - بيكسي يهز ، صورة بيكسي تفعل أيضًا
آيفون 5: 10.1 - بيكسي يهز ، صورة بيكسي تفعل أيضًا
iphone 5s: 10.0.2 - بيكسي يهز ، صورة بيكسي لا
iphone 6: 8.2 - اهتزاز pixi ، صورة pixi تفعل ذلك ، لكن أقل من ذلك
iphone 6: 10.0.2 - اهتزازات pixi ، صورة pixi تعمل ، ولكن أقل من ذلك
iphone 6+: 8.4 - اهتزاز pixi ، صورة pixi تفعل ذلك ، لكن أقل من ذلك
iphone 6+: 9.2.1 - اهتزازات pixi ، صورة pixi ، ولكن أقل من ذلك
iphone se: 10.2 - pixi shakes، pixi-picture لا
آيفون 7: 10.2 - بيكسي يهز ، صورة بيكسي تفعل ، لكن أقل من ذلك

أيه أفكار؟

💾 v4.x (Legacy)

مصدر

themoonrat

👍4

التعليق الأكثر فائدة

إذا كانت المشكلة هي مجرد نقوش متحركة متذبذبة على IOS ، فقم بإجراء "إذا كان نظام التشغيل iOS ، فقم بتعيين جزء الدقة على مرتفع".
إذا لم يكن ios ، فقد تكون المكوِّن الإضافي للصورة مطلوبًا. ولكن لم يكن ذلك لمشكلاتي في نظام iOS فقط :)

themoonrat في ٢٠ ديسمبر ٢٠١٧

❤1 👍1

ال 29 كومينتر

معلومات إضافية ؛ لا يحدث هذا التذبذب في آخر pixi v3: http://moonrat.co.uk/html5/pixi-ios-animation-bug-v3/

themoonrat في ١٦ فبراير ٢٠١٧

v3 أفضل؟ هذا ممتع

ivanpopelyshev في ١٦ فبراير ٢٠١٧

لدي نفس مشكلة "التذبذب" على iOS فقط عند تدوير بعض الأشكال (يحدث ذلك عندما تتحرك الزاوية حول 0). لا يمكن الرجوع إلى الإصدار 3 ...

LePhasme في ١٧ فبراير ٢٠١٧

الاختلاف الوحيد الذي أعتقد أنه يمكن أن يكون هو أننا نقوم بتخزين بيانات الرأس في مصفوفات float32 في الإصدار 4؟ ربما مسألة دقة؟

GoodBoyDigital في ١٧ فبراير ٢٠١٧

GoodBoyDigital لقد اختبرت ذلك اليوم ، وقال themoonrat إنه نفسه.

ivanpopelyshev في ١٧ فبراير ٢٠١٧

رائع - ربما دقة التظليل؟

GoodBoyDigital في ١٧ فبراير ٢٠١٧

هل يستحق الاختبار مع وضع roundPixels على خطأ لمعرفة ما إذا كان ذلك يوقفه؟

يوم الجمعة ، 17 فبراير 2017 الساعة 16:13 كتب Mat Groves [email protected] :

رائع - ربما دقة التظليل؟
-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/pixijs/pixi.js/issues/3742#issuecomment-280692953 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AAipZJ8DLKkA3bRJQIOYcmTDpXZgfTehks5rdccygaJpZM4MDJtw
.

macguffin في ١٧ فبراير ٢٠١٧

RoundPixels خاطئة بشكل افتراضي ، لقد قمت بفحصها بالفعل.

ivanpopelyshev في ١٧ فبراير ٢٠١٧

انتظر ، انتظر ، هذا ذكرني!

ivanpopelyshev - أنت تعرف كيف طلبت مني تغيير دقة التظليل الافتراضية إلى highp ولم يغير أي شيء. حسنًا ، لقد جربت ذلك للتو في نسختك الجديدة التي أعطيتني إياها هذا الصباح ، وهي _ تفعل_إصلاحها!

themoonrat في ١٧ فبراير ٢٠١٧

حسنًا ، هذا غريب.
وبالتالي.
حتى الفرع الحالي ، ديف ، مع highp لأعمال الدقة. ومع ذلك....

PIXI.settings.PRECISION = 'highp'
لا يعمل
إذا انتقلت مباشرة إلى pixi.js وقم بتحرير ملفات
PRECISION: 'mediump',
ل
PRECISION: 'highp',
ثم يعمل.

themoonrat في ١٧ فبراير ٢٠١٧

لذا ، دقة عالية + قيم مزدوجة؟ يبدو أن التحويل المزدوج> float-> highp يعد أمرًا سيئًا لأجهزة iphone / ipad. أعتقد أن هذا لأنه لا يتم تقريبه ، ولكنه في الواقع يقطع الأشياء كثيرًا.

ivanpopelyshev في ١٧ فبراير ٢٠١٧

لذلك يبدو أن هذه مشكلة لا يتم التقاطها بدلاً من أي شيء آخر

themoonrat في ١٧ فبراير ٢٠١٧

👍1

التقاط لطيف themoonrat

GoodBoyDigital في ١٧ فبراير ٢٠١٧

ك ، لدي إصلاح ؛ يرجع ذلك إلى أسلوب استيراد أحد الإعدادات. يجعله ثابتًا لاستيراد الوقت ، وليس ديناميكيًا كما هو حاليًا. رفع العلاقات العامة قريبا

themoonrat في ١٧ فبراير ٢٠١٧

كما يجب علينا حقًا استخدام Float64Array في Sprrite بدلاً من Float32Array ، مما سيقلل الخطأ قليلاً.

تحرير: لن يكون الأمر كذلك ، ولكن مع بعض الإجراءات الأخرى يمكن :)

ivanpopelyshev في ١٧ فبراير ٢٠١٧

ivanpopelyshev أعتقد أننا بخير كما هي - نقوم بتحميلها كـ float32 لذا لا فائدة من الاحتفاظ بها بدقة مضاعفة ..

GoodBoyDigital في ١٧ فبراير ٢٠١٧

لسوء الحظ ، ما زلت أعاني من اهتزازات على iPad Mini3 مع pixi4.4.1.
أقوم بإعداد PIXI.settings.PRECISION = "highp" يدويًا ، فهل أي شيء آخر يجب أن أفعله؟

Patrick-Hammond في ٣ مارس ٢٠١٧

هل ترى تحذير الإيقاف في وحدة التحكم؟ إذا كانت الإجابة بنعم ، فأنت بالفعل تستخدم 4.4.1.

ما هي حالة الاستخدام الخاصة بك؟ فقط عدد قليل من العفاريت على خشبة المسرح؟

ivanpopelyshev في ٣ مارس ٢٠١٧

نعم ، أشاهد تحذيرًا بإيقاف PIXI.settings.PRECISION_FRAGMENT.
يحتوي الاختبار الخاص بي على 1 AnimatedSprite يتم تشغيله بسرعة 24 إطارًا في الثانية (السرعة 0.4).
تم إنشاء الرسوم المتحركة باستخدام TexturePacker وأبعاد النسيج الأساسي هي POT (2048 × 2048)
في 4.4.1 تذبذب أقل من ذي قبل ، لكنه لا يزال اضطرابًا ملحوظًا.

Patrick-Hammond في ٣ مارس ٢٠١٧

وماذا لو كنت تستخدم عارض الصور البيكسي لذلك؟ فقط أضف هذا: https://github.com/pixijs/pixi-picture/tree/master/bin واكتب

sprite.pluginName = 'picture';

ivanpopelyshev في ٣ مارس ٢٠١٧

رائعة! باستخدام pixi-picture تبدو مثالية :)
إذن هذا هو عارض الرموز البديلة؟
في أي الحالات يجب أن نستخدمها؟ (إلى جانب هذه الحالة الواضحة). هل يمكن استخدامه كعارض عام (يدعم الدُفعات متعددة الأنسجة) أم أنها ذات غرض محدد أكثر؟

Patrick-Hammond في ٣ مارس ٢٠١٧

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

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

ivanpopelyshev في ٣ مارس ٢٠١٧

لمعلوماتك:
PIXI.settings.PRECISION_FRAGMENT = 'highp';
يحل الرسوم المتحركة المتذبذبة لنظام ios بالنسبة لي بدون أي مكونات إضافية

ملاحظة -ivanpopelyshev ، لقد جعلت PRECISION_VERTEX "highp" افتراضيًا لحل هذه المشكلة ، ولكن ربما اخترت الخيار الخطأ؟ هل هناك أي سلبيات في لعبتي لتقليلها إلى مستوى "متوسط"؟
pps - هل يجب أن نجعلها بحيث يتم إرجاع أي إعداد "highp" إلى إصدار "mediump" إذا تم تمكين الوضع القديم؟

themoonrat في ١٥ مارس ٢٠١٧

لدي نفس المشكلة وأنا أستخدم pixi v4.6.2. إنه خطأ حرج للغاية بالنسبة لي. ivanpopelyshev ، هل قام أحد بحل هذه المشكلة؟