onTouchesMoved behaviour

cocos2d-x JavaScript
#1

Hi all,

I’m trying to orient a sprite in my game to point at the mouse cursor when it is hovered over the game area (without clicking). My problem is that handling onMouseMoved() gives the coordinates in the browser window, not the rendering area. As such, it only works properly when the browser window is the exact same dimensions as the rendering area. onTouchesMoved() does not fire unless the mouse button is clicked, which I don’t want either. The fella who made the following example has managed what I want to achieve using onTouchesMoved() it seems, but mine does not behave in the same way:

http://www.gamefromscratch.com/post/2012/06/17/Cocos2D-HTML-Tutorial-4-Its-all-about-control.aspx

Any ideas?

Thanks!

#2

I’m betting there’s gotta be an easier and better way to do this, but try using this code within your handler:

mouseX = evt.pageX - gameCanvas.left; mouseY = evt.pageY - gameCanvas.top; angle = -(Math.atan2(posX-mouseX, posY-mouseY)) / (Math.PI / 180);

There, posX and posY would be the current positions of your “character”. I got this snippet out of an old (non-cocos2d) experiment using jQuery and SVG, ypu can look it up here: http://proto.heart-bit.com.ar/probando_jquery_svg/shooter/shooter.html (WASD to move, click to “fire”, works better on Firefox, comments on the javascript are in Spanish because that’s my main language :stuck_out_tongue: )

#3

Gracias señor :) I couldn’t work out exactly how you were getting gameCanvas.left and gameCanvas.right from your code, but the principle is good. My function appears to work and looks like this, borrowed from another post with my own code added at the end to convert to world coordinates:
<pre>
convertMouseCoords:function
{
var scale = cc.Director.getInstance.getContentScaleFactor;
var origin = cc.EGLView.getInstance.getViewPortRect;
mouse.getLocation.x= origin.origin.x;
mouse.getLocation().y -= origin.origin.y;
mouse.getLocation().x /= scale;
mouse.getLocation().y /= scale;
var location = mouse.getLocation();
// work out proportion into screen of mouse coords, then apply to world dimensions to get “proper” touch location
size = cc.Director.getInstance().getWinSize();
var propX = location.x / origin.width;
var propY = location.y / origin.height;
location.x = size.width * propX;
location.y = size.height * propY;
return location;
}

Is there an easier way to convert to world coords?

Thanks!

#4

Ben Wheatcroft wrote:

Gracias señor :slight_smile: I couldn’t work out exactly how you were getting gameCanvas.left and gameCanvas.right from your code, but the principle is good. My function appears to work and looks like this, borrowed from another post with my own code added at the end to convert to world coordinates:
>
[…]
>
Is there an easier way to convert to world coords?
>
Thanks!

¡De nada!
Ahh, that’s gotta be jQuery doing it’s magic in the background (the .left and .right properties). My brain’s a bit burned out right now so I can’t really give you something useful at this moment, I’ll edit this later if I can remember (I haven’t touch that code in a while and neither experimented enough with cocos yet).

Good luck!

#5

I got the same problem, and Ben Wheatcroft’s solution works fine. Thank you.