Java 2D game graphics

Question

Next semester we have a module in making Java applications in a team. The requirement of the module is to make a game. Over the Christmas holidays I've been doing a little practice, but I can't figure out the best way to draw graphics.

I'm using the Java Graphics2D object to paint shapes on screen, and calling repaint() 30 times a second, but this flickers terribly. Is there a better way to paint high performance 2D graphics in Java?

Solution 1

What you want to do is to create a canvas component with a BufferStrategy and render to that, the code below should show you how that works, I've extracted the code from my self written Engine over here.

Performance solely depends on the stuff you want to draw, my games mostly use images. With around 1500 of them I'm still above 200 FPS at 480x480. And with just 100 images I'm hitting 6k FPS when disabling the frame limiting.

A small game (this one has around 120 images at once at the screen) I've created can be found here (yes the approach below also works fine as an applet.)

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.GraphicsConfiguration;
import java.awt.GraphicsEnvironment;
import java.awt.Toolkit;
import java.awt.Transparency;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.awt.image.BufferStrategy;
import java.awt.image.BufferedImage;

import javax.swing.JFrame;
import javax.swing.WindowConstants;

public class Test extends Thread {
    private boolean isRunning = true;
    private Canvas canvas;
    private BufferStrategy strategy;
    private BufferedImage background;
    private Graphics2D backgroundGraphics;
    private Graphics2D graphics;
    private JFrame frame;
    private int width = 320;
    private int height = 240;
    private int scale = 1;
    private GraphicsConfiguration config =
            GraphicsEnvironment.getLocalGraphicsEnvironment()
                .getDefaultScreenDevice()
                .getDefaultConfiguration();

    // create a hardware accelerated image
    public final BufferedImage create(final int width, final int height,
            final boolean alpha) {
        return config.createCompatibleImage(width, height, alpha
                ? Transparency.TRANSLUCENT : Transparency.OPAQUE);
    }

    // Setup
    public Test() {
        // JFrame
        frame = new JFrame();
        frame.addWindowListener(new FrameClose());
        frame.setDefaultCloseOperation(WindowConstants.DO_NOTHING_ON_CLOSE);
        frame.setSize(width * scale, height * scale);
        frame.setVisible(true);

        // Canvas
        canvas = new Canvas(config);
        canvas.setSize(width * scale, height * scale);
        frame.add(canvas, 0);

        // Background & Buffer
        background = create(width, height, false);
        canvas.createBufferStrategy(2);
        do {
            strategy = canvas.getBufferStrategy();
        } while (strategy == null);
        start();
    }

    private class FrameClose extends WindowAdapter {
        @Override
        public void windowClosing(final WindowEvent e) {
            isRunning = false;
        }
    }

    // Screen and buffer stuff
    private Graphics2D getBuffer() {
        if (graphics == null) {
            try {
                graphics = (Graphics2D) strategy.getDrawGraphics();
            } catch (IllegalStateException e) {
                return null;
            }
        }
        return graphics;
    }

    private boolean updateScreen() {
        graphics.dispose();
        graphics = null;
        try {
            strategy.show();
            Toolkit.getDefaultToolkit().sync();
            return (!strategy.contentsLost());

        } catch (NullPointerException e) {
            return true;

        } catch (IllegalStateException e) {
            return true;
        }
    }

    public void run() {
        backgroundGraphics = (Graphics2D) background.getGraphics();
        long fpsWait = (long) (1.0 / 30 * 1000);
        main: while (isRunning) {
            long renderStart = System.nanoTime();
            updateGame();

            // Update Graphics
            do {
                Graphics2D bg = getBuffer();
                if (!isRunning) {
                    break main;
                }
                renderGame(backgroundGraphics); // this calls your draw method
                // thingy
                if (scale != 1) {
                    bg.drawImage(background, 0, 0, width * scale, height
                            * scale, 0, 0, width, height, null);
                } else {
                    bg.drawImage(background, 0, 0, null);
                }
                bg.dispose();
            } while (!updateScreen());

            // Better do some FPS limiting here
            long renderTime = (System.nanoTime() - renderStart) / 1000000;
            try {
                Thread.sleep(Math.max(0, fpsWait - renderTime));
            } catch (InterruptedException e) {
                Thread.interrupted();
                break;
            }
            renderTime = (System.nanoTime() - renderStart) / 1000000;

        }
        frame.dispose();
    }

    public void updateGame() {
        // update game logic here
    }

    public void renderGame(Graphics2D g) {
        g.setColor(Color.BLACK);
        g.fillRect(0, 0, width, height);
    }

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

Solution 2

The flickering is due to you writing direct to the screen. Use a buffer to draw on and then write the entire screen in 1 go. This is Double Buffering which you may have heard of before. Here is the simplest form possible.

public void paint(Graphics g)
{

    Image image = createImage(size + 1, size + 1);
    Graphics offG = image.getGraphics();
    offG.setColor(Color.BLACK);
    offG.fillRect(0, 0, getWidth(), getHeight());
    // etc

See the use of the off screen graphics offG. It is expensive to create the off screen image so I would suggest creating it only on first call.

There's other areas you can improve this further eg creating a compatible image, using clipping etc. For more fine tuned control of animation you should look into active rendering.

There's a decent page I have bookmarked discussing game tutorials here.

Good luck!

Solution 3

Java OpenGL (JOGL) is one way.

Solution 4

I think you made an override from paint(Graphics g)? This is not the good way. Use the same code but in paintComponent(Graphics g) instead of paint(Graphics g).

A label you can search is doublebuffer. That is what will be done automatically by overriding paintComponent.

View more solutions

Comments

[Martin]

JOGL is nice, but I doubt I can persuade other members of the team to use it. The teams are seeded across all skill levels, and while I'#m the kind of person who makes games in their spare time and writes concurrent code for fun, other people in the group are going to want to keep things as simple as possible (unfortunately)

[Martin]

so I can literally just copy the code from paint to paint component and everything will work the same, except it'll be double buffered?

[Martijn Courteaux]

yes, that is what I mean. The Feast's answer describes what happening. But Java had already a solution build-in. What The Feast does is just avoiding to use paintComponent and making his own solution.

[Martijn Courteaux]

Thanks!!! This is very intresting. The FPS limiting also. The game you made is VERY NICE!

[Pool]

Interesting, is strategy.show() safe to call from outside the EDT?

[Ivo Wetzel]

Short test with a second thread says yes, it is safe. For the try/catch, that's only there because Toolkit.getDefaultToolkit().sync() MAY throw an exception in rare cases.

[Pool]

Thanks, I've asked a question regarding whether I can use this in a Swing application here stackoverflow.com/questions/1966707/…

[Martin]

I'm getting some strange results with the screen not clearing properly. I'm drawing a full screen, filled, black rectangle, before calling my draw method. However, the screen isn't properly cleared from the last frame. Any ideas what I might be doing wrong?

[Ivo Wetzel]

Hm, I have no problems with the code above, may be something in your code changed the width/height variables?

[Martin]

I hardcoded height and width to 800/600 and scale to 1. I managed to fix it myself, although my end code looks quite different to the above code!

[Diogo Schneider]

You can also achieve the same with AWT's Frame, so you won't hurt the "don't mix Swing and AWT" recommendation.