Lynda HTML5 For Flash Developers

اگر شما تاکنون هرگونه بازی رو با توسعه دهنده فلش انجام داده باشید

احتملا با مفهوم لایه شبح آشنا هستید و این اساساً یه انیمیشن خاص و استخراجی

از هر فریم از نیمیشن هست و اگر اون رو روی یه بیت مپ تنها بزارید و موقع کار با اون

در واقع شما میتوانید فریم تعلق به اون بیت مپ رو خارج و اساساً اون رو در فلش جایگذاری کنید

میشناسن blitting اطلاعات بیت مپ دیتا رو به عنوان استفاده کرده باشید blitting اگر در درست کردن بازی از

وقتی با اُلگو کار میکنیم همون مفاهیم مشابه اعمال میشود و در حال حاضر من

به شما نشون میدم که چطور میتونید یه لایه شبح رو به پروژه‌های اُلگوی خودتون وارد کنید

در فایل تمرینی که اینجاس وجود داره sprite_sheet.png یه تصویر به نام

و این شامل یه انیمیشن هست که توسط کریس جورجینز ساخته شده

که یکی از فلش انیماتورهای برتر هست

پس با این لایه شبح اساساً ما باید این رو بخوابونیم و با استخراج

یه فریم منحصر به فرد و نشون داد پی در پی اون اساساً یه انیمیشن طراحی کنیم

پس اینجا توی ساب‌لایم تکستم قبلاً اُلگومو نصب کردم به رزولیشن 800در600

و این مقدار دهی اولیه یه مرجع برای زمینه برای پیدا کردن متغیر خارجی

است با این روش میتونم init function درون تا از قسمت دیگه جاوا اسکریپتم استفاده کنم

پس وقتی که به صفحه میام اولین کاری که میخوام بکنم

هست sprite sheet PNG بارگذاری

کاری که میخوام بکنم ایجاد یه متغیر به نام new Image هست و مساوی قرار دادنش با IMG

و من میرم که منبع اون رو مشخص کنم پس مینویسم img.src = sprite_sheet.png

و این بلافاصله شروع به بارگذاری تصویر می‌کنه تا وقتی که بارگذاریش تموم بشه

رو قرار بدم onload میرم که دستور که وقتی بارگذاریش تموم شد تندش میکنه

داشته باشمش draw و میرم که توی تابعی به اسم

و این تابع، تابع مکررات نامیده میشه

در واقع وقتی انیمیشنم نمایش داده میشه

پس میرم که اون تابع رو تعریف کنم و این تابع ما میره که از

استفاده کنه request animation frame API که مسئولیت رسیدگی به حلقه انیمیشن ما رو داره

پس من باید در بالای صفحه اون رو وارد کنم پس من برچسب اسکریپتشو میزارم

الان من اون فایل جاوا اسکریپت رو روی دسکتاپم به همراه فایل اِچ‌تی‌اِم‌اِلم دارم پس من فقط

رو وارد کنم raf.javascript باید کد

و اگر نیاز که برگردید و نگاهی به آموزش در قاب درخواست انیمیشن بندازید

اونجا جاییه که جاوا اسکریپتمون رو ایجاد کردیم

انجام بدم draw function اولین کاری که میخوام در هست requestAnimationFrame فراخوانی

عبور میکنه draw function که از همین

و دوباره میگم این همون چیزیه که حلقه ما رو ایجاد میکنه و دوباره میگم، همه اینها میرن

برای شروع مجدد تصویرمون وقتی که تموم شد

پس باید اول متغیرهایی رو که بهشون نیاز دارم ایجاد کنم

پس اولین چیزی که نیاز دارم ایجاد یه شمارشگر برای فریمی که روش هستم هست

و میرم که اون رو متغیر شمارشگر بزارم و اون رو در ابتدا صفر میزارم چونکه

فریم 0 چیزیه که اولین بار باهاش به انیمیشن اومدیم

و میرم که دوتا متغیر دیگه ایجاد کنم یکی رو ایکس و دیگری رو وآی

و اون میره که توی صفحه بزرگ شبحمون جایی رو که پیکسلمون ازش استخراج میشه رو میسنجه

و ما میریم که محاسباتمون رو پایین انجام بدیم draw function

باشه، پس الان میخوام محاسبه ایکس و مقدار وآی رو انجام بدم

پس میتونیم یه نگاهی به لایه شبحون بندازیم پس بزارید برم روی صفحه دسکتاپم ، و

دوباره لایه شبح رو بیارم بالا پس ما یه چیزایی درموردش میدونم

در واقع ما 9 فریم انیمیشن در طولش داریم و ما میدونیم که کل تعداد فریمهای یه انیمیشن 150هست

پس ما میتونیم از این دانشمون برای نوشتن کد، برای استخراج فریم صحیح استفاده کنیم

پس اولین چیزی که میخوام انجام بدم محاسبه مکان ایکس برای استخراج اون فریم هست

پس ایکس برابر است با و حالا متغیر شمارشگرمون رو قرار میدیم

چیزی که به ما میگه چه تعداد فریم در حال حاضر داریم و ما میریم که از عملگرها استفاده کنیم

و اساساً میگیم 9% و برمیگرده و یادآوری میکنه وقتی اون اتفاق می‌اُفته

و میرم که اون رو ضربدر مقدار 212کنم و دلیل این اینه که هر فریم در انیمیشن

212پیکسل عرض و 201پیکسل ارتفاع داره