Help making my sprite transparent

luisoft · February 22, 2011, 9:57pm

Hi, I don’t know what I’m doing wrong. Can someone help me?

I have the following sprites compressed and respective colors


		final int color[] = { -16776960, -10461715, -137067, -237988, -196613,
				-12981001, -13839010, -14832074, -2794921, -32641, };
		final String str = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACCCCCCCAAAAAAAACCCCCCCCAAAAAACCCCCCCCCCCAAAAAAADEEEDEEEDAAAAAADEEBEEEBEEDAAAAADDEEEDEEEDDAAABBDDDDBBBDBBBBABBBDDDDBBBDBBBBBBBBDDDDDDDDBDBABBBBDDDDDADDBDBABBBDDDDDDDDDDDCAAABDDDDDDDDDDDCAAAAADDDDDDDDDCCCAAAAADDDDDDDDCCCAAAAADDDAADDDCCCAAAADDDDADDDDACAAEEAAACCCCCCCAEEAEEEACCCCCCCCAEEEEECCCCCCCCCCCEEAEEEEDEEEDEEEDEEEEEADEEBEEEBEEDEAEEEDDEEEDEEEDDEEEBBDDDDBBBDBBBBABBBDDDDBBBDBBBBBBBBDDDDDDDDBDBEBBBBDDDDDADDBDBEBBBDDDDDDDDDDDCEAEBDDDDDDDDDDDCEEEEADDDDDDDDDCCCAEEEADDDDDDDDCCCEEEAADDDAADDDCCCAEEEDDDDADDDDACEEAAFFFFFFFFFFFFAAAFFFFFFFFFFFFFFAFFFFFFFFFFFFFFBBFFFFFFFFFFFFFBBBFFFFFFFFFFFFFBBBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFFFBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFBBBFFFFFFBFFFFFFBBBFBFFFFBFFFFFBBBBBBBFBBBBBFBBBBBBABBBBBBBBBBBBBBAAABBBBBBBBBBBBAAGGFFFFFFFFFFFFGGGFFFFFFFFFFFFFFGFFFFFFFFFFFFFFBBFFFFFFFFFFFFFBBBFFFFFFFFFFFFFBBBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFFFBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFFBBFFFFFFFFFFFFFBBBFFFFFFBFFFFFFBBBFBFFFFBFFFFFBBBBBBBFBBBBBFBBBBBBGBBBBBBBBBBBBBBGGGBBBBBBBBBBBBGGEEGGGGGGGGGGGEEGEEEGGGGGGGGGGEEEEEGEEEEEEEEEEEEGEEEEEEEEEEEEEEEEEEGEGEGEGEGEGEEGEEEGGGGGGGGGGEEEEEGGGGGGGGGGGEEGEEEGGGGGGGGGGEEEEEGGGGGGGGGGGEEGEEEGGGGGGGGGGEEEEEGEEEEEEEEEEEEGEEEEEEEEEEEEEEEEEEGEGEGEGEGEGEEGEEEGGGGGGGGGGEEEEEGGGGGGGGGGGEEGEEEGGGGGGGGGGEEEEEAAAAAAAAAAAEEAEEEAAAAAAAAAAEEEEEAEEEEEEEEEEEEAEEEEEEEEEEEEEEEEEEAEAEAEAEAEAEEAEEEAAAAAAAAAAEEEEEAAAAAAAAAAAEEAEEEAAAAAAAAAAEEEEEAAAAAAAAAAAEEAEEEAAAAAAAAAAEEEEEAEEEEEEEEEEEEAEEEEEEEEEEEEEEEEEEAEAEAEAEAEAEEAEEEAAAAAAAAAAEEEEEAAAAAAAAAAAEEAEEEAAAAAAAAAAEEEGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGHHHGGGGGHHHGGGGGGGGGGGHHGGGGGGHHGGGGGGGGGGGGGGGGGGGHHGGGGGGHHGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGHHHGGGGGHHHGGGGGGGGGGGHHGGGGGGHHGGGGGGGGGGGGGGGGGGGHHGGGGGGHHGGGGGGGGGGGGGGGGGGGGGHHHHHHGGGGGGGGDDHHHHHHHHGGGGGGDDDCCCCCHHHHGGGGCDDCCCCCCCHHHHHHCCCCCCCCCCCCHHHHCCCCCCCCCCCCCCGGCCCCCCCCCCCCCCGGCCCCCCCCCCCCCCCGGCCCCCCCCCCCCCCGGCCCCCCCCCCCCCCCGGCCCCCCCCCCCCCCGGGCCCCCCCCCCCCCGGGGCCCCCCCCCCCCGGGGGCCCCCCCCCCGGGGGGGGCCCCCCCCGGGGGGGGGGCCCCGGGGGGGGGGGGGGGDDDDGGGGGGGGGGDDBBDDGGGGGGGGDDDDDDDDGGGGGGDDDDBDBBDDGGGGGDDDDDDDDDDGGGGGDDDDDDDDDDDGGGGDDDDDDDDDDDGGGGDDDDDDDDDDDDGGGGDDDDDDDDDDDGGGGDDDDDDDDDDDDGGGGDDDDBBDDDDDGGGGDDBDDDDDBBDGGGGGDDDDDBBDDDGGGGGGBBBBBDDDDGGGGGGGDDDDDDDGGGGGGGGGDDDDDGGGGGGGGGGGGGGGGGGGGGGGCCCGGGGGGGGGGGGCCCCCGGGGGGGGGGCCCCCCGGGGGGGGCCCCCCCCGGGGGCCCCCCCCCCGGGGCCCCCCCCCCCCGGGCCCCCCCCCCCCCGGCCCCCCCCCCCCCGGGCCCCCCCCCCCCCGGCCCCCCCCCCCCCCGGCCCCCCCCCCCCCGGGCCCCCCCCCCCCCGGGCCCCACCCCCCCGGGGGCCCCCCCCCCGGGGGGCCCCCCCCCGGGGGGGGGCCCCCGGGGGGGGGGHHHHHHAAAAAAAADDHHHHHHHHAAAAAADDDCCCCCHHHHAAAACDDCCCCCCCHHHHHHCCCCCCCCCCCCHHHHCCCCCCCCCCCCCCAACCCCCCCCCCCCCCAACCCCCCCCCCCCCCCAACCCCCCCCCCCCCCAACCCCCCCCCCCCCCCAACCCCCCCCCCCCCCAAACCCCCCCCCCCCCAAAACCCCCCCCCCCCAAAAACCCCCCCCCCAAAAAAAACCCCCCCCAAAAAAAAAACCCCAAAAAAAAAAAAAAADDDDAAAAAAAAAADDBBDDAAAAAAAADDDDDDDDAAAAAADDDDBDBBDDAAAAADDDDDDDDDDAAAAADDDDDDDDDDDAAAADDDDDDDDDDDAAAADDDDDDDDDDDDAAAADDDDDDDDDDDAAAADDDDDDDDDDDDAAAADDDDBBDDDDDAAAADDBDDDDDBBDAAAAADDDDDBBDDDAAAAAABBBBBDDDDAAAAAAADDDDDDDAAAAAAAAADDDDDAAAAAAAAAAAAAAAAAAAAAAACCCAAAAAAAAAAAACCCCCAAAAAAAAAACCCCCCAAAAAAAACCCCCCCCAAAAACCCCCCCCCCAAAACCCCCCCCCCCCAAACCCCCCCCCCCCCAACCCCCCCCCCCCCAAACCCCCCCCCCCCCAACCCCCCCCCCCCCCAACCCCCCCCCCCCCAAACCCCCCCCCCCCCAAACCCCACCCCCCCAAAAACCCCCCCCCCAAAAAACCCCCCCCCAAAAAAAAACCCCCAAAAAAAAIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIAAIIIIIIIIIIIIIIAAIIIIIIIIIIIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIIIJJJJIIJJJJIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII";

