Recent

Author Topic: Animation for a four-in-a-row game  (Read 2759 times)

Roland57

  • Full Member
  • ***
  • Posts: 111
Animation for a four-in-a-row game
« on: August 28, 2020, 01:22:30 pm »
Hello friends!

I started to work on a new interface for a four-in-a-row game. I would like to make the disk fall behind the grid.

I made a little demo, which works well, excepted that after animation the grid becomes pixelated, I don't know why.

I attach the project. If you have time to take a look. It's a very simple program. Click on the button "Start" to make the disk fall. That's all.  :)

P.-S. Attachment removed. New version of the project below.
« Last Edit: September 03, 2020, 06:49:29 am by Roland57 »

circular

  • Hero Member
  • *****
  • Posts: 3579
    • Personal webpage
Re: Animation for a four-in-a-row game
« Reply #1 on: September 02, 2020, 01:25:22 pm »
Hi Roland,

The antialiasing goes away because the program draws many times the blue grid, so where it is opaque nothing changes, and where it is half-transparent, it becomes more and more opaque each time.

I understand you want to draw the grid to hide the disk. In this case, I would recommend another approach.

When you draw the disk, in fact draw everything. The background, the disk and the grid. To avoid redrawing everything, simply set the ClipRect to the area that is changed.

Regards
Conscience is the debugger of the mind

Roland57

  • Full Member
  • ***
  • Posts: 111
Re: Animation for a four-in-a-row game
« Reply #2 on: September 02, 2020, 07:06:21 pm »
The antialiasing goes away because the program draws many times the blue grid, so where it is opaque nothing changes, and where it is half-transparent, it becomes more and more opaque each time.

Ah, I understand now. I should have thought of it sooner.

I understand you want to draw the grid to hide the disk. In this case, I would recommend another approach.

When you draw the disk, in fact draw everything. The background, the disk and the grid. To avoid redrawing everything, simply set the ClipRect to the area that is changed.

OK, I will try that. Thank you very much.  :)

Roland57

  • Full Member
  • ***
  • Posts: 111
Re: Animation for a four-in-a-row game
« Reply #3 on: September 03, 2020, 06:58:02 am »
When you draw the disk, in fact draw everything. The background, the disk and the grid. To avoid redrawing everything, simply set the ClipRect to the area that is changed.

It works perfectly, and the code is simpler.  8-)

Roland57

  • Full Member
  • ***
  • Posts: 111
Re: Animation for a four-in-a-row game
« Reply #4 on: September 03, 2020, 07:28:26 am »
With a slightly prettier grid.

circular

  • Hero Member
  • *****
  • Posts: 3579
    • Personal webpage
Re: Animation for a four-in-a-row game
« Reply #5 on: September 03, 2020, 10:42:32 am »
Ok, so you chose the whole column, that's a good idea.

To optimize further, you can tell the OS to invalidate only that column:

Code: Pascal  [Select][+][-]
  1. uses LCLIntf;
  2.  
  3. procedure TForm1.Timer1Timer(Sender: TObject);
  4. const
  5.   CStep = 12;
  6. var
  7.   r: TRect;
  8. begin
  9.   if not LData.Done then
  10.   begin
  11.     VirtualScreen.PutImage(0, 0, Background, dmSet);
  12.     VirtualScreen.PutImage(LData.x, LData.y, Disk, dmDrawWithTransparency);
  13.     VirtualScreen.PutImage(48 - 3, 48 * 2 - 3, Grid, dmDrawWithTransparency);
  14.     r := VirtualScreen.ClipRect;
  15.     InvalidateRect(Self.Handle, @r, false);
  16.  
  17.     if LData.y < 48 * 7 then
  18.       Inc(LData.y, CStep)
  19.     else
  20.       LData.Done := TRUE;
  21.   end;
  22. end;
  23.  
Conscience is the debugger of the mind

Roland57

  • Full Member
  • ***
  • Posts: 111
Re: Animation for a four-in-a-row game
« Reply #6 on: September 05, 2020, 09:42:02 am »
Ok, so you chose the whole column, that's a good idea.

To optimize further, you can tell the OS to invalidate only that column:

Thank you for the tip. I remember now that you had already given it to me, but I had forgotten it.  :-[

Here is a new version of the project. Now the user can change the size and the style of the grid. The pictures are created by the program imagefactory. If you want to play with it, you have to copy arial.ttf in imagefactory folder, and to use your own wood texture. I removed these files from the ZIP file to make it not too heavy.

I am glad of the result, except maybe for the colors. The choice of colors is a pain. If I would listen to myself, I would use only shades of gray.  :)

The question about animation is solved. But if ever you have other ideas, I would be glad, of course, to hear them.

Regards.

Roland

P.-S. I also deleted the 32x32 pictures, otherwise the attachment was still too big.



Roland57

  • Full Member
  • ***
  • Posts: 111
Re: Animation for a four-in-a-row game
« Reply #7 on: September 05, 2020, 06:12:13 pm »
I am glad of the result, except maybe for the colors. The choice of colors is a pain. If I would listen to myself, I would use only shades of gray.  :)

