how to delete the canvas rectangle

[molly]

draw to an off-screen bitmap to prevent flickering,

how can i do that?

That quote was actually mine 

Given your canvas.rar example you
a) create a global bitmap (don't forget to assign it the proper dimensions)
b) whenever you need to draw your graphics you do that on the bitmap.canvas instead.
c) Whenever you want your graphics displayed on the Form you then copy the contents of that bitmap to your forms's canvas.
d) when your app is done, don't forget to free the bitmap again   

Seems' i'm unable to find a good example that resembles your exact situation but if i would have to choose one then it would be this small snippet. But, don't let yourself confused by the separate class. I only pointed to it for you to see how to create and destroy a bitmap, draw to it and how to copy the contents of the bitmap to somewhere else.

But if you want you could take that example almost literally and implement your own 'game-screen' component in a similar fashion (if you are new to bitmaps i would advise against that right now and advise to just play around with bitmaps first for the experience).

[Handoko]

I wrote 2 codes to show the flickering effect and the solution to solve it following what molly said:

a) create a global bitmap (don't forget to assign it the proper dimensions)
b) whenever you need to draw your graphics you do that on the bitmap.canvas instead.
c) Whenever you want your graphics displayed on the Form you then copy the contents of that bitmap to your forms's canvas.
d) when your app is done, don't forget to free the bitmap again

Flickering and performance are the most basic things a game programmer need to pay attention about. Flickering issue can be solved easily.

For simple games (like snake), flickering rarely happens. It will become noticeable when lots of objects needed to paint on the screen. Below is the common things that may happen when running a game:
  repeat
     clear the screen
     paint object #1
     paint object #2
     ...
     paint object #1000
  end

If only few objects needed to paint on the screen (for example only 10 objects), flickering issue almost never happen. The time between clearing the screen and painting the last object is the key factor, the longer it is the more noticeable flickering effect. It is because the monitor need time to perform the update/refresh.

The solution is simple: "don't paint every single object on the screen directly".

We paint all the objects on a memory buffer, and then we update the screen using a single command to show (or copy) the memory buffer to the screen. TBitmap is good to use as the memory buffer for this case.

My Demo1 shows flickering on my Core2 Quad GeForce 430 Dell monitor if I set the TotalParticles >= 1000. On different hardware, the value may be lower or higher.

The code of Demo2 is basically the same as Demo1, but it does not paint the screen directly so there will no noticeable flickering (I tried to set TotalParticles = 5000).

The differences between the 2 codes are:
- The declaration of variable "TempOutput: TBitmap;"
- Preparing TempOutput on FormCreate
- Freeing TempOutput on FormDestroy
- The procedure DrawGameWorld

Code: Pascal  [Select][+][-]

1. procedure TForm1.DrawGameWorld;
2. const
3.   Padding = 2;
4. var
5.   X, Y: Integer;
6.   ScreenX, ScreenY: Integer;
7. begin
8.  
9.   // Clear the temporary output
10.   TempOutput.Canvas.Brush.Color := clWhite;
11.   TempOutput.Canvas.FillRect(0, 0, Width, Height);
12.  
13.   // Draw on the canvas of the temporary output
14.   for X := 1 to WorldWidth do
15.     for Y := 1 to WorldHeight do
16.       begin
17.         ScreenX := (X-1) * Scale;
18.         ScreenY := (Y-1) * Scale;
19.         TempOutput.Canvas.Brush.Color := GameWorld[X,Y].Color;
20.         case GameWorld[X, Y].Item of
21.           Empty: ; // do nothing
22.           Box: TempOutput.Canvas.Rectangle(ScreenX, ScreenY, ScreenX+Scale-Padding, ScreenY+Scale-Padding);
23.           Circle: TempOutput.Canvas.Ellipse(ScreenX, ScreenY, ScreenX+Scale-Padding, ScreenY+Scale-Padding);
24.           end;
25.       end;
26.  
27.   // Draw the temporary output to the active form's canvas
28.   Canvas.Draw(0, 0, TempOutput);
29. end;

[shs]

so do i have to put drawgame procedure or can i do it without it?
because i didn't put that in my snake game coding

[Handoko]

Drawgame procedure? Did you mean DrawGameWorld?

For simple games, you do not need it. For complex games, it is a good practice to put all the drawing commands into a single procedure for easier maintaining reason. You can see, I can change the Demo1 to Demo2 to solve the flickering effect easily because I already put all the drawing commands into DrawGameWorld.

[shs]

so i just have to put tempout before canvas right?

for example tempout.canvas.rectangle(box) like that?

[molly]

for example tempout.canvas.rectangle(box) like that?

Yes.

But, with regards to your canvas.rar example you have something else to consider. Your example draws to the canvas on separate locations inside your code (e.g. you draw and delete at exactly the same time that your game-logic adds or deletes items). You should not do that. Instead you should make one routine that draw everything in one go to the canvas (whatever that canvas might belong to, form or bitmap).

But hold on for a moment. I lost track. Do you already have a working snake-game that works with drawing rectangles to the canvas ? Or is your current working solution only working with TShapes that are placed on the form ?

[rvk]

But hold on for a moment. I lost track. Do you already have a working snake-game that works with drawing rectangles to the canvas ? Or is your current working solution only working with TShapes that are placed on the form ?

TS already had a working canvas-version.
See here http://forum.lazarus.freepascal.org/index.php/topic,38136.msg262927.html#msg262927

[molly]

Thank you very much rvk !

Ok, in that case, the following still stands:

...
But, with regards to your canvas.rar example you have something else to consider. Your example draws to the canvas on separate locations inside your code (e.g. you draw and delete at exactly the same time that your game-logic adds or deletes items). You should not do that. Instead you should make one routine that draw everything in one go to the canvas (whatever that canvas might belong to, form or bitmap).
...

First try to rewrite things so that everything gets drawn to the form canvas (inside event .FormPaint() ) in one go. So try to 'remove' the drawing command from methods .adding() and .delete(). If you are able to accomplish that then updating that code to use a off-screen bitmap becomes much easier.