Arvanttt

تند و سریع

Arvant

تند و سریع












فصل پنجم :مدیریت رویداد ها

دوشنبه, ۲۰ بهمن ۱۳۹۳، ۱۲:۳۸ ب.ظ

در ادامه مبحث بازی پرنده شل و ول به مبحث مدیریت رویداد ها میرسیم .قبلاَ با استفاده از منو ها امکان استفاده از کلیک یا تاچ رو مشاهده کرده بودیم ولی در بعضی از حالت ها مثل کلیک بر روی یک Sprite یا یک Layer باید با استفاده از سیستم مدیریت رویداد انجین  رویداد های مانند کلیک موس ، تاپ در صفحه تاچ یا رویداد های صفحه کلید را مدیریت کنیم .

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

این کار به عهده خودتان.

 

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

 

var listener1 = cc.EventListener.create({
			event: cc.EventListener.TOUCH_ONE_BY_ONE,
			swallowTouches: true,
			//onTouchBegan event callback function                      
			onTouchBegan: function (touch, event) { 
					return true;
			},
			//Trigger when moving touch
			onTouchMoved: function (touch, event) {         
			
			},
			//Process the touch end event
			onTouchEnded: function (touch, event) {         
				cc.log("Touch Layer... ");
				if(!_isStarted)
					_isStarted=true;
				jump();

			}
		});

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

event: cc.EventListener.TOUCH_ONE_BY_ONE,

مشخص می شود که ما نیاز به مدیریت رویداد تاچ داریم .

و پارامتر

swallowTouches: true,

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

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

خب بعد از این پارامتر ها به سه تابع مربوط به رویداد تاچ می رسیم

			//onTouchBegan event callback function                      
			onTouchBegan: function (touch, event) { 
					return true;
			},
			//Trigger when moving touch
			onTouchMoved: function (touch, event) {         
			
			},
			//Process the touch end event
			onTouchEnded: function (touch, event) {         
				cc.log("Touch Layer... ");
				if(!_isStarted)
					_isStarted=true;
				jump();

			}

رویداد onTouchBegan مربوط به زمانی است که کاربر روی صفحه فشار وارد می کند و چنانچه مقدار درست را بازگرداند رویداد های مربوط به onTouchEnded و onTouchMoved در ادامه فراخوانی می شوند .در اینجا می توانید ادامه فرایند بررسی رویداد ها را متوقف یا ادامه دهید .

 

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

 

رویداد onTouchEnded نیز هنگامی که کاربر دست خود را از روی صفحه بر میدارد فراخوانی می شود .

 

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

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

cc.eventManager.addListener(listener1, this);

به این ترتیب اعلام می کنیم که شی listener1 به عنوان رویداد لایه مورد نظر(this در اینجا اشاره به لایه جاری دارد) در نظر گرفته شود.

به این ترتیب کلیه رویداد های تاچ مربوط به لایه به شی listener1 ارسال می شود .

 

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

 

کل کاری که باید انجام می دادیم همین ها بودند و بقیه قضایا مربوط می شود به تعریف تابع update که وضیفه سقوط پرنده را بر عهده دارد و با قرار دادن تابع در یک دوره فراخوانی زمانی در هر بار اجرا مقدار مشخصی از ارتفاع پرنده با توجه به متغیر های _gravity و _velocity کم می شود .

در تابع jump  هم تنها کاری که انجام می دهیم افزایش مقدار _velocity به میزان یک پرش است .

کلیه اعداد مورد نظر در برنامه را می توانید به دلخواه تغیر دهید .

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

this.schedule(update,0.1);
function update(dt){
	if(_isStarted){
		if(_bird.getPositionY()>130){
			_bird.setPositionY(_bird.getPositionY()+ _velocity);
			_velocity-=_gravity;
		}
		else{
		      cc.log("Game Over..");
		      this.unschedule(update);
		      this.unschedule(scrollGround);
		      _bird.stopAllActions();
					
		}
	}
	else{		
		cc.log("Tap To Start");
	}
			
			
};
function jump(dt){
	_velocity=_jump;		
};

 

 

لینک پروژه در gitHub بدون پوشه frameworks

 

 

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

نظرات  (۲)

ممنونم از وقتی که گذاشتید و آموزش را ادامه دادید. چند مورد را خواستم مطرح کنم:

۱- من تابع jump را به جای onTouchEnded درون onTouchBegan فراخوانی کردم.
۲- به نظرم تعریف _isStarted فعلاً کاربردی نخواهد داشت مگر در آینده به کاربرد پیدا کند.
۳- درون تابع update کد زیر را قرار دارم تا پرنده از حد تعیین شده ای بالاتر نرود:

if(_bird.getPositionY() > 480 + _jump)
    _bird.setPositionY(480 + _jump);
با تشکر مجدد از شما.
پاسخ:
اینجا فراخوانی کردن jump داخل began یا ended  فرقی نمیکنه.
isStarted هم فقط به عنوان یک فلگ برای  کلیک اوله و این که کاربر کلیک اول رو نکرده بازی شروع نشود.

if(_bird.getPositionY() > 480) _bird.setPositionY(480);
تست نکردم ولی شاید شرط بالا بهتر باشه
تا آنجا که من متوجه شدم اگر بخواهیم با رویدادهای وب مقایسه کنیم، began همان onmousedown و ended همان onmouseup و moved همان onmousemove است. به نظر من در این بازی اگر از began استفاده شود بهتر است.
درمورد isStarted فکر می کنم نیازی به تعریف چنین فلگی نباشد (من حذفش کردم!).
در مورد اینکه پرنده از حد تعیین شده ای بالاتر نرود، حق با شماست. کد نهایی من این شد:
if(_bird.getPositionY() > size.height)
    _bird.setPositionY(size.height);
ممنونم از توجه تان.
پاسخ:
خواهش میکنم