Pokemon Yellow wrap transitions [closed]

Question

So I've been trying to make a pretty accurate clone of the good old Pokemon Yellow for quite some time now and one puzzling but nonetheless subtle mechanic has puzzled me. As you can see in the uploaded image there is a certain colour manipulation done in two stages after entering a wrap to another game location (such as stairs or entering a building).

One easy (and sloppy) way of achieving this and the one I have been using so far is to make three pngs for each image (sprite tilemaps, town images) all of them with their colours adjusted accordingly to match each stage of the transition. Of course after a while this becomes tremendously time consuming.

So my question is does anyone know any better way of achieving this colour manipulation effect using java and Graphics2D?

Thanks in advance,

Alex

Answer 1

I don't know whether there's a built-in function for cycling the colors in an image. I think there should be, but I could not find one.

Anyhow, one way to do this would be to loop over all the pixels in the image, looking up the color in a predefined list of colors, from bright to dark, and making each pixel "one darker".

public static void shiftToBlack(BufferedImage img) {
    // the four colors used in test.png, from bright to dark
    List<Integer> colors = Arrays.asList(-196868, -4088073, -10112268, -12500653);
    for (int i = 0; i < img.getRaster().getWidth(); i++) {
        for (int k = 0; k < img.getRaster().getHeight(); k++) {
            int c = img.getRGB(i, k);
            int index = colors.indexOf(c);
            int c2 = index < colors.size() - 1 ? colors.get(index+1) : c;
            img.setRGB(i, k, c2);
        }
    }
}

Of course, this does not scale too well when the image is larger, but for the typical four-color Game Boy screen this should work. Thus, if you are applying any filters such as enlarging the image to be playable on modern screens, or anti-aliasing, you should apply those after this color-shift operation. Also, you'll have to adapt the colors to the four colors used in your images.

Full example code:

BufferedImage img = ImageIO.read(new File("test.png"));
JComponent component = new JComponent() {
    protected void paintComponent(Graphics graphics) {
        graphics.drawImage(img, 0, 0, null);
    };
};
component.addMouseListener(new MouseAdapter() {
    public void mouseClicked(MouseEvent e) {
        shiftToBlack(img);
        component.repaint();
    }
});
JFrame frame = new JFrame("test");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(component);
frame.pack();
frame.setSize(150, 150);
frame.setVisible(true);

And my test.png