Bem, continuando os textos falando sobre os novos planos, segue aí o link do site onde pretendo hospedar meus games: http://neoludo.net/

Nele já tem um exposto: o BluZone, um jogo de tiro (shooting) que combina um pouco de puzzle e memória (!). Está em fase de avaliação na MochiMedia e pretendo hospedar em sites maiores de games, como o Newgrounds, entre outros.

É o meu primeiro jogo, teve um propósito de estudo também, por isso, e pretendo fazer melhores e mais elaborados, claro.

Abraços!

PS: e a página no Facebook é www.facebook.com/neoludo.web

Na última semana vimos uma enxurrada de notícias e comentários (uns relevantes, outros sem total embasamento) sobre do anúncio da Adobe em por fim ao desenvolvimento do plugin Flash para dispositivos móveis (apenas dispositivos móveis, e não no geral). Realmente, acredito que a Adobe foi sensata na decisão e deva ter seus motivos para isso. Enfim, não vou falar mais acerca disso pois há muitos posts bons que tratam sobre o futuro da plataforma – recomendo este do ASDevs, que é imparcial realista sobre este assunto.

No entanto, quero me ater nesta postagem sobre o hype em torno do HTML5. De uma hora para outra começou a se anunciar que o futuro seria esse padrão aberto, e o Flash, de repente, virou uma coisa imprestável, um lixo, “lento”, “pesado”, uma tecnologia paga (é possível desenvolver usando Flex SDK sem precisar pagar pedágio para Adobe, mas enfim…), entre outras. O Flash virou um novo IE: algo que deveria ser combatido e eliminado, para dar lugar ao futuro maravilhoso e aberto proporcionado pelo HTML5…

Pois bem. É lamentável que muitas críticas, muitas vezes infundadas, tenham ganho espaço. Mas o que se é de lamentar mesmo é que muitos só tenham se prestado a criticar a tecnologia de maneira oportunista, apenas querendo se aproveitar do momento. Cursos, livros e eventos em torno do HTML5 começaram a surgir do nada tratando o padrão como salvação para tudo, em que se pode usar ele em sua plenitude substituindo o Flash (inclusive no IE 8, né?…). Para entender como essa visão é equivocada recomendo este post do blog Mochila Binária.

Não há dúvida de que o HTML5 veio para ficar, mas o que não se pode dizer é que ele está pronto em definitivo para substituir o Flash, como muitos dizem por aí. Só fico chateado de que muitos prefiram especular e acabem difundindo informações errôneas sobre o assunto, fazendo com que muitos que não são da área de Web acabem mal informados, como usuários comuns e pessoas que desejam ter um site – aliás, o que já vem ocorrendo.

A biblioteca, olhando por cima, tem recursos interessantes e que cobre muitos vácuos encontrados na linguagem AS 3, como, por exemplo, um método para remover um item determinado numa Array. Para isso o CASA Lib oferece um objeto List que tem um método removeItem() que cobre esse vazio e facilita a remoção de um item, independentemente da sua posição:

var arr:List = new List(['francisco', 'joão', 'maria', 'daniel']);
arr.removeItem('joão');
trace(arr); // exibe francisco,maria,daniel

Outras classes úteis são Key e KeyCombo, que facilitam a manipulação de teclas pressionadas simultaneamente.

Mais um recurso bacana são os carregadores. Há para vários tipos, assim como o carregador em grupo (GroupLoad), que permite carregar vários objetos exibindo uma só porcentagem de progresso do conjunto. Carregar imagens, por exemplo, é mais simples do que escrever os objetos “na unha”:

var imageLoader:ImageLoad = new ImageLoad("imagem-de-exemplo.jpg");
imageLoader.addEventListener(LoadEvent.COMPLETE, onComplete);
imageLoader.start();

function onComplete(evt:LoadEvent):void
{
	addChild(imageLoader.contentAsBitmap);
}

Para ver outros recursos é recomendável ver a documentação. Apesar de ser documentação há os exemplo de como usá-las.

Foi então que resolvi experimentar usar por conta própria o manual do Box2D, que tem um tutorial que, apesar de estar em C/C++, é muito didático. Adaptei o código para o Actionscript 3.0 e funcionou.

Para ver o programa funcionando usei a as3isolib, para geração de gráficos isométricos – a intenção é tornar visível o funcionamento. Porém, você pode usar o próprio trace() do Flash para exibir a posição da caixa que cai sobre um piso e dá uma leve quicada. Mais detalhes sobre o código veja no tutorial do manual.

