[Resolved]Cocos2d-html5 and Touch on devices

[Resolved]Cocos2d-html5 and Touch on devices
0.0 0



I am trying to work through some issues with cocos2d-html5. I have used the original cocos2d successfully for several years, but I am just starting with this branch. I would have to say that one of the most important reasons to build games in HTML5 is for mobile devices (tablets and phones) to display your game. So I believe it is essential for the life of Cocos2d-html5 to work on these devices. Otherwise, what is the point for this platform to exist?

This stated, I am having great difficulty getting games to detect touch. It seems like it should work, as mobile devices have no trouble getting menu touch input, but when applied generally it does not seem to work. Even the example games do not work properly via touch.

Can someone post instructions on getting touch to work, or please make clear to this community whether touch is supported? I think there will be less questions and confusion if we all know what cocos2d-html5 does indeed support. I post this with respect to the developers behind this framework, i do thank you for your time, but some basic information like this will go a long way in this community. If the goal is not to support these devices fully, knowing this will allow those that feel it is important to move on to another platform.

Thank you


Hi, Sean Carmody, what is the engine version you are using?

The v2.1.3 has some bug in mobile touch flags with CocosBuilder. These bugs have been fixed in v2.1.4.

If you meet something wrong in the latest version of v2.1.4, please help to tell me how to reproduce it. Thanks.

Cocos2d-html5 supports mobile browsers, and a lot of games have been developed and run on mobile browsers. However, it may still has some bugs, we will try our best to fix it.



Thank you for responding. I was indeed using 2.1.3 originally when I experienced the problems. I downloaded 2.1.4 and also the latest development version and believe I’ve seen the same issues.

But I will try again using 2.1.4 if you feel that it was resolved. I will report back what I find.

Thank you,


Thank you for testing.

If you met some problem, could you please post it about what is the device, OS, browsers, and which demo you use?
We will trace it ASAP.

In my opinion that mobile browsers are lower compatible than PC, maybe we missed some of them.


Hi Shun Lin (or anyone who can help),

I upgraded the code to use Cocos 2.1.5, and user input still works well with the mouse. However, if you try and use a touch device, it seems to only register touches at the far right edge of the window. It is the strangest thing. Please take a look or see attached image:

Load the game, go past the Play button to the play screen. Here you will see the circles animating. However, it will only take your touch if you touch at the far right edge of the gameplay window (not the browser window). These touches are registering in the correct location, so that is positive. Please try it.

But why would the touches not be registering elsewhere? Is the canvas tag blocking or interfering with touch input?

I have seen this with the Android Google Nexus 7 (by Asus) as well as iOS devices.

Thank you,


Thanks Sean Carmody.
I had reproduced it on chrome of android. I will create an issue for it, and fix it ASAP.

It is suggested that change your render mode from WebGL to Canvas. The default render mode will change to Canvas mode when in mobile browsers and WebGL mode when in Desktop browsers.


How do I change my render mode from WebGL to Canvas, or default as you mention? I do not see that.

Also, I have another example I can show you of the potential bug we are discussing. Take a look at the following link. The buttons are working fine on the menus, but the flying section of this game is not responding to the touches:

However with the mouse it works as expected. It is using 2.1.5. If you see some mistake I am making please let me know, it would be appreciated. But if you believe the previous is a bug, then this may be another manifestation.

Thank you for following up, Shun Lin, it is much appreciated.


@Sean: about the WebGL/canvas thing, check out the renderMode property.
Code example from Hello World: https://github.com/cocos2d/cocos2d-html5/blob/develop/HelloHTML5World/cocos2d.js


Hi Thomas,

Thanks for pointing that out. I saw a big performance increase from this change. It also cleared up a weird error I was getting at game start with something trying to load twice.

I also see that ‘loadExtension’ is also new to this JS file. I will read up on what that does, I am unfamiliar with it.

I am hoping that they can solve the touch issue. That is the original issue for this post, and really crucial to the success of this framework. Right now I am using a crazy work-around to accommodate touch devices.

Thanks again,


Hi Sean,
I tested your game , finded that touch move was not working on mobile browser.
I analyzed the game code , finded that :

onTouchesBegan:function (touches, event) {
this.isMouseDown = true;

onTouchesBegan have not return true, so onTouchesMoved will not be called back.Suggest like :

onTouchesBegan:function (touches, event) {
this.isMouseDown = true;
return true; // must return true


Hello Xingsen Ma,

Thank you very much for your time. I appreciate your effort and suggestion. Unfortunately, I have tried your idea and it does not seem to solve the issue. Can you look and see if there may be something else amiss? I am really wondering why this is not working for touch, when it works well for desktop. This is a real problem for me and I’m sure many others.

Thank you very much,


Hello again Xingsen Ma,

Perhaps you were on to something after all. I made the change you recommended and it did not work. However, it made me look again at my touch code and I have found that I was referencing touches incorrectly.

I was using touchesEnded, but only referring to a single point like this:

var location = event.getLocation();

It occurred to me that it is collected in an array and I need to access the touch points like this:

var location = touches[0].getLocation();

So now it is working. Thank you for pointing out one of the problems. Without this help I would certainly still be stuck.

Much appreciated,