Tilesets - how to make the pink color appear transparent

Question

recently I searched for some free to use Tilesets on the internet. And wherever I found a sheet of sprites there is this pink color in the background. i know that all the spots having that color should be transparent later on but how do I do that? And has it any other special use or effect on the tile data? An example of those sheets can be found here: http://opengameart.org/content/rpg-indoor-tileset-expansion-1

Answer 1

You could use the transparent png instead. These sprites with a pink color were used a lot in old games, usually using images with a palette (indexed colors). Commonly the pink color is Red = 255, Blue = 255, Green = 0, and it is defined as the first color in the palette (index 0), meaning it should be transparent pixels. Defining the color as pink helped to handle designs when the painting tools was not so cool like now (pink is easy to spot in most images). Using indexed colors could help to reduce a lot the size of images, and it is very common to store a set of images sharing a common palette (like in this tileset).

Answer 2

In doubt, when you can not obtain a version of the tileset where the "pink" areas are indeed transparent, you can simply replace all pink pixels of the image with transparent ones, with a method like replaceColor in this example:

import java.awt.Color;
import java.awt.GridLayout;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.SwingUtilities;

public class ColorReplaceExample
{
    public static void main(String[] args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            @Override
            public void run()
            {
                createAndShowGUI();
            }
        });
    }

    private static void replaceColor(
        BufferedImage image, Color oldColor, Color newColor)
    {
        for (int y=0; y<image.getHeight(); y++)
        {
            for (int x=0; x<image.getWidth(); x++)
            {
                int color = image.getRGB(x, y);
                if (color == oldColor.getRGB())
                {
                    image.setRGB(x, y, newColor.getRGB());
                }
            }
        }
    }

    private static void createAndShowGUI()
    {
        JFrame f = new JFrame();

        BufferedImage image0 = null;
        BufferedImage image1 = null;
        try
        {
            image0 = ImageIO.read(new File("tileset.png"));
            image1 = ImageIO.read(new File("tileset.png"));
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
        replaceColor(image1, new Color(255,0,255), new Color(0,0,0,0));

        f.getContentPane().setLayout(new GridLayout(1,2));
        f.getContentPane().add(new JLabel(new ImageIcon(image0)));
        f.getContentPane().add(new JLabel(new ImageIcon(image1)));
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }
}