atitit.事件驱动的总结attilax
Keyboard 基于的的ed 与 mouse 基础的ed
Kb base on focus .... Mouse base on mouse move...
游戏开发中一个很重要的功能就是交互,如果没有与用户的交互,那么游戏将变成动画,而处理用户交互就需要使用事件监听器了。
总概:
· 事件监听器(cc.EventListener) 封装用户的事件处理逻辑
· 事件管理器(cc.eventManager) 管理用户注册的事件监听器,根据触发的事件类型分发给相应的事件监听器
· 事件对象(cc.Event) 包含事件相关信息的对象
如何使用呢?首先需要创建一个事件监听器,事件监听器包含以下几种类型:
· 触摸事件监听器 (cc.EventListenerTouch)
· 键盘事件监听器 (cc.EventListenerKeyboard)
· 加速计事件监听器 (cc.EventListenerAcceleration)
· 鼠标事件监听器 (cc.EventListenerMouse)
· 自定义事件监听器 (cc.EventListenerCustom)
在监听器中实现各种事件的处理逻辑,然后将监听器加入到事件管理器中, 当事件触发时,事件管理器会根据事件类型分发给相应的事件监听器。下面以一个简单的示例来演示使用的方法。
##基础知识
###事件 Cocos2d-JS v3.x中事件分发机制进行了重写,事件可以与任意对象绑定,而不是只有Layer才能获取。对象创建自己的事件监听器,然后加入到全局的事件管理器统一管理。
事件监听器有以下几种:
· 触摸事件
· 键盘响应事件
· 鼠标响应事件
· 自定义事件
· 加速计事件
addTouchEventListenser:function(){
this.touchListener = cc.EventListener.create({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
// When "swallow touches" is true, then returning 'true' from the onTouchBegan method will "swallow" the touch event, preventing other listeners from using it.
swallowTouches:true,
//onTouchBegan event callback function
onTouchBegan: function (touch, event) {
var pos = touch.getLocation();
var target = event.getCurrentTarget();
if ( cc.rectContainsPoint(target.getBoundingBox(),pos)) {
cc.log("touched")
return true;
}
return false;
}
cc.eventManager.addListener(this.touchListener,this);
});
上面的代码,首先通过使用cc.EventListener.create创建了一个Touch事件监听器touchListener,然后,通过cc.eventManager.addListener注册监听器到事件管理器。cc.EventListener.create扩展出一个用户监听器。event属性,定义这个监听器监听的类型。swallowTouches属性设置是否吃掉事件,事件被吃掉后不会递给下一层监听器。 onTouchBegan方法处理触摸点击按下事件,我们在这里可以获取到触摸点的坐标pos。event.getCurrentTarget()获取当前事件的接受者,并判断当前的是否点击到了SushiSprite。 在touch事件中,我们还可以添加onTouchMoved/onTouchEnded方法监听touch移动和结束的回调。如果onTouchBegan返回false后onTouchMoved/onTouchEnded不会执行。
在onTouchBegan方法中获取点击点的坐标pos,然后通过cc.rectContainsPoint(target.getBoundingBox(),pos)判断点击的点是否在SushiSprite上
鼠标响应事件 vs 触摸事件
对于PC和超级本,添加鼠标事件的的处理,可以加强用户的体验,其处理逻辑与触摸事件基本一样,多了一些鼠标特有的事件响应,如滚轮事件(onMouseScroll).
模式对话框的实现原理 暂停/恢复 与场景相关(SceneGraph类型)的监听器
开发过程中,我们经常会遇到这样的情况:想要让一个Layer中所有的Node对象的事件都停止响应。 在响应用户事件后,又要恢复该Layer的所有事件响应。如: 用户想要显示一个模式对话框,显示对话框后,禁止对话框后所有对象的事件响应。在用户关闭对话框后,又恢复这些对象的事件响应。
我们只需要暂停根node的事件,就可以让根节点以及其子节点暂停事件响应。 代码如下:
cc.eventManager.pauseTarget(aLayer,true); //让aLayer对象暂停响应事件
而恢复对象的事件响应也非常简单:
cc.eventManager.resumeTarget(aLayer,true); //让aLayer对象恢复响应事件
注意: 第二个参数为可选参数,默认值为false, 表示是否递归调用子节点的暂停/恢复操作.
3.6 使用事件管理器创建用户交互.html