HTML5 Canvas, 2nd Edition

Coarse Scrolling vs. Fine Scrolling

There are two methods by which we can scroll the game screen: coarse scrolling and fine scrolling. Coarse scrolling is a method by which we scroll the screen a single tile at a time. Therefore, because our tiles are 32×32 pixels, we would scroll 32 pixels in the direction the user presses with the keys. We allow the user to use the up, down, left, and right arrow keys in our examples to move a viewable window over the tile world map.

Fine scrolling is a method by which the user scrolls just a few pixels at a time. This is a much more powerful and user-friendly method for scrolling the game screen and would be useful for most games.

Each method has its uses, though. Coarse scrolling can be applied to strategy-based games, board games, or any game in which scrolling a single tile at a time does not distract from the user experience. Fine scrolling, however, is useful for most scrolling applications because it allows simple physics, such as delta x and y changes, to be applied to the scrolling at a rate that is smaller than an entire tile size. A platform game such as Super Mario Brothers or a scrolling shooter such as Raiden would be good uses for fine scrolling.

Next, let’s define some of the concepts we will apply in our code.