SpotLights to RTS games and pseudo inverse masks
February 2nd, 2009
Well… Today a friend of mine asked me to help him with a night render for his RTS game. He needed an inverse mask to his MovieClip (which was his entire game). I thought a little and I decided to help him. I started writing an inverse mask, but I realized that this would exhaust the cpu. So I thought that what really matters to him is to create a layer of fog on his game, so I wrote (in a few minutes) 2 classes that manage theses “Spots Lights”.
The result as you can see is here (drag the red circles):
As I’m writing codes that are not related to my engine (the one I’m writing for my final project), I decided to create a Google Code Repository for my extra experiments. This way the classes will be always there. This first experiment can be improved a lot. If you have some comments or know a better way of doing it, please let me know 
This example’s class is here:
package {
import com.filipesilvestrim.game.render.light.SpotLight;
import com.filipesilvestrim.game.render.light.SpotRenderer;
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
[SWF(width=350, height=468)]
public class SpotExperiment extends Sprite
{
private var spotRender : SpotRenderer;
private var spotSelected : SpotLight;
[Embed(source="aoe.jpg")]
private var map : Class;
public function SpotExperiment()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
addEventListener(Event.MOUSE_LEAVE, onMouseUp);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
//Adding the background (in some cases the game as itself)
addChild(new map());
//creating the render. The first param is where we'll add the representation, the second is the width and the third is the height
spotRender = new SpotRenderer(this, 350, 468);
//here we can change the fog color to other one and the transparency
spotRender.changeColorMap(0x000000, 1);
//Now we're adding 3 spots of diferent sizes and position
//As params we have: name, pos X, pos Y, width, height
var spot1 : SpotLight = new SpotLight("spot1", 200,200,200,200);
//we can adjust the intensity from 0 to 1
spot1.intensity = 1;
//the focus can be adjusted too
spot1.focus = .5;
//adds the red ball for debug
spot1.debug(this);
//add the spot to be rendered
spotRender.addSpot(spot1);
var spot2 : SpotLight = new SpotLight("spot2", 250,300,100,100);
spot2.debug(this);
spotRender.addSpot(spot2);
var spot3 : SpotLight = new SpotLight("spot3", 100, 100, 300, 300);
spot3.debug(this);
spotRender.addSpot(spot3);
//render as first time to the scenario don't appear without no one fog
spotRender.render();
}
private function onMouseDown ( event : MouseEvent ) : void
{
//if some spot is target
if (spotRender.getSpot(event.target.name) != null)
{
//hold in the spotSelected variable the sport that represents that Sprite ball
spotSelected = spotRender.getSpot(event.target.name);
}
}
private function onMouseUp ( event : Event ) : void
{
//if mouse released
spotSelected = null;
}
private function onEnterFrame ( event : Event ) : void
{
//hold the spots changes (if some spot selected)
if(spotSelected != null)
{
//reposition the spot and the debug reference accourding the mouse position
spotSelected.x = spotSelected.spriteDebug.x = mouseX;
spotSelected.y = spotSelected.spriteDebug.y = mouseY;
//when change the position the sportRender must be rendered again
spotRender.render();
}
}
}
}
