Arvanttt

تند و سریع

Arvant

تند و سریع












پاک سازی پروژه نمونه

يكشنبه, ۱۶ شهریور ۱۳۹۳، ۰۲:۱۳ ب.ظ

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


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

<script src="main.js"></script>


در فایل main.js خط زیر وظیفه شروع پروژه ما را دارد

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

حالا در اینجا لازم است تا با چند مفهوم بنیادی در cocos آشنا شویم :

  • Scene: هر بازی حداقل یک Scene دارد و در یک بازه زمانی فقط یک Scene قابل نمایش است .یک Sceen را می توان کل صفحه نمایش در نظر گرفت که تمامی المان هایی که بر روی صفحه بازی می بینیم جزئی از این Scene هستند.یک بازی می تواند شامل چندین Scene باشد مثلا هر کدام از بخش های صفحه امتیازات ، منوی شروع بازی ، لوگوی آغازین بازی ، صفحه راهنمایی و ... همگی می تواند در Scene های جداگانه قرار بگیرند .
  • Layer: لایه ها را می توان جهت دسته بندی مجموعه خاصی از اجزای مرتبت در نظر گرفت ، اندازه و ترتیب نمایش لایه ها قابل تغیر است و به راحتی می توان از آنها برای مدیریت دسته ای عناصر استفاده کرد. مثلاَ لایه مربوط به امتیازات که حاویی امتیازات کسب شده ، جان های مانده ، ستاره های گرفته شده یا هر چیز دیگر باشد .خود بازی می تواند شامل لایه های مختلفی پس زمینه ، متن بازی و پیش زمینه باشد .این عنصر به صورت پیش فرض دارای هیچ مشخصه بصری خاصی نیستند ولی می توان با تغیر رنگ پس زمینه یا قرار دادن عکس آنها را از هم تمیز داد .در آینده بیشتر با لایه ها آشنا خواهید شد .
  • Sprite : در کل یک بازی را می تواند مجموعه ای از Sprite ها در نظر گرفتن که هر کدام طبق رفتاری خاص یک کار مشخص را انجام می دهند . صفحه پس زمینه یک sprite است، شخصیت اصلی بازی یک sprite است ، تمامی کاراکتر ها و عناصر بصری موجود در بازی نیز یک Sprite هستند .
  • director: این کلاس وظیفه مدیریت Scene های بازی را به عهده دارد و برای اجرای یک Scene یا جا به جایی بین Scene ها و یا توقف و از سر گیری Scene ها از این کلاس استفاده می کنیم .

حالا با توجه به تعاریف بالا عبارت خط زیر در فایل main.js

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

این مفهوم را می رساند که پس از ایجاد یک شی از کلاس HelloWorldScene که خود یک کلاس مشتق شده از کلاس Scene است ، این کلاس را با استفاده از کلاس director بار گذاری و اجرا می شود.
کلاس HelloWorldScene در فایل app.js به صورت زیر تعریف شده است .

var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});


فکر می کنم این بخش نیز کاملاَ مشخص است ، در اینجا پس از فراخوانی سازنده والد توسط this._super اقدام به ایجاد یک لایه با نام layer از کلاس HelloWorldLayer شده است و سپس لایه ایجاد شده توسط this.addChild(layer ) به Scene اضافه شده است .
بعد از ایجاد Scene نوبت به ایجاد لایه میرسد که این کار با مشتق کردن یک کلاس از کلاس Layer شروع می شود .

var HelloWorldLayer = cc.Layer.extend


این کلاس حاوی یک سازنده است که با تابعی به نام ctor تعریف شده است .
در این تابع پس از فراخوانی this._super که در سازنده اجباری است نوبت به ایجاد دکمه ای میرسد که به عنوان دکمه خروج در نظر گرفته شده است
در اینجا به صورت کلی یک شی از نوع MenuItemImage ایجاد شده است که حاوی دو عکس برای خروج از برنامه است ولی تنها وظیفه ای که برای آن در نظر گرفته شده است چاپ عبارت خروج از برنامه در کنسول توسط دستور cc.log("Menu is clicked!"); است .در آینده بیشتر با این عناصر که جزو عناصر کاربردی در ایجاد رابط کاربری هستند آشنا خواهید شد .

