How to avoid rows on screen when cutting spritesheet tiles?

by PerduGames   Last Updated July 20, 2018 13:13 PM

I'm having a problem with my spritesheet, I generate a map but when I zoom in on it I can observe these lines as in the image below:

enter image description here

When I used the tiles each in their separate image, that did not happen, how do I avoid this case?

I'm drawing like this, the problem happens when I give a "ctx.scale":

ctx.drawImage(
    imgSolos.img,
    (imgSolos.width * resultSolo), // resultSolo is current frame in the spritesheet
    0,
    32,
    32,
    x, 
    y,
    imgSolos.width,
    imgSolos.height
);


Answers 1


Keep in mind that context.scale does not change the internal resolution of the canvas. It just adds a multiplication factor to all coordinates you pass to the drawing functions. Due to floating point inaccuracies on scale factors which are not factors of 2, those coordinates might no longer be pixel-perfect. The result is what you see in that screenshot.

Possible solutions are:

  • Draw your map to a second, invisible canvas without scaling. Then draw that invisible canvas to the visible canvas with scaling.
  • Use CSS to change the size of the canvas in the HTML document. The browser will then stretch the output of the canvas.
  • Only use scale factors which are powers of 2.
  • Implement scaling by changing the width and height of the destination rectangle of your drawImage calls. Only use integers.
Philipp
Philipp
July 20, 2018 13:08 PM

Related Questions


Drawing 2d tilemap of a big world in javascript

Updated June 05, 2017 01:13 AM


What's happening with my tile engine?

Updated August 31, 2017 22:13 PM