Flex: Difference between defining sprite's x, y coordinates, and painting object in some location

Question

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.

1) Could you please suggest, what's wrong in defining coordinates as stone.x, stone.y 2) How to fix the problem with incorrect positioning.

Would really appreciate ideas about the problem, I am trying to solve for so long :(

Answer 1

I am not sure what's causing the issue - might be some padding induced by the container - can't say without testing. But I believe that adding a Sprite (say board) to canvas.rawChildren and using it as the parent for the grid and stones would fix the issue.

Answer 2

Assume x & y are 30 and cellWidth is 30.

First Example:

stone.x = 30 + 60; //90
drawCircle(90, 60, 10);

This means if you were to draw a rectangle around your circle, it would be at [170,50]. (x,y).

Second Example:

stone.x = 0;
drawCircle(90, 60, 10)

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 at x==90 inside the sprite. So relative to this, you're at x==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 to this and you're drawing the circle inside the sprite at position x==90. (therefore it begins at x==80).