Diga "adeus" ao EventDispatcher

Olá, novamente, pessoal.

Na primeira parte deste artigo, vimos quais as vantagens e as características do NResponder. Caso ainda não tenha lido, confira aqui a primeira parte.

Nesta segunda parte, vamos ver o NResponder em ação em um exemplo real.

Agora você precisará dos arquivos fontes desse projeto. Você pode baixá-los aqui.
Rápida explicação

Neste exemplo vamos criar uma rotina de jogo de tiro bem simples, para mostrar como as características e os benefícios do NResponder podem mudar a sua forma de pensar, vamos refinar um pouco essa rotina.

Imagine que, nesse jogo, teremos uma arma velha, um tipo de revolver com tambor de 6 balas. Esse tipo de arma possui uma parte chamada “martelo” que precisa ser puxada para trás a cada tiro. Imagine que para fazer isso seja necessário algo em torno de 1,5 segundos. E mais, como o tambor tem apenas 6 balas, o usuário precisa recarregá-las toda vez que terminarem.

Primeiro, vamos imaginar o que seria necessário para construir isso utilizando a API Nativa de Eventos do Flash, quantos booleans, timers, travas, uma porção de “if then else” e mais uma porção de variáveis para contar tempo, tiros, etc.

Vou mostrar a vocês um caminho possível a se seguir, mas no meio desse caminho, antes que as coisas se tornem mais complexas com esse monte de amarras que acabei de falar, vamos mudar e utilizar o NResponder para resolver nossos problemas.

Agora, sobre os arquivos do projeto, é importante dizer que eu coloquei alguns comentários de mão-dupla. Você sabe, aquele tipo de bloco de comentário que você pode mudar facilmente entre um trecho e outro. Como este:

Código:


[as]/*.../*/The code  here is activated.//*/
---------
//*The  code here is  activated./*/...//*/[/as]


Assim você pode ver claramente a diferença de código entre a API Nativa de Eventos e o NResponder. Você pode facilmente alternar entre um trecho e o outro colocando apenas um “/” na primeira linha do bloco de comentário.

OK, vamos começar!
Construindo com a API Nativa de Eventos

A essa altura, você provavelmente já deu uma olhada nos arquivo do projeto. Então vou descrever rapidamente o que você encontrou no arquivo FLA:



Nada novo por aqui ainda, somente 3 MovieClips no palco: a área de tiro (shootArea), o botão de reload (reload) e as balas (bullets).

Dentro do MovieClip das balas você encontra outros seis, um para cada bala do revolver. Todos esses objetos possuem nomes de instância que iremos usar logo mais no arquivo AS.

E, como você pode ver, na livraria vamos exportar uma classe de view (MVC) chamada VShootAnimation. Essa classe de view apenas controla a animação dos tiros na tela baseada um “texture altas” (poof.png).

Agora vamos para o arquivo AS NResponderExample, mas utilizando apenas a API Nativa de Eventos.

Código:


