Crazy pixels with MovieClip.graphics.drawRect(...)

[Zomis]

I wanted to create a matrix of squares, each square has a side of 4 pixels.
I wanted these squares to be placed with an empty space between them of 4 pixels.
Something like this:
X#X
###
X#X
Where "X" indicates square and "#" indicates empty space

So I started doing some code... and my code didn't turn out as expected. Somehow, the height of my squares got a little bigger than the width... I got a rectangle of 5x10 or 6x10 pixels (and an additional black border of 1 pixels, as expected) so I had to decrease the height of the rectangle...


var size = 4;
var i=0;
for (var x1=4;x1<200;x1+=size+4)
for (var y1=4;y1<100;y1+=size+4) {
var c = 0xFF0000;
i++;
mc2.graphics.lineStyle(0);
mc2.graphics.beginFill(c);
mc2.graphics.drawRect(x1,y1,size,size-1.5);
mc2.graphics.endFill();
}

This gave me squares of 6x6 pixels. But the distance (border to border) between them is
6 width but 15 height... if I decrease the "4" in the code "y1+=size+4" it helps. But I wonder why
mc2.graphics.drawRect(x1,y1,size,size);
doesn't give me equally sized squares of 4x4??

I guess it's something basic I've missed, I'm just not sure WHAT...

[soulwire]

Surely
mc2.graphics.drawRect (x1,y1,size,size-1.5); should be
mc2.graphics.drawRect (x1,y1,size,size); if you want to draw a square with equal dimensions?

[Zomis]

Yes, that's what I thought. But apparently it isn't...

See the attached .fla for my source
And see SNAG-070830-164929.jpg for how the .swf is shown. Let me know if you see anything else...

Changing the source code to

mc2.graphics.drawRect (x1,y1,size,size-1.5); really shows squares (except one row which is 6x7, the others are 6x6). I don't know why, but that's the way it is.

[Charleh]

Works for me, you've got an error in your drawRect function, not in the code you posted.

Is it graphics.drawRect or have you customised it?

this is my code which gives me perfect squares


var size = 4;
var i=0;
for (var x1=4;x1<200;x1+=size+4)
for (var y1=4;y1<100;y1+=size+4) {
var c = 0xFF0000;
i++;
_root.lineStyle(1, 0x000000, 100);
_root.beginFill(c);
DrawRect(x1,y1,size, size);
_root.endFill();
}

function DrawRect(x1,y1,w1,h1) {
_root.moveTo(x1,y1);
_root.lineTo(x1 + w1, y1);
_root.lineTo(x1 + w1, y1 + h1);
_root.lineTo(x1, y1 + h1);
_root.lineTo(x1, y1);
}

either that or the movieclip you are drawing to has a greater yscale than xscale

[Zomis]

Nope, I didn't customize the drawRect function.

The problem was with the scalars. scaleX was about 1.70 and scaleY was about 2.83
I now think I know what caused this. I just painted a rectangle in a movieclip and then I resized the movieclip instance to the size I wanted it, and not the movieclip source.

Thanks for your help!