IssueTracker

I'm creating an app that uses a lot of pixel art images. Which is the best way to draw them with the antialiasing disabled?

I think we would need to understand what the expected result is vs the actual result that you are seeing with the existing behavior. This would give us a better sense of the root cause and help determine a solution to the desired effect. Could you go into more detail as to why drawing without anti-aliasing is necessary?

Here are 2 screenshots of the same pixel art asset displayed in an android app using an ImageView. In the first screenshot(Screenshot_1566295198-576x1024.png) I've created a Bitmap with antialiasing, dither and filter disabled. I didn't find a way to get that result with compose

Thanks! Can you share the code for these snippets as well?

From the screenshots it looks like you may need to have a higher resolution image per resource drawable buckets as well. Would you happen to know the display density of the Android device that this is running on?

The resource is a 16x16 pixel art. I cannot have an higher resolution version. The resources are taken from a pixel art game because the app is a sort of companion for that game so it uses the same resources of the game.

I cannot share a code snippet now but I've used the same approach exposed in that answer on Stack overflow https://stackoverflow.com/a/46066323/13164665

Thanks for the screenshots.

I think you can do the following as a workaround to draw the pixel art image directly with anti-aliasing disabled:

    val imageBitmap = BitmapFactory.decodeResource(
        LocalContext.current.resources,
        R.drawable.my_pixel_art
    ).asImageBitmap()
    val paint = remember {
        Paint().apply {
            isAntiAlias = false
        }
    }
    Canvas(modifier = Modifier.fillMaxSize()) { // DrawScope
        drawIntoCanvas { canvas ->
            canvas.drawImage(imageBitmap, Offset.Zero, paint)
        }
    }

It's filtering you want to disable for pixel art, not anti-aliasing (although you may want that too when the image is rotated or uses subpixel positioning).

I ended up using a custom Painter. The painter is almost identical to BitmapPainter, I have overwritten only DrawScope.onDraw

private val customPaint = Paint().apply {
    asFrameworkPaint().apply {
        this.isDither = false
        this.isFilterBitmap = false
        this.isAntiAlias = false
    }
}

override fun DrawScope.onDraw() {
    drawIntoCanvas {
        it.drawImageRect(
            image = image,
            srcSize = srcSize,
            srcOffset = srcOffset,
            dstSize = IntSize(
                this@onDraw.size.width.roundToInt(),
                this@onDraw.size.height.roundToInt()
            ),
            paint = customPaint
        )
    }
}