Canvas Games: Part II - HTML5 Canvas - page 818

camera . y = 0 ;
rowBuffer = 0 ;
rowBuffer = 0
Figure 9-14 shows how the upper left corner would be drawn.
Figure 9-14. The fine scrolling camera at position 0,0
Now let's take a look at the most common type of calculation. This occurs when the viable
camera is not right at the edge or bottom of the game screen and not at the top left corner of
either of the row or column tiles.
The camera scrolled position
The camera in a scrolled position means that it is not in the upper corner of the screen. In this
example, we place the camera in about the middle of the screen.
scrollRate = 4
camera . x = 180
camera . y = 120
Subtracting camera.width (160) from world.width = 320. Next, we subtract scrollRate
from this result to use in calculating the value of colBuffer .
We use the same algorithm for the y axis to get rowBuffer : camera.y > (world.height -
camera.height) -scrollRate :
( world . width - camera . width ) - scrollRate = 316
( world . height - camera . height ) - scrollRate = 316
colBuffer = 1
rowBuffer = 1
In this case, we need to add a scroll buffer on each axis. Figure 9-15 shows what would be
painted to the canvas at this camera position.