Sprite flickering when overlapping another sprite.

Java 2D
#1

Hi All,

I have an application that loads about 30 frames for each sprite, when 1 sprite animates there is no flicker at all even if I scroll it around the screen.

When 2 or more sprites overlap, thats when things get interesting; they flicker like crazy, where overlapping takes place.
See attached image.

How do I fix this?

Thanks in advance.

#2

Alpha channel

#3

The problem might be, that they overdraw each other in random. You have to make sure, they are always painted in the same order, so that it is consistent, which sprite is “in front”. Additionally you need some double buffering/bufferstrategy to make sure, the screen only gets updated when your canvas is fully painted. After that you need to make the black space around the cow transparent (see above ;)), so you dont get the uggly black rectangle.

#4

The images are png so they have a transparent background, I will try synchronize the painting, thanks.

#5

If the images actually do have a proper transparency then I don’t see how you could possibly have the overlap problems your screenshot shows. If you change the background colour to (say) green what does it look like then?

At a guess, you’re loading your png images as RGB instead of RGBA and so are throwing away the alpha channel on load.

#6

The problem was that the sprite was on a JPanel, so I had to setOpaque(false); on the panel.
The flickering was the panel not the image.

Thank you.

#7

You shouldn’t move jpanels around for sprites, but paint the sprites directly on the backgounds Graphics object.

#8

o_O

Why on earth would you try and put each sprite on it’s on panel?

#9

Sorry guys I am new to this, I will get the app working without the use of a JPanel.

Thanks again for all your help.

#10

in my time as a programer, flickering when moving always meant you need double buffering ^^

#11

The flickering has gone away now ;D

This is the sprite class (below), it is not perfect but it works fine, I still want to change the timer to a thread.
Can anyone recommend other improvements?

public class Sprite extends Component {

private int frameDelay;
private int frames;
private BufferedImage[] images;
private Timer timer;
private int imageIndex = 0;
private String imageDir;
private int imageWidth;
private int imageHeight;

public Sprite(final int delay, final String imageDir) {
    this.frameDelay = delay;
    this.imageDir = imageDir;
    this.initSprite();
}

public void initSprite() {
    this.setImages(loadImages());
    timer = new Timer(this.frameDelay, new ActionListener() {

        public void actionPerformed(ActionEvent e) {
            imageIndex = (imageIndex + 1) % Sprite.this.frames;
            repaint();
        }
    });
    timer.start();
}

@Override
public void paint(Graphics g) {
    super.paint(g);
    try {
        g.drawImage(this.getImages()[imageIndex], 0, 0, this);
    } catch (Exception ex) {
        System.out.println("ERROR: " + ex.getMessage());
    }
}

private List<String> getFileList() {
    // read all image names from the .list file
    File f = new File("images/" + this.imageDir + "/img.list");
    List<String> fileList = new ArrayList<String>();
    try {
        BufferedReader reader = new BufferedReader(new FileReader(f));
        String line = null;

        while ((line = reader.readLine()) != null) {
            fileList.add(line);
        }

        reader.close();

        // set the frames for reference
        this.setFrames(fileList.size());

    } catch (Exception ex) {
        System.out.println(ex.getMessage());
    }

    return fileList;
}

private BufferedImage[] loadImages() {
    List<String> fileList = getFileList();

    // load the images into the image buffer
    BufferedImage[] images = new BufferedImage[fileList.size()];
    for (int j = 0; j < this.getFrames(); j++) {
        try {
            File file = new File("images/" + this.imageDir + "/" + fileList.get(j));
            images[j] = ImageIO.read(file);
        //System.out.println("Loaded: " + "images/" + this.imageDir + "/" + fileList.get(j));
        } catch (IOException ioe) {
            System.out.println("read trouble: " + ioe.getMessage());
        }
    }

    //get the dimensions
    this.imageWidth = images[0].getWidth(this);
    this.imageHeight = images[0].getHeight(this);

    return images;
}

…getters and setters here