Re: Flicker Problem in GDI+ - C# Discussion Boards

13-May-08 2:12

hi i have a panel and timer in my form, in timer.tick event handler, i want to draw a circle and increase pos.X in every timer interval, but when i run app and start animation, it has a flicker and not smoothing animation, also in constructor of my form, i write this code :
this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true);
and set Form.DoubleBuffered to true, but still my problem was not solve, how to remove flicker correctly ?
here is all of my code :

int lastX;<br />
        int lastY;<br />
        bool reverse = false;<br />
        Pen pen = new Pen(Brushes.Red, 2);<br />
<br />
        public Form1()<br />
        {<br />
            InitializeComponent();<br />
            this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true);<br />
        }        <br />
<br />
        private void button1_Click(object sender, EventArgs e)<br />
        {            <br />
            this.timer1.Start();<br />
        }<br />
<br />
        private void Paint(Graphics g,int x,int y)<br />
        {<br />
            g.Clear(Color.White);<br />
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;<br />
            g.DrawEllipse(this.pen, new Rectangle(x, y, 100, 100));<br />
        }<br />
<br />
        private void timer1_Tick(object sender, EventArgs e)<br />
        {<br />
            if (!this.reverse)<br />
            {<br />
                if ((this.lastX + 102) <= this.panel1.Width)<br />
                {<br />
                    this.lastX += 2;<br />
                }<br />
                else<br />
                {<br />
                    this.reverse = true;<br />
                }<br />
            }<br />
            else<br />
            {<br />
                if (this.lastX >= 0)<br />
                {<br />
                    this.lastX -= 2;<br />
                }<br />
                else<br />
                {<br />
                    this.reverse = false;<br />
                }<br />
            }<br />
            this.Paint(this.panel1.CreateGraphics(), this.lastX, this.lastY);<br />
        }

thanks

Anthony Mushrow13-May-08 2:35

13-May-08 2:35

You should really only draw in the OnPaint event (or override), so if you want to redraw the circle then you need to have it drawn in OnPaint and call this.Invalidate(); to update the screen.

My current favourite word is: Bacon!

-SK Genius

Game Programming articles start -here[^]-

hdv21213-May-08 5:58

13-May-08 5:58

Thanks SK Genius
i modify my code as follow :

public partial class Form1 : Form<br />
    {<br />
        int lastX;<br />
        int lastY;<br />
        bool reverse = false;<br />
        Pen pen = new Pen(Brushes.Red, 2);<br />
<br />
        public Form1()<br />
        {<br />
            InitializeComponent();<br />
            this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true);<br />
        }        <br />
<br />
        private void panel1_Paint(object sender, PaintEventArgs e)<br />
        {<br />
            this.timer1.Start();<br />
            this.panel1.Invalidate();<br />
        }<br />
<br />
        private void Paint(Graphics g,int x,int y)<br />
        {<br />
            g.Clear(Color.White);<br />
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;<br />
            g.DrawEllipse(this.pen, new Rectangle(x, y, 100, 100));<br />
            this.panel1.Invalidate();<br />
        }<br />
<br />
        private void timer1_Tick(object sender, EventArgs e)<br />
        {<br />
            if (!this.reverse)<br />
            {<br />
                if ((this.lastX + 102) <= this.panel1.Width)<br />
                {<br />
                    this.lastX += 2;<br />
                }<br />
                else<br />
                {<br />
                    this.reverse = true;<br />
                }<br />
            }<br />
            else<br />
            {<br />
                if (this.lastX >= 0)<br />
                {<br />
                    this.lastX -= 2;<br />
                }<br />
                else<br />
                {<br />
                    this.reverse = false;<br />
                }<br />
            }<br />
            this.Paint(this.panel1.CreateGraphics(), this.lastX, this.lastY);<br />
        }        <br />
    }

but result was very bad and my problem was not solve, can u wite your suggestion code ?
thanks

Anthony Mushrow13-May-08 6:07

13-May-08 6:07

You need to put this.timer1.Start() somewhere else (like, wherever you had it before) and move this.panel1.Invalidate() into your timer.

Then, call your draw method from within the onPaint event:

private void panel1_Paint(object sender, PaintEventArgs e)
{
  this.Paint(e.Graphics, this.lastX, this.lastY);
}

Don't forget to remove this.Paint(...) from your timer.

int lastX;
int lastY;
bool reverse = false;
Pen pen = new Pen(Brushes.Red, 2);