[as]/** *  NResponderExample class *  * @version  NResponderExample v1.0 *  @author Diney Bomfim  */package{    import flash.display.MovieClip;      import flash.events.Event;    import  flash.events.MouseEvent;
    /**      * Simple shoot  game to illustrate  the usage of  NResponder.      */      public dynamic class  NResponderExample extends MovieClip      {
    //**************************************************    //  Protected /  Private Properties    //**************************************************
          private var  shoots:int;
    //**************************************************    //  Initialization    //**************************************************
          /**            * The  initialization of NResponderExample  class.            */          public  function NResponderExample():void            {                if (stage)                {                      init(null);                }                else                {                    addEventListener(Event.ADDED_TO_STAGE, init,  false, 0, true);                }          }
    //**********************************************************************************************************      //    //  Protected / Private  Methods    //    //**********************************************************************************************************
          /**            * Initiate  the View of  the application.            *            *  @param    e            */          private function init(e:Event):void            {                //  Remove the listener                removeEventListener(Event.ADDED_TO_STAGE,  init);
                // Definitions                doReload(null);
                // Listeners                this.btReload.addEventListener(MouseEvent.MOUSE_DOWN,  doReload, false, 0,  true);          }
          /**            * Make  a Shoot on  the valid stage  area.            *            * @param      e            */          private  function doShoot(e:MouseEvent):void            {                trace('a Shoot');
                var  shootAnim:VShootAnimation = new  VShootAnimation();                shootAnim.x = stage.mouseX;                shootAnim.y  = stage.mouseY;
                addChild(shootAnim);
                this.mcBullets['mcBullet' +  shoots].visible = false;
                ++shoots;          }
          /**            * Reload the  gun.            *            * @param      e            */          private  function doReload(e:MouseEvent):void            {                shoots =  1;
                for (var i:int  = 1; i  <= 6; i++)                  {                    this.mcBullets['mcBullet' +  i].visible = true;                }
                //  Listeners                this.mcShootArea.addEventListener(MouseEvent.MOUSE_DOWN, doShoot, false,  0, true);          }    }}[/as]


Bem, a classe acima será sua classe principal para compilar o arquivo FLA.

* Primeiro, no construtor da classe (NResponderExample()), seguimos uma regra de boas práticas colocando Event.ADDED_TO_STAGE, para garantir que não haverá erros caso o SWF gerado seja posteriormente carregado em outra aplicação.
* No método init(), nós removemos o Event.ADDED_TO_STAGE anterior, executamos o primeiro reload da arma e criamos o evento do botão de reload.
* No método doReload(), fazemos com que todas as balas fiquem visíveis na tela e criamos o evento dos disparos da arma.
* No método doShoot(), nós colocamos aquela classe de view VShootAnimation exatamente na mesma posição do mouse na tela e removemos uma bala da tela.

Até aqui o código está bem simples. Você pode testar e ver o resultado do código acima.

Mas ainda não temos o nosso comportamento minimamente refinado. As balas não se comportam como se o usuário puxasse o martelo, parecem mais uma metralhadora, e os tiros não terminam após a sexta bala, e, para completar, ainda temos um bug na linha this.mcBullets['mcBullet' + shoots].visible = false; pois não existem mais balas para sumir da tela após a sexta.

Bem, tente imaginar a partir daqui o que seria necessário para resolver todos esses problemas e implantar aquele pequeno refinamento nessa rotina.

Gaste alguns minutos olhando para esse código e tente fazer isso da forma tradicional. Lembre-se dos problemas mencionados acima.

Para fazer isso, provavelmente teríamos um monte de “if then else”, criar alguns timers ou variáveis para contar o tempo, um monte de booleans para mim, isso é irritante!

Mas vamos PARAR por aqui agora, migrar tudo para NResponder e ver o que acontece.
Resolvendo os problemas com NResponder

Agora é o grande momento deste artigo. É aqui que algo quase mágico pode acontecer com o NResponder!

Acredite ou não, só o que precisaremos fazer para resolver todos aqueles problemas de uma só vez e implementar o nosso comportamento poucamente refinado é: substituir 3 linhas de código, e ainda, de lambuja, excluir uma!

Somente isso, nada mais!

Código:


[as]/**  * NResponderExample class  *  *  @version NResponderExample v1.0  * @author Diney  Bomfim */package{    import  flash.display.MovieClip;    import flash.events.Event;      import flash.events.MouseEvent;
    import  appkit.responders.NResponder;
    /**      * Simple shoot  game to illustrate  the usage of  NResponder.      */      public dynamic class  NResponderExample extends MovieClip      {
    //**************************************************    //  Protected /  Private Properties    //**************************************************
          private var  shoots:int;
    //**************************************************    //  Initialization    //**************************************************
          /**            * The  initialization of NResponderExample  class.            */          public  function NResponderExample():void            {                if (stage)                {                      init(null);                }                else                {                    /*                    addEventListener(Event.ADDED_TO_STAGE,  init, false, 0,  true);                    /*/                    NResponder.addNative(this,  Event.ADDED_TO_STAGE, init, 1);                      //*/                }          }
      //**********************************************************************************************************    //    //  Protected /  Private Methods    //      //**********************************************************************************************************
          /**            *  Initiate the View  of the application.            *              * @param    e            */          private function  init(e:Event):void            {                // Remove the  listener                //removeEventListener(Event.ADDED_TO_STAGE, init); //  Don't need this  any more.
                // Definitions                doReload(null);
                //  Listeners                /*                this.btReload.addEventListener(MouseEvent.MOUSE_DOWN, doReload, false,  0, true);                /*/                NResponder.addNative(this.btReload, MouseEvent.MOUSE_DOWN,  doReload);                //*/          }
          /**            * Make  a Shoot on  the valid stage  area.            *            * @param      e            */          private  function doShoot(e:MouseEvent):void            {                trace('a Shoot');
                var  shootAnim:VShootAnimation = new  VShootAnimation();                shootAnim.x = stage.mouseX;                shootAnim.y  = stage.mouseY;
                addChild(shootAnim);
                this.mcBullets['mcBullet' +  shoots].visible = false;
                ++shoots;          }
          /**            * Reload the  gun.            *            * @param      e            */          private  function doReload(e:MouseEvent):void            {                shoots =  1;
                for (var i:int  = 1; i  <= 6; i++)                  {                    this.mcBullets['mcBullet' +  i].visible = true;                }
                //  Listeners                /*                this.mcShootArea.addEventListener(MouseEvent.MOUSE_DOWN, doShoot, false,  0, true);                /*/                NResponder.addNative(this.mcShootArea, MouseEvent.MOUSE_DOWN,  doShoot, 6, 1.5);                //*/          }    }}[/as]


Como você pode ver, primeiro utilizamos o “número de respostas”, fizemos com que nosso Event.ADDED_TO_STAGE ocorresse apenas uma única vez e fosse automaticamente excluído depois.

Valendo-se ainda do “número de respostas”, definimos que os disparos da arma iriam ocorrer apenas 6 vezes.

E, usando o “intervalo entre disparos”, fizemos com que cada tiro da arma respeitasse um tempo mínimo de 1,5 segundo entre dois disparos consecutivos.

Bem, literalmente, você pode dizer “Adeus” ao EventDispatcher da sua aplicação!
Conclusão

Bem, obviamente que este exemplo é um no qual o NResponder se encaixou como uma luva, resolvendo todos os problemas de uma única vez.

Mas quero que você se lembre de todas as características e comportamentos do NResponder que viu aqui, pense em como isso pode ajudá-lo no seu dia a dia, como isso pode mudar sua forma de pensar nas soluções para os problemas que encontrar.

Se você ainda tiver alguma dúvida sobre o qual útil pode ser o NResponder, gostaria que você se lembrasse de duas únicas coisas:

* NResponder é completamente independente, pode ser disparado de qualquer lugar e para qualquer lugar, carregando com ele qualquer parâmetro que você queira.
* Com o NResponder, com seu comportamento diferente, podemos visualizar novas possibilidades, novas soluções. Algo que antes talvez apenas resolvêssemos de outra maneira, mesmo utilizando mais código para isso.

Finalmente, espero ter ajudado e espero que você teste o NResponder nos seus projetos, faça substituição em códigos já existentes, faça testes de performance. Em outras palavras, divirta-se!

Novamente eu vou colocar aqui os links importantes do NResponder e, se você tiver alguma dúvida, basta me mandar um email!