Author Topic: Flashlight Effect in Fathom  (Read 2948 times)

GustoGaiden

  • Member
  • **
  • Posts: 11
  • Karma: +0/-0
    • View Profile
    • AndyGusto's Portfolio Page
Flashlight Effect in Fathom
« 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?

Adam Atomic

  • Founder
  • Key Contributor
  • *****
  • Posts: 852
  • Karma: +0/-0
  • new dad
    • View Profile
    • Adam Atomic
Re: Flashlight Effect in Fathom
« Reply #1 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  :)

GustoGaiden

  • Member
  • **
  • Posts: 11
  • Karma: +0/-0
    • View Profile
    • AndyGusto's Portfolio Page
Re: Flashlight Effect in Fathom
« Reply #2 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?

Adam Atomic

  • Founder
  • Key Contributor
  • *****
  • Posts: 852
  • Karma: +0/-0
  • new dad
    • View Profile
    • Adam Atomic
Re: Flashlight Effect in Fathom
« Reply #3 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 :)

GustoGaiden

  • Member
  • **
  • Posts: 11
  • Karma: +0/-0
    • View Profile
    • AndyGusto's Portfolio Page
Re: Flashlight Effect in Fathom
« Reply #4 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?

GustoGaiden

  • Member
  • **
  • Posts: 11
  • Karma: +0/-0
    • View Profile
    • AndyGusto's Portfolio Page
Re: Flashlight Effect in Fathom
« Reply #5 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

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!
« Last Edit: Wed, Aug 12, 2009 by GustoGaiden »

Titch

  • Contributor
  • ****
  • Posts: 270
  • Karma: +0/-0
  • Thing with the guy in the place.
    • View Profile
Re: Flashlight Effect in Fathom
« Reply #6 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.
Free cake whippings every day at #flixel on irc.freenode.net.

jellybit

  • Guest
Re: Flashlight Effect in Fathom
« Reply #7 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.