اختر كثافة بكسلات القماش بشكل متعمد

قم بقياس مربع CSS قبل ضبط وحدات البكسل

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

قارن بين شبكة ذات بكسل واحد وحواف قطرية ونص واجهة مستخدم صغير بعوامل مقياس مثل 1 و1.5 و2. وتحقق من الوضوح والاستجابة. يعد مضاعف devicePixelRatio للجهاز الكامل نقطة انطلاق، وليس قاعدة يجب أن تتبعها كل لعبة؛ يمكن أن يؤدي خفض مقياس العرض إلى تقليل التكلفة على شاشات العرض الكثيفة مع ترك تخطيط CSS دون تغيير.

تعامل مع تغيير الحجم والذاكرة كجزء من الاختيار

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

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

أسئلة عن ⁨نسبة بكسلات الجهاز في Canvas اللعبة⁩