Flex PixelBender Zend RPG MD2 Away3D Correria Café Cerveja TUDO JUNTO AGORA

Essa semana foi atipica, não parei, corri de um lado pra outro, fui pra São Paulo e voltei correndo, levei trabalho pra casa, to no meu hobby, relembrei Flex, aprendi Pixel Bender, levei a Clarice pra vacinar e aqui estou postando e também preparando meu post de amanha na RPG Vale.

Como devem ter notado na imagem acima estou fazendo umas coisinhas um pouco mais nervosas com flash. Pensei em montar um hotsite em 3D dessa vez, por issu este modele com cara de Budy Pocket... alias confesso que ficou bem podrão mesmo. Talvez se eu organizar o esqueleto direito consiga usar ele para os testes de colizão no terreno do jogo.

Irei inserir mais frames nesta animação, o arquivo MD2 ficou com incríveis 36Kb com 12 frames! Então acho que irei arriscar uns 30.
Uma dica excelente que achei na internet, é a respeito da lista de animações do MD2, você pode criar um arquivo separado definindo os quadro chaves. O formato pede que a primeira linha identifique o arquivo, o resto é uma string e o numero total de frames da animação.
Fica itegralmente assim:

# MD2 Frame Name List
stand 11
run 0
attack 0
pain0 0
pain2 0
pain3 0
jump 0
flip 0
salute 0
taunt 0
wave 0
point 0
crstnd 0
crwalk 0
crattack 0
crpain 0
crdeath 0
death0 0
death2 0
death3 0

Eu tentei mudar o nome das animações, mas começou a dar pau com o Blender 2.49a. Então larguei mão e só zerei a quantidade de quadros. Deu certinho.

Away3D suporta animação por bones dentro do Collada, mas os tutoriais de MD2 etão mais à mão, mas é bom saber que ela tem esse recurso muito mais avançado.
Este foi um dos motivos da escolha da Away3D, ela incorpora muitos recursos que a Papervision3D demora para incorporar. Apesar das ultimas informações que tive dela ela consumir o dobro de RAM que a Papervision, mas isso faz bastante tempo, qualquer duvida procurem alguma analize mais atual.

A pintura foi toda feita no inkscape, achei mais pratico usar um software vetoria, pois um espaço pequeno de 256x256 pixels é complicado de trabalhar.

Uma coisa interesante durante o processo, o png com transparência foi renderizado perfeitamente na away3d. Deu até uma ideia de fazer uma mágia de invisibilidade pra deixar Cibele assim, com os olinhos aparecendo pra dar aparência daquele desenho do PacMan que quando ele comia o fantasma so saiam os olinhos flutuando em bora.

Outra coisa legal é o Pixel Blender, esse recurso é fabuloso. Rodar shaders apartir do player do flash é um recurso extupidamente poderoso. Tem gente estudando o recurso inclusive para manipulação de dados!
Eu tirei este shader lindo de raios de luz deste site (kode80.com), e pretendo usar esse mesmo shader de light-scatering na faze inicial do jogo. A luz atravessando as arvores vai dar uma visão chocante. E é um shader bem simples, me expantei ao analiza-lo.
Pena que rodando no flashplayer o pixelbender, so trabalha na fase processo pixel, o pre-calculo de vertice e matrizes é todo via AS3, mas mesmo assim o resultado é rápido (veja o site dos caras)!!!

Pra quem não conhece pixelbender é o novo recurso adicionado ao player do flash, onde o swf carrega um código pré-compilado em linguagem de maquina, que roda direto no processador da placa de video. O PixelBender é baseado na GLSL que o torna bastante compativel e portavel.

O modelo foi criado com um numero extreamente reduzido de poligos, mesmo porque irei caprichar no cenário. Por sorte o shader não se atrapalha com a transparência.
Outra coisa que irei fazer é adicionar uma segunda layer de render para renderizar o chão com sombras e o horizonte.
Depois irei usar o recurso de paths da Away3D para fazer a camera acompanhar um caminho fixo ao mover o mouse pela cena, oque dara uma visão de angulos muito superior. Esse processo sera usado no game final também.
Irei jogar um pequeno sistema de particulas para fazer a fumaça, tentei fazer com pixelbender, usando outro código da net, mas não mesclou corretamente.
Bom, o objetivo é copiar uma cena como esta:

Creio que vocês não devem ter reparado no background... mas ele esta ali, é so olhar pra esquerda e direita da figura centra. Sei que é dificil :P
Bom, uma vegetação como essa deve ficar excelente na cena.

