Images on top of each other

[Andreas Bystrom]

Hi all!
I have a question of how I place several images on top of each other. I have an application and I place a background image in it. Then I want to have images "on top" of the background imgage. All images is in the format .png, which can be transparent.
My problem is that when I add an transparent image, I dont see the background image through it. Instead I get the default background color (something grey/blue).
Can somebody help me with:
1) How do I put the background picture in my JFrame (I'm not sure I'm doing this correctly)
2) How do I display .png images in the JFrame so that I see the background through it?
Regards,
Andreas

[Nathan Pruett]

The same component should display all the images, and if you are using any buffered images to hold the PNGs that go "on top" you should make sure that they support the same color model and transparency as the PNGs. How are you doing multilayered images? Are you painting all the images from one component's paint() or paintComponent() method?

[Andreas Bystrom]

I do nothing special actually. Do you have an suggestion how to add the image image3.png in the code below?

  
import java.awt.*;
import java.awt.event.*;
import javax.swing.*; 
public class JImagePanel extends JPanel{

private Image myImage;
  
  public JImagePanel( Image i )
  {
  setImage( i );    
  }
    
  public JImagePanel()
  {
  this( null );
  }
  
  public Dimension getPreferredSize()
  {
  Dimension d = new Dimension();
    if( myImage != null ) 
    {            
    d = new Dimension( myImage.getWidth( this ), myImage.getHeight( this ) );
    }
    return( d );
  }
  
  public void paintComponent( Graphics g )    
  {      
    if( myImage != null )        
    {          
      g.drawImage( myImage, 0, 0, this );        
    }
  }
  
  public Image getImage()    
  {      
    return( myImage );    
  }     
  
  public void setImage( Image i )    
  {      
    MediaTracker tracker = new MediaTracker( this );        
    tracker.addImage( i, 0 );        
    try        
    {          
      tracker.waitForAll();       
    }        
    catch( InterruptedException x )        
    {            
    System.err.println( "MediaTracker interrupted!" );       
   }        
   myImage = i;    
  }
  
  public static void main( String[] args )    
  {      
    JFrame f = new JFrame( "JImagePanel Test" );        
    Container contentPane = f.getContentPane();        
    Image i = Toolkit.getDefaultToolkit().getImage( "Background.jpg" );        
    JImagePanel jip = new JImagePanel( i );        
    // ADD image3.png HERE!! //
               
    contentPane.add(jip);
   
    f.setSize( 100, 130 );        
    f.setVisible( true );        
    f.addWindowListener( 
    new WindowAdapter() 
    {          
      public void windowClosing( WindowEvent e )            
      {              
        System.exit( 0 );            
      }       
    } 
    );
  }
}

When I try to add an image there, the transparent part of the imgae shows as grey.
Regards,
Andreas

[Andreas Bystrom]

I got it to work (I got the transparent image to show with transparent), I added this code:

pngImage = Toolkit.getDefaultToolkit().getImage("image3.png" );
ImageIcon icon = new ImageIcon(pngImage);
JLabel jimage = new JLabel(icon);
jip.add(jimage);

My problem now is how I can place this picture wherever I want, without having to use a LayouitManager (unless there is a layout manager that enable you to do this)
Any ideas?

[Nathan Pruett]

You could get the image by using the ImageIcon.getImage() method.

The component that you posted code for only allows you to add one image to the panel... a background image. To support multiple images, you'd have to add more methods to set the "on top" images, and modify the paint method to paint the background and then all the "on top" images. Take a look ath the following code. I tested it out with a PNG with transparency, and it worked:

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import java.io.File;
import java.io.IOException;
import java.util.Random;
import java.util.Vector;
 
import javax.imageio.ImageIO;
import javax.swing.JComponent;
import javax.swing.JFrame;
  
public class BouncingSprites extends JComponent {
    
    private Image background;
    private Vector sprites;
    private Runnable repainter;
    private Random random;
    
    public BouncingSprites() {
        this( null );
    }
    
    public BouncingSprites( Image background ) {
        this.background = background;
        sprites = new Vector();
        random = new Random();
        repainter = new BounceUpdate();
        Thread t = new Thread( repainter );
        t.start();
    }
    
