Optimal scrolling for 2D games or UIs

I recently stumbled upon an old bit of code which demonstrates a technique I created for an efficient scrolling data grid on the YouView TV platform. I call it ‘Blit Scrolling’. Below is a demo of the concept – click on the window and use the arrow keys to scroll around (Flash required):

How it works

I use a small viewport on 1 larger bitmap, onto which content is blitted. I handle scrolling off the buffer area by shifting the bitmap’s pixels to counter the offset. This results in even fewer draw calls and less CPU-bound logic than the common 4+ tile approach: 2 for shifting pixels (if using a double buffer) and just 1 for the viewport render. It also avoids having to draw items renderers (think data grid items or game sprites) multiple times, if they sit across a tile boundary, for example.


Further optimisations could be made (such as only filling the newly exposed region, ‘locking’ the large bitmap and only updating from the viewed region), but you get the idea.

Here’s the code:


Leave a Reply