Is it possible to build an image using fillRect etc then draw that image to screen?

[Mich Robinson]

I'm nearly finished a game where the sky changes colour dynamically with the users health etc. I draw the sky with lots of fillRect commands and changing the colours gradually as the y position moves down the screen. I like the effect but I'm finding my method of drawing the sky is quite slow.

Is there a way of drawing to some sort of Image variable so that I can just display the image once rather than filling lots of rectangles each time?

Code at the moment is like this:

	private void drawSky( Graphics og ) {
		int i = 0;
	
		// layered sky
		for( int y=0; y<(int) SeaLevel + 40; y+=5 ) {
			og.setColor( SkyColours[i++] );
			og.fillRect( 0,y,ScreenWidth,y+5 );
		}

		// large block behind the moving sea
		i--;
		og.setColor( SkyColours[i] );
		og.fillRect( 0,(int) SeaLevel+SkyIntervals,ScreenWidth,600 );
	}

Thanks for any suggestions. If possible, I'd prefer suggestions that don't use fancy libraries as I simply prefer using the basics. Thanks for your time.

[Campbell Ritchie]

Go through the Java™ Tutorials. You will probably find that you can fill the entire rectangle in one statement, and apply a gradient to the painting, so you get darker blue at the top.

[Piet Souris]

Indeed, have a look at the Paint-interface and the Gradient- and TexturePaint classes. And there is also the MultipleGradientPaint class, in the forms of a Linear and Radial version.

[Mich Robinson]

Piet Souris wrote:Indeed, have a look at the Paint-interface and the Gradient- and TexturePaint classes. And there is also the MultipleGradientPaint class, in the forms of a Linear and Radial version.

Thanks but I worry that this seems like a really complex way of doing what I want. I'll freely admit my current solution is too slow on low powered laptops but, if I could build an image using setColor and fillRect, then that wouldn't be an issue - can I not do this in Java?

The sky in question is this one.

[Carey Brown]

You'd have to explain for us how you determine your starting and finishing colors and the colors in between, and the Y distance between the start and end rows.

Do you compute them or use a look up table?

[Piet Souris]

Apart from that, it is possible to create several BufferedImages that you can draw to, so that in a repaint you only have to draw the correct BI, and do some custom painting over that. Whether that is suitable, I don't know. Another possibility is that you do the drawing in another thread, so that a repaint only requires drawing that BI. If you repaint every 20 ms, say, than this will give you 20 ms to get that drawing done. Just some thoughts.

[Mich Robinson]

Carey Brown wrote:You'd have to explain for us how you determine your starting and finishing colors and the colors in between, and the Y distance between the start and end rows.

Do you compute them or use a look up table?

In the example code I gave there's an array of colours called SkyColours. These are adjusted each time the sky colour changes (if the health is low, if the weather is bad, if a something bad is about to happen). The array goes from 0 to 80 as the rectangles of colour are 5 y pixels wide and the sky is drawn down to about 2/3 of the screen.  

[Mich Robinson]

Piet Souris wrote:Apart from that, it is possible to create several BufferedImages that you can draw to, so that in a repaint you only have to draw the correct BI, and do some custom painting over that. Whether that is suitable, I don't know. Another possibility is that you do the drawing in another thread, so that a repaint only requires drawing that BI. If you repaint every 20 ms, say, than this will give you 20 ms to get that drawing done. Just some thoughts.

That was roughly how I was hoping to do it but I don't know how to set a colour in a BufferedImage and then start filling rectangles. I can easily handle all the timing issues but I just don't know how to draw to the image variable. Was hoping for a really simple code snippet. Is it something like:

BufferedImage bufimg;
bufimg.setSize(800,600); // is this possible?

// somewhere in the run loop something like this
bufimg.setColor(Color.red);
bufimg.fillRect(0,0,800,5);
// etc

[Carey Brown]

		image = new BufferedImage( width, height, BufferedImage.TYPE_INT_RGB );
		Graphics	g = image.getGraphics();
		g.setColor( Color.BLACK );
		g.fillRect( 0, 0, getWidth(), getHeight() );

[Mich Robinson]