public Form1()
{
  InitializeComponent();
  this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true);
  this.timer1.Start();
} 

private void panel1_Paint(object sender, PaintEventArgs e)
{
  this.Paint(e.Graphics, this.lastX, this.lastY);
}

private void Paint(Graphics g,int x,int y)
{
  g.Clear(Color.White);
  g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;
  g.DrawEllipse(this.pen, new Rectangle(x, y, 100, 100));
  this.panel1.Invalidate();
}

private void timer1_Tick(object sender, EventArgs e)
{
  if (!this.reverse)
  {
    if ((this.lastX + 102) <= this.panel1.Width)
    {
      this.lastX += 2;
    }
    else
    {
      this.reverse = true;
    }
  }
  else
  {
    if (this.lastX >= 0)
    {
      this.lastX -= 2;
    }
    else
    {
      this.reverse = false;
    }
  }
  this.panel1.Invalidate();
}

My current favourite word is: Bacon!

-SK Genius

Game Programming articles start -here[^]-

hdv21213-May-08 6:17

13-May-08 6:17

Thanks again
but do u test your code ?
i run this code, but it's get very bad result :

public partial class Form1 : Form<br />
    {<br />
        int lastX; int lastY; <br />
        bool reverse = false; <br />
        Pen pen = new Pen(Brushes.Red, 2); <br />
        <br />
        public Form1() <br />
        { <br />
            InitializeComponent(); <br />
            this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true); this.timer1.Start();<br />
        } <br />
        <br />
        private void panel1_Paint(object sender, PaintEventArgs e) <br />
        { <br />
            this.Paint(e.Graphics, this.lastX, this.lastY);<br />
        }<br />
        <br />
        private void Paint(Graphics g, int x, int y) <br />
        { <br />
            g.Clear(Color.White); <br />
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed; <br />
            g.DrawEllipse(this.pen, new Rectangle(x, y, 100, 100)); <br />
            this.panel1.Invalidate(); <br />
        }<br />
        <br />
        private void timer1_Tick(object sender, EventArgs e) <br />
        { <br />
            if (!this.reverse)             <br />
            { <br />
                if ((this.lastX + 102) <= this.panel1.Width) <br />
                { <br />
                    this.lastX += 2;<br />
                } <br />
                else <br />
                { <br />
                    this.reverse = true;<br />
                } <br />
            } <br />
            else <br />
            { <br />
                if (this.lastX >= 0) <br />
                { <br />
                    this.lastX -= 2; <br />
                } <br />
                else <br />
                { <br />
                    this.reverse = false;<br />
                } <br />
            } this.panel1.Invalidate();<br />
        }<br />
    }

Anthony Mushrow13-May-08 6:18

13-May-08 6:18

... whats the interval on your timer?

My current favourite word is: Bacon!

-SK Genius

Game Programming articles start -here[^]-

hdv21213-May-08 6:19

13-May-08 6:19

it's set to 1

Anthony Mushrow13-May-08 6:34

13-May-08 6:34

Haha, ok, windows timers lose any kind of accuracy at about 1/18th of a second, so setting it to one isn't much better than setting it to 40.

Go download the demo code off of my article here[^] it has some simple code for a MultimediaTimer, which can be accurate to the millisecond (though you probably want to set it to about 16, which is about 60fps).

I recommend reading my couple of articles and stealing the code to make your shape move, and i'm not just advertising, i think you will find them usefull (the code anyway). First article here[^]

My current favourite word is: Bacon!

-SK Genius

Game Programming articles start -here[^]-

hdv21213-May-08 6:42

13-May-08 6:42

Thanks again SK Genius
but when i set Timer.Interval to 100, it's still get me wrong result.

Anthony Mushrow13-May-08 6:50

13-May-08 6:50

I think we may have left this.panel1.Invalidate(); in the Paint(graphics, int, int); method, take that out and it should be much better, it still flickered though.

Oh, i got it to stop flickering by taking out g.Clear(Color.White); just set the panels backcolor to white instead.

My current favourite word is: Bacon!

-SK Genius

Game Programming articles start -here[^]-

hdv21213-May-08 6:58

13-May-08 6:58

yes SK Genius
when i remove this.panel1.Invalidate(); from Paint(graphics, int, int); it is much better, but still a little flicker, is there anyway to remove this little flicker ?
and, i very nice to meet , and if you have Yahoo Messnger ID , Add me , i'm very glad to meet u in my messenger list, thanks alot.
My Yahoo Messenger ID : pesar_irooni_1362