Ad:

Java Discussion Thread
Unsolved
Views: 3567

Mar 22nd, 2008

Reduce animation flickering in app?

Expand Post »

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:

Java Syntax (Toggle Plain Text)
 
/* 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 */
        if(xPosCounter >= leftXPos && xPosCounter <= rightXPos)
        {
            g.setColor(counterColour);
            g.fillOval(xPosCounter-(counterWidth/2), yPos - counterHeight*grid[0].length, counterWidth, counterHeight);
        }
 
/* 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 */
        if(xPosCounter >= leftXPos && xPosCounter <= rightXPos)
        {
            g.setColor(counterColour);
            g.fillOval(xPosCounter-(counterWidth/2), yPos - counterHeight*grid[0].length, counterWidth, counterHeight);
        }

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:

Java Syntax (Toggle Plain Text)
 
        int lowestYPosition = lowestRow;
        lowestFallingPosition = (lowestYPosition * (counterHeight + gapBetweenCounterSlots))     + topYPos;
 
        //Droppping counter
        if(unfrozen == true && yPositionMovingCounter < lowestFallingPosition) {                                                                                       //Ypos starts at the beginning of the grid and ends at the bottom
        startAnimation();
        yPositionMovingCounter = yFwdLine (topYPos,15);
        g.setColor(Color.red);
        g.fillOval (centeredCounterInColumn, yPositionMovingCounter, counterWidth, counterHeight);
        repaint();
        int lowestYPosition = lowestRow;
        lowestFallingPosition = (lowestYPosition * (counterHeight + gapBetweenCounterSlots))     + topYPos;

        //Droppping counter
        if(unfrozen == true && yPositionMovingCounter < lowestFallingPosition) {                                                                                       //Ypos starts at the beginning of the grid and ends at the bottom
        startAnimation();
        yPositionMovingCounter = yFwdLine (topYPos,15);
        g.setColor(Color.red);
        g.fillOval (centeredCounterInColumn, yPositionMovingCounter, counterWidth, counterHeight);
        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?

StephNicolaou

Reputation Points: 43

Solved Threads: 12

Junior Poster

Offline

159 posts
since Nov 2007

Permalink

Mar 22nd, 2008

Re: Reduce animation flickering in app?

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.

Java Syntax (Toggle Plain Text)
  public void update(Graphics g) {
    Graphics offgc;
    Image offscreen = null;
    Dimension d = size();
    offscreen = createImage(d.width, d.height);
    offgc = offscreen.getGraphics();
    offgc.setColor(getBackground());
    offgc.fillRect(0, 0, d.width, d.height);
    offgc.setColor(getForeground());
    paint(offgc);
    g.drawImage(offscreen, 0, 0, this);
 
  }
  public void update(Graphics g) {
    Graphics offgc;
    Image offscreen = null;
    Dimension d = size();
    offscreen = createImage(d.width, d.height);
    offgc = offscreen.getGraphics();
    offgc.setColor(getBackground());
    offgc.fillRect(0, 0, d.width, d.height);
    offgc.setColor(getForeground());
    paint(offgc);
    g.drawImage(offscreen, 0, 0, this);

  }

jasimp

Featured Poster

Reputation Points: 533

Solved Threads: 53

Senior Poster

Offline

3,593 posts
since Aug 2007

Permalink

Mar 22nd, 2008

Re: Reduce animation flickering in app?

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:

Java Syntax (Toggle Plain Text)
 
 // The object we will use to write with instead of the standard screen graphics
    Graphics bufferGraphics;
 
    // The image that will contain everything that has been drawn on bufferGraphics
    Image offscreen;
 
    //Variable to store width and height of the application
    Dimension appSize;
 
        //Get the width and height of the app
        appSize = getSize();
 
        // Create an offscreen image to draw on which is the same size as the app
        offscreen = createImage(appSize.width,appSize.height);
 
        //Everything that is drawn by bufferGraphics will be done on the offscreen image
        bufferGraphics = offscreen.getGraphics();
 
        // Clear everything that has been drawn before
            bufferGraphics.clearRect(0,0,appSize.width,appSize.width);
 
        bufferGraphics.drawImage(offscreen,0,0,this);
 // The object we will use to write with instead of the standard screen graphics
    Graphics bufferGraphics;

    // The image that will contain everything that has been drawn on bufferGraphics
    Image offscreen;

    //Variable to store width and height of the application
    Dimension appSize;

        //Get the width and height of the app
        appSize = getSize();

        // Create an offscreen image to draw on which is the same size as the app
        offscreen = createImage(appSize.width,appSize.height);

        //Everything that is drawn by bufferGraphics will be done on the offscreen image
        bufferGraphics = offscreen.getGraphics();

        // Clear everything that has been drawn before
            bufferGraphics.clearRect(0,0,appSize.width,appSize.width);

        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?

StephNicolaou

Reputation Points: 43

Solved Threads: 12

Junior Poster

Offline

159 posts
since Nov 2007

Permalink

Mar 24th, 2008

Re: Reduce animation flickering in app?

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?

Ezzaral

Moderator

Featured Poster

Reputation Points: 3239

Solved Threads: 839

Posting Genius

Offline

6,761 posts
since May 2007

Permalink

Mar 24th, 2008

Re: Reduce animation flickering in app?

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:

Java Syntax (Toggle Plain Text)
 
  public void update(Graphics g1)
    {
    paint(g1);
    }
  public void update(Graphics g1)
    {
    paint(g1);
    }

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 StephNicolaou; Mar 24th, 2008 at 4:27 pm.

StephNicolaou

Reputation Points: 43

Solved Threads: 12

Junior Poster

Offline

159 posts
since Nov 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in Java Forum Timeline: help with j2me code

Next Thread in Java Forum Timeline: very adnce java please need help thank you very much

DaniWeb Message

Cancel Changes

User Name
Password