JavaScript - putImageData doesn't draw every tile

Question

It seems certain tiles will not get drawn. I have a tileset split-up into 32x32 squares and uses a 2D 100x100 array to draw the map onto the canvas.

Then it sets the "viewport" for the player. Since it's one big map, the player is always centered on the edge, unless they run near the edge.

However, this has caused problems drawing the map. Red block is "player"

enter image description here

Somethings I found out was that, a higher viewport (15x10) will give the ability to draw SOME previously not-drawn tiles.

Here's the code. You can download the tileset to test on localhost or below on jsFiddle http://mystikrpg.com/images/all_tiles.png

Everything below is well commented.

Even if change viewport I do see some tiles get drawn, not all. http://pastebin.com/cBTum1aQ

Here is jsFiddle: http://jsfiddle.net/weHXU/

It looks like your available tiles in tilemap are indexed on vWidth. Since vWidth is set to 15, you can't have a tile > to 15 in a given place. I've not find out the solution now but i'm sure the issue is in the draw function. — phemios

Loktar Loktar · Accepted Answer · 2012-07-20T17:55:23

Working Demo

Basically I took a different approach to drawing the tiles. Using putImageData and getImageData can cause performance issues, also by pre-allocating all the image data in the beginning you are incurring a memory penalty to start out with. You already have the data in the form of the image you might as well just reference it directly instead, and it should actually be faster.

Heres the method I use

 for (y = 0; y <= vHeight; y++) {
     for (x = 0; x <= vWidth; x++) {
         theX = x * 32;
         theY = y * 32;

         var tile = (board[y+vY][x+vX]-1),
             tileY = Math.floor(tile/tilesX),
             tileX = Math.floor(tile%tilesX);

          context.drawImage(imageObj, tileX*tileWidth, tileY*tileHeight, tileWidth, tileHeight, theX, theY, tileWidth, tileHeight);
    }
}

Its almost the same, but instead of looking at an array of the pre saved data, I just reference the area of the already loaded image.

Explanation on getting the referenced tile

Say I have a grid thats 4x4, and I need to get tile number 7, to get the y I would do 7/4, then to get the x I would use the remainder of 7/4 (7 mod 4).

As for the original issue.. I really have no idea what was causing the missing tiles, I just changed it to my method so I could test from there but it worked right away for me.

JavaScript - putImageData doesn't draw every tile

1 Answers