I’m new to cocos creator and cocos2d. I’m trying to understand how to adjust a point in relation to multi-resolution support via fit_height. My current design resolution is 750 x 1334.
My intent is to draw lines using touch location in a word search game. The start point for the line is obtained in via TOUCH_START and I check to see if the point intersects a node (which I’ve scaled by 1.91 regardless of resolution) in the app. If it does, I use the location of the node as the start point and convert it to world space so I can draw on screen at that location like so;
The endpoint is obtained in a similar manner. It is updated at each touch move, a check is made for intersection and the location of the node is set as the touch point. This way, the line goes from node a to node b which contain individual letters in the game.
var t_endPoint = btn.getParent().convertToWorldSpaceAR(btn.getPosition());
//check for angle... then
this.endpoint = t_endpoint
The line is then drawn from startpoint to endpoint each cycle.
When I select both fit height and fit width, everything works perfectly. However, when I select just fit_height which avoids the black bars and looks perfect for the game, startpoint and endpoint appear to be some distance away from the visual location of the node/letters hence the line gets drawn to the side.
See the images below for reference.
Image 1: Perfect drawing with fit height and fit width
I would suggest you to put a draw node inside the canvas element, and don’t use convertToWorldSpaceAR, but to convert to cc.Canvas.instance.convertToNodeSpaceAR
Sorry, I understood wrong. I though you have two clients.
In your case I think you can just convert touch position (it’s in world space) to nodeA space using nodeA.convertToNodeSpace.
And draw your line as child nodeA using converted position.
I use an empty node which fills the screen to check for touches and draw the line (using a graphics component attached to it). Its direct parent is the canvas.
but nothing happens. It won’t even draw anything. If I set it to WorldSpaceAR, drawing occurs but this time, it appears to only draw the line on the row close to the middle and the line is still off the letter/position.
I’m not really using the touch position. I’m testing it to see which letter its on, then setting that as the start or end point for the line.
Is btn.getPosition in node space or world space and will I be able to draw a line from the node space location of Btn A to that of Btn B without converting to world space?
Ok, I’ll try that. btn parent is actually an empty node with a layout component such that each row of buttons lives in an horizontal layout. In turn, every ‘row’ is a child of a single empty node with a vertical layout component.
Per your advice on using the parent to convert, I did a second conversion on the startpoint I got initially i.e;
this.startPoint = btn.getParent().convertToWorldSpaceAR(btn.getPosition());
//the touch node parent is the canvas
m_startPoint = this.touch_node.parent.convertToNodeSpace(this.startPoint).
You’ll notice that this is similar to what I tried earlier except that I’m converting the previously converted startPoint here rather than btn.getPosition and its not the AR variant.
