Pixel scaling drawn shapes

[alexo]

Sorry if this has been answered previously but I couldn’t find a post or an example.

I am wanting to draw lines/shapes that are pixel perfect such that when scaled up the pixels scale accordingly. For example if I have a 16x16 sprite and I set it to scale 1 and then draw a line across it the line pixels are the same size as the sprite pixels. If I scale the 16x16 sprite by 2 and then draw a line the pixels should be the same size as the scaled sprite pixels.

I hope this makes sense. I did read that you can draw to a sprite then copy to BitmapData/Bitmap and then add that but if I am updating the drawn graphics frequently this is suboptimal.

[Confidant]

Can you try enabling pixelHinting when you do the graphics draw command? See here and here. Also note the pixelSnapping setting.

[alexo]

Thanks so much for the suggestions. After some additional research I did try these settings along with various other options. Below is the code I have that illustrates what I have tried and a screenshot of the result. As I noted I would hope to only see crisp single line pixels without any aliasing. Additionally I assume this isn’t the most optimal way to do this, especially if I need to do this multiple times per second.

I have tried various combinations of adding 0.5 at various points but it only seems to work sporadically depending on the positions of the line and rect. My issues might also be related to the post I saw yesterday.

Fuzzy lines drawn in Cairo

A 1 pixel thick line drawn by Cairo with integer coordinates, instead of appearing crisp and solid, appears 2 pixels thick and blurry. I found an old blog post explaining the problem here: Why are all my lines fuzzy in cairo? It suggests adding 0.5 to all coordinates drawn by Cairo, but this is not ideal. I tried this with a basic program that draws a grid of lines, I added 0.5 to the coordinates and the lines appeared solid and 1 pixel thick, but with dynamic scaling you get a really bad sid…

        this.stage.scaleMode = NO_SCALE;
        this.stage.align = TOP_LEFT;
        this.scaleX = 3;
        this.scaleY = 3;

        var s1 = new Sprite();
        s1.cacheAsBitmap = true;
        s1.scaleX = 3;
        s1.scaleY = 3;

        s1.graphics.lineStyle(1, 0x990000, true, NONE, NONE);
        s1.graphics.moveTo(ray0.start.x + 0.5, ray0.start.y + 0.5);
        s1.graphics.lineTo(ray0.end.x, ray0.end.y);

        s1.graphics.lineStyle(1, 0x3b00a9, true, NONE, NONE);
        s1.graphics.drawRect(box.x, box.y, box.w, box.h);

        var bd1 = new BitmapData(100, 100);
        bd1.draw(s1);

        var b1 = new Bitmap(bd1);
        b1.smoothing = false;
        b1.pixelSnapping = ALWAYS;
        this.addChild(b1);

[gpstudios_tom]

It seems to me like Cairo is ignoring the pixelHinting property in the lineStyle command.
I’ve tried setting it to true and false with non-integer anchors and it delivers the exact same result, whether or not I add 0.5 or any fraction to the anchor points.

graphics.lineStyle(1,0,1,true);
graphics.moveTo(100,100);
graphics.lineTo(200,100);
		
graphics.lineStyle(1,0,1,false);
graphics.moveTo(100,200);
graphics.lineTo(200,200);

[alexo]

Wanted to bump this and see if there is any actual solution for this now since I originally ran into this issue. I found a “workaround” for this previous problem but would love to have a proper solution now. Tried various tips from all the posts and code examples but still can’t make it work. Anything besides just drawing pixels directly myself to a bitmap data?