1
\$\begingroup\$

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

\$\endgroup\$
3
  • \$\begingroup\$ Where exactly are you looking to do that conversion? (Do you want to convert from a file containing the image to another containing the same image but with transparency? Or do you have it in an in-memory data buffer that you want to translate to another? Or have an in-memory buffer and want to translate it only when rendering?) \$\endgroup\$ – Anko May 20 '15 at 20:19
  • 1
    \$\begingroup\$ Also, that tileset only has pink colour in the preview image. The actual download is a transparent PNG. \$\endgroup\$ – Anko May 20 '15 at 20:21
  • \$\begingroup\$ I already loaded this tileset into a BufferedImage using Java, now I want to convert it to another BufferedImage containing the same content but with transparency. I know that the download is transparent but whenever I draw some tiles the gaps appear pink again. \$\endgroup\$ – Thyrrac May 21 '15 at 5:01
1
\$\begingroup\$

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).

\$\endgroup\$
1
\$\begingroup\$

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);
    }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.