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):

This movie requires Flash Player 10

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

[SWF]http://www.filipesilvestrim.com/blog/wp-content/uploads/2009/02/labs.swf, 350, 468[/SWF]
 

4 Responses to SpotLights to RTS games and pseudo inverse masks

  1. Arthemis :) says:

    Even if I wanted to I don’t thing I can pretend to understand half of what you post here. Though I think those ‘light spots’ up here are very very very cool, I can say I’m totaly ignorant in matters related to games, codes or ‘classes’. lol
    Nevertheless, I’m here because you’ve put up a link to this blog on orkut, and I do love blogs. :)
    Stop by at mine too. You are not gonna find codes or classes or any of this, but it’s full of literature and politics, which can also be fun! :D
    Hugs to you!

  2. Fernando Garcia de Athayde says:

    Very Good!!

  3. Bah, eu me lembro que eu precisei fazer uma máscara reversa em as3 uma vez. que pavor que bateu quando eu descobri que não tinha método nativo hehehehe.. Mas colando um bitmap data no canal de alpha de outro eu consegui o resultado :) abraço.

  4. [...] game would have direction and goals by now if I had direction and goals. Shout out to Filipe Ghesla Silvestrim who provided a mechanism to do “inverse [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>