Os links irão estar flutuando no ar ao longo do path.

Parte 2
Bom, pra não dizer que aproveitem bem meu tempo... inventei de aprimorar o software de visualização 3d dos personagens. Dando um acabamento profissional.

Infelizmente issu acaba implicando em atenção a inumeros e inumeros detalhes que agente nunca repara de inicio. Oque deveria durar uma manhã, comeu o sabado inteiro e parte da manhã de domingo.

Mas ficou legal. Agora você pode inserir comentários, e há uma conexão com o Gravatar, um serviço universal de avatar. Basta digitar ser e-mail e ter um cadastro simples no Gravatar e pronto.
Poderia ter usado o OpenId, pois o Zend tem essas facilidades, mas fiquei com preguiça.
Estou satisfeito com o Zend, apesar de seu vasto tamanho, ele tem recursos na proporção dos seus Megabytes.
Este código no controller transforma a saída em RSS 2.0, simples, e padronizado. Assim além de poder usar ele na aplicação eu posso aproveitar os dados em qualquer outro lugar, inclusive agregadores de feed ^_~

public function indexAction()
    {
 $page = $this->getRequest()->getParam('page',false);//'www.8arte.net/wwpvisualizador';
        $this->view->rss = $this->formatRSS( $page );
    }
    
    protected function formatRSS($dt,$title=false)
    {
     $config = Zend_Registry::get('config');
     $base = $config->rss->base;
     if(!$title) $title = $config->rss->title;
     
     $ens = array();
     $pageNome = 'www.8arte.net';
  foreach( $this->comentarios->listComments($dt) as $com )
        {
         array_push( $ens,
    array(
     'title'   => 'Comentário de '.$com['nome'],
     'author'  => $com['nome'],
     'link'   => 'http://'.$com['pagina_nome'].'/',
     'description' => $com['coment']//$this->formatDescription($com['nome'],$com['web'],$com['coment'])
    )
         );
         $pageNome = $com['pagina_nome'];
  }
  $rss = array(
   'title'  => $pageNome,
   'link'  => "http://$pageNome/",
   'charset' => 'UTF-8',
   'entries' => $ens,
   'author' => 'Marcos Augusto Bitetti (marcosbitetti@gmail.com)',
   'category' => "Comentários",
   'image'  => 'http://www.8arte.net/media/img/rss/rss_wild.jpg'
  );
     
  $feed = Zend_Feed::importArray($rss, 'rss');
  
  return  $feed->saveXML();
    }

O Adobe Flex é muito rápido pra produzir aplicativo... infelizmente pra mim, não ajuda muito, eu acabo perdendo tempo incrementando mais recursos. Mas vale a pena.

private function addComents():void {
    coment_list.removeAllChildren();

    var ld:URLLoader = new URLLoader();
    ld.addEventListener( Event.COMPLETE, addCommentsData);
    ld.load( new URLRequest("http://www.8arte.net/comments/wwpvisualizador") );
   }

   private function addCommentsData( e:Event ):void {
    var ld:URLLoader = e.target as URLLoader;

    var com:Array = new Array();
    //adiciona comentario principal
    var t:TextArea = new TextArea();
    t.percentWidth = 100;
    t.height = 85;
    t.wordWrap = true;
    t.editable = false;
    t.htmlText = '<img align="left" alt="gravatar" height="80" hspace="2" src="http://www.gravatar.com/avatar/aa6003be4294547ab18571dfca3e4522.png" vspace="0" width="80" />Bitetti (autor) Implementação de visualização de personagens do jogo Wild Witch Project.'+
       'Utilizando Adobe Flex 4.0, Zend Framework e Flash Develop.'+
       'Modelos 3D produzidos no Blender, texturas no Gimp, Inkscape e ArtRage2 (licenciado).'+
       'Wild Witch Project sob licenca Creative Commons 3.0 - uso não comercial, atribuição e não derivação.';
    coment_list.addChild(t);
    
    //parse RSS
    var feed:RSS20 = new RSS20();
    feed.parse( ld.data as String );
    ld = null;
    System.gc();
    
    for each( var i:Item20 in feed.items) {
     t = new TextArea();
     t.percentWidth = 100;
     t.height = 85;
     t.wordWrap = true;
     t.editable = false;
     t.htmlText = i.description;
     coment_list.addChild(t);
    }
   }

Este código lê o RSS gerado no Zend e insere os elementos TextArea para cada entrada. Tudo simples, usando as xml syndication lib disponível no google code.

Foi uma boa relembrada de Flex.

Bom, vou voutar à minha correria