SEMI-TRANSPARENT GRAPHICS

How to make semi-transparent graphics and it's usefulness

This was an accidental discovery. It's the Penicillin of SMBX techniques.

As we all know SMBX graphics consist of 2 pieces. The graphic and it's mask. The background of the graphic needs to be black(0,0,0) and the background of the mask white(255,255,255). This is because the 2 colors negate each other and you get full on transparency. So you simply make either, or both, of those 2 colors not full white or full black and voila, you have semi transparency.

After some testing, here's what I've discovered.

1. The mask

Obviously you can only do this with graphics that have a mask. From this point on I will be using the following terms:

Graphic - refers to the main image that has the proper colored copy of the sprite.
Mask - refers to the second image that is normally all black and white.

2. The basic effect

It's not exactly true transparency. It's more of a blending effect. It will have varying degrees of change depending on the colors involved. Turning the background of a graphic from black to mid-grey has this effect:



Turns brown into pink. Light green into yellow. Dark green into blue. I have assume this is governed by color theory, but damned if I know that stuff. Can anybody weigh in on that?

Here's a pure green graphic background:



So it sort of looks like a keyhole in tinted glass.

3. Variations on the theme

You can alter the graphic only. This pretty much just means your editing the background as it's the only thing that will interact with a normal mask to create semi transparency. This method has limited use.

You can alter the mask only. One way is to alter just the background for a quite different effect. If I had to guess I would say that between the graphic and the mask, one is additive and one is subtractive. I'm familiar with those terms from Kazesui's dynRPG plugin for picture blending.

This effect produces darker shades overall and different colors. Instead of all pink, some of the browns become green. Here's an example of a normal graphic and the mask background changed to mid-grey:



You can alter only the main body of the mask for this kind of effect. Going with mid-grey again you get this:



Now we're getting somewhere interesting. This is a very cool effect. Like a keyhole into an alternate dimension.

Let's see what happens when we change the backgrounds of both graphic and mask to mid-grey:



Ok, solid grey. That's no good.

Here's one with mid-grey mask background, and shitty green graphic background:



Different resulting colors. There are many combinations for this and I'm certainly not going to test them all.

4. Front or back

To get the usual desired effect of semi-transparency it will have to be in the foreground. There are only so many tiles that can be in the foreground. Background tiles only have a few. Numbers 23-25 come to mind. You can use NPC's as tiles with the foreground=1 flag(or whatever it is).

Used as a background tile, this could be an interesting visual effect of a layer of semi-transparent tiles that get switched on or off by something in the level. You could run through a level as normal, then get to the end, flip the switch, and background semi-transparent tiles fill the level and only effect the background2 image. Making it look all wonky but not affecting the npc's.

Clearly the best use would be as foreground tiles. Tinted glass is one that comes to mind. The whole idea for this tutorial came from the RMN Zelda game we're working on. There is a graphic of a crystal that looks more like a wireframe. By adding some semi transparency, we can get a more realistic graphic of a crystal that allows us to see the objects behind it.

5. G-g-g-ghosts!

Clearly ghosts would look cool with this effect. Let's see what it looks like:



Hmm, it seems that if the graphic has white in it the transparency effect is lessened when simply making the mask grey. For this image I made the mask more light blue and I changed the white in the graphic. You can see how the outline of the ghost isn't very transparent.

6. Water

This could be another interesting effect, but I think there are enough examples already that we can picture what it might look like. I don't feel like doing any more examples.


7. Conclusion

I can't think of anything else to add here and would be interested to see if anybody can come up with fun new uses for this weird technique. Please share them here if you do!