这是用于在Java / Swing中创建平滑动画的良好设计吗？

Question

I have a JPanel subclass with custom paintComponent() implementation. It is being refreshed at 50fps. It is typically in the range of 500x300 pixels in size. I'm seeing some flickering (not too bad but noticeable) and I've inserted some debug code that indicates that Swing/EDT is skipping (presumably) redundant painting. I am guessing that's because the EDT is not giving enough time for paintComponent() to always finish or it is taking too much time on the EDT.

My thinking is that I need to take the code currently implementing paintComponent() (which is not very complex but not completely trivial either) and refactor it so it is executed on its own Thread (or at least not the EDT) and draws to an ImageBuffer. I then implement paintComponent on my custom JPanel and draw (render) from the ImageBuffer to the screen (actually to the buffer behind Swing components as my research into the solution led me some information about Swing being (by default) double-buffered, though I'm not completely clear on that). If it is true that the rendering from the ImageBuffer to the JPanel is faster than my implementation that constructs the ImageBuffer then I will be going in the right direction.

Is this the proper design direction for me to take?

UPDATE

I modified my implementation as discussed in reponses below:

1) Create a BufferedImage

BufferedImage myBufferedImage = new BufferedImage(mySize.width,mySize.height,BufferedImage.TYPE_INT_ARGB)

2) Create a Thread dedicated to peforming the processing to determine what is to be drawn.

3) Move the code previously in paintComponent() to another method that is executed by the dedicated Thread. At the end of this method, call repaint();

4) Create a new paintComponent() that simply calls g.drawImage(myBufferedImage,0,0,null);

5) Where I previously would call repaint(), trigger myThread to perform the drawing to myBufferedImage.

This was a disaster, as predicted. Much worse flickering and sluggishness, partial paints, etc. I believe this was due to contention reading/writing myBufferedImage (as mentioned below). So I then created a lock and lock myBufferedImage when I am writing to it (in the dedicated drawing Thread) and wait to get that lock in paintComponent() before calling Graphics2D.drawImage(); The flicker and partial paints go away - but performance is no better (maybe even worse) than when I was doing all the calculations for the drawing in paintComponent (and therefore in the EDT).

This has me stumped at this point.

Answer 1

If you're not updating the entire component (ie only small areas are changing), you could use JComponent#repaint(Rectangle r) indicating the areas that have changed. This will result in a repaint cycle that updates (potentially) a much smaller area.

I generated a "animated sequence" library some time ago to take a series of images and layer them ontop of each, given a "speed" of each layer, it would transpose them from right to left.

The whole sequence would cycle for 10 seconds, where a speed of 1 would take take 10 seconds to complete. Each layer is moving at difference speeds.

The original images where 1024x256, and the sequence was devised of 5 animated layers and 2 static layers...

I only wish I could show you how smooth this plays on my PC and Mac.

The only signification issue I had to over come was making sure that the images where compatible with the screen devices color model.

UPDATED

These are some utility classes I use when loading or creating BufferedImage s, especially for animation. The make sure that the colour models are the same as those used by the screens, which will make them faster to update/repaint

public static BufferedImage loadCompatibleImage(URL resource) {

    BufferedImage image = null;

    try {
        image = ImageIO.read(resource);
    } catch (IOException ex) {
    }

    return image == null ? null : toCompatibleImage(image);

}

public static BufferedImage toCompatibleImage(BufferedImage image) {

    if (image.getColorModel().equals(getGraphicsConfiguration().getColorModel())) {

        return image;

    }

    BufferedImage compatibleImage =
            getGraphicsConfiguration().createCompatibleImage(
            image.getWidth(), image.getHeight(),
            image.getTransparency());

    Graphics g = compatibleImage.getGraphics();
    g.drawImage(image, 0, 0, null);
    g.dispose();

    return compatibleImage;

}


public static GraphicsConfiguration getGraphicsConfiguration() {

    return GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration();

}

// Check out java.awt.Transparency for valid values
public static BufferedImage createCompatibleImage(int width, int height, int transparency) {

    BufferedImage image = getGraphicsConfiguration().createCompatibleImage(width, height, transparency);
    image.coerceData(true);
    return image;

}

Answer 2

I think this is what you're looking for on information about double buffering:

http://docs.oracle.com/javase/tutorial/extra/fullscreen/doublebuf.html

You could turn off double buffering with setDoubleBuffered(false) if you can't get access to the underlying buffer which I'm not entirely sure you can.

I don't think you can safely draw on an image from another thread because you'll get into the thread writing to the image while the EDT is reading that same image as it redraws. If you share an image between them you're going to have multi-threading issues that you'll have to synchronize. If you synchronize then you're performance isn't going to be very good. If you instantiate a new image every frame you're memory is going to skyrocket and GC will get you. You may be able to instantiate 10 frames and keep the writing away from the reading or something like that, but either way this is going to very tricky to make it performant and correct.

My suggestion is to do all drawing from EDT, and figure out a way to do the calculations (rendering) on another thread that doesn't involve ImageBuffer sharing.

Update While it is used for fullscreen. The suggestions in there apply to windowed mode as well: "Separate your drawing code from your rendering loop, so that you can operate fully under both full-screen exclusive and windowed modes." See this http://docs.oracle.com/javase/tutorial/extra/fullscreen/rendering.html

Answer 3

i've has similar problems trying to paint smoothly.

try running this and see how smooth it is (its smooth for me).

profiler says most of the time is in paint component. interestingly draw image is not mentioned.

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
class P extends JPanel {
    void init(Dimension d) {
        GraphicsConfiguration gc=getGraphicsConfiguration();
        bi=gc.createCompatibleImage(d.width,d.height);
    }
    @Override public void paintComponent(Graphics g) {
        //super.paintComponent(g);
        if(bi!=null)
            g.drawImage(bi,0,0,null);
    }
    BufferedImage bi;
}
public class So13424311 {
    So13424311() {
        p=new P();
    }
    void createAndShowGUI() {
        Frame f=new JFrame("so13424311");
        // f.setUndecorated(true);
        f.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
        f.add(p);
        p.init(d);
        p.setSize(d);
        p.setPreferredSize(d);
        f.pack();
        // if(moveToSecondaryDisplay)
        // moveToSecondaryDisplay(f);
        f.setVisible(true);
    }
    void run() {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
        Timer t=new Timer(20,new ActionListener() {
            @Override public void actionPerformed(ActionEvent e) {
                Graphics g=p.bi.getGraphics();
                Color old=g.getColor();
                g.fillRect(0,0,d.width,d.height);
                g.setColor(Color.red);
                g.fillRect(n%(d.width/2),n%(d.height/2),20,20);
                g.setColor(Color.green);
                g.fillRect(n%(d.width/2)+20,n%(d.height/2),20,20);
                g.setColor(Color.blue);
                g.fillRect(n%(d.width/2),n%(d.height/2)+20,20,20);
                g.setColor(Color.yellow);
                g.fillRect(n%(d.width/2)+20,n%(d.height/2)+20,20,20);
                g.setColor(old);
                g.dispose();
                p.repaint();
                n++;
            }
            int n;
        });
        t.start();
    }
    public static void main(String[] args) {
        new So13424311().run();
    }
    final P p;
    Dimension d=new Dimension(500,300);
}