الدرس 8 من 10
ورقة الإطارات
- 14 دقيقة
- 5 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
أيّ خلية ترسم، ومتى
الشرح
الشخصية المتحرّكة في ألعاب البكسل صورة واحدة كبيرة — ورقة إطارات — مقسومة شبكةً من خلايا متساوية، في كل خلية لقطة. والتحريك أن ترسم في كل لحظة خلية مختلفة منها.
وdrawImage بتسعة وسائط تقصّ من المصدر وترسم القصاصة: drawImage(sheet, sx, sy, sw, sh, dx, dy, dw, dh). فالسؤال كله: أين الخلية رقم frame؟ عمودها باقي قسمته على عدد الأعمدة، وصفّها ناتج القسمة مقرّبًا إلى الأسفل.
والفخّ الشائع أن تتقدّم إطارًا مع كل استدعاء لـ requestAnimationFrame: فتركض الشخصية على شاشة 144 هرتز أسرع منها على 60 بنحو مرّتين ونصف. الإطار يُحسب من الزمن المنقضي: الثواني مضروبة في fps ومقرّبة إلى الأسفل، ثم باقي القسمة على count ليعود إلى الأول بعد الأخير.
المطلوب
اكتب frameRect(frame, cols, w, h) تُرجع { sx, sy, sw, sh } لخلية الإطار في ورقة من cols عمودًا، كل خلية w × h. واكتب frameAt(t, fps, count) تُرجع رقم الإطار بعد t ثانية. الورقة نفسها تُرسم في الكود على canvas خفية، فلا صور من الشبكة.
معايير التصحيح
5 معايير- الإطارات تتتابع في الصفّ الأول
- بعد آخر عمود ينزل صفًّا
- الخلية المستطيلة: w للأعمدة و h للصفوف
- الإطار من الزمن و fps
- يعود إلى الأول بعد الأخير