Reduce animation flickering in app?

Please support our Java advertiser: Programming Forums - DaniWeb Sister Site
Reply

Join Date: Nov 2007
Posts: 28
Reputation: Cleo123 is an unknown quantity at this point 
Solved Threads: 0
Cleo123 Cleo123 is offline Offline
Light Poster

Reduce animation flickering in app?

 
0
  #1
Mar 22nd, 2008
I have had to repaint a couple of times because of a moving shape I have added to my program whenever the mouse is clicked. I also have a moving shape that follows the mouse over a grid as well which doesn't help a lot, could you please tell me how to reduce this flickering?

The code I have used for the moving counter is:

  1.  
  2. /* Show the counter appearing above the columns the mouse is over between the restricted co-ordinates and set the counter to the colour depending on the player turn */
  3. if(xPosCounter >= leftXPos && xPosCounter <= rightXPos)
  4. {
  5. g.setColor(counterColour);
  6. g.fillOval(xPosCounter-(counterWidth/2), yPos - counterHeight*grid[0].length, counterWidth, counterHeight);
  7. }

And for the animation I have used a timer with a delay of 100 frames per second and this is repainted in action performed but what really started the bad flickering was when I had to add a repaint here:

  1.  
  2. int lowestYPosition = lowestRow;
  3. lowestFallingPosition = (lowestYPosition * (counterHeight + gapBetweenCounterSlots)) + topYPos;
  4.  
  5. //Droppping counter
  6. if(unfrozen == true && yPositionMovingCounter < lowestFallingPosition) { //Ypos starts at the beginning of the grid and ends at the bottom
  7. startAnimation();
  8. yPositionMovingCounter = yFwdLine (topYPos,15);
  9. g.setColor(Color.red);
  10. g.fillOval (centeredCounterInColumn, yPositionMovingCounter, counterWidth, counterHeight);
  11. repaint();

If I didn't my grid disappeared. I could really do without this flickering because it makes my program look rubbish. Anyone know any methods for this?
Reply With Quote Quick reply to this message  
Join Date: Aug 2007
Posts: 3,584
Reputation: jasimp has a spectacular aura about jasimp has a spectacular aura about jasimp has a spectacular aura about 
Solved Threads: 52
Featured Poster
jasimp's Avatar
jasimp jasimp is offline Offline
Senior Poster

Re: Reduce animation flickering in app?

 
0
  #2
Mar 22nd, 2008
I think what you are looking for is double buffering. I have used the following code before in my applets where I used a listener. I hope it works for you.

  1. public void update(Graphics g) {
  2. Graphics offgc;
  3. Image offscreen = null;
  4. Dimension d = size();
  5. offscreen = createImage(d.width, d.height);
  6. offgc = offscreen.getGraphics();
  7. offgc.setColor(getBackground());
  8. offgc.fillRect(0, 0, d.width, d.height);
  9. offgc.setColor(getForeground());
  10. paint(offgc);
  11. g.drawImage(offscreen, 0, 0, this);
  12.  
  13. }
"Argyou not with the hand you are dealt in cards or life." ---- Wizard and Glass
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 28
Reputation: Cleo123 is an unknown quantity at this point 
Solved Threads: 0
Cleo123 Cleo123 is offline Offline
Light Poster

Re: Reduce animation flickering in app?

 
0
  #3
Mar 22nd, 2008
That's the thing, I already tried bufferGraphics and it did work for everything apart from the animation. The code I have for it is:
  1.  
  2. // The object we will use to write with instead of the standard screen graphics
  3. Graphics bufferGraphics;
  4.  
  5. // The image that will contain everything that has been drawn on bufferGraphics
  6. Image offscreen;
  7.  
  8. //Variable to store width and height of the application
  9. Dimension appSize;
  10.  
  11. //Get the width and height of the app
  12. appSize = getSize();
  13.  
  14. // Create an offscreen image to draw on which is the same size as the app
  15. offscreen = createImage(appSize.width,appSize.height);
  16.  
  17. //Everything that is drawn by bufferGraphics will be done on the offscreen image
  18. bufferGraphics = offscreen.getGraphics();
  19.  
  20. // Clear everything that has been drawn before
  21. bufferGraphics.clearRect(0,0,appSize.width,appSize.width);
  22.  
  23. bufferGraphics.drawImage(offscreen,0,0,this);

There were 3 missing lines compared to yours so I tried to add them in but got an out of memory awt Event error so I thought it best to just keep what I've got. Do you know if there
is anything other than this?
Reply With Quote Quick reply to this message  
Join Date: May 2007
Posts: 4,505
Reputation: Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future Ezzaral has a brilliant future 
Solved Threads: 521
Moderator
Featured Poster
Ezzaral's Avatar
Ezzaral Ezzaral is offline Offline
Industrious Poster

Re: Reduce animation flickering in app?

 
0
  #4
Mar 24th, 2008
Not seeing the other methods that might be involved with painting it's difficult to say with certainty, but the need to start the animation and then draw more things and repaint seems like trouble. Obviously the animation loop is repainting, so it shouldn't be necessary to call repaint again after it's started. What method is that code residing in and how often is it called?

I would ask the same question about the buffered image code that you posted above. Is the buffered image being created each time or just once and updated as needed?
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 28
Reputation: Cleo123 is an unknown quantity at this point 
Solved Threads: 0
Cleo123 Cleo123 is offline Offline
Light Poster

Re: Reduce animation flickering in app?

 
0
  #5
Mar 24th, 2008
I had to repaint after the animation because after the animation played my grid which was painted before hand disappears and I didn't know why so I just added it again which stopped this happening. All of this is under the paint method as the animation involves moving an oval downwards (the dropping of the counter in connect 4). This is called every time the mouse is clicked (the player takes their turn). The buffered image code is also under the paint method and update is called whenever repaint is called:

  1.  
  2. public void update(Graphics g1)
  3. {
  4. paint(g1);
  5. }

I have called repaint under:
mousemoved to get x and move the counter above the grid (code shown above)

mouseclicked to make the new inserted counter appear in my grid

----Just found the problem!

I also had repaint under action listener which was supposed to be part of the animation code so I commented it and then commented the extra repaint I had after the animation code which got rid of the constant flickering (which is the program being repainted all the time) which occurred after the animation was played.

Now the flickering own happens during the animation as I am repainting the oval to move downwards and whenever I move the mouse (to move the counter that follows the mouse over the grid).

Wish this repainting weren't noticeable, but I have to repaint to show the updated image...Don't think theres anything else I could do? Would this be noticeable if I was on a faster computer?
Last edited by Cleo123; Mar 24th, 2008 at 4:27 pm.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Other Threads in the Java Forum
Thread Tools Search this Thread



Tag cloud for Java
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC