HTML and CSS Reference
In-Depth Information
Figure 9-15. The fine scrolling camera at position 180,120 with scroll buffers
What you don't see are the scroll buffers on each axis that actually allow for the fine scrolling
to take place. Figure 9-15 shows what is painted to the canvas and the extra map image data
thatis not paintedtothecanvas.Thisfigurehasbeenzoomedintoshowthatweactuallyneed
to draw an extra row and extra column to the canvas when the camera is in a fine-scrolled
state. To display the actual position of the scrolled tiles, we first use a matrix transformation
to translate the canvas to the actual point we want to paint to the screen:
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );
context . translate ( - camera . x % world . tileWidth , - camera . y % world . tileHeight );
The mod (%) operation returns us just the number of pixels on each axis we need to move
back in the negative direction to show the portion of all the tiles in Figure 9-15 .
We then loop though all the tiles and paint them starting at that position. Therefore, the first
tile in each row painted starts in the negative position, off the canvas, and only a portion of it
is actually painted to the canvas. The last tile in each row is painted onto only a portion of the
canvas.Thecorrespondingpaintoperationsonthecolumnsworkthesameway.Bydoingthis,
we are fine scrolling by simply translating the canvas over the entire subset of tiles (including
the extra buffer tiles, see Figure 9-16 ).
Hereisthecodethatloopsthroughtherowsandtiles andpaintsthemtothescreen,starting at
the newly translated point:
Search WWH ::




Custom Search