Canvas Games: Part II - HTML5 Canvas - page 820

for for ( rowCtr = 0 ; rowCtr < camera . rows + rowBuffer ; rowCtr ++ ) {

for

for ( colCtr = 0 ; colCtr < camera . cols + colBuffer ; colCtr ++ ) {

tileNum = ( world . map [ rowCtr + tiley ][ colCtr + tilex ]);

var var tilePoint = {};

tilePoint . x = colCtr * world . tileWidth ;
tilePoint . y = rowCtr * world . tileHeight ;
var

var source = {};
source . x = Math . floor ( tileNum % 5 ) * world . tileWidth ;
source . y = Math . floor ( tileNum / 5 ) * world . tileHeight ;
context . drawImage ( tileSheet , source . x ,
source . y , world . tileWidth , world . tileHeight , tilePoint . x , tilePoint . y ,
world . tileWidth , world . tileHeight );

}

}

Figure 9-16. The fine scrolling camera at position 180,120

Notice in the code that we add the rowBuffer value (in this case, 1) to the rowCtr loop, and
weaddthe colBuffer valuetothe colCtr loop.Next,welookatedgecases(literally).These
occur when the camera has been scrolled to the far right or far bottom of the tile map.

The camera far-right scrolled position

When the camera scrolls past the point where an extra tile would need to be on the far right of
the game screen map, we need to set it back to the position it was and not try to paint an ex-
tra column in colBuffer , because the tile map world does not have any more tiles to display.
If we didn't do this, an error would be thrown in JavaScript, telling us that we had hit a null
in the world.map array. In essence, we are subtracting the dx or scrollRate value from the
current camera position.

Wehaveseenthiscodepreviously,buthereitisonemoretime.Thisedgecaseisthefirstelse:
(bold and larger type):