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

Wheel, I’m not writing another way of do it…

Is the same way that ObjectUtils of Flex Framework do, but… Imagine that we want to duplicate one object of the class Example, we can just do the clone with a code like this:

public function deepClone ( obj : * ) : *
{
        var bytes : ByteArray = new ByteArray();
        bytes.writeObject(obj);
        bytes.position = 0;
        return bytes.readObject();
}

Let’s first imagine our Example class like this:

package com.filipesilvestrim
{
        public class Example
        {
                public var name : String;

                public function Example () {}
        }
}

Ok, but now if we try get the object with the cast like trace((deepClone(obj) as Example)). Man… shame on you, you’ll get “null”. but why? It occurs because when we are cloning the class we do it with the ByteArray and when you return that’s “new” bytes as an Object, the Flash Player don’t know that those bytes are affiliate with the class Example. So how to solve it?

Let’s register in the Flash Player the class Example, to that when it saw the bytes being cast, it understand that those bytes mean that class. To register we need to this:

registerClassAlias("com.filipesilvestrim.Example", Example);

And the code working will be like this:

package com.filipesilvestrim
{
        import flash.net.registerClassAlias;

        import com.filipesilvestrim.Example;

        public class MainClone
        {

                public function MainClone ()
                {
                        var obj : Example = new Example();

                        registerClassAlias("com.filipesilvestrim.Example", Example);

                        trace("Cloned Object with cast = " + (deepClone(obj) as Example)); // must trace "Cloned Object with cast = [object Example]"

                }

                private function deepClone ( obj : * ) : *
                {
                        var bytes : ByteArray = new ByteArray();
                        bytes.writeObject(obj);
                        bytes.position = 0;
                        return bytes.readObject();
                }
        }
}

So, lets code and have fun

Well, this week, I was doing a little game that to the player start to play needs click in one “start game” button and after uses the keyboard to control the character moves. So until this point all OK, but what i didn’t told you is that when click’s in the “start game”, it disappears with one removeChild() (because it appears above all the stage).

After this, my character was no more moving… I fought “wow could be my InputManager class not working so fine…”, but I tried find some bug or something wrong and nothing. After some tries, accidentally I removed the buttonMode = true – propertie that i was defining to that my “start game” Movie Clip behaviors like Button – and tcharam… All working…..

At first we need remind that Keyboard events will just works when Flash Player get focus. And accidentally I found a way of Flash Player loses focus with on removeChild().

So what is happening here?!

First, open the swf file (focus it); after, click at the button (button with focus); later on, the button is removed from the stage (the focus is removed together with the button – so here are the problem). Now if I click on the stage, or other local in the swf file (Flash Player will get focus again) and it will works…
Here is a source code as example :

var spBtn = new Sprite();
spBtn.buttonMode = true; spBtn.graphics.beginFill( 0xff0000, .4 );
spBtn.graphics.drawRect( 0, 0, this.stage.stageWidth, this.stage.stageHeight );
spBtn.graphics.endFill();

addChild( spBtn );

addEventListener ( KeyboardEvent.KEY_DOWN, managekeyDown );
spBtn.addEventListener( MouseEvent.MOUSE_DOWN, mouseClick );

function mouseClick ( e : Event ) : void
{
    spBtn.removeEventListener( MouseEvent.MOUSE_DOWN, mouseClick );
    removeChild( spBtn );
}

function managekeyDown ( e : KeyboardEvent ) : void
{
    if ( e.keyCode == Keyboard.LEFT )
    {
        trace ( "JUST TRACE IF FLASH PLAYER HAVE FOCUS ON IT" );
    }
}

======= Updated at August 1º (expect update more the blog…) ======

To fix this issue you must reset the focus to the stage. So the code will change just in this part:

function mouseClick ( e : Event ) : void
{
    spBtn.removeEventListener( MouseEvent.MOUSE_DOWN, mouseClick );
    removeChild( spBtn );
    //After the remove child we’ll reset the focus to stage
    this.stage.focus = this;
}

Foi lançada hoje de madrugada a tão esperada versão 2.o da Biblioteca Papervision 3D.

Na nova versão possuímos recursos tais como: ShadeMaterials, Shaders, ASCollada (agora com suporte a animação), Frustrum Culling, Multiple Viewports, Render to Scene e muito mais…

Para quem quiser ter uma idéia do que podemos fazer no a nova versão dê uma olhada no link abaixo que exemplifica aplicação de iluminação de phong e bumpMapping.

swf:
http://www.rockonflash.com/papervision3d/downloads/shaderDemos/EarthPhongDemo.swf

FLA:
http://www.rockonflash.com/papervision3d/downloads/shaderDemos/EarthPhongDemo.fla

Então aproveite agora mesmo para fazer o download da nova versão a partir do SVN no endereço: http://papervision3d.googlecode.com/svn/trunk/

Abraços.

Olá pessoal,

fiquei meio parado nas duas últimas semanas por causa do SBGames 2007 e de uns projetos pessoais.

O SbGames 2007 foi simplesmente ótimo e o pré-evento GDS superou as expectativas.

O AUGRS apresentou duas palestras, uma de AS2 e Advergames com Pedro Taranto e Alberto Amaral e a minha de AS3 para Games.

O meu minicurso teve como título “Conhecendo o ActionScript 3.0 para o desenvolvimento de jogos utilizando o Adobe Flash CS3″ e foram abordadas questões desde o básico do AS3 referindo-se a DisplayList e ao Sistema de Eventos até a parte de Simulações de Física com a APE e 3D com Papervision 3D.

O artigo pode ser adquirido nesse link http://www.filipesilvestrim.com/gds_2007/minicursoAS3Games.pdf e os exemplos (classes e .fla) podem ser feitos o download aqui http://www.filipesilvestrim.com/gds_2007/Fonte.zip .

Atenção: Ao fazer o download dos códigos fonte, favor ler o arquivo leia-me.html para que os exemplos rodem corretamente.