Making portions of a quad transparent?

By Zonodon Date 2014-09-14 19:01

Hi everyone! :)

I'm trying to figure out how to replace parts of a block of solid color with transparent sections as a sprite passes over them. Here's a screenshot of what I have working so far:

Right now, players can move the orange sprites around to draw cyan lines over the black and green squares.

What I want to happen is for the cyan to instead be transparent, and to be drawn in place of the black and green it covers, such that what are now cyan lines would be transparent areas that would reveal an image behind the black and green squares. The cyan lines and the black and green squares have the same z-index, but the lines are drawn after the squares. I originally hoped that by making the cyan color transparent, it would replace the black and green because it has the same z-index, but instead if it's set to total transparency it just draws an invisible line over the black and green squares.

The game keeps track of all the places the orange sprites have ever been as a set of quads, which is how it knows where to draw the cyan lines.

Is there a way to do what I want to do, i.e. have the cyan lines be instead transparent "missing" sections of the black and green squares?

By Zonodon Date 2014-09-14 20:10

As a side note, I tried having it render the squares as a huge nested array of pixel coordinates and removing pixels from the nested array as the spirtes passed over them, but it performed very poorly trying to keep track of all 1,300,000~ of those pixels individually, like 1 frame every 3 secs. Not really playable. :(

By RunnerPack Date 2014-09-14 20:43

As you've discovered, you cannot manipulate the images this way after they've been drawn to the screen. You have to modify the actual pixel data of a Gosu::Image; specifically the alpha channel. The gems "texplay", "rmagick", and "ashton" all allow you to do this. I'll leave it to you to decide which of these best fits your requirements. There are ways of doing it with Gosu alone using Image#to_blob, but the gems I mentioned will likely be more performant in a real-time simulation/game.

Besides actually working, the added benefits of this method are two-fold: 1) you'll be able to make anti-aliased tunnels, rather than simply fully transparent tunnels in fully opaque "dirt" (assuming that this is supposed to be dirt), and 2) you won't have to keep track of all those quads. It will be sufficient to keep track of the positions of the orange sprites.

By Zonodon Date 2014-09-14 21:04

Thanks so much! Texplay looks like it will work well for me, and I see how it will provide the benefits you describe. I'd love to be able to animate the "dirt" disappearing by dialing the alpha channel down gradually, as well, and it looks like that will be made a bit easier too.

By RunnerPack Date 2014-09-15 01:14

You should really be thanking the geniuses responsible for Gosu and Texplay, but I'm glad I was able to help in some small way :D

I can't wait to play the completed game; it looks quite interesting!

By RavensKrag Date 2014-09-29 15:50

It sounds like what you want is something like a layer mask from Photoshop.

I'm not sure specifically how you would do this with Gosu-related libraries, but the general technique goes like this:

* Make a black and white image. Think of black as "off" and white as "on". This is your mask. It should be the same size as your main image (ie, the part behind the mask)
* Start with a fully black mask.
* Color the paths you want to trace out in white
* Take your main image
* Render the main image such that:
1) the pixels corresponding to BLACK pixels in the mask are simply the pixel data from the source image.
2) the pixels corresponding to WHITE pixels in the mask are transparent

(you might have to flip the notions of "off" and "on" around depending on how you choose to implement this)

The specific technique I've described is called an alpha mask. If you use only pure black and pure white, that's a 1-bit alpha mask. If you used various shades of gray, you could get many levels of alpha transparency, which would let you get some anti-aliasing (as mentioned by RunnerPack).

Combining the mask with the image should be a simple task for a shader, but you might need something like Texplay to generate the actual mask.

By lol_o2 Date 2014-09-29 17:15 Edited 2014-09-29 17:20

This is possible to be done with Ashton using a simple shader. I wrote one for transitions, which then dynamically controls alpha channel.
The one you need is a modified stencil shader that uses color channel instead of alpha. And generating mask is done with Ashton::Texture.