Flixel Forums

development => help => Topic started by: GustoGaiden on Tue, Jul 14, 2009

Title: Flashlight Effect in Fathom
Post by: GustoGaiden on Tue, Jul 14, 2009
I'm trying to deconstruct the flashlight effect in Fathom, and can't figure it out.  Is it a massive black and transparent sprite that sit on top of everything else, and has it's alpha dialed up and down?  I don't suppose there is source code available.

I am trying to have 2 different block sprites, one being revealed when the flashlight sweeps over it.  Any suggestions?
Title: Re: Flashlight Effect in Fathom
Post by: Adam Atomic on Tue, Jul 14, 2009
the flashlight effect is a dirty cheat :)  it doesn't actually use the Flixel sprites at all, it uses the regular Flash sprites.  It is basically a giant black sprite that overlays everything  :)
Title: Re: Flashlight Effect in Fathom
Post by: GustoGaiden on Wed, Jul 15, 2009
phoey.  So I guess my next question is where should I start digging to turn a block array into a display object in order to throw a .mask on to it.  Is FlxGame where everything eventually gets turned into a bitmap and rendered on-screen?
Title: Re: Flashlight Effect in Fathom
Post by: Adam Atomic on Wed, Jul 15, 2009
everything renders itself during its own render() function, but if you don't add them to the state's layer then you can call render yourself, or you can inherit from the blocks and render them to a different buffer, or do whatever you want :)
Title: Re: Flashlight Effect in Fathom
Post by: GustoGaiden on Sat, Jul 25, 2009
OK, so I've made a little progress.  I can turn blocks to other color a whole block at a time, but what I really want is a per-pixel show/hide (and also alpha values).  You can press Q to show/hide the flashlight mask.
http://www.swfcabin.com/open/1248569726

OK, here's a quick illustration of what I'm trying to accomplish.
http://imgur.com/qJmKt.jpg

When the "flashlight" is over a block, I want the pixels to show through as if through a mask, alpha and everything.  I am trying to run a copyChannel on the alpha channel, but instead of turning invisible, the FlxBlock is turning black.  You can see this in the top left corner.  Is there something I need to change to get the pixels to accept alpha values?
Title: Re: Flashlight Effect in Fathom
Post by: GustoGaiden on Wed, Aug 12, 2009
After some research, persistence, a small amount of cursing, and some timely advice from my roommate, I've figured out this flashlight effect, minus the rotation, oh well.
Here's the end result:  http://www.swfcabin.com/open/1250133097 (http://www.swfcabin.com/open/1250133097)

Heres how I did it:
Every place in my PlayState where I plunk down a regular old green FlxBlock, I also plunk down a custom class, AltBlock.  It is almost identical to FlxBlock with a few alterations.  Here is AltBlock's render function.  Please excuse my slipshod naming conventions.


Code: [Select]
override public function render():void
{

super.render();

getScreenXY(_p);
var opx:int = _p.x;
var glowPoint : Point = new Point(_glow.x, _glow.y);
var rBuffer : BitmapData = new BitmapData(FlxG.buffer.width, FlxG.buffer.height, true, 5);
for(var i:uint = 0; i < _rects.length; i++)
{
if (_rects[i] != null)
{
if (_glow.overlapsPoint(_p.x, _p.y) || _glow.overlapsPoint(_p.x + _tileSize, _p.y) ||  _glow.overlapsPoint(_p.x , _p.y + _tileSize) ||  _glow.overlapsPoint(_p.x + _tileSize, _p.y + _tileSize))
{
rBuffer.copyPixels(_pixels, _rects[i], _p, null, new Point(0, 0), true );
}
}
_p.x += _tileSize;
if(_p.x >= opx + width)
{
_p.x = opx;
_p.y += _tileSize;
}

}

var tRect : Rectangle = new Rectangle(_glow.x, _glow.y, _glow.width , _glow.height);
FlxG.buffer.copyPixels(rBuffer, tRect, glowPoint,_glowPixels,new Point(0,0),true);
}


I have a Glow sprite that follows the mouse cursor around (in playstate).  AltBlock's render function checks to see if it overlaps this glow sprite before writing its pixel data into my rBuffer  (for Red block Buffer) BitmapData object.

At the end of this loop, rBuffer is now filled with every full block that is touching the glow sprite.  Then, using the Glow sprite's pixel data as an alpha channel, I copy rBuffer's bitmap data into the FlxG buffer, constraining the sample size to the size of the glow sprite.  You can press Q to see the black-to-transparent image I using as the glow pixeldata.

Neat!
Title: Re: Flashlight Effect in Fathom
Post by: Titch on Thu, Aug 13, 2009
This is really interesting. I've been thinking about trying to do some post screen filtering using the _pixels data.
Title: Re: Flashlight Effect in Fathom
Post by: jellybit on Sat, Sep 12, 2009
I don't know if you care about efficiency or not, but Mode seems to run at around half speed for me when using your new method, compared to your first method.