ورقة الإطارات

الشخصية المتحرّكة في ألعاب البكسل صورة واحدة كبيرة تُسمّى ورقة الإطارات (sprite sheet)، وهي مقسومة إلى شبكة من خلايا متساوية، في كل خلية لقطة من الحركة، والتحريك أن ترسم في كل لحظة خلية مختلفة منها.

وحين تستدعي drawImage بتسع قيم فإنها تقصّ جزءًا من الصورة الأصلية وترسمه، هكذا: drawImage(sheet, sx, sy, sw, sh, dx, dy, dw, dh). فكل ما تحتاج إلى معرفته هو مكان الخلية رقم frame، فعمودها هو باقي قسمة رقمها على عدد الأعمدة، وصفّها هو ناتج القسمة مقرّبًا إلى الأسفل.

والخطأ الشائع أن تنتقل إلى الإطار التالي مع كل استدعاء لـ requestAnimationFrame، فتركض الشخصية على شاشة 144 هرتز أسرع منها على شاشة 60 هرتز بنحو مرّتين ونصف. والصحيح أن تحسب رقم الإطار من الزمن المنقضي، فتضرب الثواني في fps وتقرّب الناتج إلى الأسفل، ثم تأخذ باقي قسمته على count حتى يعود إلى الإطار الأول بعد الأخير.