I want to make the first color (-16776960 - which is represented by letter A) transparent, so to decompress my sprite I’m using the following:


		for (int i = 0; i < sprites.length; i++) {
			sprites[i] = new BufferedImage(TILE_SIZE / 2, TILE_SIZE / 2, 2);
			Graphics2D g = sprites[i].createGraphics();

			for (int y = 0; y < 16; y++) {
				for (int x = 0; x < 16; x++) {
					if (str.charAt((y * 16 + x) + (i * 16 * 16)) != 'A') {
						g.setColor(new Color(color[str.charAt((y * 16 + x)
								+ (i * 16 * 16)) - 65]));
					} else {
						g.setColor(new Color(0xff000000 | color[str
								.charAt((y * 16 + x) + (i * 16 * 16)) - 65]));
					}
					g.fillRect(x, y, TILE_SIZE / 2, TILE_SIZE / 2);

				}
			}

When color is A I’m doing an “or” with 0xff000000 but it’s not working, and my sprite is not transparent. I need it transparent to make it
use the ladder. See spritesheet:

http://howlerbr1.game-host.org:8080/molemole.gif

The player is still with black background instead of transparent.

thanks for any help!

pjt33 · February 22, 2011, 10:38pm

At the very least you need to use the Color constructor which takes a boolean indicating whether it should take into account the alpha component of the int parameter.

luisoft · February 22, 2011, 11:01pm

Have already tried that but there was no change. Still getting my background as black instead of transparent.

pjt33 · February 22, 2011, 11:43pm

It’s probably created with black.

The other thing you could do, which is a bit more expensive, is access the backing data store directly.

int[] buf = ((DataBufferInt)sprites[i].getRaster().getDataBuffer()).getData();

On the bright side, you can then eliminate the Color constructor calls entirely. In fact, you can probably simplify the whole arithmetic quite a lot to something along the lines of

int strOff = 0;
for (int i = 0; i < sprites.length; i++) {
    sprites[i] = new BufferedImage(16, 16, 2);
    int[] buf = ((DataBufferInt)sprites[i].getRaster().getDataBuffer()).getData(); 

    int bufOff = 0;
    for (int y = 0; y < 256; y++) {
        char ch = str.charAt(strOff++);
        buf[bufOff++] = ch == 'A' ? color[0] : (0xff000000 | color[ch - 'A']);
    }
}

And to be honest, you’re probably not saving anything by not having the 0xff000000 in the color array in the first place.

Final edit: also, color[0] doesn’t look very transparent to me. It’s 0xff000100: fully opaque almost-black.

me1 · February 23, 2011, 8:35am

Hi Luisoft,

The way I used transparency was to create a bufferedimage with TYPE_INT_ARGB and
not to draw anything when I needed transparency.

Taken from maze4k 2010 entry:


import java.applet.Applet;
import java.awt.image.*;
import java.awt.event.*;
import java.awt.*;

public class transparent extends Applet implements Runnable {

	final int color[]={0, -1};

	// SpriteSheet
	final String str="$ $ ###############$ $ $ $#$ $ $ $ $ $ $ $  # ############  # $ $ $  $  #    $ $ $$$$##########$$ $$$         $$$$";


	public final void start() {
                new Thread(this).start();
        }


        public final void run() {
		int width=48;
		int height=48;
		int TILESIZE=24;

		final BufferedImage screen = new BufferedImage(800, 600, BufferedImage.TYPE_INT_RGB);
                Graphics g =  screen.getGraphics();

		final BufferedImage SpriteSheet=new BufferedImage(4*TILESIZE,4*TILESIZE,BufferedImage.TYPE_INT_ARGB);
                Graphics ssg=SpriteSheet.getGraphics();
                for(int i=0; i < str.length(); i++){
			// If there is a space it is transparent!
                        if(str.charAt(i)!=' '){
                                int cc=str.charAt(i)-35;
                                ssg.setColor(new Color(color[cc]));
                                ssg.fillRect((i%width)*(TILESIZE/12),(i/height)*(TILESIZE/12), TILESIZE/12, TILESIZE/12);
                        }
                }         
		int bg=-1;      
		while (true) {
                        g.setColor(new Color(bg));
                        g.fillRect(0, 0, 800, 600);
			g.drawImage(SpriteSheet, 30,30,this);
			getGraphics().drawImage(screen, 0, 0, null);
			// new background color
			bg++;

			try{
				Thread.sleep(10);
			}catch(Exception e){}		
		}
	}
}

This example changes the background color and you
will notice that the white and black dots nicely fit on
the background.

Hope this helps.

Best regards from

M.E.

halfwitgoat · February 23, 2011, 1:17pm

An alpha of 0xff is fully opaque. You want 0x00.

But as me said, if you want fully transparent, why draw the pixel at all?

luisoft · February 23, 2011, 3:22pm

I tried, see the if in the code below, I want to make the black color transparent, and so I skip it when drawing the bufferedimage to have the transparency:



		final int color[] = { 0xff000000, 0xff605ded, 0xfffde995, 0xfffc5e5c,
				0xfffcfffb, 0xff39ecf7, 0xff2cd55e, 0xff1dae36, 0xffd55a56,
				0xffff807e, };

                        sprites[i] = new BufferedImage(TILE_SIZE / 2, TILE_SIZE / 2, 2);
			Graphics2D g = sprites[i].createGraphics();
			for (int y = 0; y < 16; y++) {
				for (int x = 0; x < 16; x++) {
					if (color[str.charAt((y * 16 + x) + (i * 16 * 16)) - 65] != 0xff000000) {
						g.setColor(new Color(color[str.charAt((y * 16 + x)
								+ (i * 16 * 16)) - 65], true));
						g.fillRect(x, y, TILE_SIZE / 2, TILE_SIZE / 2);
					}

				}
			}

Using the if my sprite is not correctly drawn:

http://howlerbr1.game-host.org:8080/transp1.png

If I remove the if then I got:

http://howlerbr1.game-host.org:8080/transp2.png

But the last one is not transparent, it’s full opaque.

I’m not seeing what I’m doing wrong, it must be a stupid thing but I did not find it yet… any idea?

zeroone · February 23, 2011, 3:39pm

To use fillRect to draw 1 pixel at time, shouldn’t the width and height be set to 1?

g.fillRect(x, y, 1, 1);

luisoft · February 23, 2011, 4:59pm

My guess was right! It was a REALLY stupid mistake in my code.

zeroone, thanks a lot again, the problem was exactly that one! Filling a pixel at time solved the problem.

Now I need to get back to work (writting some automated tests here… it’s cool, but I’m losing game programming practice )