Thanks, that's what I needed to know. Thanks for everyone's help.

[Stephan van Hulst]

Hi Mich, I started writing some example code for you to use, but then I got distracted and forgot about it until after your problem was solved. If you're interested, here it is anyway:

import java.awt.*;
import java.awt.image.*;
import java.util.*;
import java.util.List;

import javax.swing.*;

@SuppressWarnings("serial")
final class Scenery extends JPanel {

  private static final double SKY_FRACTION = 2./3;

  private List<Color> skyColors;

  private Image renderedSky;

  Scenery(Collection<? extends Color> skyColors) {
    this.skyColors = new ArrayList<>(skyColors);
    initComponents();
  }

  void setSkyColors(Collection<? extends Color> skyColors) {
    this.skyColors = new ArrayList<>(skyColors);
    renderSky();
  }
  
  private void renderSky() {
    var width  = getWidth();
    var height = (int) (getHeight() * SKY_FRACTION);

    var image      = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
    var graphics   = image.getGraphics();
    var bandHeight = height / skyColors.size();
    var bandIndex  = 0;

    for (var color: skyColors) {
      graphics.setColor(color);
      graphics.fillRect(0, bandIndex * bandHeight, width, bandHeight);
      bandIndex++;
    }

    this.renderedSky = image;

    repaint();
  }

  @Override
  public void paint(Graphics g) {
    g.drawImage(renderedSky, 0, 0, null);
  }

  private void initComponents() {
    addComponentListener(onComponentResizedEvent(this::renderSky));
  }
}

Here's a utility class that I often use for Swing user interfaces:

final class Handlers {
  
  private Handlers() {}

  static Action createAction(String name, Runnable handler) {
    return new AbstractAction(name) {
      @Override
      public void actionPerformed(ActionEvent event) {
        handler.run();
      }
    };
  }

  static WindowListener onWindowClosingEvent(Runnable handler) {
    return new WindowAdapter() {
      @Override
      public void windowClosing(WindowEvent event) {
        handler.run();
      }
    };
  }

  static ComponentListener onComponentResizedEvent(Runnable handler) {
    return new ComponentAdapter() {
      @Override
      public void componentResized(ComponentEvent event) {
        handler.run();
      }
    };
  }
}

[Rob Camick]

1) Don't override paint(). Custom painting should be done by overriding paintComponent().
2) Invoke super.paintComponent(...) first to make sure background is cleared before you do custom painting

[Mich Robinson]

Carey Brown wrote:

		image = new BufferedImage( width, height, BufferedImage.TYPE_INT_RGB );
		Graphics	g = image.getGraphics();
		g.setColor( Color.BLACK );
		g.fillRect( 0, 0, getWidth(), getHeight() );

This worked great when using a single buffered image and fixed the performance issue. I then figured why not create an array of 25 bufferedImages and initialise them all before play and that would fix things completely. I couldn't work out how to change the declaration of the buffered image into an array. I tried various ways but couldn't work out the syntax. I tried the following plus variations and also trying things in a loop but no luck. Any suggestions for the correct syntax?

BufferedImage[] SkyImg = new BufferedImage[25]( 800, 600, BufferedImage.TYPE_INT_RGB ); 

[Carey Brown]

BufferedImage[] skyImgs = new BufferedImage[25];
for( int i=0 ; i < skyImgs.length ; i++ ) {
    skyImgs[i] = new BufferedImage( 800, 600, BufferedImage.TYPE_INT_RGB );
}

"skyImgs" should begin with a lower case letter as all variables should. Because it holds a number of items it should be plural.

[Stephan van Hulst]

Rob Camick wrote:1) Don't override paint(). Custom painting should be done by overriding paintComponent().

2) Invoke super.paintComponent(...) first to make sure background is cleared before you do custom painting

You're correct, and I was absolutely certain that I had done both things in some version of the code I prepared. It seems I rewrote some stuff and then accidentally did it wrongly.

The second thing isn't absolutely necessarily if the paintComponent() implementation guarantees that it paints every pixel of the component though.

[Piet Souris]

Your panel has no border and no children, so by overriding paint you prevent needless invoking of those methods