فصل دوم :آشنایی با اکشن ها

آشنایی با اکشن ها:

Action عبارت است از رفتار خاصی که ما برای رسیدن به  هدف مورد نظر  بر روی اسپرایت اعمال می کنیم .انجین cocos2d-x  از اکشن های متفاوتی پشتیبانی می کند که در پروژه نمونه می توانید آنها را مشاهده کرده و فراخور نیاز از آنها استفاده کنید .

مثال های زیر همگی گونه ای از این اکشن ها هستند :

cc.moveTo/cc.moveBy:این اکشن باعث جابه جای اسپرایت به محل تعین شده می شود .

cc.scaleTo/cc.scaleBy: باعث تغیر اندازه اسپرایت به اندازه مورد نظر می شود .

cc.rotateTo/cc.rotateBy : باعث چرخش اسپرایت با زاویه مورد نظر می شود .

cc.jumpTo/cc.jumpBy: باعث جابه جایی به نقطه مورد نظر همراه با حرکت عرضی و طولی می شود که حالتی شبیه پرش را براساس  اندازه حداکثر ارتفاع و تعداد پرش  ایجاد می کند .

و....

برای استفاده از هر کدام از این اکشن ها باید با توجه به مقادیر ورودی یک نمونه از آنها را  ایجاد کرده و از طریق متد runAction  از کلاس اسپرایت اقدام به اجرای اکشن مورد نظر کرد.

به طور مثال:

 

var actionTo = cc.moveTo(2, cc.p(100, 100));

 

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

دوباره اعلام می کنم که بهترین راه برای اشنایی هر چه بیشتر با تمامی اکشن ها مراجعه به پروژه test  همراه انجین است که می توانید مثال های متنوعی از انواع اکشن ها همراه با نحوه استفاده از آنها را مشاهده کنید .

• اکشن ها را می توان به صورت دنباله وار به دنبال هم اجرا کرد. با استفاده از  cc.sequence دنباله ای از اکشن ها را می توانید  اجرا کنید .

     

var actF = cc.sequence(act1, act2, act3, act4, act5, act6, act7, act8);

 

• اکشن ها را می توان به صورت همزمان با هم توسط  اکشنcc.spawn  اجرا کرد:

 

var act= cc.spawn( a1, a2, ..., aN );

 

• اکشن ها را می توان به صورت معکوس اجرا کرد.

 

var actionBy = cc.rotateBy(2, 360);
var actionByBack = actionBy.reverse();

 

• اکشن ها را می توان به صورت تکرار دائم اجرا کرد .

 

var a = action.repeatForever();

 

بکار گیری اکشن ها :

پس از آشنایی کلی با اکشن ها حال نوبت استفاده از آن در پروژه FlappyBird  می رسد .

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

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

برای درک بیشتر این کار را با ایجاد سه اکشن انجام می دهیم

اکشن اول باعث تغیر سایز دکمه به اندازه 0.2  می شود در مدت 0.1 ثانیه می شود .

 

var action1=cc.scaleTo(0.1, 1.2, 1.2);

 

اکشن دوم باعث تغیر سایز دکمه به سایز اصلی در مدت 0.1 ثانیه می شود .

 

var action2=cc.ScaleTo(0.1,1,1);

 

اکشن سوم هم باعث اجرای دو اکشن قبلی به صورت پشت سر هم می شود .

 

var action3=cc.sequence(action1,action2);

 

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

 

playItem.runAction(action3);

 

همین کار را برای دکمه دیگر هم انجام می دهید .

تکرار دسته ای دستورات در بازه های زمانی :

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

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

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

برای این کار ما نیازمند یک اسپرایت دیگر برای زمین هستیم که آن را همانند اسپرایت اول ایجاد می کنیم .

همچین نیازمند تابعی هستیم که عمل جابه جا کردن و انتقال به انتهای اسپرایت بعدی را انجام دهد که در اینجا از تابع scrollGround استفاده کرده ایم .

همچین در انجین برای آنکه مشخص کنید که یک تابع در بازه زمانی خاصی باید اجرا شود از متد schedule  استفاده کنیم ،بدین صورت که اسم تابع مورد نظر و همچنین بازه زمانی مورد نظر را مشخص می کنیم .برای خروج تابع از حالت اجرا نیز می توان از unschedule  به همراه نام تابع استفاده کرد که بعداَ در پایان صفحه از آن استفاده خواهیم کرد.

برای اینکار در تابع سازنده لایه MainMenuLayer  و پس از تعریف اسپرایت Ground  اقدام به پیاده سازی دستورات زیر می نماییم .

 

        //add Ground1
        var Ground1=new cc.Sprite(res.Ground_png);
        Ground1.attr({
            x:Ground.x+Ground.width-1,
            y:56
        });
       this.addChild(Ground1,1);

       //run function scrollGround in loop with delay 0
       this.schedule(scrollGround,0);

       //scroll Ground Sprites and move it
       function scrollGround (dt){
         cc.log("Scroll");
         Ground.x=Ground.x-1;
         Ground1.x=Ground1.x-1;
         if(Ground.x+Ground.width/2<0){
               Ground.x=Ground1.x+Ground1.width-5;
         }

         if(Ground1.x+Ground1.width/2<0){
               Ground1.x=Ground.x+Ground.width-5;
         }
       };

 

در این بخش فقط تغیرات در فایل app.js ایجاد شد به همین دلیل فقط این فایل برای مطالعه قرار داده شده است .

دانلود