PIXI.Graphics vs PIXI.Sprite Rectangle Drawing Strangeness

[Earl Sinclair]

Trying to draw a map using rectangles for each grid location - think like Battleship game. Tried to use:

for( var i = 0;i < 10; i++ )
    for( var j = 0;j < 10;j++ )
    {
        var aRect = new PIXI.Graphics();
        stage.addChild( aRect );
        aRect.buttonMode = true;
        aRect.position.x = i * gridSize;
        aRect.position.y = j * gridSize;
        aRect.beginFill(0xFFFF00);
        aRect.lineStyle(1, 0xFF0000);
        aRect.drawRect(aRect.position.x,aRect.position.y, gridSize, gridSize);
        aRect.endFill();

        aRect.interactive = true;
        aRect.on('mouseover', onRectangleOver);
        aRect.on('mouseout', onRectangleOut);
        aRect.on('mousedown', onRectangleDown);
        
        aRect.name = "aRect_" + ( i + 1 ) + ":" + ( j + 1 );
    }

Yielded a strange grid with large offsets in between - as attached.

What I WANT is squares with no spaces in between.

Other peculiarities: 1) if I do not set the aRect.position.x/y - the grid DRAWS correctly, but mouseover and clicks don't work.

2) If I change from PIXI.Graphics() to PIXI.textureButton() - it draws and mouseovers and clicks just fine. This is really weird to me. 

I tried various combinations of localToGlobal and so-on - but always got the offset grid as attached.

Any help would be appreciated.

 

Earl

[ivan.popelyshev]

Your rectangle position is actually 2 times more than real stuff. And I dont know what's buttonMode is

//this is wrong
aRect.drawRect(aRect.position.x,aRect.position.y, gridSize, gridSize);
//this is correct
aRect.drawRect(0, 0, gridSize, gridSize);

[caymanbruce]

On 2/21/2016 at 6:17 PM, ivan.popelyshev said:

Your rectangle position is actually 2 times more than real stuff. And I dont know what's buttonMode is

//this is wrong
aRect.drawRect(aRect.position.x,aRect.position.y, gridSize, gridSize);
//this is correct
aRect.drawRect(0, 0, gridSize, gridSize);

In this shape drawing situation, when to use PIXI.Graphics and when to use PIXI.Sprite? Is there a general rule? It seems to me PIXI.Graphics is enough, but I am not sure about its performance compared to PIXI.Sprite.

[PixelPicoSean]

Sprite is faster if you have lots of rectangles to draw.