Arvanttt

تند و سریع

Arvant

تند و سریع












فصل اول : اسپرایت ها

پنجشنبه, ۱۰ مهر ۱۳۹۳، ۰۸:۴۸ ب.ظ

فصل اول پس از انجام تغیراتی کوچک بر روی پروژه قبلی به معرفی کلاس اسپریت و همچنین نحوه تعریف دکمه ها می پردازد

 

سایز منابع :

تمام منابع گرافیکی بازی بر اساس سایز 480*320 در نظر گرفته می شود و برای اینکه صفحه بازی طبق همین الگو به نمایش در بیاید در فایل Main.js  در ریشه پروژه مقادیر مورد نظر را به صورت زیر تغیر می دهیم  . با این کار برای انجین مشخص می کنیم که سایز استاندار ما همین سایز است و ما کلیه مقادیر را بر این اساس مقدار دهی می کنیم .

 

cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);

تغیر نام کلاس  ها:

برای شروع از طراحی منوی اصلی بازی شروع می کنیم . برای اینکار نام Scene  را که در پروژه ابتدایی ایجاد شده است از  HelloWorldScene  به MainMenuScene  تغیر می دهیم .همچین عنوان HelloWorldLayer  را به MainMenuLayer تغیر نام می دهیم . این تغیرات باید  در فایل app.js  اعمال شود .همچین به علت تغیر نام کلاس ها باید در فایل Main.js  هم شیء ساخته شده از کلاس MainMenuScene باشد پس تغیرات لازم را نیز در این فایل ایجاد می کنیم .

cc.director.runScene(new MainMenuScene());

آشنایی با Sprite:

Sprite:

یک اسپرایت حاوی یک یا چند تصویر است که در بازی به نمایش در خواهد آمد ، در اصل یکی از بنیادی ترین کلاس های یک انجین کلاس مربوط به اسپرایت هاست .به بیان دقیق تر یک بازی مجموعه ای از اسپرایت هاست که طبق اصول خاصی و پیروی از وردی های کاربر در صحنه به نمایش در می آیند.  قهرمان بازی ، دشمنان ، پس زمینه ها ، تیرهای شلیک شده و ... همگی شیء های از کلاس اسپرایت هستند .اسپرایت ها داری مشخصه های از قبیل اندازه و موقعیت در صفحه هستند که می توان آنها را تغیر داد و یک اسپرایت را در صفحه به حرکت در آورد همچنین اکشن ها یکی از ویژگی های اصلی کلاس اسپرایت هستند  که از طریق اجرای این اکشن ها جلوه های بصری بازی به مراتب زیبا تر می شوند و روند کد نویسی با استفاده از آنها تسریع می یابد از جمله این اکشن ها می توان به حرکت ، چرخش ، پرش ، محو شدن ، ظاهر شدن و .... اشاره کرد.

برای ایجاد اسپرایت در cocos2dx-js  از طریق کلاس cc.Sprite  می تولن یک شی جدید ایجاد کرد ، با توجه به هدف و نیازمندی های ما در مورد اسپرایت مورد نظر می توان فقط یک شیء از اسپرایت ایجاد کرده و از آن استفاده کرد ، مثلاَ اسپرایت مربوط به پس زمینه بازی که گاهاَ ثابت است را می توان به این صورت ایجاد کرد چون نیاز به ایجاد ویژگی های خاصی ندارد .اما اسپرایت ها را می توان توسعه داد یعنی با مشتق کردن یک کلاس از کلاس cc.Sprite  اسپرایت اختصاصی خود را که دارای ویژگی هایی افزون بر کلاس اصلی است ایجاد کنید که در بخش های آینده به این موضوع هم خواهیم پرداخت .فعلا در این بخش کار ما فقط با اسپرایت های نوع اول است .

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

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

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

در ابتدا به سراغ تصویر پس زمینه بازی می رویم و تصویری تحت عنوان Background.png را به پوشه res  کپی می کنیم و سپس در فایل resource.js  متغیر مربوطه را به شکل زیر اضافه می نماییم  .

 

BackGround_png:"res/Background.png"

و سپس اقدام به ایجاد یک شی از کلاس اسپرایت کرده و ان را به لایه MainMenuLayer اضافه می کنیم .برای این کار در کلاس مشتق شده با نام MainMenuLayer  در فایل app.js  شیءی به صورت زیر ایجاد می کنیم .

 

var size = cc.winSize;
var backGround=new cc.Sprite(res.BackGround_png);
        backGround.attr({
            x:size.width/2,
            y:size.height/2,
            scale:1.0,
            rotation:0
          });
this.addChild(backGround,0);

در اینجا شی background  از کلاس cc.Sprite  و با توجه به متغیرres.BackGround_png   که خود حاوی ادرس فایل پس زمینه است ایجاد شده است .

در تابع attr  مشخصه های مورد نظر شیء از جمله محل قرار گیری در صفحه را مشخص می کنیم .این موقعیت توسط دو متغیر(Properties) x,y   مشخص می شوند که با استفاده از شی size  که حاوی مشخصات طولی و عرضی صفحه بازی است مقدار دهی می شوند .

در اینجا ذکر این موضوع ضروری است که ادرس دهی در cocos    از سمت چپ – پایین شروع می شود یعنی مختصات 0و0 در این نقطه لحاظ می گردد و کلیه ادرس دهی ها طبق این نقطه صورت می گیرد .

