How to make a color invisible ( transparent ) in JButton ImageIcon

Question

I am making my chess game with javax.swing. I am using gridLayout(8,8) filled with JButtons, with background color set to brown and lightBrown as usual on chess boards. Now I want to put ImageIcon (king , rock , ect..) on that Buttons which I got from google images and edit them in paint.net .

white king on gray background

But most of the pieces can move from gray buttons to light gray buttons. so I can either make all pieces on light gray background

white king on light gray background

and just swich ImageIcon depending which JButton piece is landing on (but I would rather not), Or make background color on that image transparent, but I have no idea how to do that (for example is there some color which swing making transparent automaticly)

Thank you for help.

Why don't you make the background of your images transparent in paint.net? — eldo, Oct 03 '16 at 17:15
unfortunately if i remove background from piece image in paint.net ( so only the piece it self remain and the rest are just black and white squares ) and then load it with swing on a button as a ImageIcon , it will have white background instead of transparent — Fredegar, Oct 03 '16 at 22:23
@eldo has outlined the optimal approach. Change the solid color BG to transparent in a dedicated paint app. *"is there some color which swing making transparent automaticly"* No. See also [Making a robust, resizable Swing Chess GUI](http://stackoverflow.com/q/21142686/418556) for a different approach to getting icons for the chess pieces (generate them at run-time). — Andrew Thompson, Oct 03 '16 at 23:07
@Fredegar Are you sure you have transparent background? Isn't that a white background layer or something? — eldo, Oct 04 '16 at 07:53
@eldo yes i have transparent backgroung on that pics , but i saved them as .jpg . then i red the answer of Ansharja and saw his/her examples of black rook and white queen , and realized that his/her pics was in .png format , so i changed my pics to .png and it works. No white background anymore. So thank you all for effort , my problem has been solved. — Fredegar, Oct 04 '16 at 11:51

score 2 · Accepted Answer · answered Oct 04 '16 at 10:28

You should take a look to RGBA color model.

In this model the A stands for alpha channel, which is generally used as an opacity channel.

This means that you can have a "transparent" color by setting the alpha value of your color to 0.

The java.awt.Color class provides some constructors where you can specify the alpha value of your Color, for example :

Color(int r, int g, int b, int a) Creates an sRGB color with the specified red, green, blue, and alpha values in the range (0 - 255).

You can make the background color of your image transparent by yourself, if you can't find a program which gave you this option.

For example this code i wrote tries to remove the background colour from your "white king on gray background" image. If you try to compile and run, you should get this result:

As you can see not all the background has been removed from your image, this is due to the fact that the background is made by different colours.

But this example shows you that you can manipulate your images pixels in order to obtain transparency.

I think that the best option would be to search online some chess images that have already a transparent background.

For example, i can post some links here (i don't know if there are some copyright issues, take care of this), you could easily get all the images if you check URLs :

Black Rook

White Queen

Example Code :

import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.UIManager;
public class TransparentTest
{
    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                try {
                    BufferedImage image = ImageIO.read(new File("KING.jpg"));
                    BufferedImage transparentImage = removeColors(image,new Color(245,222,180));
                    createAndShowGUI(image,transparentImage);
                }
                catch(IOException ex) {
                    JOptionPane.showMessageDialog(null,"Please check your file image path","Error",JOptionPane.ERROR_MESSAGE);
                }
            }
        });
    }
    public static void createAndShowGUI(BufferedImage image,BufferedImage transparentImage) {
        JPanel pane = new JPanel(new FlowLayout(FlowLayout.CENTER,40,10));
        pane.setBackground(Color.BLUE);
        pane.add(new JLabel(new ImageIcon(image)));
        pane.add(new JLabel(new ImageIcon(transparentImage)));
        JFrame frame = new JFrame("Test");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setContentPane(pane);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
    public static BufferedImage removeColors(BufferedImage image,Color... colorsBlackList) throws IOException {
        int height = image.getHeight(), width=image.getWidth();
        BufferedImage transparentImage = new BufferedImage(width,height,BufferedImage.TYPE_INT_ARGB); 
        for(int y=0;y<height;y++) {
            for(int x=0;x<width;x++) {
                int pixel = image.getRGB(x,y);
                int red = (pixel>>16) &0xff;
                int green = (pixel>>8) &0xff;
                int blue = (pixel>>0) &0xff;
                int alpha = 255;
                // Settings opacity to 0 ("transparent color") if the pixel color is equal to a color taken from the "blacklist"
                for(Color color : colorsBlackList) {
                    if(color.getRGB() == pixel) alpha = 0;
                }
                transparentImage.setRGB(x,y,(alpha&0x0ff)<<24 | red<<16 | green<<8 | blue);
            }
        }
        return transparentImage;
    }
}

Thank you this helped a lot – Fredegar Oct 04 '16 at 11:52 — Fredegar, Oct 04 '16 at 11:52

How to make a color invisible ( transparent ) in JButton ImageIcon

1 Answers1