1. Computing
Picture Motion - Double Buffering
Part I: Intro and Overview: What is Double Buffering.
 More of this Feature
• Part 2: Double Buffering Project
  Related Resources
• Graphics Programming with Delphi
• Delphi Graphics Effects
• TImage.Bitmap Fade Out

Article submitted by: Cevahir PARLAK

This article explains some of the concepts of double buffering, which is used to prevent flicker when drawing onto the screen. It includes Delphi code to show how to implement some of the theories.

This example application uses a simple approach to buffered graphics and masking using Delphi.Later I will dive into DirectX and explain some ideas about picture motion.

However for a beginner programmer interested in writing games or graphic intensive applications in Delphi , this could be useful. Even if you ultimately want to work in WinG or DirectX, this could be useful for prototyping with. This works just as well for Delphi 1.0. And there is even a way to do this in Visual Basic.

Note that the program's redraw rate is set to 50 milli-seconds. Assuming that your machine can redraw it all in this amount of time, the animation should occur at 20 frames a second. The human visual system works at just over 20 "frames" a second so the movement of the Symbols should appear smooth. ( If I understand it correctly, the human visual system works at half the speed of the brain, which fires at just over 40 cycles a second.)

Buffered Drawing
The idea in buffered drawing is to prepare the screen image in non-visible memory, and then either making that memory visible, or copying from the non-visible memory to visible memory.

Look at what this program has to do each timer event. First it draws the whole wall. Then it draws each symbol, first the symbol's mask, then the symbol's image.

If this was being drawn directly to the screen, the symbols would take on an unpleasant flickering and see-through appearance. This is because some times your eye will be seeing the wall before the symbol is drawn, and other times it will be seeing the symbol. That is, some times you will be seeing the wall beneath the symbol.

By preparing the drawing to an invisible location, and then only drawing the final output to the screen, you only see that part of the wall that is not covered by the symbols.

This approach takes advantage of some of the less apparent features of the Image and PaintBox controls.

How the Buffer Works
What I do is place a visible PaintBox on the form for where I want to show the graphics. I then have an equal sized but invisible (visible=false) Image control. I prepare the graphic output in the invisible Image, which servers as the buffer. I then copy the invisible Image to the visible PaintBox.

The real trick here is using a PaintBox control (in the System control set) as the visible component, and Image control (in the Additional control set) for the invisible controls. For some reason this is the only combination that seems to work, though you could probably use a Forms canvas in place of the PaintBox canvas.

Not only does the CopyRect() method work well here, all the other drawing methods of a canvas can be used in this was.

Next page > Double Buffering Project > Page 1, 2


Subscribe to the Newsletter

©2014 About.com. All rights reserved.