package{
import flash.display.*;
import flash.events.*;
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoScene;

public class Main extends Sprite{

public var world:b2World;
public var groundBodyDef, bodyDef:b2BodyDef;
public var body, groundBody:b2Body;
public var groundBox:b2PolygonShape = new b2PolygonShape();
public var dynamicBox:b2PolygonShape = new b2PolygonShape();
public var fixtureDef:b2FixtureDef = new b2FixtureDef();
public var timeStep:Number = Number(1 / 60);
public var velocityIterations:Number = 6;
public var positionIterations:Number = 2;

/*objetos as3isolib - se não quiser baixar a biblioteca você pode usar o trace() para exibir a posição da caixa*/
public var scene:IsoScene = new IsoScene();
public var groundIso:IsoBox = new IsoBox();
public var bodyIso:IsoBox = new IsoBox();

public function Main() {
stage.scaleMode = StageScaleMode.NO_SCALE;

// função que fará tudo se mover
stage.addEventListener(Event.ENTER_FRAME, update);

/* CÓDIGO BOX2D */
// criação do ambiente
world = new b2World(new b2Vec2(0, -10), true);

// criação do chão, onde a caixa irá cair
groundBodyDef = new b2BodyDef();
groundBodyDef.position.Set(250, -50);

// adicionando o corpo ao ambiente
groundBody = world.CreateBody(groundBodyDef);

groundBox.SetAsBox(50, 10);

groundBody.CreateFixture2(groundBox);

// a caixa que cairá
bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(250, 50);

body = world.CreateBody(bodyDef);

dynamicBox.SetAsBox(1, 1);

fixtureDef.shape = dynamicBox;
fixtureDef.density = 1;
fixtureDef.friction = 0.3;
fixtureDef.restitution = 0.1;

body.CreateFixture(fixtureDef);
// -X-

/* CÓDIGO AS3ISOLIB - NÃO ESSENCIAL */
// gráficos do chão
groundIso.setSize(50, 50, 10);

bodyIso.width = 10;
bodyIso.length = 10;
bodyIso.height = 10;

scene.hostContainer = this;
scene.addChild(bodyIso);
scene.addChild(groundIso);
// -X-
}

public function update(evt:Event):void {
// executando a ação física
world.Step(timeStep, velocityIterations, positionIterations);
world.ClearForces();

groundIso.x = groundBody.GetPosition().x;
groundIso.z = groundBody.GetPosition().y;

/* CÓDIGO AS3ISOLIB - NÃO ESSENCIAL */
bodyIso.x = body.GetPosition().x;
bodyIso.z = body.GetPosition().y;

scene.render();
// -x-
}
}
}

Algumas bibliotecas oferecem esse recurso, como o CASALib. No entanto basta um código simples para isso. A seguir, segue um exemplo em que são mostradas num campo de texto as teclas que estão sendo pressionadas num momento. No campo de texto será exibido os valores keyCode (a representação da tecla em número da tabela ASCII) das teclas.

// campo de texto informativo
var output:TextField = new TextField();

// as teclas pressionadas
var arr_teclas:Array = new Array();

// listeners que detectarão o pressionamento de teclas
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);

// tamanho do texto e adicionando ao stage
output.text = "Teclas pressionadas: ";
output.scaleY = output.scaleX = 2;
output.width = 300;
addChild(output);

function keyDown(evt:KeyboardEvent):void {
	/* se não houver nenhuma tecla na array que
	 * corresponda à tecla pressionada,
	 * adiciona a atual à array */

	if (arr_teclas.indexOf(evt.keyCode) < 0) {
		arr_teclas.push(evt.keyCode);
	}

	// exibe as teclas pressionadas atualmente
	output.text = "Teclas pressionadas: " + arr_teclas.join();
}

function keyUp(evt:KeyboardEvent):void {
	/* Se a tecla deixou de ser pressionada,
	 * busca ela na array e a remove */

	if (arr_teclas.indexOf(evt.keyCode) >= 0) {
		arr_teclas = arr_teclas.splice(0, arr_teclas.indexOf(evt.keyCode));
	}

	// exibe as teclas pressionadas atualmente
	output.text = "Teclas pressionadas: " + arr_teclas.join();
}

Veja o resultado a seguir, pressionando teclas (dê foco ao SWF clicando no quadro abaixo):

No entanto, até que não é muito complicado criar efeitos simples usando bibliotecas como a TweenMax. Com uma quantidade enxuta de linhas é possível fazer efeitos interessantes.

A seguir, posto um exemplo bem simples, mas que serve para ilustrar que usar métodos e métodos para controle de tempo e criação de efeitos são desnecessários usando TweenMax:

