New event manager in Cocos2d-Html5 v3.0

[longyangxi]

That’s great, i created my own InputManager similar with this style in version 2.2.2, it’s very useful!

[Elgan]

wow i love the custom events, and all of this…really nice work!!

[rejemy]

Totally a step in the right direction. Coming from Flash I was pretty shocked that Cocos makes you manage your own event priorities rather than using the scene graph. I would still like the bounds checking to be built in so that any nodes that have width and height set will automatically check their own bounds, but it seems like I should be able to implement that myself to some extent.

[ludingping]

Hi @rejemy,

I think we can add a template event listener (BoundEventListener) to our samples, it can be automatically checking their own bounds.

then we can implement this function easily:
cc.eventManager.addListener(new BoundEventListener(), aSprite);

@ZippoLag
The document of all properties of event, eventListener and eventManager will release later.
I’m so sorry to release later, because I have been busy to fix bugs

[ZippoLag]

@ludingping
That’s alright, I know the release date is pressing and you guys must be juggling priorities.

[ludingping]

Properties and functions list

cc.Event

Properties/functions	Type	Parameters	Usage
getType	Number	no	Gets the event type：TOUCH, KEYBOARD, ACCELERATION, MOUSE, CUSTOM
stopPropagation	void	no	Stops propagation for current event
isStopped	Boolean	no	Checks whether the event has been stopped
getCurrentTarget	cc.Node	no	Gets current target of the event

cc.EventCustom

cc.EventCustom inherits from cc.Event

Properties/functions	Type	Parameters	Usage
setUserData	void	data: user data	Sets user data
getUserData	*	no	Gets user data
getEventName	String	no	Gets event name

cc.EventMouse

cc.EventMouse inherits from cc.Event

Properties/functions	Type	Parameters	Usage
setScrollData	void	scrollX， scrollY	sets scroll data
getScrollX	Number	no	gets scrollX data
getScrollY	Number	no	gets scrollY data
setLocation	void	x, y	Set cursor location
getLocation	cc.Point	no	Get cursor location
getLocationInView	cc.Point	no	Returns the current touch location in screen coordinates
getDelta	cc.Point	no	Get delta data
setButton	void	button	Sets mouse button
getButton	Number	no	Gets mouse button

cc.EventTouch

cc.EventTouch inherits from cc.Event

Properties/functions	Type	Parameters	Usage
getEventCode	Number	no	Gets event code: BEGAN, MOVED, ENDED, CANCELLED
getTouches	Array	no	Get touches of event

cc.EventListener

Properties/functions	Type	Parameters	Usage
checkAvailable	boolean	no	Checks whether the listener is available.
clone	cc.EventListener	no	Clones the listener, its subclasses have to override this method.
create	cc.EventListener	json object	create event listener by json object

cc.EventListener.create parameter details:

event: cc.EventListener.TOUCH_ONE_BY_ONE
optional parameters:

1. swallowTouches, boolean, checks whether swallow touches
2. onTouchBegan, function, Touch began event callback
3. onTouchMoved, function, Touch moved event callback
4. onTouchEnded, function, Touch ended event callback
5. onTouchCancelled, function, Touch cancelled event callback

event: cc.EventListener.TOUCH_ALL_AT_ONCE
optional parameters:

1. onTouchesBegan, function, Touches began event callback
2. onTouchesMoved, function, Touches moved event callback
3. onTouchesEnded, function, Touches ended event callback
4. onTouchesCancelled, function, Touches cancelled event callback

event: cc.EventListener.KEYBOARD
optional parameters:

1. onKeyPressed, function, Key pressed (key down) event callback
2. onKeyReleased, function, key release (key up) event callback

event: cc.EventListener.MOUSE
optional parameters:

1. onMouseDown, function, Mouse down event callback
2. onMouseUp, function, Mouse up event callback
3. onMouseMove, function, Mouse move event callback
4. onMouseScroll, function, Mouse scroll event callback

event: cc.EventListener.ACCELERATION
optional parameters:

1. callback, function, Acclerometer event callback

event: cc.EventListener.CUSTOM
optional parameters:

1. callback, function, Custom event callback

cc.eventManager

