Anti Flicker Graphics using Double Buffering and how to make simple graphic moves.

• Download source files - 5.88 Kb
• Download demo project - 3.63 Kb

Introduction

While writing a game which I will hopefully release later on here, I had to find a way to reduce flicker. I also ran into the problem of the redraws causing the game to move extremely slow. I did some research and found out about DoubleBuffering, Timers and PaintEvents. I hope you learn from this as much as I did.

Step1: Making the Timer

1. Go to the toolbar after you have made the basic WinForm skeleton. Select Timer and drag it to the WinForm.
2. Right click on the Timer and hit Properties.
   1. Make sure that enabled is set to true.
   2. Make the Interval to 1.
   3. Click on the the Lightening bolt (event maker).
      • Where you see tick, add an event named moveme.
      • Now once we have an event, it will take you to the code block.
      • Add the following:
        C#

        if(CarsXValue>0)
            CarsXValue-=Carspeed;
        else
        {
            CarsXValue=672;
        }
        Invalidate();

Step2: Make a Paint Event

Now we need to make a paint event that will draw our images for us. So we do the following:

1. Include the following in the form1() constructor:
   C#

   Paint += new PaintEventHandler(OnPaint);

2. Then you need to actually make the Onpaint event by doing the following.
   C#

   void OnPaint(Object sender, PaintEventArgs e)
   {
       Graphics g = e.Graphics;
   
       DrawCar(g);
   }

3. Make a DrawCar function that will draw the images for us:
   C#

   void DrawCar(Graphics g)
   {
       g.DrawImage(FastCar,CarsXValue,672);
   //draw the image using the image fastcar
   //its x value
   //and a hardcoded y value
   }

Step 3: Make Our Variables

Now we need some variables to control our movement. We also need an image to draw and a X co-ordinate that I will explain.

1. Make the following variables where all the other main variables are declared.
   C#

   int CarsXValue=0; // x cordinate used for the car
   int CarSpeed=2; // how fast it will move across the screen
   Image FastCar=Image.FromFile("fastcar.gif"); // our car image

*****Make sure the FASTCAR.GIF is in the debug or release folder**********

Step 4: Turn on Double Buffering

We now turn on double buffering to prevent flicker. Include the following code in the Form1() constructor. And you're all set.

SetStyle(ControlStyles.UserPaint, true);
SetStyle(ControlStyles.AllPaintingInWmPaint, true);
SetStyle(ControlStyles.DoubleBuffer, true);
SetStyle(ControlStyles.UserPaint, true);
SetStyle(ControlStyles.AllPaintingInWmPaint, true);
SetStyle(ControlStyles.DoubleBuffer, true);

Step 5: Compile and Run

Again make sure that the fastcar.gif is in your debug or release folder depending on which build configuration you have selected.

Conclusion:

I hope this helps you as much as it did me.