package
{
	import flash.display.*;
	import flash.events.*;
	import com.greensock.*; 

	/**
	 * ...
	 * @author Francisco Prado
	 */
	public class Main extends MovieClip
	{
		private var volume:int = 0;
		private var particulas:Array = new Array();

		public function Main():void
		{
			// inicia (ou desenha mais) "partículas"
			desenharParticula();
		}

		private function desenharParticula():void {
			var mc:MovieClip = new MovieClip();
			mc.graphics.beginFill(Math.round(Math.random()*0x6666ff));
			mc.graphics.drawCircle(0, 0, 5);
			mc.graphics.endFill();

			mc.x = 200;
			mc.y = 300;

			addChild(mc);

			// fazendo as "partículas" subirem e desaparecerem
			TweenMax.to(mc, Math.random() + 1,
			{ bezier: [
			{ x: mc.x, y: mc.y },
			{ x: (Math.random() * 50) + mc.x, y: 250 },
			{ x: (Math.random() * -50) + mc.x, y: 180 },
			{ x: mc.x, y: 80 }],
			orientToBezier:true, blurFilter: { blurX: 10, blurY: 10 }, alpha: 0, motionBlur:true,
			onComplete: function removendo():void {
					removeChild(mc);
					mc = null;
				}
			});

			// chama o método para adicionar novas partículas à cena
			TweenMax.to(this, 0, { delay: 0.05, onComplete: desenharParticula } );
		}
	}
}

O código fará o efeito seguinte:

A ideia aqui não é mostrar necessariamente como fazer um sistema bonitinho de particulas, mas sim demonstrar que com uma linha do TweenMax é possível fazer um método para tempo e efeitos de cores e luz.

Usando ActionScript “puro” seria necessário apelar para uma variável Timer, uma outra linha para iniciar a contagem e uma função para manipular eventos no AS (TimerEvent).

Já com uma linha (no caso, a 48 do exemplo anterior) do TweenMax é possível fazer uma contagem (usando a propriedade de atraso delay) é possível fazer todas as coisas: o tempo e a chamada da função (no atributo onComplete é chamado o método que adicionará mais partículas).

A mesma situação na linha que fazem as partículas subirem e sumirem. Com o parâmetro bezier da TweenMax é possível fazer animações em curvas. Você pode conhecer mais efeitos testando nesta página, na seção Plugins.

Enfim, com um punhado de linhas é possível fazer efeitos bem interessantes, dispensando assim volumosos códigos chatos para caramba.

Acredito que, em se trantando de Flash – largamente utilizado na publicidade -, quanto menos linhas de código melhor, pois os prazos nem sempre são generosos (geralmente tudo é “pra ontem” ) e eficiência é sempre fundamental.

• Flashmo.com – meu favorito. Encontrei uma infinidade de componentes excelentes e personalizáveis, tanto para AS 3 como AS 2. O número de componentes para galerias de imagens impressiona: há desde simples até com efeitos 3D.
• Flash Components (seção Free) – este site, que oferece componentes pagos, também tem uma seção com componentes que podem ser baixados gratuitamente. Há várias galerias, entre outros.
• Free Flash Resources – há poucos neste site, mas há alguns que podem valer a pena, como o componente Scrollbar.
• Flash Sources – achei este site muito fraco. Há pouco material, e a maior parte é em AS 2. No entanto, fica aqui a dica.

Ele foi criado originalmente pelo pessoal do Free Flash Resources, mas a versão deles é separada em várias classes. A versão que posto aqui foi modificada por mim, e contém os códigos ActionScript direto nas timelines dos clipes de filme. Em outras palavras, basta copiar e colar os clipes; nada de mover as classes AS dele para lá e para cá. Isso evita bagunça e que você tenha que reeditar códigos cada vez que for usar o componente.

O componente tem a parte gráfica e códigos customizáveis.

Download.

Veja o exemplo abaixo do funcionamento.

Tive que garimpar muito na interwebs para descobrir a causa do problema. Daí que encontrei num fórum gringo a resposta: acontecia que, quando o Extension Manager instalava, ele passava o componente para uma versão em português, idioma do meu Windows, e não para o inglês, idioma do Flash.

Para resolver isso precisei ir ao menu Help > Manage Extensions…, no Flash, e ativar a extensão.

Linkando a biblioteca a um arquivo ela substituirá a parte em SVG (que é suportada pelos outros navegadores populares, como Firefox, Chrome e Opera) por um arquivo em Flash, que irá exibir praticamente a mesma coisa. Em outras palavras: se a biblioteca reconhecer que o navegador suporta SVG, ela não fará nada, apenas deixa o SVG ser exibido normalmente; se ele perceber que é o IE 8 e anteriores (que não suportam SVG) que o usuário está usando ele irá substituir por um arquivo em Flash que exibirá o arquivo SVG, com todos as suas configurações, como animação e interatividade.

Testei alguns exemplos e achei bem interessante. Ainda não testei na minha máquina, e sim apenas os exemplos fornecidos no site do projeto, e cumpriu bem a tarefa.

Trata-se de uma solução interessante. O iPad, por exemplo, suporta SVG, mas não animações em Flash; já o IE é o contrário. Usando essa biblioteca podemos programar apenas uma vez (SVG com JavaScript) e rodar em qualquer navegador.

Fica a dica.