    public Dimension getPreferredSize() {
      Dimension d = super.getPreferredSize();
      if( background != null ) {            
          d = new Dimension( background.getWidth( this ), background.getHeight( this ) );
      } 
      return( d );
    }
    
    public void paintComponent( Graphics g ) {      
      if ( background != null ) {          
        g.drawImage( background, 0, 0, this );        
      }
      Sprite s = null;
      int size = sprites.size();
      for ( int i = 0; i < size; i++ ) {
          s = (Sprite)sprites.get( i );
          s.paintSprite( g );
      }
    }
    
    public Image getBackgroundImage() {
        return background;
    }
    
    public void setBackgroundImage( Image i ) {
        background = i;
        validate();
        repaint(); 
    }
    
    public void addSprite( Image sprite ) {
        Sprite s = new Sprite( sprite );
        s.setXSpeed( random.nextInt( 10 ) );
        s.setYSpeed( random.nextInt( 10 ) );
        s.setX( random.nextInt( getPreferredSize().width - s.getWidth() ) );
        s.setY( random.nextInt( getPreferredSize().height - s.getHeight() ) );
        System.out.println( "Sprite at " + sprites.size() + " created with data:" );
        System.out.println( "\tX : " + s.getX() + "\tSpeed : " + s.getXSpeed() );
        System.out.println( "\tY : " + s.getY() + "\tSpeed : " + s.getYSpeed() );
        sprites.add( s );
        repaint();
    }
    
    public static void main( String[] args ) {
        JFrame f = new JFrame( "Test Bouncing Sprites" );
        f.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
        Image background = null;
        Image sprite = null;
        try {
            background = ImageIO.read( new File( "cwashu.jpg" ) );
            sprite = ImageIO.read( new File( "linux-penguin.png" ) );
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        BouncingSprites bs = new BouncingSprites( background );
        for ( int i = 0; i < 4; i++ ) {
            bs.addSprite( sprite );
        }
        f.getContentPane().add( bs );
        f.pack();
        f.show();
    }
    
    private static class Sprite {
        private boolean drawBorder;
        private Image image;
        private int x, y, dx, dy;
        
        public Sprite( Image image ) {
            this.image = image;
        }
        
        public void paintSprite( Graphics g ) {
            if ( image != null ) {
                g.drawImage( image, x, y, null );
            }
            if ( drawBorder ) {
                g.setColor( Color.red );
                g.drawRect( x, y, getWidth(), getHeight() );
            }
        }
        
        public int getX() {
            return x;
        }
        
        public void setX( int x ) {
            this.x = x;
        }
        
        public int getY() {
            return y;
        }
        
        public void setY( int y ) {
            this.y = y;
        }
        
        public int getWidth() {
            int w = 0;
            if ( image != null ) {
                w = image.getWidth( null );
            }
            return w;
        }
        
        public int getHeight() {
            int h = 0;
            if ( image != null ) {
                h = image.getHeight( null );
            }
            return h;
        }
        
        public int getXSpeed() {
            return dx;
        }
        
        public void setXSpeed( int dx ) {
            this.dx = dx;
        }
        
        public int getYSpeed() {
            return dy;
        }
        
        public void setYSpeed( int dy ) {
            this.dy = dy;
        }
        
        public void setBorderOn( boolean b ) {
            drawBorder = b;
        }
        
        public boolean isBorderOn() {
            return drawBorder;
        }
    }
    
    private class BounceUpdate implements Runnable {
        public void run() {
            while ( true ) {
                try {
                    Thread.sleep( 80 );
                } catch ( InterruptedException x ) {}
                Dimension size = getPreferredSize();
                int indices = sprites.size();
                Sprite s = null;
                for ( int i = 0; i < indices; i++ ) {
                     s = ( Sprite )sprites.get( i );
                     int x = s.getX() + s.getXSpeed();
                     int y = s.getY() + s.getYSpeed();
                     if ( x + s.getWidth() > size.width || x < 0 ) {
                         s.setXSpeed( -s.getXSpeed() );  
                     }
                     if ( y + s.getHeight() > size.height || y < 0 ) {
                         s.setYSpeed( -s.getYSpeed() );
                     }
                     s.setX( s.getX() + s.getXSpeed() );
                     s.setY( s.getY() + s.getYSpeed() );
                }
                repaint();
            }
        }
    }
}