HTML and CSS Reference
You can find the fully animated player example, complete with a dirty rectangles-enabled rendering routine,
in the chapter folder.
One of the main benefits of using grids is that they are extremely easy to use, and have an almost infinite number
of potential applications. This is especially true in video game development. They can be used to draw arcade games,
platformers, board games, RTSs, and RPGs or to do complex collision detection, among many other uses.
Nevertheless, sometimes you may find yourself trying to solve a similar situation in a scenario that doesn't use
grids at all. In such case, you might find the next technique to be extremely useful.
Displaying Animations in Extremely Large Viewports
So far you've learned how to efficiently cycle and paint massive grids, but this begs the question: What happens if you
need to do something similar on an extremely large screen? Consider the example shown in Figure 8-9 .
Figure 8-9. Just a big image being painted on a canvas object
The background image being used in Figure 8-9 has a size of 1920 x 1080, which means that it would take most
devices a fair amount of time to paint it on the screen. For example, on my computer (a fairly high-end Retina
MacBook Pro with 16GB of RAM and a 1024MB video card), it took Chrome 22.113 ms to paint that image within the
canvas. You already know that if you want to render the program at 60 FPS, you need to execute the update loop in less
than 16.67 ms (1000 milliseconds/60 frames per second), so this basically means that you won't be able to repaint the
scene at 60 FPS.