Search the Community

Hi, Context I'm building a 2D game from scratch in JS. I'm drawing the map by using rpgmxp tilesets for the moment just to have some resources : Each tile is 32*32 pixels. I'm using canvas API with ctx.drawImage method to display it : ctx.drawImage(tile.tilesetImg, tile.sX, tile.sY, this.tile.w, this.tile.h, canvasX, canvasY, Engine.Camera.tile.w, Engine.Camera.tile.h); I use different parameters for the image source size (this.tile.w & this.tile.h) and the image destination size (Engine.Camera.tile.w, Engine.Camera.tile.h). This has the effect of scaling the game, like that each user have the same map exactly displayed (32 tiles * 24 tiles). The current tile aspect ratio distortion doesn't matter to me for the moment. Check 1.png to see the result displayed to the player with a 4:3 ratio. Problem When I change window size if I don't keep the ratio 4:3 (because i display always 32 tiles * 24 tiles for the player) one of my tile types causes strange visual artifacts. This happens in chrome and firefox and probably all browsers. It's strange because all the other tiles are drawn from the same method, but do not exhibit this behavior. This behavior only seems to occur when the ratio is very different from 4:3. See 3.png to check what i'm talking about. There is some transparent lines which display the background at the right of each "bad" tile. Note this tile happens to be the first tile from the tileset (first image above). The same thing happens if height alone is changed, except the line will appear on the bottom instead. The thing which is again more strange is that if i change the tileset to draw a red line at the right of the first tile (check 4.png) the transparent line is replaced by the red line when drawing the map (check 5.png). Question From debugging (console.log), there doesn't apear to be any reason that tile source size would be 33px instead of 32px, but the artifacting effect makes it seem like this is the case. I appear to be using drawImage correctly by all accounts, so googled to see if this was a known problem. I was reading the w3 documentation https://www.w3.org/TR/2dcontext/#drawing-images-to-the-canvas when I found that : (especially the last note of part 12) Does this explain the problem ? Does any one know what the problem is more in detail ? Thank you in advance, best regards.