I used the "Interpolation: None" setting on GIMP's scaling tool. Its actual size is 24x24 pixels, but I scaled it up to 96x96 pixels in GIMP so you could see it. Instead of only using colors that fall within the source rectangle passed to drawImage, the sampler blends in colors from just outside of its boundaries causing what appear to be gaps between the tiles.īelow is my tile sheet's source image.
While this doesn't do much visual damage to the centers of the tiles, the sampler is blending colors along the edges of adjacent tiles in the source image which creates unexpected colors in the rendered tile map. This is great for scaling digital photographs, but not for pixel art. The color "bleeding" issue I need to fix is caused by the sampler, which uses interpolation to blend colors during scale operations in order to make things not look pixelated. I am using setTransform(sx, 0, 0, sy, tx, ty) to apply scale and translation to the final rendered image. I am using drawImage(src_img, sx, sy, sw, sh, dx, dy, dw, dh) to cut the individual tiles out of the source image and draw them onto the destination canvas.
The rendered tile map is comprised of many smaller images that are cut out of a single source image called a tile sheet. I am using the HTML5 canvas API to draw a tile map for a pixel art game.
0 kommentar(er)
