Draw Quality Single Bitmap and Multimat Bitmaps on Canvas (Android)
I have a set of small images. If I draw these images separately on the canvas, the rendering quality is significantly low compared to when I draw them on a large bitmap size and draw the bitmap on the canvas. Especially the lines are distorted. See below (right side).
From the code below, the canvas also supports scaling (scaling). This problem occurs on small scale factors.
The question is how to improve the draw quantity of multiple small images to the large image standard.
This is the code for several bitmaps taken on the canvas
canvas.scale(game.mScaleFactor, game.mScaleFactor);
canvas.translate(game.mPosX, game.mPosY);
for (int i = 0; i < game.clusters.size(); i++) {
Cluster cluster = game.clusters.get(i);
canvas.drawBitmap(cluster.Picture, cluster.left,
cluster.top, canvasPaint);
}
This is the code for a single bitmap, game.board is a screen-sized image where all the small bitmaps are written.
canvas.scale(game.mScaleFactor, game.mScaleFactor);
canvas.translate(game.mPosX, game.mPosY);
canvas.drawBitmap(game.board, matrix, canvasPaint)
The brush brush has the following properties: "All bitmaps are Bitmap.Config.ARGB_8888.
canvasPaint.setAntiAlias(true);
canvasPaint.setFilterBitmap(true);
canvasPaint.setDither(true);`
source to share
I can think of a couple, depending on you you draw the boundaries of the puzzle pieces.
The problem you are having is that when scaling a single image, the lines are filtered with the rest of the image and appear smooth (blending is correct). When the puzzle is a rough shape, filtering reads adjacent pixels on the puzzle piece and blends them into the piece.
Approach 1
The first approach (which is easy to do) is to render the FBO (RTT) to the logical size of the game, then scale the entire texture on the canvas with a full screen quadrant. This will give you the same result as single
because the pixel blending is related to adjacent parts.
Approach B
Use bleeding to fix the problem. When you cut a puzzle piece, include an overlapping piece of adjacent pieces. Instead of casting discarded pixels to zero, set alpha only to zero. This will make your blend function display the same values as in the same image. Also, double the lines for the border, but set the outer border alpha to zero.
Come to the end
This last one is the hardest, but will be the smoothest (AF) for any scaling.
Rotate the alpha channel of your puzzle pieces in the Signed Distance field and render with a specialized shader that will smooth out the output at any distance. In addition, SDF allows you to draw a path with a shader while rendering, and the path will be smooth.
In fact, your SDF can be a separate texture and you can load it in the second texture stage. Bind the original image as block tex 0, sdf puzzle piece cutout on tex unit 1 and use SDF shader to define alpha from SDF and color from tex0, then blend the path calculated from SDF.
http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
https://github.com/Chlumsky/msdfgen
http://catlikecoding.com/sdf-toolkit/docs/texture-generator/
SDF is generated from a boolean map. Cutting puzzle pieces should start as a monochrome cutout and then turn into SDF (offline) with a tool or similar as above. Valve and LibGDX have SDF shader examples as well as the tools listed above.
source to share