var closeItem = new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});

var menu = new cc.Menu(closeItem);
menu.x = 0;
menu.y = 0;
this.addChild(menu, 1);

در ادامه یک فیلد متنی ایجاد شده است که وظیفه نمایش HelloWorld را بر عهده دارد .

var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
helloLabel.x = size.width / 2;
helloLabel.y = 0;
this.addChild(helloLabel, 5);


در این بخش نکته ای که مهم است شیوه مختصات در cocos است و اشاره به این نکته الزامی است که مبدا مختصات در cocos گوشه سمت چپ و پایین است .
اما خاصیت
در ادامه تصویر پس زمینه هم به لایه اضافه شده است .

this.sprite = new cc.Sprite(res.HelloWorld_png);
this.sprite.attr({
x: size.width / 2,
y: size.height / 2,
scale: 0.5,
rotation: 180
});
this.addChild(this.sprite, 0);

اما یکی از توانایی های عناصر اجرای یک سری رفتار تحت عنوان Action است که انجین دارای طیف وسیعی از این Action هاست که می توانید برای مقاصد خاص از آن استفاده کنید در این پروژه دو اکشن یکی برای متن Hello World و دیگری برای تصویر پس زمینه در نظر گرفته شده است که در هنگام اجرای پروژه شاهد آن بوده اید .

this.sprite.runAction(
cc.sequence(
cc.rotateTo(2, 0),
cc.scaleTo(2, 1, 1)
)
);
helloLabel.runAction(
cc.spawn(
cc.moveBy(2.5, cc.p(0, size.height - 40)),
cc.tintTo(2.5,255,125,0)
)
);


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

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

نظرات  (۲)

با سلام و تشکر،

۱. اگر indent ها را اعمال کنید کدها خیلی بهتر و خواناتر می شوند.
۲. آیا امکان تعریف مشخصات اشیاء حین ساخته شدن وجود دارد؟ منظورم حذف متدهای ()attr. می باشد.
۳. اگر آموزش بدون نیاز به IDE کوکو باشد خیلی عالی می شود. گویا این نرم افزار برای لینوکس وجود ندارد.

و باز هم تشکر بابت این همت عالی.
پاسخ:
لازم شد مرحله بعدی رو در مورد   webstorme  بزارم
برای لینوکس ترجیحاً از eclipse که رایگان است استفاده شود.

کارهایی که باید برای نصب و ایجاد پروژه نمونه انجام شود:

پس از دانلود cocos2d-js-v3.0.zip آن را از حالت فشرده خارج کنید و در محل ثابت ذخیره کنید. به آن دایرکتوری رفته و دستور زیر را اجرا کنید:

python setup.py

هنگامی که نصب پایان یافت از شما می خواهد که یک دستور را اجرا کنید. چیزی شبیه به این:

source /home/YOUR_USERNAME/.bashrc

این دستور را اجرا کنید تا بتوانید از کنسول کوکو بهره ببرید. در صورتی که وب سروری مانند آپاچی دارید، بهتر است پروژه های خود را جایی درون دایرکتوری
/var/www
بریزید. مثلاُ دایرکتوری
/var/www/cocos2d
را ایجاد و به آنجا بروید و دستور زیر را اجرا کنید:

cocos new FlappyBird -l js -d ./

حالا می توانید از طریق مرورگر به آدرس زیر بروید و پروژه نمونه را ببینید:

http://localhost/coco2d/FlappyBird

چنانچه وب سرور ندارید، به محل نصب پروژه بروید و دستور زیر را اجرا کنید:

cocos run -p web

در این صورت مرورگر شما باز می شود و از طریق آدرس
http://127.0.0.1:8000
پروژه شما به نمایش در می آید.