Graphics 2D Flickering Problem (using BufferedImage)

Newbie & Debugging Questions
#1

Hello there, My name is, as you might have guessed, Matthias. I just today(!) bought ‘Beginning Java Se 6 Game Programming’ Third Edition by Jonathan S. Harbour. I used an example in the book to rotate a polygon when pressing the left key or right key or clicking the left or right mouse button. Now it did sort of work but there was alot of flickering so I tried to implement a backbuffer since the book had covered that briefly earlier. However my attempts were futile and I am now sort of stuck. There is no hurry in this, I am doing this as a hobby. Please realize that altough I have a intuition for programming, when it comes to Java I am a beginner. Any help is very much appreciated. Here is my source code:

package randomshapes;
import java.awt.*;
import java.applet.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
public class RandomShapes extends Applet implements KeyListener, MouseListener{

	private int[]xpoints = {0,-10,-7,7,10};
	private int[]ypoints = {-10,-2,10,10,-2};
	private Polygon poly;
	BufferedImage backbuffer;
	Graphics2D g2d;
	int rotation = 0;
	//applet init
	public void init(){
		poly = new Polygon(xpoints,ypoints,xpoints.length);
		addKeyListener(this);
		addMouseListener(this);
		backbuffer = new BufferedImage(getSize().width, getSize().height, BufferedImage.TYPE_INT_RGB);
		g2d = backbuffer.createGraphics();
	}
	
	
	public void update(Graphics g){
		Graphics2D g2d = (Graphics2D) g;

		
		//AffineTransform identity = new AffineTransform();
		
		int width = getSize().width;
		int height = getSize().height;
		
		g2d.setColor(Color.BLACK);
		g2d.fillRect(0, 0, width,  height);
		
		g2d.translate(width/2, height/2);
		g2d.scale(20, 20);
		g2d.rotate(Math.toRadians(rotation));
		
		g2d.setColor(Color.RED);
		g2d.fill(poly);
		
		g2d.drawImage(backbuffer, 0, 0,this);
		
		paint(g2d);
		
	}
	
	
	
	public void paint(Graphics g) {
		g.drawImage(backbuffer, 0, 0,this);
	}
	
	public void keyReleased(KeyEvent k){}
	public void keyTyped(KeyEvent k){}
	public void keyPressed(KeyEvent k){
	
	switch (k.getKeyCode()){
	case KeyEvent.VK_LEFT:
		rotation--;
		if (rotation < 0) rotation = 359;
		//repaint();
		update(g2d);
		break;
	case KeyEvent.VK_RIGHT:
		rotation++;
		if (rotation > 360) rotation = 0;
		//repaint();
		update(g2d);
		break;
		}		
	}
	
	public void mouseEntered(MouseEvent m) {}
	public void mouseExited(MouseEvent m) {}
	public void mouseReleased(MouseEvent m) {}
	public void mouseClicked(MouseEvent m) {}
	public void mousePressed(MouseEvent m) {
		switch(m.getButton()){
		case MouseEvent.BUTTON1:
			rotation--;
			if (rotation < 0) rotation = 359;
			
			//repaint();
			update(g2d);
			break;
		case MouseEvent.BUTTON3:
			rotation++;
			if (rotation > 360) rotation = 0;
			//repaint();
			update(g2d);
			break;
		}
	}
}
#2

Line 43: g2d.drawImage(backbuffer, 0, 0,this);

I think backbuffer represents the same image as g2d, so isn’t this redundant? Running your code, All I see is a black screen, SO I can only suggest that you get rid of line 43.

[edit] Also, I was wrong. On line 25: Graphics2D g2d = (Graphics2D) g; You change what g2d represents. You set it to the primary “buffer” g, so it no longer represents backbuffer. I would also suggest getting rid of line 25.

Here’s what my double buffering looks like:


Image backbuffer;
Graphics2D g2d;
public void init()
    {
        backbuffer = createImage(getSize().width, getSize().height);
	g2d = (Graphics2D)backbuffer.getGraphics();
    }

public void update(Graphics g) 
    { 
         paint(g); 
    } 
	
public void paint(Graphics g)
    {
	g2d.draw...  //all g2d commands will affect backbuffer image...	
                         //All your drawing commands go here to g2d.
 
	g.drawImage(backbuffer, 0, 0, null);
    }

As I understand it, basically you draw everything to the backbuffer through g2d, then draw the backbuffer to the main “buffer” g.

I"m kinda’ new to java, but I’ve got alot going on in my screen and no flickering.

#3

Nice buy! That’s the book that got me started!
The theory of double buffering is that you draw to an off screen image (= your backbuffer image) instead of directly to the screen using the Graphics object you get in your update method. You currently have two objects named g2d. One is the Graphics2D object that draws to your backbuffer that you defined in the beginning of the class definition (Graphics2d g2d;) and later created in your init() method (g2d = (Graphics2D)backbuffer.getGraphics();). The other is the Graphics object you got from the update() method, which you cast to a Graphics2D. You are currently not drawing anything to your backbuffer.

Gbeebe’s double buffering code looks good. The book likes to keep the game drawing code in the update() method though, with the paint() method only containing g.drawImage(backbuffer, 0, 0, null);. Your initialization code works fine at the moment. It’s just your drawing code that’s the problem.

Finally, your g2d keeps an internal AffineTransform that handles rotation, translation and scaling. If you use g2d.translate(), g2d.rotate() or g2d.scale(), you are modifying the transform permanently for this Graphics2D object. That means that every frame, your modifications will “stack up”, and you most like won’t see anything as after a few frames what you’re drawing will most likely be placed outside the screen. You need to reset the transform manually before modifying it. Your commented out AffineTransform identity = new AffineTransform(); line does half the trick, but you also need to assign it to the Graphics2d object using g2d.setTransform(identity);. Fun fact: The reason it’s called “identity” is because it represent an identity matrix, which is a matrix which does nothing (like translating by (0, 0) and/or scaling by 1).