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?

Answer 1

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);

Answer 2

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) {
    }
}