Half pixel issue

I have an issue when drawing and placing sprite with height and width that do not perfectly fit an integer number of pixels.

For example, I tried to create an hexmap (a map with hexagonal tiles) where I define each tile as a sprite. When I place these hexagonal sprites constituting my map side by side, I see some thin 1 pixel spacing horizontaly each 2 raws:

I assume this is because the height of my hexagones do not match an exact number of pixels so rather than drawing a blurry border, it is some kind of rounded to the closest pixel limit.

The same issue appear when I try to have a regular spacing between my tiles:

You can see that the horizontal spacing kind of vary each 2 raws…

So how can I fix this problem? Is there some kind of option I could use to tell I prefer having blurry shapes than net ones but with 1pixel changing dimensions?

I should also mention that this problem occur both on flash and cpp targets.

And here is the function I use to create my hexagonal sprites:

        var bm:BitmapData = new BitmapData(Std.int(hex_radius*2+0.5),Std.int(hex_radius*2+0.5), true, 0x00000000);
        
        var lRadians:Float = Math.PI / 3;

        var hs:Shape = new Shape();
        var g:Graphics = hs.graphics;
        
        g.moveTo (hex_radius * Math.cos (0), hex_radius * Math.sin (0));
        g.lineStyle (1, color, 0);
        g.beginFill (color, 1);
        for (i in 0...6){
            g.lineTo (hex_radius * Math.cos (lRadians * (i + 1)), hex_radius * Math.sin (lRadians * (i + 1)));
        }
        g.endFill();
        
        var mat:Matrix = new Matrix();
        mat.translate(hex_radius, hex_radius);

        bm.draw(hs, mat);
        
        var bitmap:Bitmap = new Bitmap(bm);
        addChild(bitmap);

(I don’t know. The problem might be linked to the way I create my hexagon pictures. Maybe the “pixel rounding” occur when the the sape is drawn into the bitmapdata by the BitmapData.draw() function…)

If you can’t find a correct solution, maybe increasing the lineStyle width to 2 will hide the gap, at least?

I had the same issue when collected my background with tiles. To fix that I just added a 1.01% scale to each tile. Not a perfect solution though.

Actually, I don’t want to close the gap because I want to have some spacing between my tiles (like on picture 2. But a regular one. I did the first image just to explain the issue as it it easier to see a thin white line on a red background than a change in the line thickness :wink: )
So adding a border by setting the linestyle alpha to 1 or increasing the scale to 1.01% won’t help me in this case.

Could you draw lines between the tiles to enforce the gutter? Would your design allow it?

I tried this solution for me and it does not work really well on C++. It’s better but not perfect. On scale 100% I have no problem of course but when downscaling to support lower resolution, it’s ugly. I didn’t notice this issue when I was testing all this time on flash target :frowning:
I would love a better solution than the 1.01% scale.

I have experienced this as well, Macromedia and Adobe Flash Professional got this problems too!
This is very pronounced when we have an image that got a size of say, 10.4px, flash will try to display this on 10px but registers that it is on 10.4px. now the image is off by 0.4px - only on display though.

The only solution i found out to work is that, make sure that there are no decimal part for every image.

I don’t know what causes this, maybe it is a flash player issue (since ancient Flash mx) or maybe subpixel rendering?

You may right. So we can’t scale the whole app to fit the screen (e.g: scale the Stage). We should probably scale each graphics separately to use integer for the tiles.