Contents  The Game  Threads  Keyboard and Mouse  Double Buffering  Coding the Game  Printable version  Discuss this article  in the forums The Series  The Basics  Making a  Simple Game  The Power of Arrays

Double Buffering

We have been focusing on the input and looping phases of our game so far, but now it is time to get back into looking at the output phase. Double buffering is a technique that will be familiar to anyone who has done much in the way of game programming. A common problem that you will notice as soon as you make an applet with threads is that you get an annoying flicker. This flicker comes from the fact that we are drawing bits and pieces of our game when we should be drawing all of our game at once.

The trick to fixing the flicker problem is actually very simple. The first step that we want to take is to setup a couple of variables.

  Image offscreenImage;
  Graphics offscr;

The variable offscreenImage is going to be our backbuffer where we will draw what will be appearing next on screen. We need the variable offscr to hold the graphics context of our backbuffer so that we can later draw a variety of stuff into it just like we normally would in our paint method.

  width = size().width;
  height = size().height;

  offscreenImage = createImage(width, height);
  offscr = offscreenImage.getGraphics();

The next important step that we need to take is to setup our backbuffer so that we actually have some space to draw into and then we need to get its graphics context which we will store in offscr. You will notice that I use width and height to store the dimensions of my applet space and that I then use these values to create a backbuffer that is the same size. In order to get the graphics context of this backbuffer I simply have to call the method getGraphics in my variable offscreenImage and we are set. One other note that you need to watch out for is that these four lines of code should be placed inside the init method so that they are executed when the applet first starts up.

  
  offscr.setColor(Color.black);
  offscr.fillRect(0, 0, width, height);

  offscr.setColor(Color.blue);
  offscr.fillArc(0,0,width,height,startAngle,arcAngle);

  g.drawImage(offscreenImage, 0, 0, this);

This next segment of code is an example of what will be in your paint method. The first step is to clear the backbuffer. We do this by simply creating a filled rectangle that has the dimensions of our applet space. Take care to note that rather than using the usual graphics context g we are instead using our backbuffer which is represented by offscr. You can clear the backbuffer to any color that you want, but I decided here that black was a good color. We can then proceed to draw any shapes or text that we would like to display while making sure that we use offscr rather than g. Once we are ready to flip our buffers and display what is in the backbuffer on the screen we then use g.drawImage to display the buffer on the screen. This way we draw everything at once. If you don’t remember what the parameters of the drawImage method stand for make sure you check back to part one of this series.

  public void update(Graphics g)
  {
    paint(g);
  }

This piece of code that we need to add to our program to get double buffering working is the update method. Normally the update method clears the screen and then paints, but this will again lead to flicker so we need to make sure that all it does is paint. If you try writing a program with the above code, but leave out the update method change that I have shown you will still see flicker and all your work will be for naught so take care.

Next : Coding the Game