Contents  Overview  Panning  Printable version  Discuss this article  in the forums

Overview

Panning images have always been a welcome addition to many computer games, most notably side-scrollers. But as side-scrollers become outdated, a more versatile form of their panning engine lives on - one that is now used more for visual effects than for engine cores. A free-directional version with wrap-around has been implemented in many of the latest titles today in less obvious ways, such as a fast text scrolling engine or even to scroll banners in a 3D universe, which ultimately adds a professional edge to the product.

Designing the Class

This effect can be performed using any graphics library that has a way to blit a rectangular section of a source image to a destination. The class can be easily self-contained and adapted to any environment. Example code has been included with this article for further clarification that can be inserted into any gaming project.

First, what variables are necessary to track a pan? Obviously, pointers are required to both the destination and source surfaces. Also, assuming that we wish only to blit to an area on the destination as compared to the entire surface, the class also requires a RECT structure of the area. The (x, y) coordinates of our current box on the source image are needed as well as the speed in the x and y direction. Furthermore, to reduce real-time computations, the width and height of the destination area and a special effects flag (which includes transparency) are needed.

As for member functions, our panning class will have Create(src, dest, destrect, xspeed, yspeed, fx), and an automated Pan(void).

class CPan  {
private:
  CSurface *src;
  CSurface *dest;

  RECT     panarea;
  int      xspeed, yspeed;
  DWORD    destwidth, destheight;
  DWORD    colorfx;

  UINT     x, y;

public: ...
};

Possible Cases

When panning with wrap-around, there are four possible cases when copying pieces of the source image to the destination (see Figure). In fact, this process brings us back to the days of VGA and VESA page breaks, but luckily this isn’t quite as bad.

First, the box may be fully contained within the source image, meaning that no wrap-around is required, just one simple blit.

In the second case, the image is being panned horizontally and a break is parallel to the y-axis. A break occurs only when the image is being wrapped because part of the image displayed on the destination is from one side of the source while the other part is from the other side. In this case, two blits must be made - one from the left side of the image, and one from of the right.

The third case is similar, except this time the image is being panned vertically, and, thus, a break is parallel to the x-axis.

The fourth case, however, is rather tricky. This time the image is being panned diagonally and it has two break lines, one on the x-axis and one on the y-axis, which means that four blits must be performed. Luckily, most of these can be generalized using instances from the previous cases because the source image is broken by the wrap-around both horizontally and vertically.

Next : Panning