بازی اسپرایتهای متحرک
این پروژه بیشتر یک دمو است تا یک بازی. نشان میدهد شخصیتهای بازیهای دوبعدی چطور راه میروند. توی بازیهای قدیمی، وقتی شخصیت جلو میرود پاهایش هم تکان میخورد. همین جزئیات کوچک، راه رفتن را باورپذیر میکند.
روی دکمههای جهت ضربه بزن تا شخصیت بچرخد. با فلشهای کناری هم شخصیت را عوض کن. روی کامپیوتر کلیدهای جهتدار هم کار میکنند. 🚶
حالا خودت بازی کن
روی دکمههای جهت ضربه بزن تا جهت شخصیت عوض شود. با فلشهای کناری شخصیت را عوض کن. روی کامپیوتر کلیدهای جهتدار هم کار میکنند. به پاهایش دقت کن. 🚶🎮
دیدی؟ چند تصویر ثابت، کنار هم، حس حرکت ساختند. 🌟
اسپرایتشیت چیست؟
راز کار یک فایل تصویری است به نام اسپرایتشیت (sprite sheet). این یک عکس بزرگ است که چند فریم (frame) از شخصیت را کنار هم دارد. هر فریم یک حالت از راه رفتن را نشان میدهد. پای راست جلو، هر دو پا کنار هم، پای چپ جلو.
اسپرایتشیت ردیفبندی هم دارد و هر ردیف به یک جهت نگاه شخصیت مربوط است. پس همین که ردیف را عوض کنی، جهت شخصیت هم عوض میشود. 🖼️
CSS چطور شخصیت را راه میبرد؟
عنصر شخصیت یک قاب کوچک با اندازهٔ ثابت است، مثلاً ۳۲ در ۳۲ پیکسل. اسپرایتشیت پسزمینهٔ همین قاب است. قاب فقط یک فریم را نشان میدهد و بقیهٔ عکس بیرون میماند. پس برای دیدن فریم بعدی کافی است عکس پسزمینه را کمی جابهجا کنی.
این جابهجایی کار background-position است. برای فریم اول مقدارش 0 0 است و برای فریم دوم -32px 0 میشود. یعنی عکس ۳۲ پیکسل به چپ میرود و فریم بعدی جلوی قاب مینشیند.
مقدار عمودی هم ردیف را عوض میکند و جهت شخصیت را تغییر میدهد. حالا همین که این جابهجاییها سریع پشت هم بیایند، چشم تو راه رفتن میبیند. 👀
بررسی کن چقدر یاد گرفتی
یک سوال کوتاه دربارهٔ همین دمو. جواب درست را انتخاب کن.
در این دمو، چه چیزی انیمیشن راه رفتن شخصیت را میسازد؟
همهٔ فریمهای شخصیت داخل یک عکس بزرگ کنار هم نشستهاند. اسم این عکس اسپرایتشیت (sprite sheet) است.
عنصر شخصیت یک قاب با اندازهٔ ثابت است. همین عکس هم پسزمینهٔ آن است. با تغییر background-position عکس زیر قاب سُر میخورد. هر بار یک فریم تازه جلوی قاب میآید.
مقدار افقی فریم بعدی را میآورد. مقدار عمودی ردیف را عوض میکند، یعنی جهت نگاه شخصیت. مزیت این روش هم روشن است. مرورگر بهجای دهها فایل عکس، فقط یک فایل میگیرد.