Pixel scaling drawn shapes

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.

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

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.

        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);

1 Like

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);

hl_mu6SrLqB9j