Explore the web game development with Filipe Silvestrim. An ActionScript developer who loves interactive technologies.

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();
            }
        }
    }
}