نکته مهم دیگر خاصیتی تحت عنوان ancher point  است که مشخص می کند که نقطه اتکای شیء ایجاد شده کدام قسمت از شی باشد که به صورت پیش فرض نقطه میانی ، نقطه اتکا لحاظ می گردد. وقتی که اعلام می شود یک شیء در نقطه 100  طولی و 100  عرضی قرار گیرد یعنی اینکه وسط  این شیء(اسپرایت) در این نقطه قرار بگیرد.بهتر است فعلاَ در همین حد اطلاع داشته باشید و در صورت لزوم به مراجع سایت اصلی برای اشنایی بیشتر رجوع کنید .

Scale  :مشخصه میزان کشش تصویر است در اینجا مقدار 1 بیانگر عدم کشش است و فقط جهت آشنایی لحاظ شده است مثلاَ برای آنکه اسپرایت از لحاظ اندازه به نصف کاهش پیدا کند مقدار آن را می توان برابر 0.5 در نظر گرفت .

Rotation  : بیانگر میزان چرخش اسپرایت است که در اینجا با مقدار 0   مقدار دهی شده است و کار خاصی صورت نمی دهد و برای آشنایی درج شده است می توان جهت چرخش اسپریت ها این ویژگی را بر حسب درجه مقدار دهی کرد .

در انتها با استفاده از دستور

this.addChild(backGround,0);

اسپرایت ایجاد شده به لایه اضافه می شود ، ارگومان دوم که با 0 مقدار دهی شده است مشخص کننده Zorder   یا ترتیب قرار گیری اسپرایت ها بر روی هم است و مقدار پایین تر مشخص کننده عمق بیشتر است به عنوان مثال با اضافه شدن شی بعدی با Zorder  بیشتر اسپرایت جدید بر روی اسپرایت قبلی نمایش داده می شود .

با استفاده از همین معلومات می توانید اسپرایت های مربوط به لوگوی بازی ، زمین بازی و پرنده را ایجاد و به لایه اضافه کنید.

دکمه ها :

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

برای ایجاد یک دکمه ابتدا یک شیء از کلاس cc.MenuItemImage ایجاد کرده و تصاویر اول و دوم و تابع را به عنوان پارامتر به آن ارسال می کنیم .سپس پس از تعین مشخصاتی مانند محل قرار گیری این شیء باید به شیء از کلاس cc.Menu مرتبط شود و این شیء جدید به لایه اضافه شود .

 

var playItem = new cc.MenuItemImage(
      res.BtnPlay_png,
      res.BtnPlay_png,
       function () {
         cc.log("Play is clicked!");
       }, this);
      playItem.attr({
            x:90,
            y: 230,
        });
 var playMenu = new cc.Menu(playItem);
        playMenu.x = 0;
        playMenu.y = 0;
 this.addChild(playMenu, 1);

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

Play is clicked!

حالا تمامی المان های را  که در تصویر زیر مشاهده می کنید را می توانید بسازید .برای راهنمایی بشتر کد ها همراه مطلب ارائه می شود اما برای کاهش حجم فایل های اصلی انجین حذف شده و برای استفاده باید آن را در پروژه ای که ساخته اید ادغام کنید البته بهتر است فقط از آن به عنوان نمونه برای درک بهتر استفاده شده و شخصاَ اقدام به تایپ کد ها کنید.

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

دانلود فایل پروژه فصل اول

 

  • موافقین ۳ مخالفین ۴
  • پنجشنبه, ۱۰ مهر ۱۳۹۳، ۰۸:۴۸ ب.ظ
به اشتراک می گذارم : به اشتراک بگذاریم به اشتراک بگذاریم به اشتراک بگذاریم به اشتراک بگذاریم

نظرات  (۳)

ممنون. یه سوال . شما که رزولوشن رو روی 320 در 480 قرار دادی، تکلیف گوشی هایی که رزولوشنشون بالاتره چی میشه ؟ شما خودت بازی neon رو روی چه رزولوشنی قرار دادی ؟
پاسخ:
فعلا این سایز جهت اموزش بهتره.من همیشه این سایز رو سایز استاندارد میگیرم بعد سایز عکسا رو برای رزولیشن های بعدی اماده میکنم.نیازی به تغیر کد نیست اگه سایزا استاندارد باشه انجین بدون مشکل رسورس های گرافیکی رو  کش میاره.البته می تونید برای سایز های مختلف رسورس ها را بسازید و بعد بر اساس سایز صفحه منبع رسورس ها رو انتخاب کنید
آقای ربیعی من تلاش کردم که با cc ide خروجی apk بگیرم ولی نشد . برام نوشت :
build failed
و هیچ توضیح اضافه ای نداده بود. شما میدونید مشکل از چیه ؟
پاسخ:
همین پروژه؟امتحان نکردم باید بزارم بعد عید.فعلا برای گرفتن خروجی عجله نکنید
با تشکر از شما،

آیا بهتر نیست یک منو تعریف کنیم و آیتم های play و score را به آن اضافه کنیم؟ مانند مثال زیر:

var mainMenu = new cc.Menu([playItem, scoreItem]);
پاسخ:
هر جور که کار کنه درسته :)