Image flickers on repaint()

Question

I figured out the solution for my previous question which landed me into new problem.

In the following code im moving an image around a JFrame using arrow keys. but every time i press an arrow key the image seems to flicker which is quite noticeable when a key is pressed continuously.

import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;


public class TestProgram extends JFrame implements KeyListener {
    private BufferedImage TestImage;
    private int cordX = 100;
    private int cordY = 100;

    public TestProgram() {
        setTitle("Testing....");
        setSize(500, 500);
        imageLoader();
        setVisible(true);
    }

    public void imageLoader() {
        try {
            String testPath = "test.png";
            TestImage = ImageIO.read(getClass().getResourceAsStream(testPath));

        } catch (IOException ex) {
            ex.printStackTrace();
        }

        addKeyListener(this);
    }

    @Override
    public void paint(Graphics g) {
        super.paint(g);
        g.drawImage(TestImage, cordX, cordY, this);
    }

    public static void main(String[] args) {
        new TestProgram();
    }


    public void keyPressed(KeyEvent ke) {
        switch (ke.getKeyCode()) {
            case KeyEvent.VK_RIGHT: {
                cordX+=5;
            }
            break;
            case KeyEvent.VK_LEFT: {
                cordX-=5;
            }
            break;
            case KeyEvent.VK_DOWN: {
                cordY+=5;
            }
            break;
            case KeyEvent.VK_UP: {
                cordY-=3;
            }
            break;
        }
        repaint();
    }

    public void keyTyped(KeyEvent ke) {}

    public void keyReleased(KeyEvent ke) {}
}

Is there any solution to avoid that?

EDIT: above is the complete working code. I'm finding it difficult to incorporate doublebuffer in it. can anyone help me in that part?

1) For better help sooner, post an [SSCCE](http://sscce.org/). 2) Don't extend frame. 3) Don't paint in top-level containers (like `JFrame`) instead extend a `JPanel` 3) Set the preferred size of the panel and call `pack()` rather than set the size for the frame 4) For a non TLC, override `paintComponent()` rather than `paint()` 5) Start and alter the GUI on the EDT. 6) For Swing apps., consider using key bindings instead of a `KeyListener`. 7) At time of deployment, you will probably need to access the image by URL. — Andrew Thompson, Jun 03 '12 at 10:31
I have added a working example. need help in incorporating the Double Buffer part. Thanks — md1hunox, Jun 04 '12 at 08:49

score 6 · Answer 1 · answered Jun 06 '12 at 03:13

Non flickering, working Code.

Repaint() doesn't just call the paint() method. A repaint() method actually calls the update() method and the default update() method then calls to the paint() method. So just override the update() method. Also painting as BufferedImage as mentioned above correctly.

This should work now. It worked fine here. I only used a different imagepath.

import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JFrame;

public class TestProgram extends JFrame implements KeyListener {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private Image TestImage;
    private BufferedImage bf;
    private int cordX = 100;
    private int cordY = 100;

    public TestProgram() {
        setTitle("Testing....");
        setSize(500, 500);
        imageLoader();
        setVisible(true);
    }



    public void imageLoader() {
        try {
            String testPath = "test.png";
            TestImage = ImageIO.read(getClass().getResourceAsStream(testPath));

        } catch (IOException ex) {
            ex.printStackTrace();
        }

        addKeyListener(this);
    }

    public void update(Graphics g){
           paint(g);
    }

    public void paint(Graphics g){

        bf = new BufferedImage( this.getWidth(),this.getHeight(), BufferedImage.TYPE_INT_RGB);

    try{
    animation(bf.getGraphics());
    g.drawImage(bf,0,0,null);
    }catch(Exception ex){

    }
}

    public void animation(Graphics g) {
        super.paint(g);
        g.drawImage(TestImage, cordX, cordY, this);
    }

    public static void main(String[] args) {
        new TestProgram();
    }

    public void keyPressed(KeyEvent ke) {
        switch (ke.getKeyCode()) {
        case KeyEvent.VK_RIGHT: {
            cordX += 5;
        }
            break;
        case KeyEvent.VK_LEFT: {
            cordX -= 5;
        }
            break;
        case KeyEvent.VK_DOWN: {
            cordY += 5;
        }
            break;
        case KeyEvent.VK_UP: {
            cordY -= 3;
        }
            break;
        }
        repaint();
    }

    public void keyTyped(KeyEvent ke) {
    }

    public void keyReleased(KeyEvent ke) {
    }
}

score 4 · Accepted Answer · answered Jun 03 '12 at 10:32

4

You have to use a Buffer to get rid of the flickering. For images, there is the BufferedImage Buffer:

BufferedImage bf = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_RGB);

Then you draw your image to the screen like this:

g.drawImage(bf, 0, 0, null);

answered Jun 03 '12 at 10:32

Stefan Fandler

1,141
7
13

1) Use an `ImageObserver` rather than `null` when you have one. 2) Swing components are double buffered by default. – Andrew Thompson Jun 03 '12 at 10:33

Image flickers on repaint()

2 Answers2

Linked