I think I have found something that will help me.  :)

https://www.w3schools.com/colors/colors_monochromatic.asp

circular

  • Hero Member
  • *****
  • Posts: 3579
    • Personal webpage
Re: Animation for a four-in-a-row game
« Reply #8 on: September 07, 2020, 01:17:12 pm »
Very nice.

Some remarks:
- Would be nice to have some gravity (vertical speed increased each time)
- Personally I don't like the green background. But the blue grid with red and yellow is just like in my memories :)
- Wait for the animation to finish to allow a new one
- Store at least how many tokens are in a column, to avoid replacing them
Conscience is the debugger of the mind

winni

  • Hero Member
  • *****
  • Posts: 2015
Re: Animation for a four-in-a-row game
« Reply #9 on: September 07, 2020, 01:49:38 pm »


Some remarks:
- Would be nice to have some gravity (vertical speed increased each time)


Hi!

Remember that a falling body has NOT a linear relationship to time:

distance = 1/2 * g * sqr (time)

Winni



circular

  • Hero Member
  • *****
  • Posts: 3579
    • Personal webpage
Re: Animation for a four-in-a-row game
« Reply #10 on: September 07, 2020, 10:21:19 pm »
Yes. Increasing the speed each time amounts to have the position as a square of time.
Conscience is the debugger of the mind

Roland57

  • Full Member
  • ***
  • Posts: 111
Re: Animation for a four-in-a-row game
« Reply #11 on: September 08, 2020, 01:20:04 pm »
@circular, winni

Thank you for your answers.

Very nice.

Thank you.  :)

Some remarks:
- Would be nice to have some gravity (vertical speed increased each time)
- Personally I don't like the green background. But the blue grid with red and yellow is just like in my memories :)
- Wait for the animation to finish to allow a new one
- Store at least how many tokens are in a column, to avoid replacing them

All that done, excepted for the gravity. (I tried to play with TTimer.Interval but it didn't work well. I will try to play with the step value.)

Here is the new version. Only the pictures for default style ("blue") are included. To create other styles, please compile and run imagefactory, or create your own style with imagefactory_gui.

The "style" submenu is created at runtime.

 

circular

  • Hero Member
  • *****
  • Posts: 3579
    • Personal webpage
Re: Animation for a four-in-a-row game
« Reply #12 on: September 08, 2020, 05:46:01 pm »
For gravity, here is how you can do:
Code: Pascal  [Select][+][-]
  1. procedure TForm1.Timer1Timer(Sender: TObject);
  2. var
  3.   LRect: TRect;
  4.   LDisk: TBGRABitmap;
  5.   maxy: Integer;
  6.   nextTurn: boolean;
  7.   cushion: integer;
  8. begin
  9.   if not LData.Done then
  10.   begin
  11.     Inc(LData.y, LData.dy);
  12.     inc(LData.dy, LScale div 12); //gravity
  13.     maxy := LScale * (8 - LRow);
  14.     nextTurn := false;
  15.     if LData.y >= maxy then //touch bottom
  16.     begin
  17.       LData.y := maxy;
  18.       cushion := LScale div 4;
  19.       if LData.dy >= cushion then //enough energy to bounce?
  20.         LData.dy := -((LData.dy - cushion) div 2)
  21.       else
  22.       begin
  23.         LData.dy := 0;
  24.         nextTurn := true;
  25.       end;
  26.     end;
  27.  
  28.     FBuffer.PutImage(0, 0, FBackground, dmSet);
  29.     if LActiveColor then LDisk := FBlackDisk else LDisk := FWhiteDisk;
  30.     FBuffer.PutImage(LData.x, LData.y, LDisk, dmDrawWithTransparency);
  31.     FBuffer.PutImage(LScale - 4, LScale * 2 - 4, FGrid, dmDrawWithTransparency);
  32.     LRect := FBuffer.ClipRect;
  33.     InvalidateRect(Self.Handle, @LRect, FALSE);
  34.  
  35.     if nextTurn then
  36.     begin
  37.       LData.Done:= TRUE;
  38.       LActiveColor := not LActiveColor;
  39.     {$IFDEF DEBUG}
  40.       WriteLn(GridToText(LGrid));
  41.     {$ENDIF}
  42.     end;
  43.  
  44.   end;
  45. end;
Note: you need to add dy variable to LData and set it to zero when starting the animation.
Conscience is the debugger of the mind

Roland57

  • Full Member
  • ***
  • Posts: 111
Re: Animation for a four-in-a-row game
« Reply #13 on: September 08, 2020, 06:48:43 pm »
For gravity, here is how you can do:

Very well done.  :)

winni

  • Hero Member
  • *****
  • Posts: 2015
Re: Animation for a four-in-a-row game
« Reply #14 on: September 08, 2020, 07:11:41 pm »
Hi

And where is the graviton?

It is postulated since ~ 1930.
My physics teacher told me that it wont take long  to find it.
50 years ago.
Until now nobody has seen it.

So Roland57 should draw some little gravitons in his game.
Will be the first seen gravitons ever!

Winni

 

TinyPortal © 2005-2018