فصل سوم :انیمیشن

انیمیشن :

در حالت کلی همان طور که یک فیلم حاصل نمایش یک سری عکس پشت سر هم است که با سرعت مشخص چنان حرکت می کنند که تفکیک این عکس ها توسط چشم انسان قابل تشخیص نیست و به همین دلیل این تصاویر به صورت مجموعه عناصری متحرک دیده می شوند انیمیشن های بازی هم از این قانون بهره می برند و با نمایش مجموعه ای از تصاویر حس متحرک بودن را القا می کنند.در یک انجین دو بعدی نیز یک انیمیشن حاصل مجموعه ای مرتب از تصاویر است که در یک بازه زمانی با ترتیب خاص بر روی صفحه نمایش داده می شوند .

معمولاَ برای آنکه انیمیشن هر چه روان تر به نظر برسد حرکات را در تعداد زیادی عکس به نمایش می گذارند که سرعت نمایش این عکس ها به صورت توالی ارتباط خاصی با نرخ نمایش تصور در ثانیه fps دارد.

مثلاَ برای یک متحرکت سازی شاید نیاز به 60 تصویر مجزا داشته باشید که همگی باید در حافظه لود شده و سپس به نمایش در آیند.در اینجا چند نکته مهم به چشم می خورد یکی تعداد زیاد عملیات خواندن و نوشتن ها که باید بر روی رسانه ذخیره سازی انجام شود و سرعت آن به مراتب کمتر از خواندن اطلاعات از روی حافظه اصلی است و بحث دوم مربوط به فضای اختصاصی مربوط به هر تصویر است در حافظه اصلی است که باعث می شود در بلاک های حافظه اصلی مقدار زیادی فضای پرت ایجاد شود .

برای رفع این مشکل معمولاَ تمام تصاویر یک انیمیشن مرتبط به صورت یک فایل واحد در آمده و اطلاعات مربوط به قرار گیری هر فایل در یک ساختیار XML ذخیره می شود تا بتوان محل شروع و اندازه هر تصویر را تشخیص داد .

برای این کار می توان از نرم افزار Texture Packer استفاده کنید که یک نرم افزار اختصاصی و تجاری تحت سیستم عامل مک است استفاده کرد یا انیکه می توان به جای آن از پلاگینی که به این منظور برای Gimp نوشته شده است بهره برد .

در نهااستفاداستفاده استفاد از هرکدام از نرم افزارها به شما دو فایل یکی با فرمت .png که  حاوی تمامی تصاویر به صورت واحد و دیگری فایلی با پسوند .plist است که  شامل اطلاعات نام و مشخصات شروع و اندازه هرکدام از تصاویر فایل اصلی است تحویل داده می شود .

انجین با استفاده از فایل .plist اطلاعات فایل تصاویر را بر اساس نام آنها برای شما بارگذاری کرده و به نمایش در خواهد آورد .

در اینجا ابتدا حالت معمولی یعنی استفاده از فایل های متفاوت را استفاده می کنیم و در متن بازی به سراغ استفاده از فایل انیمیشن و plist فایل ها خواهیم رفت در اینجا ما نیازمند سه فایل که به صورت متوالی نمایی از پرواز پرنده را به نمایش بگذارند داریم.

بعد از اضافه کردن فایل ها در مسیر منابع با نام های Flay1.png ,Flay2.png,Flay3.png این فایل ها را به صورت انیمیشن در آورد و سپس آن را همانند یک اکشن به پرنده نسبت می دهیم .

برای اینکار قبل از اضافه کردن پرنده کد های زیر را قرار می دهیم .

// Manual animation
        var animation = new cc.Animation();
        for (var i = 1; i <= 3; i++) {
            var frameName = "res/Flay" +i+ ".png";
            animation.addSpriteFrameWithFile(frameName);
        }
        animation.setDelayPerUnit(0.1);
        animation.setRestoreOriginalFrame(true);
        var action = cc.animate(animation).repeatForever();
        Bird.runAction(action);

اتفاقی که در اینجا روی داده است ایجاد یک شی از کلاس cc.Animation با نام animation است که فایل تصاویر توسط یک حلقه و با استفاده از متد addSpriteFrameWithFile  به آن اضافه شده است .

setDelayPerUnit برای تاخیر میان نمایش فایل ها استفاده می شود که بستگی به تعداد فایل ها انیمیشن و fps مد نظر شما مقدار دهی می شود در اینجا برای سادگی با مقدار 0.1 مقدار دهی شده است .

setRestoreOriginalFrame بیشتر در انیمیشن هایی که به وسیله فایل های .plist ایجاد می شوند کاربرد دارد و اعلام می کند در صورت اتمام یک دور اجرای انیمیشن آیا در انتها اولین فریم از انیمیشن نمایش داده شود یا اسپریت بر روی همان فریم آخر باقی بماند .

سپس با استفاده از کلاس animate انیمیشن ایجاد شده را به صورت یک اکشن در آورده و آن را به شی Bird انتصاب می دهیم .

بحث مربوط به repeatForever در بحث مربوط به اکشن ها تشریح شد که برای یادآوری این متد باعث می شود که یک اکشن به صورت مداوم اجرا شود .

تمام تغییرات صورت گرفته بر روی فایل app.js صورت گرفته است همچنین سه فایل تصویری مذکور نیز باید در مسیر پوشه منابع res قرار داده شوند که در اینجا همراه مطلب پیوست گردیده اند .

سورس تغییرات