Drawing to a backbuffer

[Aaron Roberts]

I've written a simple app which shows some graphics on the screen and does some very basic sprite movement. I don't know/understand the best way to redraw each frame though.

What I'm doing now is approximately this -

paintComponent(Graphics g) {
 
   // fill my bufferedimage with black
   // Draw some stuff directly on the g context
   // pass the graphics context of my bufferedImage to a routine
   // do a drawImage call on g with my bufferedImage
 
}

This works, but it seems like a very 'expensive way' to do the drawing each frame. Is there some way to clear out the bufferedImage without doing a fill? Would it be better to create a new image each time - seems like I'd be moving lots of memory around that way.

I read the article at -

http://weblogs.java.net/pub/wlg/435

and wondered if using a volatile image would be a better way. I'm not using full screen mode. I'm drawing on a JPanel, by overriding its paintComponent method.

Thanks!

[Craig Wood]

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.event.*;
import javax.swing.Timer;
 
public class VolatileImageTest
{
    public static void main(String[] args)
    {
        AnimationPanel animationPanel = new AnimationPanel();
        SelectionPanel selection = new SelectionPanel(animationPanel);
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(animationPanel);
        f.getContentPane().add(selection, "South");
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}
 
class AnimationPanel extends JPanel
{
    BufferedImage bImage;
    VolatileImage vImage;
    int imageWidth, imageHeight;
    boolean firstTime, isVolatile;
    Point p;
    int dx, dy;
    Timer timer;
    int delay;
 
    public AnimationPanel()
    {
        firstTime = true;
        isVolatile = true;
        p = new Point(75,75);
        dx = 3;
        dy = 2;
        loadImage();
        delay = 40;
        timer = new Timer(delay, new ActionListener()
        {
            public void actionPerformed(ActionEvent e)
            {
                animate();
            }
        });
        timer.start();
        setBackground(Color.white);
    }
 
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        if(firstTime)
            createVolatileImage();
        AffineTransform at = AffineTransform.getTranslateInstance(p.x, p.y);
        if(isVolatile)
        {
            do
            {
                int state = vImage.validate(getGraphicsConfiguration());
                if(state == VolatileImage.IMAGE_INCOMPATIBLE)
                {
                    System.out.println("IMAGE_INCOMPATIBLE");
                    createVolatileImage();
                }
                g2.drawImage(vImage, at, this);
            }
            while(vImage.contentsLost());
        }
        else
            g2.drawImage(bImage, at, this);
    }
 
    private void createVolatileImage()
    {
        if(vImage != null)
        {
            vImage.flush();
            vImage = null;
        }
        System.out.println("createVolatileImage");
        vImage = createVolatileImage(imageWidth, imageHeight);
        Graphics2D g2 = vImage.createGraphics();
        g2.drawImage(bImage, 0, 0, this);
        g2.dispose();
        if(firstTime)
        {
            ImageCapabilities ic = vImage.getCapabilities();
            System.out.println("isAccelerated = " + ic.isAccelerated() + "\n" +
                               "isTrueVolatile = " + ic.isTrueVolatile());
            firstTime = false;
        }
    }
 
    private void animate()
    {
        int w = getWidth();
        int h = getHeight();
        if(p.x + dx < 0 || p.x + dx + imageWidth > w)
            dx *= -1;
        if(p.y + dy < 0 || p.y + dy + imageHeight > h)
            dy *= -1;
        p.x += dx;
        p.y += dy;
        repaint(p.x - dx, p.y - dy, p.x + dx + imageWidth, p.y + dy + imageHeight);
    }
 
    public void setIsVolatile(boolean state)
    {
        isVolatile = state;
        //System.out.println("isVolatile = " + isVolatile);
    }
 
    public void setDelay(int delay)
    {
        timer.setDelay(delay);
    }
 
    private void loadImage()
    {
        String fileName = "images/duke/T6.gif";
        try
        {
            URL url = getClass().getResource(fileName);
            bImage = ImageIO.read(url);
        }
        catch(MalformedURLException mue)
        {
            System.out.println("url: " + mue.getMessage());
        }
        catch(IOException ioe)
        {
            System.out.println("read: " + ioe.getMessage());
        }
        imageWidth = bImage.getWidth();
        imageHeight = bImage.getHeight();
    }
}
 
class SelectionPanel extends JPanel
{
    AnimationPanel animationPanel;
 
    public SelectionPanel(AnimationPanel ap)
    {
        animationPanel = ap;
        String[] text = { "volatile", "buffered" };
        final JRadioButton[] buttons = new JRadioButton[text.length];
        ButtonGroup group = new ButtonGroup();
        ActionListener l = new ActionListener()
        {
            public void actionPerformed(ActionEvent e)
            {
                animationPanel.setIsVolatile(buttons[0].isSelected());
            }
        };
        final JSlider delaySlider = new JSlider(JSlider.HORIZONTAL, 10, 175, 40);
        delaySlider.setMinorTickSpacing(25);
        delaySlider.setMajorTickSpacing(100);
        delaySlider .setPaintTicks(true);
        delaySlider.setPaintLabels(true);
        delaySlider.addChangeListener(new ChangeListener()
        {
            public void stateChanged(ChangeEvent e)
            {
                int value = delaySlider.getValue();
                animationPanel.setDelay(value);
            }
        });
        setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.insets = new Insets(2,2,2,2);
        add(new JLabel("image types"), gbc);
        gbc.weightx = 1.0;
        gbc.gridwidth = gbc.RELATIVE;
        for(int j = 0; j < buttons.length; j++)
        {
            buttons[j] = new JRadioButton(text[j]);
            group.add(buttons[j]);
            buttons[j].addActionListener(l);
            add(buttons[j], gbc);
            gbc.gridwidth = gbc.REMAINDER;
        }
        buttons[0].setSelected(true);
        gbc.weightx = 0;
        gbc.gridwidth = 2;
        add(new JLabel("delay"), gbc);
        gbc.weightx = 1.0;
        add(delaySlider, gbc);
    }
}

[Aaron Roberts]

Hey thanks alot for the example!

I didn't have the T6 image in the path you had listed, so I grabbed one from the j2sdk under the applets examples. It looks like a molecule of some sort.

The only difference on my machine was that using a volatile image, the background gets drawn. IE I get a grey box around the pic as it bounces around the screen. The buffered doesn't do this.

It also seems to stutter when I drop the delay down all the way to 10. Its not a jerkiness per se. You can see the pic sliding across at a constant speed and then it hiccups ever so slightly. Would this be the garbage collector maybe?

Regards,
Aaron R>

[Craig Wood]

The gray box around your volatile image suggests trouble in this line:

    repaint(p.x - dx, p.y - dy, p.x + dx + imageWidth, p.y + dy + imageHeight);

I used the T6 in the tumbling duke image sequence from the sun example index. It has a white background and was being rendered on a white background in the app so I could have had some invisible artifacts. You could try the no–argument repaint to see if it works any better. I may have messed up the clipping rectangle. Please let me know how you do with it.

Did you read Chet's second article? It has some more code and information. I found that re–initializing the volatile image when validate returns VolatileImage.IMAGE_RESTORED (as shown in the articles and api) causes some tail–chasing: the renewed image triggers the IMAGE_RESTORED state.

I was pleased to find that the volatile image never needed to be re–initialized, even when I did some of the things on Chet's list of lost–data causes like launching the windows task manager. And I also could not distinguish any difference in appearance or performance between the volatile and buffered images.

I also observed the uneven motion of the image at high speeds near 10. I think this is caused by Swing adding separate calls to repaint together as they pile up in the event dispatch thread queue.