How to make drawn images transparent in Java

Question

I got the animation to work in my Snake Clone Game. But the problem based on the picture is that the images do not have transparency(notice the white background of the circle pictures. Programming-wise, is there a fix to be able to include transparency to these drawn images?

Here's a picture containing my code and the output of the program.

P.S. On a side note, I decided to paste the direct link instead of the IMG code because I cannot seem to get it to display on StackOverFlow. I put an exclamation point in the front of the IMG code but it did not work so here's the direct link.

Answer 1

As the other answer mentioned, the easiest way would probably be to simply use PNG images which have a transparent background (you can create these with an image editor like GIMP). Alternatively, if you are limited to PNG images with a solid background, here's an example of how to change a given color (e.g. white) in the PNG to transparent:

import java.awt.*;
import java.awt.image.*;
import javax.swing.*;

public class SimpleFrame extends JFrame {
   JPanel mainPanel = new JPanel() {
      ImageIcon originalIcon = new ImageIcon("~/Pictures/apple.png");

      ImageFilter filter = new RGBImageFilter() {
         int transparentColor = Color.white.getRGB() | 0xFF000000;

         public final int filterRGB(int x, int y, int rgb) {
            if ((rgb | 0xFF000000) == transparentColor) {
               return 0x00FFFFFF & rgb;
            } else {
               return rgb;
            }
         }
      };

      ImageProducer filteredImgProd = new FilteredImageSource(originalIcon.getImage().getSource(), filter);
      Image transparentImg = Toolkit.getDefaultToolkit().createImage(filteredImgProd);

      public void paintComponent(Graphics g) {
         g.setColor(getBackground());
         g.fillRect(0, 0, getSize().width, getSize().height);

         // draw the original icon
         g.drawImage(originalIcon.getImage(), 100, 10, this);
         // draw the transparent icon
         g.drawImage(transparentImg, 140, 10, this);
      }
   };

   public SimpleFrame() {
      super("Transparency Example");

      JPanel content = (JPanel)getContentPane();
      mainPanel.setBackground(Color.black);
      content.add("Center", mainPanel);
   }

   public static void main(String[] argv) {
      SwingUtilities.invokeLater(new Runnable() {
         public void run() {
            SimpleFrame c = new SimpleFrame();
            c.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            c.setSize(280,100);
            c.setVisible(true);
         }
      });
   }
}

Answer 2

Don't use paint to draw your images. Use some other program that uses alpha like Paint.net or Photoshop... If your going to use circles forever then you can use g.drawOval(x, y, w, h).

Answer 3

  public BufferedImage makeTransparentImage(BufferedImage br) {
    for (int i = 0; i < br.getHeight(); i++) {
        for (int j = 0; j < br.getWidth(); j++) {
            Color c = new Color(br.getRGB(j, i));
            int r = c.getRed();
            int b = c.getBlue();
            int g = c.getGreen();
            if ((r == 255 && b == 255 && g == 255)) {
                System.out.println("r g b " + r + g + b);
                br.setRGB(j, i, 0xFF000000);
            }
        }
    }
    return br;
}

Answer 4

If you draw a simple picture, The easiest and fastest way I know... Draw a picture in Macrosoft PowerPoint and click "Save as Picture" to get a transparent background. Next...

public class Node {
Image nodeImage[] = new Image[3];


public Node() {
    try {
        String address = "C:\\Users\\Desktop\\practice\\Simulation\\img\\";
        nodeImage[0] = ImageIO.read(new File(address + "Node_noVehicle.png"));
        nodeImage[1] = ImageIO.read(new File(address + "Node_setVehicle.png"));
        nodeImage[2] = ImageIO.read(new File(address + "Node_inVehicle.png"));
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

@Override
protected void paintComponent(Graphics g) {
  super.paintComponent(g);  
  Graphics2D g2dtemp = (Graphics2D) g.create();
  g2dtemp.drawImage(Node.nodeImage[0],(int)x,(int)y,width,height,this);
}

}

Draw a picture in Macrosoft PowerPoint and click "Save as Picture" to get a transparent background.

Answer 5

Simple use type to ARGB like this

BufferedImage image = new BufferedImage(
                 width, height,
                 BufferedImage.TYPE_INT_ARGB);

I hope it should work.