I have a task:
I need to place about 100 sprites on one canvas (with prepared grid on it). I need to place them as invisible (circles) stones, on the board, and make visible only on mouseover.
The problem I come across is following, I can't place those objects accurately into the nodes on the grid.
E.g.
if I define stones (it's just a sprite, as I said earlier) this way:
var stone:StoneSprite = new StoneSprite();
stone.x = this.x + 2*cellWidth;
stone.graphics.beginFill( 0x000000 );
stone.graphics.drawCircle(stone.x , this.y + cellWidth, cellWidth/3 );
stone.graphics.endFill();
rawChildren.addChild(stone);
They don't sit on the node…
See image:
http://img.skitch.com/20091014-kuhfyjeg1g5qmrbyxbcerp4aya.png
And if I do it this way:
var stone:StoneSprite = new StoneSprite();
stone.graphics.beginFill( 0x000000 );
stone.graphics.drawCircle(this.x + 2*cellWidth , this.y + cellWidth, cellWidth/3 );
stone.graphics.endFill();
rawChildren.addChild(stone);
The stone is displayed correctly in the grid node… See image 2:
http://img.skitch.com/20091014-f595tksjxramt98s7yfye591bh.png
So I wonder what is the difference between these 2 approaches.
Also, I think I need to pass correct coordinates to the stone class… In case I would like to change some properties of the stone object. E.g. visibility, or radius.
- Could you please suggest, what's wrong in defining coordinates as stone.x, stone.y
- How to fix the problem with incorrect positioning.
Would really appreciate ideas about the problem, I am trying to solve for so long 🙁
Best Answer
Assume x & y are 30 and cellWidth is 30.
First Example:
This means if you were to draw a rectangle around your circle, it would be at [170,50]. (x,y).
Second Example:
This means the rectangle around your circle is at [80,50];
In the first example, you are moving the sprite to position
x==90
. Then drawing a circle whose center is atx==90
inside the sprite. So relative tothis
, you're atx==180
. But because a circle's x,y coords are the center, subtract 10 for the radius to get the boundary x position.In the second example, the sprite defaults to position
x==0
relative tothis
and you're drawing the circle inside the sprite at positionx==90
. (therefore it begins atx==80
).