Question

I am working on flex application and part of the application is the grid. App is supposed to be game editor later on.

My problem is illustrated by the following screenshot:
I wanted to place image here but it seems I don’t have enough reputation.
here is link to screenshot
Orange-like square and red triangle does not matter.

This code below is Sprite (DisplayObjectContainer) for red squares. Code is messy because I’m getting started with flex and wanted to get that grid done really quick.

public class Board extends Sprite
{
    var board:Array;

    public function Board(blockLength:Number)
    {
        super();
        x = 0;
        y = 0;
        // Setting up two dim array
        board = new Array(10);
        for (var k:int = 0; k < board.length; k++) 
        {
            board[k] = new Array(10);
        }

        // Orange-like box
        graphics.lineStyle(1, 0xA3A3A3);
        graphics.beginFill(0xCCAA00); 
        graphics.drawRect(x,y,100, 100);
        graphics.endFill(); 

        // red blocks
        for (var i:int = 0; i < 10; ++i) 
        { 
            for(var j:int = 0; j < 10; ++j)
            {
                var block:Block = new Block(i*blockLength, j*blockLength);  
                board[i][j] = block;
                this.addChild(block);
                block.drawBlock(blockLength);                   
            }
        }           
    }
}

Red square is defined as follows:

public class Block extends Shape
{

    public function Block(x:Number, y:Number)
    {
        super();
        this.x = x;
        this.y = y;
    }

    public function drawBlock(length:Number)
    {
        graphics.lineStyle(1, 0xB3B3B3);
        graphics.beginFill(0xFF0000); 
        graphics.drawRect(x,y,length, length);
        graphics.endFill();
    }
}

I really have no idea why there are gaps. There is very little code and I feel like I’am missing something very obvious. Board object is added to stage after its initialized.

Why there are gaps between red blocks?

Answer 1

Answer as you may suspect is simple – you are making these gaps 🙂 .

Try to change that:

graphics.drawRect(x,y,length, length);

To that:

graphics.drawRect(0,0,length, length);

Why?

At first you set a position of registration point of the square:

    this.x = x;
    this.y = y;

But then you set a position of rect in relation to that registration point:

graphics.drawRect(x,y,length, length);

That made the gap.