Properties/functions	Type	Parameters	Usage
pauseTarget	void	node, recursive	Pauses all listeners which are associated the specified target.
resumeTarget	void	node, recursive	Resumes all listeners which are associated the specified target.
addListener	void	json object	cc.EventListener, node
addCustomListener	void	eventName, callback	Adds a Custom event listener.
removeListener	void	listener	Remove a listener
removeListeners	void	listenerType	cc.Node, recursive
removeCustomListeners	void	customEventName	Removes all custom listeners with the same event name
removeAllListeners	void	no	Removes all listeners
setPriority	void	listener, fixedPriority	Sets listener’s priority with fixed value.
setEnabled	void	enabled	Whether to enable dispatching events
isEnabled	boolean	no	Checks whether dispatching events is enabled
dispatchEvent	void	event	Dispatches the event, also removes all EventListeners marked for deletion from the event dispatcher list.
dispatchCustomEvent	void	eventName, optionalUserData	Dispatches a Custom Event with a event name an optional user data

[ludingping]

More usage about event manager, please see: https://github.com/cocos2d/cocos2d-js-tests/blob/tests_js_3.0/tests/NewEventManagerTest/NewEventManagerTest.js

[longyangxi]

Hi, i just used the new EventManager, my code:

var listener = cc.EventListener.create({
event: cc.EventListener.MOUSE,
onMouseDown: function(event) {
cc.log(“onMouseDown”);
},
onMouseMove: function(event) {
cc.log("mouse move: "+event.getCursorX());
}
});
cc.eventManager.addListener(listener, this);

Then, when i moved the mouse over the screen, there is no “mouse move” log output, but when i dragged the mouse, then the error come:

Uncaught TypeError: undefined is not a function MenuScene.js:178:41
cc.EventListener.create.onMouseMove MenuScene.js:178:41
listener CCEventListener.js:248:37
cc.eventManager._onListenerCallback CCEventManager.js:893:18
cc.eventManager._dispatchEventToListeners CCEventManager.js:564:80
cc.eventManager.dispatchEvent CCEventManager.js:885:18
(anonymous function) CCInputManager.js:417:33

That means on the callback of onMouseMove, the event is null, why? Is there some thing wrong in my code?

Thanks!

[ludingping]

Hi, @longyangxi

Could you please show me the full content of MenuScene.js ?

The codes you’re giving look well, I don’t know which code cause this error.

[longyangxi]

Hi, @ludingping

See the attachment, thanks!
In the 3.0, the mouse move event only occurs on dragging? If that, it’s not good for web browser!

[ludingping]

“In the 3.0, the mouse move event only occurs on dragging? If that, it’s not good for web browser!”

I agree with you. I will fix it soon.

[longyangxi]

[ludingping]

Hi @longyangxi
I used your codes in my application, the event.getCursorX() is undefined, please use event.getLocationX() instead.

[longyangxi]

Thanks! So you should update your document about the new EventManager

[ludingping]

Thank you for noticing. @longyangxi

I will update them soon.

[jiwu_ma]

Hi Lu Sir

小弟愚笨,向您讨教一下…

是否有 “touchDown” or “touchPress” 事件?

在 cc.EventListener.TOUCH_ONE_BY_ONE 监听中.

经debug 观察 当 手指or鼠标 按下时 TouchBegan 只会执行一次,如果没有任何移动的情况下 touchMove不会被执行,手指抬起后 执行 touchEnd

我需要实现当手指按下时记录时间 超过一定时间,被按下的节点响应业务逻辑,就像在手机上拖动图标的效果.

请教这部分应如何实现.

ps:当然,用move是可以实现的,因为当用户按下超过一定时间,就意味着用户需要进行拖动,所以肯定会产生move事件.但这样用户的体验不友好…

感谢…

[ludingping]

Hi @jiwu_ma,

I think you can add a timer when the TouchBegan called, this timer is used by recording how long the TouchBegan called, if the time is greater than your setting time, you can execute your logic, and if touchMove is called, you can remove this timer.

Hopes to help
David

[evolution]

i was created a cc.MenuItemSprite.create() when i want to remove this node,how can i remove the listener manually?

[ludingping]

@evolution
Did you add the menuitemSprite to a cc.Menu object?
If you added it to cc.Menu, please use removeFromParent,

By the way, the listener is inside cc.Menu, cc.MenuItemSprite hasn’t listener.

Best regards
David

[midhunadarvin]

How can i reference any other variable from within the eventlistener , Can you please view this question :

Touch and move one body to move another (chipmunk physics)

I need to move a physics body(say A) by touching and dragging another body(say B). I can’t use joints to link these bodies. Is there anyway i can reference body A in the ontouch listener i have added to B. var listener1 = cc.EventListener.create({ event: cc.EventListener.TOUCH_ONE_BY_ONE, onTouchBegan: function (touch, event) { var target = event.getCurrentTarget(); }, onTouchMoved: function (touch, event) { var target = event.getCurrentTarget(); var delt…