MXStudio » Marcio Silva

Papervision 3D: Primeiros Passos

Marcio Silva — Mon, 15 Mar 2010 13:30:39 +0000

Olá Pessoal,

Sou Márcio Silva, e neste tutorial mostrarei os primeiros passos para que você possa começar a desenvolver seus aplicativos, jogos e animações utilizando o Papervision3D Engine.

Pré-requisitos: Conhecimento em Action Script 3.0. Conhecimento em Adobe Flash CS4.

O que é Papervision 3D?

Papervision 3D (P3D) é uma Engine Open Source para criação de Cenas 3D no Adobe Flash. Com esta engine podemos manipular de uma forma simplificada elementos 3D, escondendo detalhes de baixo nível. Esta engine não realiza cálculos físicos, como por exemplo gravidade, atrito, colisão elástica e inelástica, entre outros. Para isto é necessário a utilização de outras engines destinadas apenas a realizar cálculos físicos, isto será tema de outros tutoriais.

Como começar?

Como escrevi nos pré-requisitos, é indispensável o conhecimento de básico ao intermediário no Action Script 3.0. A API do P3D é totalmente orientada a objetos e possui uma documentação de código muito boa. Neste tutorial, utilizo como ferramenta o Adobe Flash CS4 para programar e rodar a aplicação.

Passo 1 – Primeiramente você deve baixar o P3D que está hospedado no Google Code: http://code.google.com/p/papervision3d/.

Passo 2 – Crie um pasta com o nome de sua escolha e descompacte o conteúdo do arquivo .ZIP .

Passo 3 - Abra o Adobe Flash CS4, e crie um novo arquivo .FLA do tipo AS3 com o nome PlaneP3D.fla. Coloque as seguintes configurações:

Passo 4 – Para que o Adobe Flash encontre as definições de classe do Papervision 3D é necessário configurar o Library Path. Vá em Edit->Preferencces->Action Script, clique em ActionScript 3.0 Settings. Informe o diretório onde você descompactou o Papervision 3D. No meu caso ficou como mostrado abaixo:

Passo 5 – Crie um Action Script File (.AS) com o nome de PlaneP3D.as.

Passo 6 – No arquivo PlaneP3D.as coloque o seguinte código.

package
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.primitives.Plane;

public class Plane extends Sprite
{
public var viewport:Viewport3D = new Viewport3D();
public var scene:Scene3D = new Scene3D();
public var camera:Camera3D = new Camera3D();
public var renderer:BasicRenderEngine = new BasicRenderEngine();
public var plane:Plane = new Plane();

public function Plane()
{
addChild(viewport);
scene.addChild(plane);
renderer.renderScene(scene, camera, viewport);
addListeners ();
}

private function addListeners ()
{
addEventListener(Event.ENTER_FRAME, render);
}

private function render (e:Event)
{
plane.x +=3;
renderer.renderScene(scene, camera, viewport);
}
}
}

Alguns comentários sobre o código

O que é Viewport3D?

Para explicar o que é a Viewport3D, só fazer uma analogia à tela de cinema, onde é projetado o filme para que seja possível assistí-lo. Portanto, é uma região retangular onde é projetado a Cena 3D.

O que é uma Camera3D?

A Camera utilizada aqui é a mesma que você já conhece do cinema, ela grava o que acontece no mundo e projeta na tela (View Port).

O que é Scene3D?

A Cena 3D é basicamente o mundo que se deseja ver.

O que é BasicRenderEngine?

Fazendo novamente analogia ao cinema, o Basic Render Engine é o Diretor, ele grita “Ação” e tudo acontece: A Camera começa a filmar, projetando a Cena na View Port. Por isso nada acontece se ele não “ordenar” através do método renderScene ().

O Construtor da classe Plane dá o pontapé inicial adicionando a View Port ao stage, pois o restante dos objetos serão renderizados dentro dela. Todos os objetos pertencentes à Cena, neste caso o Plano, devem ser adicionados ao objeto scene. Como nesta cena o plano será deslocado para a direita à cada ENTER_FRAME, um listener foi adicionado.

Pronto, se você não pressionou CTRL + ENTER para ver o que acontece, pressione agora e veja o resultado.

Veja o resultado final aqui PlaneP3D.

Baixe os arquivos deste tutorial: http://blog.creativerender.com/wp-content/uploads/2010/03/papervision_beginner.zip

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.
Site: www.creativerender.com e www.marciosilva.net

Qualquer dúvida envie um e-mail para contato@creativerender.com ou acesse nosso fórum

Plugin Twitter para o Mootools – Parte 1

Marcio Silva — Tue, 27 Oct 2009 15:53:20 +0000

Olá Pessoal,

Nesta primeira parte será mostrado a construção de um plugin/extensão do Mootools para recuperar tweets do twitter desejado. Para o correto funcionamento deste tutorial você deverá baixar a versão 1.2 ou superior do mootools.

Agora, crie um arquivo chamado Twitter.js, é nele que o plugin será desenvolvido. Utilizando o ferramental disponilizado pelo mootools a implementação inicia-se com a definição da classe Twitter:

var Twitter = new Class ({

	Implements : [Options,Events],

	getOptions : function()
	{
		return {
			url :  "http://localhost/twitter.php?user_timeline=", //proxy para carregar os tweets
			refreshTime : 5000, //intervalo de tempo para atualizar os tweets
			user : 'mapsiva', //login do usuário
			count : 2, //quantidade de tweets que devem ser retornados
			container : $('twitterContainer') //elemento HTML que onde os tweets serão listados
		};
	},

	initialize: function (options)
	{
		this.setOptions(this.getOptions(), options);
	},

No trecho de código acima apenas definimos a classe Twitter, é informado que será estendido as classes Events e Options do mootools.

O método initialize(), é o construtor da classe Twitter, portanto quando fizermos new Twitter() este método será invocado. Nele apenas são recuperados os opções como parâmetro.
O método getOptions() servirá para retornar as opções configuráveis de nosso plugin.

        getPublicTimeLine : function ()
	{
		var url = this.options.url + this.options.user ;

		this._ajax (url);
	},

Por opção própria, adotei todos os métodos “privados” ou internos começados por ‘_’ (anderline). O método getPublicTimeLine() é responsável por requisitar os tweets do usuário configurado.

        _ajax : function (_url)
	{
		new Request(
		{
			method: 'get',
			url: _url,
			data: {'count' : this.options.count},
			onRequest: this._onRequest.bind(this),
			onComplete: this._onComplete.bind(this),
			onFailure: this._onFailure.bind(this)

		}).send();
	},

O método _ajax() faz uma requição via Ajax para o proxy de tweets configurado, por que não podemos fazer requisições direto ao site do twitter via javascript por razões de segurança. Algumas funcões Handler são informadas.

        _onComplete : function (response)
	{
		var tweets = JSON.decode (response);

		tweets.each (this._showTweet.bind(this));
	},

O método _onComplete() será invocado quando a requisição resultar em sucesso, a requisição feita pelo proxy ao Twitter retornará um conjunto de dados no formado JSON, portanto devemos decodifiá-los utilizando a JSON do mootools. Logo após, a função _showTweet() se responsabiliza por mostrar os tweets no HTML.

	_onRequest : function (response)
	{
		//TODO
	},

O método _onRequest() é invocado quando a requisição de tweets é iniciada, com ela possível mostrar um gif com um aguarde para o usuário, que posteriormente pode ser removido no método _onComplete().

	_onFailure : function (xhr)
	{
		//TODO
	},

O método _onFailure() será invocado quando ocorrer um erro na requisição.

        _showTweet : function (item, index, array)
	{
		if (!$defined(this.options.container))
			return;

		var tweet = new Element ('div').addClass('tweetItem').set('html', item.text).injectInside(this.options.container);
	}
});

Para mostrar um tweet, o método _showTweet() verifica a existência do container onde os tweets serão inseridos. Um elemento DIV é criado com o atributo class setado para tweetItem, dessa forma você poderá construir seu CSS para formatá-lo da forma que desejar.

Twitter.implement(new Options);
Twitter.implement(new Events);

Logo após a definição da classe os objetos da classe Options e Events utilizando o implement do mootools são instanciados.

Para executar a busca de tweets logo após o seu site carregar basta colocar o código ao fim do arquivo Twitter.js ou logo após a inclusão do mesmo na página HTML.

window.addEvent('domready', function()
{
	var twitter = new Twitter();

	twitter.getPublicTimeLine ();
});

O proxy PHP chamado twitter.php tem a finalidade de buscar os tweets recebendo a quantidade de tweets a serem buscados e de que usuário eles são. Para realizar essa busca será utilizado a biblioteca CURL do PHP, verifique se seu servidor Web possui esta biblioteca instalada, caso contrário deverá instalá-la.

Um exemplo de utilização deste plugin é mostrado no código HTML abaixo:

Pronto, com isso é possível recuperar os tweets de usuários via JS. Na parte 2 iremos definir os métodos que irão ‘parsear’ cada tweet incluindo os links, link para perfils como @mapsiva ou para #topics.

Gostaria de ajudar no desenvolvimento deste plugin? Acesse http://code.google.com/p/mootwitter/ ou mande email para marcio arroba marciosilva ponto net.

Website: http://marciosilva.net/
Twitter: http://twitter.com/mapsiva

Baixe os arquivos fontes deste tutorial.
http://www.mxstudio.com.br/wp-content/uploads/2009/10/twitter.zip

Box2D, Modo DebugDraw

Marcio Silva — Sat, 06 Jun 2009 21:39:51 +0000

Olá Pessoal,

Dando continuação ao último tutorial, será mostrado como utilizar o modo de debug do Box2D chamado de DebugDraw. Com esse modo você poderá analisar visualmente como estão ocorrendo as colisões, contatos, onde estão os centros de massa, que objetos estão “dormindo”, entre outras análises.

Para exemplificar esse modo será utilizado o mesmo código do artigo anterior que pode ser visualizado em http://www.mxstudio.com.br/2009/04/box2d-primeira-simulacao/. Um preview do que será feito está logo abaixo:

Algumas adaptações serão necessárias para colocar o DebugDraw no exemplo anteriormente visto. Primeiramente será necessário importar a classe MovieClip e demais modificações que podem ser vistas no código abaixo:

package
{
	import flash.display.Sprite;
        /*novo import*/
	import flash.display.MovieClip;

	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;

	/*importação da API Box2D*/
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;

	public class Box2DMX extends Sprite
	{
		/* Construtor da classe	*/
		public function Box2DMX()
		{
			init();
		}

		/* Incializa a aplicação*/
		private function init():void
		{
			createWorld();

			createListeners();

			createGround();

			debugDraw();
		}

                /*Método que realiza o DebugDraw*/
		private function debugDraw():void
		{
			var m_sprite:Sprite;
			m_sprite = new Sprite();

			addChild(m_sprite);

			debug = new b2DebugDraw();

			debug.m_sprite=m_sprite;
			/*escala padrão do Box2D 30px = 1m*/
			debug.m_drawScale=30;

			debug.m_alpha = 1;

			debug.m_fillAlpha=0.5;

			debug.m_lineThickness=1;

			debug.m_drawFlags = b2DebugDraw.e_shapeBit
				|b2DebugDraw.e_jointBit
				|b2DebugDraw.e_coreShapeBit
				|b2DebugDraw.e_aabbBit
				|b2DebugDraw.e_obbBit
				|b2DebugDraw.e_pairBit
				|b2DebugDraw.e_centerOfMassBit;

			/*aplica ao mundo o modo debug*/
			world.SetDebugDraw(debug);
		}
		/* Define os listeners da simulação/game*/
		private function createListeners():void
		{
			timer = new Timer(2000);
			timer.addEventListener(TimerEvent.TIMER, createBodies);
			timer.start();
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
		}

		/* Instancia o mundo onde a simulação ocorrerá*/
		private function createWorld():void
		{
			/* Definição dos limite do mundo*/
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);

			/* Difinição da gravidade atuante em todos os corpos desse mundo*/
			var gravity:b2Vec2=new b2Vec2(0.0,10.0);

			/* Indica que os corpos devem permanecerem inativos	*/
			var doSleep:Boolean=true;

			/* Construção do mundo*/
			world = new b2World(worldAABB, gravity, doSleep);

		}

		/* Cria o chão onde os corpos ficarão*/
		private function createGround():void
		{
			var body:b2Body;
			var bodyDef:b2BodyDef;
			var boxDef:b2PolygonDef;

			bodyDef = new b2BodyDef();
			bodyDef.position.Set(10, 12);
			bodyDef.angle=0.0;

			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(90, 3);
			boxDef.friction = 0.4;

			/* para corpos que nunca se moverão o
			* valor da densidade deve ser zero
			*/
			boxDef.density = 0;
			bodyDef.userData = new PhysGround();
			bodyDef.userData.width = physScale * 2 * 30;
			bodyDef.userData.height = physScale * 2 * 3;

			addChild(bodyDef.userData);

			body=world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
		}
		/*cria os atores da simulação*/
		private function createBodies(e:Event):void
		{
			/* representa o corpo rígido*/
			var body:b2Body;

			/* será utilizado para representar
			* as características físicas do corpo rígido
			*/
			var bodyDef:b2BodyDef;

			/*define um polígono e suas características físicas*/
			var boxDef:b2PolygonDef;

			/*define um círculo e suas características físicas*/
			var circleDef:b2CircleDef;

			bodyDef = new b2BodyDef();
			bodyDef.position.Set(Math.random() * 15+5, 0);

			var rX:Number = Math.random() + 0.1;
			var rY:Number = Math.random() + 0.1;
			//Caixa
			if (Math.random() < 0.5)
			{
				boxDef = new b2PolygonDef();
				boxDef.SetAsBox(rX, rY);
				boxDef.density = 1.0;
				boxDef.friction = 0.5;
				boxDef.restitution = 0.2;

				bodyDef.userData = new MovieClip();
				bodyDef.userData.width = rX * 2 * physScale;
				bodyDef.userData.height = rY * 2 * physScale;

				body = world.CreateBody(bodyDef);
				body.CreateShape(boxDef);
			}
			else //Círculo
			{
				circleDef = new b2CircleDef();
				circleDef.radius = rX;
				circleDef.density = 1.0;
				circleDef.friction = 0.5;
				circleDef.restitution = 0.2;

				bodyDef.userData = new MovieClip();
				bodyDef.userData.width = rX * 2 * physScale;
				bodyDef.userData.height = rX * 2 * physScale;

				body = world.CreateBody(bodyDef);
				body.CreateShape(circleDef);
			}

			bodyDef.userData.x = body.GetPosition().x *physScale ;
			body.SetMassFromShapes();
			addChild(bodyDef.userData);
		}

		/*atualiza o posicionamento dos atores*/
		private function Update(e:Event):void
		{
			world.Step(timeStep, iterations);

			// Pare cada corpo no mundo atualiza a sua posição e rotação
			for (var body:b2Body = world.GetBodyList (); body; body = body.GetNext())
			{
				if (body.GetUserData() is Sprite)
				{
					body.GetUserData().x = body.GetPosition().x * physScale;//metros para pixels
					body.GetUserData().y = body.GetPosition().y * physScale;//metros para pixels
					body.GetUserData ().rotation = body.GetAngle() * (180/Math.PI);
				}
			}
		}

		private var world:b2World;
		private var iterations:int = 10;
		private var timeStep:Number = 1.0/30.0;
		private var physScale = 30.0;
		private var timer:Timer;
                /*novo atributo para aplicar o DebugDraw*/
		private var debug:b2DebugDraw;

	}
}

As modificações começaram com a adição da classe MovieClip que será usada como dado do usuário:

package
{
	import flash.display.Sprite;
        /*novo import*/
	import flash.display.MovieClip;

Aos atributos foi adicionado um novo que serve para realizar o DebugDraw da classe b2DebugDraw:

		private var physScale = 30.0;
		private var timer:Timer;
                /*novo atributo para aplicar o DebugDraw*/
		private var debug:b2DebugDraw;

	}
}

Tanto para criar o círculo quanto para criar os poligonos a classe de dado de usuários é a classe MovieClip, com ela fica mais fácil visualizar o comportamento dos corpos quanto ao seu estado de atividade que veremos mais à frente no texto:

bodyDef.userData = new MovieClip();

A mudança mais importante foi a criação de um novo método chamado debugDraw():

private function debugDraw():void
{
	var m_sprite:Sprite;
	m_sprite = new Sprite();
	addChild(m_sprite);
	debug = new b2DebugDraw();

	debug.m_sprite=m_sprite;
	/*escala padrão do Box2D 30px = 1m*/
	debug.m_drawScale=30;
	debug.m_alpha = 1;

	debug.m_fillAlpha=0.5;

	debug.m_lineThickness=1;

	debug.m_drawFlags = b2DebugDraw.e_shapeBit
		|b2DebugDraw.e_jointBit /*mostra todos os Joints da Cena*/
		|b2DebugDraw.e_coreShapeBit /*utilizaado para observar colisões contínuas*/
		|b2DebugDraw.e_aabbBit /*mostra o eixo de coordenados dos corpos*/
		|b2DebugDraw.e_obbBit /*mostra os bouding boxes*/
		|b2DebugDraw.e_pairBit /*mostra um vetor que parte do centro dos corpos para os outros que estão em contado*/
		|b2DebugDraw.e_centerOfMassBit ;/*mostra o centro de massa dos Corpos*/
	/*aplica ao mundo o modo debug*/
	world.SetDebugDraw(debug);
}

debug.m_drawFlags é um inteiro sem sinal com 7 bits que podem estar ligados ou não dependendo do OR (OU) resultante da combinação de uma mais flags unidos pelo OR bit a bit representado pelo ‘|’, comumente chamado de Pipe.

No debugdraw você também observa que alguns corpos possuem cores diferentes de outros. A cor vermelha indica que o corpo está dormindo, ou seja, o existem cálculos matemáticos/físicos sendo realizados para ele, esse fato é muito é muito importante para que haja uma maior performance reduzindo o consumo de processamento desnecessarimante. Os corpos cinzas estão em movimento, e os verdes são corpos estáticos, como por exemplo paredes e obstáculos.

Estados

Os arquivos deste tutorial podem ser baixados aqui:
http://www.mxstudio.com.br/wp-content/uploads/2009/06/box2d.zip

Faça diversas combinações dessas flags para você verificar visualmente como os corpos se comportam. Até a próxima.

Website: www.marciosilva.net

Box2D, Primeira Simulação

Marcio Silva — Sat, 25 Apr 2009 00:05:43 +0000

Olá Pessoal,

Vamos agora aprender como programar com a Engine de Física para Games em Flash Box2D. Neste primeiro exemplo prático iremos mostrar como criar um Mundo e corpos que sofrerão ações e restrições desse mundo.

Quem está lendo este tutorial e ainda não leu o primeiro recomendo que o leia neste link [http://www.mxstudio.com.br/flash/box2d-engine-de-fisica-para-games-em-flash/].

Pré-requisitos e Softwares utilizados:

Macromedia Flash CS4

Conhecimento em Física Básica (Cinemática pelo menos).

Conhecimento Intermediário em AS3.

API do Box2D que você pode baixar aqui [http://sourceforge.net/project/showfiles.php?group_id=210232&package_id=252417&release_id=642873]

Faremos algo como o exemplo abaixo:

Agora com os pré-requisitos estabelecidos, vamos criar nossa primeira aplicação. Baixe o arquivo ZIP contendo o código do Box2D e descompacte-o. Se por exemplo, você descompactou o box2D dentro de uma pasta chamada C:\game\, então o Box2D ficou com o seguinte caminho C:\game\Box2D\. Para que tudo funcione corretamente, todos os arquivos citados neste tutorial e nos próximos devem estar em C:\game\. Veja o exemplo:

Exemplo de organização básica

Crie um novo arquivo chamado Box2DMX.as. Nele coloque o seguinte código:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;

	/*importação da API Box2D*/
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;

	public class Box2DMX extends Sprite
	{
		/* Construtor da classe	*/
		public function Box2DMX()
		{
			init();
		}

		/* Incializa a aplicação*/
		private function init():void
		{
			createWorld();

			createListeners();

			createGround();
		}

		/* Define os listeners da simulação/game*/
		private function createListeners():void
		{
			timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, createBodies);
			timer.start();
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
		}

		/* Instancia o mundo onde a simulação ocorrerá*/
		private function createWorld():void
		{
			/* Definição dos limite do mundo*/
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);

			/* Difinição da gravidade atuante em todos os corpos desse mundo*/
			var gravity:b2Vec2=new b2Vec2(0.0,10.0);

			/* Indica que os corpos devem permanecerem inativos	*/
			var doSleep:Boolean=true;

			/* Construção do mundo*/
			world = new b2World(worldAABB, gravity, doSleep);

		}

		/* Cria o chão onde os corpos ficarão*/
		private function createGround():void
		{
			var body:b2Body;
			var bodyDef:b2BodyDef;
			var boxDef:b2PolygonDef;

			bodyDef = new b2BodyDef();
			bodyDef.position.Set(10, 12);
			bodyDef.angle=0.0;

			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(90, 3);
			boxDef.friction = 0.1;

			/* para corpos que nunca se moverão o
			* valor da densidade deve ser zero
			*/
			boxDef.density = 0;
			bodyDef.userData = new PhysGround();
			bodyDef.userData.width = physScale * 2 * 30;
			bodyDef.userData.height = physScale * 2 * 3;

			addChild(bodyDef.userData);

			body=world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
		}
		/*cria os atores da simulação*/
		private function createBodies(e:Event):void
		{
			/* representa o corpo rígido*/
			var body:b2Body;

			/* será utilizado para representar
			* as características físicas do corpo rígido
			*/
			var bodyDef:b2BodyDef;

			/*define um polígono e suas características físicas*/
			var boxDef:b2PolygonDef;

			/*define um círculo e suas características físicas*/
			var circleDef:b2CircleDef;

			bodyDef = new b2BodyDef();
			bodyDef.position.Set(Math.random() * 15+5, 0);

			var rX:Number = Math.random() + 0.1;
			var rY:Number = Math.random() + 0.1;
			//Caixa
			if (Math.random() < 0.5)
			{
				boxDef = new b2PolygonDef();
				boxDef.SetAsBox(rX, rY);
				boxDef.density = 1.0;
				boxDef.friction = 0.5;
				boxDef.restitution = 0.2;

				bodyDef.userData = new PhysBox();
				bodyDef.userData.width = rX * 2 * physScale;
				bodyDef.userData.height = rY * 2 * physScale; 

				body = world.CreateBody(bodyDef);
				body.CreateShape(boxDef);
			}
			else //Círculo
			{
				circleDef = new b2CircleDef();
				circleDef.radius = rX;
				circleDef.density = 1.0;
				circleDef.friction = 0.5;
				circleDef.restitution = 0.2;

				bodyDef.userData = new PhysCircle();
				bodyDef.userData.width = rX * 2 * physScale;
				bodyDef.userData.height = rX * 2 * physScale; 

				body = world.CreateBody(bodyDef);
				body.CreateShape(circleDef);
			}

			bodyDef.userData.x = body.GetPosition().x *physScale ;
			body.SetMassFromShapes();
			addChild(bodyDef.userData);
		}

		/*atualiza o posicionamento dos atores*/
		private function Update(e:Event):void
		{
			world.Step(timeStep, iterations);

			// Pare cada corpo no mundo atualiza a sua posição e rotação
			for (var body:b2Body = world.GetBodyList (); body; body = body.GetNext())
			{
				if (body.GetUserData() is Sprite)
				{
					body.GetUserData().x = body.GetPosition().x * physScale;//metros para pixels
					body.GetUserData().y = body.GetPosition().y * physScale;//metros para pixels
					body.GetUserData ().rotation = body.GetAngle() * (180/Math.PI);
				}
			}
		}

		private var world:b2World;
		private var iterations:int = 10;
		private var timeStep:Number = 1.0/30.0;
		private var physScale = 30.0;
		private var timer:Timer;

	}
}

Neste primeiro código podemos destacar a criação do mundo que é realizado determinando seus limites pela classe b2AABB, além de delimitar o mundo você utilizar esta classe para determinar locais em seu game onde os personagens sofrem alguma alteração. Por exemplo, delimitar locais onde existem bombas que explodem se eles passarem por cima, checkpoints, etc.

Outro ponto que deve ser destacado é a criação de corpos (bodies), a criação de um body segue uma sequência de passos bem definida e lógica:

Define um body com posição;
Usa o obejto world para criar um body;
Define os shapes com geometria, atrito, densidade, etc;
Coloca os shapes no body;
E opcionalmente ajusta a massa do body;

Podemos destacar também neste primeiro exemplo o atributo userData, usado por exemplo neste trecho de código:

bodyDef.userData = new PhysCircle();

O Box2D permite que você crie suas próprias classes de atores e vincule a um body do mundo criado. Por exemplo, você está desenvolvendo um jogo de guerra e uma das suas classes se chama Tanque e dentro da classe tanque existem variáveis que você controla como life, munição, quantidade de inimigos que matou, etc. Portanto, está classe são dados controlados por você. Se você percebeu quem define as propriedades físicas é a classe b2BodyDef, é com ela que você informa ao Box2D como ele deverá tratar o ator aplicando as restrições físicas do mundo criado.

E por fim, temos a linha abaixo:

world.Step(timeStep, iterations);

Esta linha deve aparecer no Main loop de seu Game, nesse momento o Box2D faz o trabalho duro de calcular colisões, prever contatos, tudo através de cálculos matemáticos. Você não precisa saber como ele faz isso, precisa apenas informar o quão preciso você quer esses cálculos através da variável iterations. Quanto maior o valor dessa variável mais perfeito são os cálculos físicos e matemáticos. No entanto, isso gera um overhead, ou seja, deixa seu jogo mais lento perdendo performance.

Games com Engines, ao contrário de games simples que não possuem engines de cálculos físicos e matemáticos, necessitam de um tempo adicional para que possam aplicar equações complexas para que a simulação possua um pouco de realidade. Esse tempo no Box2D é o timeStep, o game loop ou main loop é necessário apenas para aplicar as novas posições calculadas pelo Box2D.

Um fato importante que deve ser observado é o physScale que indica as escala utilizada pelo Box2D, em Box2D 1(um) metro é igual a 30px. Esse fato deve-se ao fato dos cálculos físicos serem feitos com unidades internacionais e convencionadas pelos físicos como o metro e não com coordenadas de tela. Dessa forma, no main loop (método update) é feita uma conversão de metros para pixel, pois após a chamada do método Step() as novas coordenadas calculdas pela Engine foram determinadas, no entanto elas foram calculadas em metros.

Como a tela do seu munitor tem como unidade de medida e posicionamento o pixel, devemos converter o valor em metros calculado pelo Box2D para pixel como vemos abaixo. E o mesmo vale para outras medidas como altura e largura de objetos na cena.

body.GetUserData().x = body.GetPosition().x * physScale;//metros para pixels
body.GetUserData().y = body.GetPosition().y * physScale;//metros para pixels

Agora crie um arquivo chamado Box2DMX.fla e na aba properties coloque o nome da classe que deseja linkar.

Aba properties

Agora vamos criar os atores da simulação. Pressione CTRL + F8 para adicionar um novo símbolo, crie um quadrado de 100px x100px com o nome de PhysBox. Veja figura abaixo:

Box

Agora crie da mesma forma um círculo chamado PhysCircle com as dimensões e posicionamento mostrados abaixo:

Circle

E por fim crie um movieclip que será o chão de sua simulação, este se chamará PhysGround.

Ground

Para que os movie clips criados acima funcionem com o código, para cada um você irá até a library clicar com o botão direito em cima do PhysBox por exemplo, e depois escolher a opção properties. Uma janela de diálogo se abrirá como a que está ilustrada abaixo para você exportar para o Action Script é só confirmar clicando em OK. Lembre-se de fazer o mesmo para o PhysCircle e o PhysGround.

Exportanto para o Action Script 3.0

Agora é só salvar os dois arquivos e dar CTRL + ENTER.

Espero que tenham gostado, até a próxima.

Meu Website: www.marciosilva.net

Fontes:

http://www.emanueleferonato.com

http://www.box2d.org

Arquivos do tutorial:
http://www.mxstudio.com.br/wp-content/uploads/2009/04/exemplo1.zip

Box2D, a engine de Física para Games em Flash

Marcio Silva — Mon, 13 Apr 2009 22:21:20 +0000

Olá Pessoal,

De hoje em diante começarei um conjunto de tutoriais que explicam o funcionamento básico de uma grande ferramenta para os desenvolvedores de Games em flash. Trata-se de uma poderosa API para simulação Física de Corpos Rígidos, é de extrema importância que você tenha familiaridade com conceitos físicos como: massa, força, atrito, colisão, inércia, movimento, dentre outros conceitos que estão intimamente ligados a Dinâmica de Corpos Rígidos.

Exemplos do que pode ser feito com o Box2D. Use as setas do teclado para fazer o objeto andar.

Fonte: Emanuele Feronato.

De forma alguma darei uma aula de física aqui, dessa forma, procure conteúdos pela internet que falem sobre os itens que citei acima. No entanto, basta pedir que indicarei links para que vocês possam estudar. De imediato posso indicar um dos melhores sites para que você possa procurar sobre esses conteúdos:

Wikipédia aqui você irá encontrar com certeza os tópicos que mencionei acima.

Também assumirei que você conhece muito bem Action Script 3.0 ou AS3, pois também não é o intuito aqui ensinar como criar uma classe no AS3 ou manipular o Macromédia Flash. O principlal objetivo é o mostrar o funcionamento de Engine da Física no flash, mostrar os principais conceitos de física empregados em cada linha de código.

Nesse primeiro artigo, apresentarei os conceitos mais básicos que você necessita saber antes de prosseguir.

ATENÇÃO: Se não entender a definição dos termos apresentados abaixo, não adianta prosseguir nos próximos artigos, pois não entenderá nada do que estará acontecendo. Sei que provavelmente você pode fazer um CTRL + C e CTRL + V do código para testar o funcionamento. Mas e aí? Você vai aprender alguma coisa fazendo assim? E se funcionar claro, pois muita gente copia e dá um monte de erro, pois as belas Aspas “” do HTML causam esses erros.

Bom, avisos dados agora vamos ao que interessa, alguns termos eu deixarei em inglês mesmo, por que é da forma que aparecerá na API. Os conceitos iniciais são os seguintes:

Rigid Body / Corpo Rigido: Este é um dos mais importantes conceitos, a idéia básica é que em um corpo rígido se marcarmos dois pontos neste corpo, a distância entre esses dois pontos será sempre constante. Exemplo: um diamente. Na API esse corpo rígido se chamará body.

Shape/ Forma: É qualquer parte da Geometria 2D fixada ao corpo rígido. Ela pode possuir propriedades físicas como atrito e restituição.

Constraint / Restrição: Uma restrição remove graus de liberdade de um corpo. Em 2d existem 3 graus de liberdade e em 3D existem 6. No caso de 2D um corpo pode transladar (deslocar) sobre qualquer um dos eixos (x, y) e realizar um movimento de rotação em torno do eixo perpendicular ao plano formado por x e y. Se pendurarmos um corpo numa parede como se fosse um pêndulo, estaremos retirando 2 Graus de liberdade desse corpo, pois ele conseguirá apenas realizar rotações em torno do eixo de fixação.

Contact Constraint / Restrição de contato: Nada mais é do que não permitir que dois corpos possam penetrar um no outro, aí vem a famosa lei de Newton: “Dois corpos não podem ocupar o mesmo lugar ao mesmo tempo”. Esta restrição é implementada pelo próprio Box2D.

Joint / Junção: É uma restrição para manter 2 ou mais corpos rígidos ligados. A Junção pode ser Limite e Motora.

Joint Limit / Junção Limite: Uma junção limite restringe a amplitude de movimento de uma articulação. Pode representar um braço humano por exemplo.

Joint Motor / Junção Motora: Junção motora coordena o movimenta de corpos conectados conforme os graus de liberdade.

World / Mundo: É um conjunto de corpos, formas, e restrições que interagem entre si.

Espero que tenham assimilado os conceitos básicos apresentados na API, eles são importantes para que você entenda os códigos que serão estudados.

Até a próxima.

Meu website: www.marciosilva.net

Fontes:

http://www.box2d.org

http://www.emanueleferonato.com

Criação de games – Conceitos Matemáticos e aplicações

Marcio Silva — Sat, 17 May 2008 03:55:23 +0000

Olá comunidade MXSTUDIO,

Vamos a mais um tutorial que vai ensinar um pouco de matemática aplicada ao mundo da criação de games em flash.

Pré-requisitos:

Conhecimento básico em ActionScript 3.0

Macromedia Flash CS3

Objetivo:

O objetivo principal é que você entenda teoria envolvida aplicada à prática, não adianta você sair copiando e colando código daqui e não entender nada do que o código faz. Não só a pegunta é como fazer deve ser respondida, mas também por que funciona. Recomendo que não pule a parte teórica deste tutorial, pois é basicamente a explicação do código, demonstrando que ele realmente funciona e tem embasamento teórico da nossa querida matemática:

Conceitos:

Os conceitos que serão abordados são basicamente a utilização de Action Script 3.0 aliado à trigonometria, para montar um exemplo simples de movimentação que pode ser a chave para a criação de games de tanque de guerra por exemplo, que atira e gira para todos os lados com seu canhão. Existem diversos joguinhos na Internet que usam este conceito.

Conteúdo

Primeiro vamos criar o tanque de guerra, para isso crie um documento novo no seu Macromedia Flash CS3 (pressione CTRL + N), escolha a opção flash file action script 3.0. Após criado o documento, pressione CTRL + F8 para inserir um novo movie clip chamado Cannon, o movie clip que deverá ser criado é igual o que é mostrado abaixo, faça da cor e to tamanho que quiser. Mas atenção! Certifique-se que o centro de rotação do Canhão será o centro do círculo desenhado, pois seu canhão poderá rotacionar de forma degenarada (todo densengonçado). Para ficar certinho a rotação posicione o círculo bem ao centro. No meu exemplo, criei o circulo com height de 80px e width de 80px e com X e y posicionados em -40px:

Figura 1 – Posicionamento correto

Finalizado o Canhão, agora chega o momento de pensar como fazer a mira do canhão ficar seguindo o cursor do mouse. Será usada a trigonometria para fazer isso, você pode não lembrar de alguma coisa de trigonometria e querer pular esta parte, mas lá vai a exeplicação para não ter desculpa. Na figura 2 e 3 o ponto P indicado pode ser interpretado como o cursor do mouse e o ponto O como o centro do canhão. A diferença entre o ponto X do mouse menos o X do canhão é cosseno de alpha e a diferença entre o ponto Y do mouse menos o Y do canhão é o seno do ângulo alpha, esse ângulo alpha que precisamos para calcular a rotação do canhão usando a função tangente:

Figura 2 – Seno e cosseno. Fonte: http://www.brasilescola.com

Figura 3 – Tangente. Fonte: http://www.brasilescola.com

Lembrando que o plano catesiano nas coordenadas de vídeo o Y cresce para baixo, ao contrátio do convencional, logo devemos tomar alguns cuidados na hora de implementar. Abaixo segue o código que implementa o movimento do canhão. Antes disso vá na library onde está o movie clip Cannon e clique com o botão direito do mouse em cima dele, escolha Linkage e coloque como mostrado na figura, para que este movie clip possa ser instanciado no Action Script.

Figura 4 – Linkage.

Finalmente o código, ele simplesmente pega as coordadas do mouse e subtrai da posição do tanque, tanto na coordenada Y (seno) quanto em X (cosseno) e por fim calcula a tangente do ângulo alpha da figura 1 e 2.

/*Instância do canhão*/

var cannon_mc = new Cannon();

/*Será utilizado para posicionar o canhão*/

var dobj:DisplayObject = null;

/*adiciona o canhão ao palco e faz o correto posicionamento*/

dobj = addChild(cannon_mc);

dobj.x = 250;

dobj.y = 200;

dobj.width = 120;

dobj.height = 80;

/*adiciona evento de movimentação de mouse*/

parent.addEventListener(MouseEvent.MOUSE_MOVE, rotate);

function rotate(evt:MouseEvent):void

{

/*Calcula o vetor em X (cosseno)(Ver figura 1)*/

var mousex = evt.stageX-cannon_mc.x;

/*Calcula o vetor em Y (seno)(Ver figura 1)

* Multiplica por -1, coordenadas de vídeo para

* coordenadas reais

var mousey = (evt.stageY-cannon_mc.y)*-1;

/*Calcula a tangente*/

var angle = Math.atan2(mousey, mousex);

/*rotaciona, tranformando o angulo de radianos para graus

* Pura matemática =)

cannon_mc.rotation = -angle*180/Math.PI;

}

Considerações Finais

Agora é só rodar e ver o resultado, esse conceito tem uma infinidade de aplicações, tudo depende da sua criatividade. Aprofundei apenas nos conceitos chaves, saber o que é um vetor ou o que é plano cartesiano fica um estudo a seu critério. Recomendo um estudo nos conceitos de trigonometria para que seus joguinhos fiquem cada vez mais legais e viciantes.

Nas próximas colunas abordarei mais conceitos matemáticos. Fazer um jogo de tabuleiro é fácil, agora fazer um que envolva física e matemática demanda um pouco mais de empenho de quem o faz, e consequentemente isso trará um impacto positivo para seus jogos. Do que seria os jogos de hoje, como Crysis ou Need For Speed Pro Street, sem a Matemática e a Física, os seus criadores possuem um intenso conhecimento sobre ambas áreas de conhecimento, não são meros programadores.

Espero que tenham gostado. Até a próxima.

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.

Download dos arquivos

Qualquer dúvida envie um e-mail para marciosilva@mxstudio.com.br ou acesse nosso fórum

CriaÃ§Ã£o de games – Campo Minado em AS3

Marcio Silva — Fri, 18 Jan 2008 00:00:00 +0000

CriaÃ§Ã£o de games – Campo Minado em AS3

OlÃ¡ pessoal,

Vamos criar mais um joguinho, que vai apresentar a programaÃ§Ã£o de games com o AS3.

PrÃ©-requisitos:

Conhecimento bÃ¡sico em ActionScript 2.0 e 3.0

Macromedia Flash CS3

Classe EventDispatcher
Classe DisplayObject

Objetivo:

O objetivo deste tutorial Ã© que vocÃª, ao tÃ©rmino dele, possa entender como funciona a programaÃ§Ã£o orientada a objetos de games, criar seus prÃ³prios eventos nos jogos. Procurei selecionar um jogo simples no resultado final que todo mundo conhece (campo minado), mas que no momento do desenvolvimento vai explorar sua capacidade de resolver problemas bem relacionados a programaÃ§Ã£o. Visto em nÃvel de cÃ³digo este joguinho nÃ£o Ã© tÃ£o simples.

Conceitos:

Os conceitos que serÃ£o vistos aqui, sÃ£o a utilizaÃ§Ã£o dos dispatchers para resolver alguns problemas, resoluÃ§Ã£o de problemas algorÃtmicos simples, arganizaÃ§Ã£o dos objetos pelo AS3, duplicar movie clips com a ausÃªncia do duplicateMovieClip.

ConteÃºdo

Primeiro vamos preparar os movie clips principais, no fim deste tutorial tem o link dos arquivos fontes, nele eu coloquei as imagens que vamos utilizar. Crie um documento novo Adobe flash CS 3 com o nome mines.fla com o background da cor #CCCCCC . Depois vÃ¡ em insert > new symbol ou CTRL + F8, o novo sÃmbolo Ã© do tipo movie clip e se chamarÃ¡ Mine. Neste novo movie clip vazio crie 11 Keyframes. Com exceÃ§Ã£o do primeiro Keyframe, todos os outros receberÃ£o um nome. A nome de cada frame a partir do 2Â° serÃ¡ a seguinte: _1, _2, _3, _4, _5, _6, _7, _8, die e clear. Dessa forma facilitarÃ¡ no momento da programaÃ§Ã£o. Agora no primeiro keyframe vocÃª colocarÃ¡ a figura chamada square.jpg coloque nas coordenadas mostradas na figura.

Figura 1 – DimensÃµes e a posiÃ§Ã£o da imagem

Seguindo, clique no primeiro keyframe e aperte F9 para colocar o comando stop() no editor de script. Agora exatamente na mesma posiÃ§Ã£o, mas no keyframe 10 que tem o nome die, coloque a figura bomb.jpg, ela serÃ¡ colocada na mesma posiÃ§Ã£o e dimensÃµes mostrada na figura 1, nos outros keyframes vocÃª vai apenas colocar um nÃºmero no stage com a ferramenta text, seguindo a lÃ³gica nÃºmero 1 no keyframe _1, 2 no jeyframe _2, todos posicionados no x=2.8 e y=0 atÃ© o keyframe _8, isso representa um determinado nÃºmero de bombas que estÃ£o prÃ³ximas de um quadrado (Regra do jogo), se vocÃª jogou campo minado alguma vez jÃ¡ observou os nÃºmeros que aparecem no local que clicou . Volte Ã cena principal, falta um botÃ£o novo jogo, que vocÃª irÃ¡ achar em window > components ou aperte CTRL + F7. Escolha o Button na lista que aparecerÃ¡, arraste-o para o stage e altere seu label para novo jogo como na figura abaixo, e o nome de instÃ¢ncia do botÃ£o Ã© newGame_btn:

Figura 2 – Componente no Stage

E para finalizar esta parte vamos linkar o mc Mine que acabamos de criar com o Action Script 3.0, vÃ¡ na library e clique com o botÃ£o direito no mc Mine e escolha linkage, aparecerÃ¡ esta janela de diÃ¡logo, configure como estÃ¡ mostrado.

Figura 3 – Linkando o mc criado com Action Script 3.0

Acabamos esta fase, agora vamos a codificaÃ§Ã£o, primeiramente construiremos duas classes: a primeira Ã© que dispara eventos, recomendo ver os tutoriais mencionados nos prÃ©-requisitos para continuar este tutorial, neles vocÃª ira entender como funciona as classes que sÃ£o dispatcher e as listeners, abaixo a classe dispatcher que chamei de DispacherObject:

package
{
import flash.events.EventDispatcher;
import flash.events.Event; public class DispatcherObject extends EventDispatcher
{
private var label:String;

static var EXPLOSION:String = ‘explosion’;

public function DispatcherObject(label:String)
{
this.label = label;
}

public override function toString():String
{
return “[ Dispatcher "+label+" ]“;
}

public function dispatch()
{
this.dispatchEvent(new Event(DispatcherObject.EXPLOSION));
}
};
};

A classe Ã© bem simples, possui um atributo para debugar e um estÃ¡tico que representa o no evento a ser disparado, chamei esse evento de explosion. Possui um construtor, um mÃ©todo para debugar que sobrescreve o mÃ©todo toString() da classe pai por meio da palavra reservada override e por fim o mÃ©todo que dispara o evento em si. Abaixo segue a classe listener que ‘escuta’ a classe emissora de eventos que acabamos de ver:

package
{
import flash.events.IEventDispatcher;
import flash.events.Event; public class ListenerObject
{

private var label:String;

public function ListenerObject(label:String)
{
this.label = label;
}

public function addDispatcher(dispatcher:IEventDispatcher, functionHandler:Function)
{
dispatcher.addEventListener(DispatcherObject.EXPLOSION, functionHandler);
}

public function toString()
{
return “[ Listener "+label+" ]“;
}
};
};

Semelhante a classe acima tambÃ©m possui mÃ©todo e atributo para debugar, e um mÃ©todo que recebe dois parÃ¢metros: um Ã© o dispatcher que ela ficarÃ¡ ‘ouvindo’ e o outro parÃ¢metro e a funÃ§Ã£o que serÃ¡ chamada no momento do disparo do evento.

A prÃ³xima classe Ã© a classe que representarÃ¡ cada quadrado do campo minado:

package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.events.Event; public class Square extends Sprite
{
/*indica se Ã© bomba ou nÃ£o*/
private var bomb:Boolean;
/*cÃ³pia do mc que representa a bomba*/
private var mc:MovieClip;

/*indica quantas bombas estÃ£o perto*/
private var proximity: Number;

/*listeners e dispatchers*/
private var listener:ListenerObject;

private var listener2:ListenerObject;

private var disp:DispatcherObject;

var disp2:DispatcherObject;

/*construtor, recebe o mc que representa a mina e um booleano
* que indica se Ã© uma bomba
*/
function Square ( target_mc:MovieClip, bomb:Boolean )
{

this.mc = target_mc;

this.addChild ( target_mc );

this.bomb = bomb;

this.mc.buttonMode = true;

listener = new ListenerObject(‘CS3′);

listener2 = new ListenerObject(‘ADOBE’);

disp2 = new DispatcherObject(‘MINADO’);

doEvents();
};

/* seta quantas bombas estÃ£o proximas desse Square*/
function setProximity ( proximity:Number )
{
this.proximity = proximity;
};
/* retorna a proximidade*/
function getProximity ( )
{
return this.proximity;
};

/* retorna true ou false dizendo se Ã© bomba*/
function isBomb()
{
return this.bomb;
};

/*seta dispachador de eventos que ‘ouvirÃ¡’ o clique em uma bomba*/
function setDispatcher ( d:DispatcherObject )
{
this.disp = d;

listener.addDispatcher( d, onExplosion );
};

/*seta quem irÃ¡ disparar o armegedon*/
function setDispatcherArm ( d:DispatcherObject )
{
this.disp2 = d;

listener2.addDispatcher( d, explode );
};

/*adiciona evento de click do mouse*/
function doEvents()
{
this.mc.addEventListener( MouseEvent.CLICK, check );
};
/*remove evento de click do mouse*/
function undoEvents()
{
this.mc.removeEventListener( MouseEvent.CLICK, check );
};
/*verifica em que o usuÃ¡rio clicou e dispara os eventos necessÃ¡rios*/
function check (event:Event)
{

if(this.bomb)
this.disp.dispatch();
else
{
if(this.proximity == 0)
{
this.proximity = 1000;
this.disp2.dispatch();
this.mc.gotoAndStop(‘clear’);

}
else
this.mc.gotoAndStop(‘_’+this.proximity);

}

};

/*mÃ©todo de callback que serÃ¡ invocado quando clicar numa bomba*/
function onExplosion (event:Event)
{
this.mc.gotoAndStop(‘die’);

};

/*mÃ©todo de callback que serÃ¡ invocado quando houver um armagedon*/
function explode(event:Event)
{
if(this.proximity == 0)
{
this.proximity = 1000;
this.mc.gotoAndStop(‘clear’);
this.disp2.dispatch();
}
else if (this.proximity == 1000)
return;
else
this.mc.gotoAndStop(‘_’+this.proximity );
};
};
};

Agora vamos a classe controladora do jogo, optei por chamÃ¡-la de Game, ela possui como um dos mÃ©todos principais um para posicionar bombas aleatoriamente no campo (mÃ©todo prepare()), tambÃ©m mÃ©todo para computar a proximidade de um quadrado (Square) de uma bomba (mÃ©todo computeProximity()). E um para criar o efeito de explosÃ£o em cadeia que Ã© visto no jogo de campo minado, ele ocorre quando vocÃª clica em uma posiÃ§Ã£o que nÃ£o estÃ¡ proximo de nunhuma bomba, este quadrado por sua vez explode todos os seus quadrados vizinhos num raio de um quadrado.

Se ele explodir um quadrado vizinho que tambÃ©m tem proximity igual a Zero, esse tambÃ©m realiza uma explosÃ£o em cadeia. Chamei este mÃ©todo de armagedon(). Podem abservar que todas as explosÃµes sÃ£o ativadas por eventos, e nÃ£o preciso varrer o campo para ir explodindo as bombas, elas se explodem ‘sozinhas’. Ã‰ como se eu fosse ligando um fio em cada uma e precisasse apertar apenas um botÃ£o para disparÃ¡-las, esse tipo de conceito ajuda em muitos tipos de jogos que existem diversos objetos para manipular. Veja a implementaÃ§Ã£o abaixo:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent; public class Game extends MovieClip
{
/*armazena as bombas e suas informaÃ§Ãµes*/
private var field:Array;

/*nÃºmero de bombas*/
private var nBombs:Number;

/*dispachador de eventos*/
private static var dispatcher:DispatcherObject;

private var listener:ListenerObject;

/*construtor da classe Game
@param largura e altura do campo e nÃºmero de bombas
*/
function Game ( width:Number, height:Number, nBombs:Number )
{
this.nBombs = nBombs;

field = new Array(width);
for (var i=0; i < field.length; i++)
field[i] = new Array(height);

dispatcher = new DispatcherObject(‘MX’);

this.listener = new ListenerObject(‘MX’);

this.listener.addDispatcher( Game.dispatcher, gameOver );
}

/* prepara o ambiente do jogo*
* colocando bombas em locais aleatÃ³rios
*/
private function prepare()
{
var i = 0;
var iAux = 0;
var jAux = 0;

while ( i < this.nBombs )
{
iAux = randRange(0, field.length-1);
jAux = randRange(0, field[0].length-1);

if (!field[iAux][jAux])
{
field[iAux][jAux] = new Square ( new Mine(), true );
i++;
field[iAux][jAux].setDispatcher ( Game.dispatcher );
this.addChild(field[iAux][jAux]);
}

}

for (i =0; i < field.length; i++)
{
for (var j = 0; j < field[i].length; j++)
{
if ( !field[i][j] )
{
field[i][j] = new Square (new Mine(), false);
this.addChild(field[i][j]);

}
}
}

}

/*inicia o jogo, prepara depois mostra na tela*/
public function init()
{
prepare();
display();

}
/*MÃ©todo responsÃ¡vel mostar na tela*/
private function display()
{
for (var i =0; i < field.length; i++)
{
for(var j=0; j < field[i].length; j++)
{
field[i][j].x = j*16;
field[i][j].y = i*16;
computeProximity(field, i , j);
}
}
/* Aqui Ã© muito importante, pois Ã© aqui que sabemos
* se o quadrado na posiÃ§Ã£o [i ,j] tem proximidade igual a 0
* se tiver, fazemos todos os seus vizinhos escutar sua explosÃ£o
* e se explodirem tambÃ©m
*/
for ( i =0; i < field.length; i++)
{
for( j=0; j < field[i].length; j++)
armagedon(field, i , j);
}
}

/* MÃ©todo responsÃ¡vel por computar a proximidade de cada Square de uma bomba
* o nÃºmero que aparece no campo minado quando vocÃª clica numa casa sem bomba
*/
private function computeProximity( arr:Array, i:Number, j:Number)
{
var proximity:Number = 0;

if( i-1 >= 0 && arr[i-1][j].isBomb())
proximity++;
if (i+1 < arr.length && arr[i+1][j].isBomb())
proximity++;
if (j-1 >= 0 && arr[i][j-1].isBomb())
proximity++;
if (j+1 < arr[0].length && arr[i][j+1].isBomb())
proximity++;
if (i-1 >= 0 && j-1 >= 0 && arr[i-1][j-1].isBomb())
proximity++;
if (i+1 < arr.length && j+1 < arr[0].length && arr[i+1][j+1].isBomb())
proximity++;
if (i+1 < arr.length && j-1 >= 0 && arr[i+1][j-1].isBomb())
proximity++;
if (i-1 >= 0 && j+1 < arr[0].length && arr[i-1][j+1].isBomb())
proximity++;

arr[i][j].setProximity( proximity );
}

/* Este mÃ©todo Ã© responsÃ¡vel por criar um espÃ©cie de explosÃ£o em cadeia
* Quando um quadrado nÃ£o estÃ¡ prÃ³ximo de nenhuma bomba ele explode todas
* as bombas vizinhas, e estas por sua vez se tiverem proximity = 0 tambÃ©m
* criam a mesma reaÃ§Ã£o em cadeia =)
* @param arr => array de array (Matriz) analizada
* @param i e j indÃces da matriz
*/
private function armagedon( arr:Array, i:Number, j:Number)
{
if(arr[i][j].getProximity() == 0)
{
if( i-1 >= 0 )
arr[i-1][j].setDispatcherArm ( arr[i][j].disp2 );

if (i+1 < arr.length )
arr[i+1][j].setDispatcherArm ( arr[i][j].disp2 );

if (j-1 >= 0 )
arr[i][j-1].setDispatcherArm ( arr[i][j].disp2 );

if (j+1 < arr[0].length )
arr[i][j+1].setDispatcherArm ( arr[i][j].disp2 );

if (i-1 >= 0 && j-1 >= 0 )
arr[i-1][j-1].setDispatcherArm ( arr[i][j].disp2 );

if (i+1 < arr.length && j+1 < arr[0].length )
arr[i+1][j+1].setDispatcherArm ( arr[i][j].disp2 );

if (i+1 < arr.length && j-1 >= 0 )
arr[i+1][j-1].setDispatcherArm ( arr[i][j].disp2 );

if (i-1 >= 0 && j+1 < arr[0].length )
arr[i-1][j+1].setDispatcherArm ( arr[i][j].disp2 );

}
}

};
};

Agora Vamos ao cÃ³digo que realmente irÃ¡ instanciar a classe Game para fazer nosso jogo funcionar:

var game:Game;/* Novo jogo*/
function newGame( event:MouseEvent)
{

/* aqui removemos o jogo atual e inciamos um novo
* e deixamos o resto do trabalho com a ActionScript
* Virtual Machine, que Ã© o compilador do ECMA script usado
* pelo flash e que possui um Ã³timo coletor de lixo
*/
if(event)
removeChild(game);
/* game de 25 linhas e 25 colunas, com 100 bombas*/
game = new Game(25, 25, 100);

var isk:DisplayObject = null;

game.init();

/*adiciona o game a lista do root
* posicionando no local adequado
*/
isk = addChild(game);
isk.x = 0;
isk.y = 48;

isk.width = 400;
isk.height = 400;
}

newGame(null);

/* aqui adicionamos o evento de clique do mouse no botÃ£o novo jogo*/
newGame_btn.addEventListener(MouseEvent.CLICK, newGame);

Veja que eu quando inicio um novo jogo e descubro que acabou de ser realizado um outro simplesmente crio um novo, mas e os objetos criados no jogo anterior?? Para onde vÃ£o? Para quem nÃ£o sabe a mÃ¡quina virtual do flash 9 foi reimplementada e possui um Ã³timo coletor de lixo, que se encarrega de limpar esses espaÃ§os deixados sem referÃªncia.

ConsideraÃ§Ãµes Finais

Este Ã© o jogo, sÃ³ rodar e ver o resultado, aconselho estudar as classes de manipulaÃ§Ã£o de eventos elas ajudam bastante na hora de resolver um poblema. Usando esta idÃ©ia vocÃª poderÃ¡ criar outros jogos, use sua criatividade. NÃ£o pule etapas, se vocÃª estiver comeÃ§ando Ã© melhor comeÃ§ar a programar os jogos dos tutoriais iniciais de games. Tivemos que nos adptar a ausÃªncia do duplicateMovieClip, mas que foi suprida pela forma ainda mais fÃ¡cil de linkar o nome do mc como classe e apenas instanciar com o operador new o mc que se deseja duplicar, no nosso caso o mc Mine.

NÃ£o tente criar jogos antes de saber programar vocÃª pode acabar se frustrando por nÃ£o conseguir, nos tutoriais mostro apenas como utilizar o que vocÃª sabe de Action Script 3.0 em jogos. Aqui apresentei uma forma de criar o game. VocÃª pode colocar novas funcionalidaes nele como timer, contador de acertos entre outros. Apenas fiz nÃºcleo do jogo, as inovaÃ§Ãµes ficam de desafio para vocÃªs. Depois postem no fÃ³rum as suas inovaÃ§Ãµes se vocÃªs quiserem para que possamos avaliar e jogar um pouco.

Espero que tenham gostado. AtÃ© a prÃ³xima.

Autor: MÃ¡rcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.

Download dos arquivos

Qualquer dÃºvida envie um e-mail para marciosilva@mxstudio.com.br ou acesse nosso fÃ³rum

www.marciosilva.net

Criação de Games – Simulação Física (Gravidade)

Marcio Silva — Sun, 30 Sep 2007 00:00:00 +0000

Criação de games – Simulação física (Gravidade)

Olá comunidade MXSTUDIO,

Estou de volta com um tutorial que mostrar para você como utilizar a física na simulação de movimentos realísticos em seu game. Apresentarei o efeito em si, fica a seu cargo modificar o código para se adequar a seu jogo.

Pré-requisitos:

Conhecimento básico em ActionScript 2.0

Macromedia Flash 8

Objetivo:

O objetivo deste tutorial é que você, ao término dele possa entender como criar efeitos reais em seu game. O efeito que veremos é o da gravidade, a colisão inelástica e elástica de uma bola quando esta colide com uma parede, solo ou qualquer outra superfície. Todas neste tutorial podem ser acionadas apenas clicando na bolinha arrastando para jogá-la onde quiser. Veja abaixo o produto final de nosso tutorial:

Conceitos:

Os conceitos que serão vistos aqui, são mais de aplicação da física em simulações que podem ser usadas para tornar seu game ainda mais legal e viciante. Dentre os conceitos que serão apresentados podemos destacar o da gravidade, coeficiente de restituição, colisão elástica e ineláslitca.

Conteúdo

Inicialmente baixe os arquivos que disponibilizei no final deste tutorial. Abra o Macromedia Flash 8 e crie um documento flash novo apertando CTRL + N. Agora crie um novo símbolo do tipo button apertando CTRL + F8, coloque o nome de bola_drag. Com o botão no modo de edição vá em file -> import -> import to library. Importe a imagem a imagem que está nos arquivos que você baixou, o arquivo se chama bola_golf.jpg. Quando importar a imagem irá aparecer na sua library, portanto arraste essa imagem para o centro do stage de edição do botão e posicione nos valores mostrados na figura abaixo::

Figura 1 – Dimensões e a posição da imagem

Pronto, insira novamente um novo símbolo do tipo movie clip e dê o nome bola. Com esse movie clip vazio aberto coloque ao centro o botão que acabamos de fazer, coloque o mesmo tamanho e posição que está na imagem acima. Depois de posicionar, dê um clique nesse botão bola_drag e coloque o seguinte código:

on (press)
{
arrastando = true;
startDrag(this, true);
}
on (release, releaseOutside)
{
arrastando = false;
stopDrag();
}

Volte à cena principal e crie duas layers: uma chamada Action e outra chamada Bola, na layer chamada Bola você irá até a library e arrastar o mc chamado bola que acabamos de fazer para o centro do stage, caso tenha dúvida olhe só como ficou a disposição das layers:

Figura 2 – Layers da simulação .

Note também que na figura acima vc irá ver o frame rate que utilizei nesta simulação, coloquei 36 fps, quanto maior melhor fica a simulação. No frame 1 da layer Action coloque o seguinte código:

maxWidth = Stage.width-5;
maxHeight = Stage.height-5;
stop();

Agora Vamos ao código que realmente faz a simulação física que implementaremos, o código mostrado a seguir implementa uma teoria vista em física, pretendo apenas mostrar um breve conceito do que o código faz, fica a seu cargo estudar mais a fundo essa teoria.

onClipEvent (load)

{
gravidade = 10; // valor da gravidade
restituicao = 0.89; //coeficiente de restituição
raio = this._width/2; //raio da bolinha
vx = 140; //valor inicial da velocidade em X
vy = 140; //valor da velocidade inicial em Y
}
onClipEvent (enterFrame)
{
/*pega a ultima posição ocupada pela bolinha
* no instante anterior ao corrente
*/
oldx = x;
oldy = y; /* armazena a atual posição da bolinha na tela*/
x = this._x;
y = this._y;

/* Verifica se o usuário está arrastanto a bolinha*/
if (arrastando)
{
/*pega a variação de posição da bolinha*/
vx = (x-oldx);
vy = (y-oldy);
}
else
{
vy += gravidade; //aplica o efeito de gravidade
x += (vx/10); //aplica a velocidade em X
y += (vy/10); //aplica a velocidade em Y

/*Verificação de colisão com as bordas do Stage*/
if (y < raio) //SUPERIOR
{
y = raio;
vx *= restituicao;
vy *= -restituicao;//muda o sentido da velocidade em Y
}
if (y > (_root.maxHeight-raio)) //INFERIOR
{
y = _root.maxHeight-raio;
vx *= restituicao;
vy *= -restituicao;
}
if (x < raio) //ESQUERDA
{
x = raio;
vx *= -restituicao;
vy *= restituicao;
}
if (x > (_root.maxWidth-raio)) //DIREITA
{
x = _root.maxWidth-raio;
vx *= -restituicao;
vy *= restituicao;
}
/* atualiza a posição da bolinha*/
this._x = x;
this._y = y;
}
}//adaptado flashGuru

Entendo o código

As variáveis que o código utiliza são todas variáveis de expressões físicas. A gravidade dispensa explicações; vx e vy são respectivamente velocidade no eixo x e y; raio é o raio da bolinha e por fim a restituicao responsável pelo efeito ‘quicar’ da bolinha. Formalizando essa variável restituição ela é obtida fazendo a divisão entre a velocidade v2 depois da colisão com a velocidade v1 antes da colisão. Veja abaixo várias formas de se obter o valor do coeficiente de restituição:

Figura 3 – Formalização matemática

Minhas desculpas aos que não gostam de física ou matemática, mas é preciso dessa formalização para entender por que o código foi implemementado daquela forma. A diferença entre o código e a formalização é que já temos de antemão o valor do coeficiente de restituição e o valor da velocidade v1 logo para obtermos a velocidade v2 que é após a colisão basta multiplicarmos a velocidade atual pelo coeficiente de restituição. As linhas 35, 36, 41, 42, 47, 48, 53 e 54 fazem exatamente o cálculo de v2 baseado na velocidade v1. E veja que o coeficiente somente é utilizado no cálculo da velocidade quando há uma colisão. O coeficiente é um número sem unidade, ou seja, é adimensional, variando entre 0 e 1.

Vejamos agora algumas curiosidades:

Com coeficiente de restituição igual a 1 temos que a bolinha nunca irá parar de bater nos limites da simulação. Pois a bolinha ao bater nos limites não irá perder sua velocidade.

Agora coeficiente maior que 1, a bolinha ganha velocidade.

Gravidade com sinal modificado, ou seja, as coisas agora caem pra cima.

E por fim sem gravidade. A bolinha vai batendo nos limites até parar sem cair.

Considerações Finais

Bom espero que tenham entendido um pouco dessa aula de física, pois para programar um efeito desse é preciso que se entenda pelo menos o básico, com certeza com o que foi mostrado aqui neste tutorial somado a sua criatividade muitos games legais podem ser feitos. Modifique os valores das variáveis do problema e observe os resultados como eu fiz acima.

Espero que tenham gostado. Até a próxima.

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.

Download dos arquivos

Qualquer dúvida envie um e-mail para marciosilva@mxstudio.com.br ou acesse nosso fórum

Criação de Games – Megaman Parte 2

Marcio Silva — Sat, 28 Jul 2007 00:00:00 +0000

Criação de games – Megaman Parte 2

Olá comunidade,

Estou de volta trazendo a continuação do tutorial de criação de games – Megaman, tendo como foco a criação de um game de plataforma. Na primeira parte do tutorial, Criação de Games – Megaman parte 1, aprendemos algumas técnicas como a utilização de sprites, fizemos uma simulação do pulo do personagem, o tão prucurado scrolling da tela que cuja a idéia é bem tranquila e os princípios básicos de construção de jogos de plataforma. Portanto, assumo desde de já que você já possui os pré-requisitos listados abaixo.

Pré-requisitos:

Conhecimento básico em ActionScript
Macromedia Fireworks 8
Macromedia Flash 8
Recomenda-se que você tenha visto a coluna de movimentação básica de personagens e princípios básicos de games de plataforma, caso não tenha acesse:

Criação de Games
Criação de Games – Megaman parte 1

Objetivo:

O abjetivo desta segunda parte é a inclusão de novos elementos dentro do nosso joguinho, lembrando que é o básico, use sua imaginação para deixar o joguinho ainda mais interessante. Como o interesse aqui é puramente o aprendizado, não estamos desenvolvendo um jogo comercial que necessita de mais otimizações. No entanto, uma vez que assimilado todos os conceitos apresentados, conseguirá facilmente desenvolver seus jogos de forma comercial. A construção das animações é feita ação a ação do personagem, para cada ação um movie clip diferente, é claro que é possivel criar um único mc que pode ser controladoo via Action Script, mas vamos aprender uma coisa de cada vez. Veja o jogo pronto:

Conceitos:

Apresentarei neste artigo noções legais como como fazer o tiro que o Megaman vai disparar, a temporização destes tiros, um timer para marcar o tempo de jogo, a inclusão de inimigos no cenário e um pouquinho sobre IA em games. Logo nosso jogo estará completo com os itens básicos para este tipo de game.

Conteúdo

Já vou supor que você tenha visto o artigo anterior caso não tenha acesse (Criação de Games – Megaman parte 1), agora iremos adicionar ao projeto anterior, os elementos mencionados acima (tiro, timer, inimigos…). Para isso, abra o arquivo do jogo que fizemos no último artigo e vamos lá!

Primeiramente, vamos construir os tiros que serão dados tanto pelo megaman quanto pelos seus inimigos. Insira um novo símbolo do tipo movie clip, chame-o de tiro_mega, ao fim deste tutorial segue um link para que baixem as imagens que utilizei ou clique aqui para baixar. Da mesma forma que o outro artigo monte a animação do tiro baseado na folha de sprites abaixo:

Figura 1 – Folha de sprites para o tiro_mega.

Depois do movie clip pronto, volte para a cena e arraste-o da library, se ela não estiver aparecendo aperte CTRL + L. Iremos implementar as ações do tiro semelhante ao que eu fiz no meu primeiro turorial, aquele da nave. Então, devemos posicionar esse tiro fora do stage, redimensione o seu tamanho para 15px de altura e 15px de largura, chame essa instância de tiro_mc. Veja abaixo como posicionei no stage.

Figura 2 – Posição inicla adequada para o tiro_mega.

Agora vamos programar as ações desse tiro. Selecione o movie clip tiro_mc e aperte F9 para editar seu Action Script onde os inimigos que estão sendo referenciados no código serão criados nos passos seguintes, o código segue abaixo:

onClipEvent( enterFrame )
{
if(_name != “tiro_mc”)
{
//verifica colisão com inimigo 1
if(this.hitTest(_root.terreno_mc.inimigo_1_mc))
{
_root.terreno_mc.inimigo_1_mc.barra_mc._xscale -= 5;
this.removeMovieClip();
}
else
{
if(direcao == “direita”)
this._x += 25;
else
this._x -= 25; if(this._x >2000 || this._x < -5)
this.removeMovieClip();
}
}
}

Também precisaremos de um tiro que será dado por um dos inimigos do megaman que será feito mais a frente. O processo é o mesmo, pegue a folha de sprites, insira um novo movie clip vazio e chame-o de tiro_2, depois da animação pronta, volte à cena e arraste-o da library para o stage e dê o nome de instância de tiro_fogo_mc. Veja abaixo como ficou:

Figura 3 – Folha de sprites para tiro_2.

Figura 4 – Veja o posicionamento na cena.

O código para este tiro segue abaixo com algumas modificações para testar a colisão com o megaman em vez do inimigo, claro. E se o life do megaman chegar ao fim vai para frame 3 ou frame de Game Over. Eu chamei de gameOver o último frame da layer terreno.

onClipEvent( enterFrame )
{
if(_name != “tiro_fogo_mc”)
{
if(_root.life_mc._xscale <= 0)
{
_root.gotoAndStop(“gameOver”); }
if(this.hitTest(_root.megaman_mc))
{
_root.life_mc._xscale -= 5;
this.removeMovieClip();
}
else
{
if(direcao == “direita”)
this._x += 25;
else
this._x -= 25;

if(this._x >2000 || this._x < -5)
this.removeMovieClip();
}
}
}

Note que existe uma variável direcao que não foi declarada em lugar nenhum e está sendo usada em nosso AS dos dois tiros, ela foi criada no arquivo Megaman.as. Portanto, abra-o e insira o seguinte código nas linhas iniciais onde são declaradas as variáveis utilizadas no nosso game, aproveite e declare variáveis de controle que servirão para controlar o número de tiros e o tempo de intervalo entre cado tiro, veja abaixo como ficou.

stop();
/* Variáveis globais
* Aqui estão presentes as variáveis que fazem o
* controle dos estados
* em que o jogo se encontra
*/
var velSaltar:Number = 20;
var velAndar:Number = 0;
var pulando:Boolean = false;
var caindo:Boolean = false;
var morreu:Boolean = false;
var velMax:Number = 10;
var direcao:String = “”;
var entrada:Boolean = true;
var contTiros:Number = 0; /*Contador de tiros*/
var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/
/*adiciona à classe MovieClip um atributo que indica a direção para onde está indo*/
MovieClip.prototype.direcao = “esquerda”;
.
.
.

Agora vamos construir um timer que ficará contando o tempo, vai ser um timer bem simples em termos de beleza, mas que você poderá facilmente customizá-lo a seu gosto. Primeiramente insira um campo texto na parte superior central do nosso stage, sinta-se à vontade em colocar onde achar mais adequado dentro do stage a localização não vai influenciar, e mude suas propriedades para que seja um campo texto do tipo dinâmico. Mais algumas linhas serão adicionadas no arquivos Megaman.as, como já temos o tiro em mãos e uma variável que controla o intervalo de tempo dos tiros, podemos implementar a ação de disparar tiros. Abaixo está o código que implementa o disparo.

.
.
.
//só pula se não tiver pulando, claro
if ( Key.isDown(Key.SPACE) && !pulando )
{
pulando = true; /*mostra a animação pulando para direita se o personagem
* está indo para a direita, caso contrário para a esquerda
*/

if(direcao == “direita”)
megaman_mc.gotoAndStop(“pulando_dir”);
else
megaman_mc.gotoAndStop(“pulando_esq”);
}
/*########### Novas Linhas adicionadas ##########*/
tempo = Math.round(getTimer()/1000);
_root.tempo_txt.text = tempo;

if( Key.isDown( Key.CONTROL) && (getTimer() – tiroInterval) > 200 )
{
_root.contTiros++;
_root.tiro_mc.duplicateMovieClip(“tiro”+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o tiro
if(direcao == “direita”)
{
if(!Key.isDown( Key.RIGHT) )
this.gotoAndStop(“atirando_dir”);
_root["tiro"+_root.contTiros]._y = this._y+35;
_root["tiro"+_root.contTiros]._x = this._x+50;

}
else
{
if(!Key.isDown( Key.LEFT) )
this.gotoAndStop(“atirando_esq”);
_root["tiro"+_root.contTiros]._y = this._y+35;
_root["tiro"+_root.contTiros]._x = this._x-10;
}

tiroInterval = getTimer();

/*atribuindo direcao para o tiro*/
_root["tiro"+_root.contTiros].direcao = direcao;
atirando = true;

}
/*#################################################*/
if( Key.isDown( Key.LEFT) )

.
.
.

Agora vamos adicionar os inimigos. Neste artigo vou adicionar apenas 2 inimigos para que você tenha uma noção de como implementar uma pequena Inteligência Artificial (IA) nos seus inimigos, a implementação de IA em games pode ser feita de diversas formas, aqui apresentarei uma idéia bem simples onde você poerá usar sua criatividade e implementá-la de uma forma mais rebuscada.

O primeiro Inimigo está representado no gif abaixo:

Figura 5 – Primeiro inimigo.

Uma forma de utilizar sprites foi visto na último artigo, era baseada na folha de sprites onde tinhamos que colocar um a um os sprites em cada frame. Agora veremos outra forma de usar sprites a partir de gif’s animados. Com uma imagem gif pronta é fácil obter seus sprites pelo flash que fará sozinho o processo da passagem da animação para o timeline. Primeiro vamos criar um movie clip vazio e chame-o de inimigo1. Agora vá no menu arquivo ->import ->import to stage ou simplesmente CTRL + R e selecione o arquivo img3.gif que forneci no link ao fim deste artigo. Clique em abrir e automaticamente o flash fará o milagre de colocar cada quadro da animação no seu respectivo frame. Que bacana hein!.

Figura 6 – Timeline e o stage depois do import.

Vamos criar agora o outro inimigo, volte ao stage e insira um novo movie clip chamado inimigo2, abaixo segue a imagem do nosso inimigo número 2:

Figura 7 – Segundo inimigo.img5.gif

Depois que ocoreu o import seu time e stage devem ficar assim:

Figura 8 – Timeline e o stage depois do import da segunda imagem.

Agora com as animações bases prontas iremos criar o mc que iremos controlar via Action Script. Portanto, na cena principal insira um novo mc chamado inimigo_1. Neste mc, crie duas layers uma chamada barra e outra chamada imagem. Na layer imagem, no primeiro frame desta layer coloque o mc que fizemos agora pouco chamado inimigo1 chame este primeiro frame de esquerda (aperte F9 neste frame e coloque um stop(); no Action Script) e o segundo desta mesma layer de direita e o terceiro frame chame de morto, este último indica o estado de quando sua barra de força chegar ao fim. O mc inimigo1 já está direcionado para a esquerda, como foi visto no artigo anterior basta usar a ferramenta Free Transform Tool para inverter a direção. Para mais detalhes veja o artigo anterior, e no frame morto não coloque nada deixe-o em branco sem nada no stage. Fica aqui como um teste criar uma animação de explosão ou qualquer coisa que pareça que o inimgo explodiu.

Agora vamos construir a barra de life do inimigo_1, na sua layer barra, usando a ferramenta Rectangle Tool desenhe um retângulo acima da cabeça do personagem de forma que esse desenho pertença à layer barra, transforme essa barra em mc apenas selecionando e apertando F8 chamando-a de barra_life. Por fim dê o nome de instância de barra_mc. Depois de todo esse processo com o primeiro frame selecione aperte F6 para criar um key Frame cópia do primeiro. Após todo esse processo veja como ficou:

Figura 9 – Inimigo 1 no stage e seus respectivos frames.

Para fazer o outro inimigo você vai aplicar o mesmo processo, volte à cena principal e crie um movie clip chamado inimigo_2, crie as mesma layers e dê o mesmo nome pra elas. Utilize o mc inimigo2 para fazer a animação para a esquerda e inverta o mc para fazer a animação para direita. Coloque também o stop() no primeiro frame da layer imagem e barra de life não precisa fazer por que ela já está pronta na library. Basta arrastá-la para o primeiro frame da layer barra e dar o nome novamente de intância de barra_mc e apertar F6 com o primeiro frame selecionado para fazer uma cópia para o segundo.

Depois de criado esses dois mc’s volte para a cena principal e dê um duplo clique no mc terreno_mc, assim ele será aberto para edição e é aqui que vamos colocar nossos inimigos. Mas você poderia ter imaginado colocá-los diretamente na cena criando uma nova layer, por exemplo chamada de inimigos; isso sim é possível mas é inviável dependendo do número de inimigos no cenário por que será complicado aplicar o scrolling em todos esses objetos. Continuando, com o terreno_mc aberto para edição arraste o mc inimigo_1 da library para o stage. Dê o nome de instância de inimigo_1_mc. A posição onde vai ficar o seu inimigo depende de como você vai programar seu Action Script de modo que ele não ultrapasse barreiras que ele não possa ou estipular limites até onde possa ir, eu estipulei um valor máximo e um valor mínimo para que o personagem possa andar no eixo x. Dê um clique seu inimigo_1_mc e com ele selecionado aperte F9 para programá-lo com o código abaixo:

onClipEvent(load)
{
/*velocidade inicial do inimigo_1_mc*/
var speed = 2;
}onClipEvent(enterFrame)
{
/*não tem mais barra de life, então morreu*/
if(this.barra_mc._xscale <=0)
this.gotoAndStop(“morto”);
else
{
/*pequena simulação de inteligência artificial*/
atack = Math.random();
if(this.hitTest(_root.megaman_mc))
_root.life_mc._xscale -= .5;
/*realiza um ataque se o número randômico for divisível por 15*/
if(Math.round(atack*10000) % 15 == 0)
speed = 10;
/*persegue o megaman*/
if(_root.megaman_mc._x > _root.terreno_mc._x+this._x)
{
this.gotoAndStop(“direita”);
this._x +=speed;
}
else
{
this.gotoAndStop(“esquerda”);
this._x -=speed;
}
if(this._x < 100)
this._x +=speed;
else if(this._x > 600)
this._x -=speed;
speed = 2;

if(speed > 100)
speed = 0;
}
}

No código acima fiz com que o inimigo fique fazendo umas aceleradas para frente como se fosse um ataque e o código também faz com o inimigo fique sempre andando atrás do megaman se este estiver na sua linha de ataque. Cada vez que o inimigo_1_mc encosta no megaman ele tira 0.5 do life.

Para o inimigo_2_mc algumas adaptações são necessárias no código acima, primeiro eu admiti que não vou diminuir o life do megaman quando encostar neste inimigo só o tiro que este dará que vai diminuir, o intervalo x que o inimigo_2_mc pode andar também é diferente eu o coloquei na parte final da fase. E também atualizo a variável direcao para eu saber para onde este inimigo vai atirar. A imagem de como fica no stage depois desse processo de montagem das animações do personagem e o código seguem abaixo:

Figura 10 – Inimigo 2 no stage e seus respectivos frames.

onClipEvent(load)
{
/*velocidade inicial do inimigo_2_mc*/
var speed = 2;
}onClipEvent(enterFrame)
{
/*não tem mais barra de life, então morreu*/
if(this.barra_mc._xscale <=0)
this.gotoAndStop(“morto”);
else
{
/*pequena simulação de inteligência artificial*/
atack = Math.random();
if(this.hitTest(_root.megaman_mc))
_root.life_mc._xscale -= .5;
/*realiza um ataque se o número randômico for divisível por 15*/
if(Math.round(atack*10000) % 15 == 0)
speed = 10;
/*persegue o megaman*/
if(_root.megaman_mc._x > _root.terreno_mc._x+this._x)
{
this.gotoAndStop(“direita”);
direcao = “direita”;
this._x +=speed;
}
else
{
this.gotoAndStop(“esquerda”);
direcao = “esquerda”;
this._x -=speed;
}
if(this._x < 1446)
this._x +=speed;
else if(this._x > 2040)
this._x -=speed;
speed = 2;

if(speed > 100)
speed = 0;
}
}

Vale ressaltar que o código das ações desses inimigos são os que podem mais serem implementados de forma diferente, eu optei para as ações da forma que está acima codificada, o inimigo_1_mc com o corpo e inimigo_2_mc ataca com um tiro de fogo. Lembre-se que ambos estão no mc terreno_mc.

Por fim vamos fazer a personagem que voa disparar o tiro de fogo que fizemos acima, vá a sua library e procure pelo mc inimigo2 que está na figura 8. Insira o código abaixo no frame 25, mas por que no frame 25? Se você observar a animação é nesse frame que a personagem sofre uma espécie de solavanco devido a um tiro que de forma imaginária ela tenha dado.

_root.contTiros++; _root.tiro_fogo_mc.duplicateMovieClip(“tiro”+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o tiro

x_terreno = _root.terreno_mc._x;
x_inimigo = _root.terreno_mc.inimigo_2_mc._x;

/*Verifica para onde ela está olhando e atira*/
if(_root.terreno_mc.inimigo_2_mc.direcao == “direita”)
{
_root["tiro"+_root.contTiros].direcao = “direita”;
_root["tiro"+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58;
_root["tiro"+_root.contTiros]._x = x_terreno + x_inimigo+90;
}
else
{
_root["tiro"+_root.contTiros].direcao = “esquerda”;
_root["tiro"+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58;
_root["tiro"+_root.contTiros]._x = x_terreno + x_inimigo+10;
_root["tiro"+_root.contTiros]._xscale = – 2*_root["tiro"+_root.contTiros]._width;
}

Você conseguiu entender a linha 17 deste código? Sim? Não? O que ela faz? Até agora quando a gente desejava que um personagem ficasse virado para os dois sentidos criávamos duas frames e depois utilizando a ferramenta Free Transform Tool invertia o sentido da figura da esquerda para a direita ou vice e versa. Agora fizemos essa inversão via Action Script com uma linha de código, o mais impressionante é que funciona.

Falei muito de uma tal barra de life do megaman mais ainda não fizemos. Então, vá ao stage da cena e cria um retângulo da cor que quiser parecido com o que foi feito para os inimigos, transforme em movie clip chamando-o de barra dê o nome de instância de life_mc. Posicione no topo um pouco à direita perto do timer e se prefeir coloque uma imagem do megaman que você desejar ao lado do life só pra ficar claro que aquele life é do megaman. Veja como ficou:

Figura 11 -Posição do life e o primeiro inimigo.

Por último só falta fazer as animação do megaman atirando e o código que fará ele disparar os tiros. Para fazer a animação vamos usar o arquivo de imagens que segue logo ao fim desse artigo. Lá tem várias imagens do megaman atirando correndo e tudo mais. Acredito que você já está ficando bom nesse processo de copiar e colar para montar animações. Use a folha de sprite abaixo, OBS: eu não usei toda a sequência de animação para fazer ele atirando, usei apenas os prites que estão abaixo.

Figura 12 – Folha de sprites para atirando parado.

Figura 13 – Folha de sprites para atirando correndo.

Os dois mc’s vazios que você irá criar para fazer as animações vão se chamar respectivamente atirando e atirando_correndo. Agora iremos incorporar esses mc’s ao megaman propriamente dito que é aquele que está no stage e que estamos controlando via Action Script e que se chama megaman_mc. Portanto, vá à cena principal e dê um duplo clique no megaman_mc e adicione mais 4 frames aos frames existentes e chame-os respectivamente de: atirando_dir, atirando_esq, correndo_atirando_dir e correndo_atirando_esq. Cuidado com esses nomes sempre utilizo para referenciá-los no Action Script. As animações para os frames atirando_dir e correndo_atirando_dir já estão pronta (atirando e atirando_correndo), ou seja, a direção em que o personagem está olhando já está correta. Para fazer as animações para esquerda será usada a mesma técnica que consistia em usar a ferramenta Free Transform Tool para inverter o sentido da animação que já está pronta, se tiver ainda dúvidas quanto a esta parte consulte novamente a parte 1 deste artigo.

Depois de cada coisa no seu lugar, você agora precisa apenas colocar o seguinte código no último frame do mc atirando para que quando você atirar saiba para que lado deva parar e de tirar :

_root.atirando = false;
if(_root.direcao == “direita”)
_parent.gotoAndStop(“parado_dir”);
else
_parent.gotoAndStop(“parado_esq”);

E para o mc atirando_correndo coloque no último frame:

_root.atirando = false;
É moçada, agora falta apenas o código do coração do nosso game com as novas modificações e com a parte de tiros, com a possibilidade de correr atirando e pular atirando todas já incorporadas no código, então aí está:

stop();
/* Variáveis globais
* Aqui estão presentes as variáveis que fazem o
* controle dos estados
* em que o jogo se encontra
*/
var velSaltar:Number = 20;
var velAndar:Number = 0;
var pulando:Boolean = false;
var caindo:Boolean = false;
var morreu:Boolean = false;
var atirando:Boolean = false;
var velMax:Number = 10;
var direcao:String = “”;
var entrada:Boolean = true;
var contTiros:Number = 0; /*Contador de tiros*/
var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/
/*adiciona à classe MovieClip um atributo que indica a direção para onde está indo*/
MovieClip.prototype.direcao = “esquerda”; /*fazemos com que as layers que representam as paredes
* e a plataforma não apareçam na hora que
* o jogo for executado
*/
plataforma_mc._visible = false;
paredes_mc._visible = false;

/* Todo o controle do personagem Megaman*/
megaman_mc.onEnterFrame = function()
{
//verifica se ainda não acabou a entrada do Megaman
if(entrada)
return;

if(this._y > 350)
_root.gotoAndStop(“gameOver”);
/*verifica colisão com alguma parede do lado direito ou esquerdo
* Se houve colisão faz uma anulação do passo que ele deu para frente
*/
if( colisao_paredes(_root.paredes_mc, this, velAndar))
this._x-=velAndar;
/* simples simulação de gravidade
* Se ele não tiver em cima da plataforma então ele vai caindo
* sem aceleração
*/

if ( !colisao_plataforma(_root.plataforma_mc, this) && !pulando)
this._y += 6;

//se velocidade positiva estou andando para a
//direita senão estou indo para esquerda
if (velAndar>0)
direcao = “direita”;
else if (velAndar<0)
direcao = “esquerda”;

//só pula se não tiver pulando, claro
if ( Key.isDown(Key.SPACE) && !pulando )
{
pulando = true;

/*mostra a animação pulando para direita se o personagem
* está indo para a direita, caso contrário para a esquerda
*/

if(direcao == “direita”)
megaman_mc.gotoAndStop(“pulando_dir”);
else
megaman_mc.gotoAndStop(“pulando_esq”);
}

}
else
{
if(!Key.isDown( Key.LEFT) )
this.gotoAndStop(“atirando_esq”);
_root["tiro"+_root.contTiros]._y = this._y+35;
_root["tiro"+_root.contTiros]._x = this._x-10;
}

tiroInterval = getTimer();

/*atribuindo direcao para o tiro*/
_root["tiro"+_root.contTiros].direcao = direcao;
atirando = true;

}

if( Key.isDown( Key.RIGHT) && atirando)
{
if( velAndar < velMax )
velAndar++;
if(!pulando)
megaman_mc.gotoAndStop(“correndo_atirando_dir”);
}
else if( Key.isDown( Key.LEFT) && atirando)
{
if ( velAndar > -velMax ) //não deixa o personagem acelerar muito
velAndar–;
if(!pulando)
megaman_mc.gotoAndStop(“correndo_atirando_esq”);
}
else if( Key.isDown( Key.RIGHT))
{
if( velAndar < velMax )
velAndar++;
if(!pulando)
megaman_mc.gotoAndStop(“correndo_dir”);
}
else if( Key.isDown( Key.LEFT) )
{
if ( velAndar > -velMax ) //não deixa o personagem acelerar muito
velAndar–;
if(!pulando)
megaman_mc.gotoAndStop(“correndo_esq”);
}
else if(!pulando && !entrada && !atirando)

{
//se não tiver acontecendo nada ele fica parado
if(direcao == “direita”)
megaman_mc.gotoAndStop(“parado_dir”);
else
megaman_mc.gotoAndStop(“parado_esq”);
velAndar = 0;
}

/* nosso personagem não é carro mas tem aceleração, que é .85
* mude para um valor alto e veja o resultado
*/
velAndar *= .85;

/*esta função faz o bendito scrolling*/
movimento(this, terreno_mc, plataforma_mc, paredes_mc, velAndar);

if( pulando )
{
/* mais física aqui, veja na figura 9 o que acontece aqui*/
this._y -= velSaltar;
velSaltar -= 1.8;
if (velSaltar<0)
caindo = true;
if (velSaltar <-15)
velSaltar = -15;
}

/* indica que o personagem emcima da plataforma, logo ele não está
* caindo e nem pulando é claro! E setamos novamente
*/
if ( colisao_plataforma( _root.plataforma_mc, this) && caindo)
{
velSaltar = 20;
pulando = false;
caindo = false;
}
};

function colisao_plataforma(obj1:Object, obj2:Object)
{
return obj1.hitTest(obj2._x, obj2._y+60, true);
}

function colisao_paredes(obj1:Object, obj2:Object, vel:Number)
{
return (obj1.hitTest(obj2._x-5, obj2._y+60, true) or obj1.hitTest(obj2._x+40, obj2._y+60, true))
}

function movimento(personagem_obj:Object, terreno_obj:Object,

limite_obj:Object,paredes_obj:Object, velocidade:Number)
{
if(direcao == “direita”)
{
/*se obedecer a condição abaixo, quem anda é o cenário*/
if(personagem_obj._x > 200 and terreno_obj._x >=-1853)
{
terreno_obj._x -= velocidade;
limite_obj._x -= velocidade;
paredes_obj._x -= velocidade;
}
else
personagem_obj._x += velocidade;
}

if(direcao == “esquerda”)
{
if(personagem_obj._x < 100 and terreno_obj._x < 0)
{
terreno_obj._x -= velocidade;
limite_obj._x -= velocidade;
paredes_obj._x -= velocidade;

}
else
personagem_obj._x += velocidade;
}
}

Considerações Finais

Bom pessoal, então isso. espero que tenham gostado fiz o máximo par ser claro e objetivo, dificilmente vocês encontraram um tutorial completo e comentado passo-a-passo de como contruir uma fase inteira de um game. Claro que poderiam ser abordados ainda mais assuntos, mas seria muito trabalho repetido e estenderia muito este artigo. Procurei abordar o que é necessário para se criar um game deste gênero. Agora coloque sua imaginação e criatividade e modfique o quanto quiser e aperfeiçoe para fique ainda melhor, como havia dito antes quero que entendam a técnica e não apenas aprender a fazer o jogo do “Megaman”, o meu intuito é que possam criar qualquer jogo com uma folha de sprites na mão e muita criatividade.

O Frame gameover eu não fiz por que fica a seu cargo decidir o que acontecer depois que o jogo acaba, no meu caso mostrei apenas meu nome e enderço de email com o título do artigo. O barulho que você ouve no início do jogo é apenas um arquivo inicio.wav que coloquei no primeiro frame do megaman_mc só pra dar mais emoção. Pra utilizá-lo basta importá-lo para a biblioteca via menu file->import->to library.

Se encontrarem problemas, vocês terão em mãos o mesmo código que usei para o exemplo funcional que está no início deste artigo. Olhe com cuidado cada etapa pois são muitos detalhes onde a falta de um causará um erro no game. Creio que não seja facil para quem está começando, mas estude bem os artigos anteriores para que se familiarize com a forma de como se programa um game. Fáça várias vezes se possível, a prática estimula a compreensão.

Espero que tenham gostado. Até a próxima.

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.

Download dos arquivos

Qualquer dúvida envie um e-mail para marciosilva@mxstudio.com.br ou acesse nosso fórum

Criação de Games – Megaman Parte 1

Marcio Silva — Sun, 15 Jul 2007 00:00:00 +0000

Criação de games – Megaman Parte 1

Olá comunidade,

Estou de volta com novas colunas sobre criação de games, destacando os que usam conceitos de física, matemática e outras áreas que estão intimamente ligadas a esta área tão fascinante. No meu último tutorial mostrei a criação de um simples joguinho que tratava de colisão e movimentação de um modelo na tela e que disparava tiros contra inimigos. O objetivo era apenas dar um pontapé inicial para quem não sabia nada sobre games, dessa forma propiciando uma pequena base para aqueles mais iniciantes. Neste tutorial, tratarei de conceitos um pouco mais elaborados, mas que são de fácil compreensão

Pré-requisitos:

Conhecimento básico em ActionScript
Macromedia Fireworks 8
Macromedia Flash 8
Recomenda-se que você tenha visto a coluna de movimentação básica de personagens, caso não tenha acesse:
Criação de Games

Objetivo:

Propiciar ao leitor o conhecimento necessário para que este possa desenvolver seus próprios jogos de plataforma. Ao logo da construção do game serão mostrados e comentados cada conceito novo que for mostrado, preocupando-se em não só mostrar como faz, mas também por que funciona, dúvida que fica geralmente na cabeça de quem está no início do aprendizado ou até mesmo quem já tem algum conhecimento na área. O objetivo aqui é desenvolver uma fase completa de um game que segue o formato de plataforma, estilo Super Mário.

Conceitos:

Nesta primeira parte iremos abordar a técnica de animação de personagens utilizando sprites, criar interação do usuário com um modelo baseado em sprites, o famoso scrolling, simulação de gravidade e técnicas de tratamento de colisão em jogos de plataforma.

Os sprites nada mais são do que vários quadros de uma animação nos games 2D, a animação de personagens é feita quadro a quadro, como o Macromedia Flash trabalha com quadros é muito prático manipular sprites de uma animação na ferramenta.

Conteúdo

Então, mão na massa!

O Personagem

Antes de mais nada devemos obter as figuras para o tutorial, existem vários sites pela internet que fornecem sprites para download gratuitamente, é claro que se você é bom em designer de personagens pode fazer os seus próprios. Mas muitos games em flash disponíveis na internet são adaptações de games já existentes e consagrados, que é nosso caso, onde iremos utilizar sprites do jogo do Megaman. Recomendo o Sprite Kingdom, de onde tirei os sprites para esta coluna. Salve o arquivo com os sprites do link acima e abra no Macromedia Fireworks. Os passos seguintes serão repetidos para cada estado do personagem, você deve ter percebido no arquivo que você baixou que cada linha trata-se de uma ação do Megaman, com exceção das duas primeiras, vejamos a figura abaixo:

Figura 1 – Representa a chegada do Megaman

Na Figura 1 podemos observar que seguindo a numeração indicada obtemos uma animação do Megaman quando ele entra no cenário de jogo. Então para ver essa animação funcionando basta contruir um movieclip com 26 frames, note que cada quadro da animação será mapeado para um frame do timeline do flash . Para fazer isso devemos seguir os seguintes passos:

Com a imagem que você baixou do Sprite Kingdom aberta no Macromedia Fireworks selecione o quadro 1 utilizando a ferramenta Marquee Tool, cuide para que apenas o primeiro quadro seja selecionado;
Com o primeiro quadro selecionado aperte CTRL + C para copiar;
Abra um documento em branco no Macromedia Flash 8 e vá em Insert » new Symbol ou CTRL + F8, chame-o de entrada;
transforme o 1° primeiro frame em Key Frame apertando F6;
Agora CTRL + V na área do stage, pronto o primeiro quadro agora está no primeiro frame, todos os outros que viram terão como base este primeiro frame para que a animação fique perfeita;
Repita o processo de copiar e colar agora para o segundo quadro da figura aberta no fireworks e cole agora no segundo frame no flash, esse processo deve ser feito até que os 26 sprites estejam na animação. Serão 26 Key Frames
No decorrer deste processo se quiser visualizar como está ficando, clique no primeiro frame do timeline aperte ENTER, assim você poderá ver que ajustes deverão ser feitos para que animação fique perfeita. Por que pode ser que uma figura de um frame anterior tenha ficado mais baixa que a atual que você está colocando e outros probleminhas de alinhamento podem aparecer.

Depois desse processo você já deve ter percebido que o Macromédia Flash é muito bom para fazer animação de personages 2D. Bom, agora devemos fazer as animações para o Megaman correndo e pulando, vai seguir a mesmo processo descrito acima, criando um novo movieclip vazio, o estadocorrendo eu chamei de correndo_dir e o pulando de pulando_dir, o dir no final indica direita para facilitar na hora de escrever o Action Script.

Só para vocês conferirem, as seqüências de imagens para correndo_dir e pulando_dir seguem abaixo:

Figura 2 – Sprites para correndo_dir.

Figura 3 – Sprites para pulando_dir.

Até agora construímos apenas as principais ações que o Megaman terá, agora vamos contruir o Movieclip que será realmente o Megaman e que nós iremos manipular via Action Script, no mundo dos games podemos chamá-lo de Modelo. Para isto aperte CTRL + F8 e chame esse movie clip vazio de megaman. Como este será o movieclip principal ele terá todos estados possíveis do Megaman dentro do jogo: correr para esquerda e direita, pular para esquerda e direita, e ficar parado olhando para esquerda e para direita e o estado de entrada que construímos anteriormente. Portanto devemos ter 7 Key Frames no timeline. Veja abaixo:

Figura 4 -Timeline com os Key Frames.

Coloque em cada frame o seu respectivo nome.

Frame 1 chame de entrada
Frame 2 chame de correndo_dir
Frame 3 chame de correndo_esq
Frame 4 chame de pulando_dir
Frame 5 chame de pulando_esq
Frame 6 chame de parado_dir
Frame 7 chame de parado_esq

Vamos agora associar as animações para cada ação, quase parecido com o processo de copiar e colar para montar as animações mas agora você irá usar as animações que criou anteriormente. Com o frame entrada selecionado pegue da Library a animação que também se chama entrada e coloque no centro do stage, como nas animações este primeiro servirá como base para o alinhamento das demais animações. A animação correndo_dir também já está pronta, foi feita nos passos anteriores basta colocar no seu respectivo frame, da mesma forma a pulando_dir.

Para fazer a correndo_esq e a pulando_esq, você vai utilizar uma instância das versões para direita, mas como o personagem nas outras versões está virado para a direita basta usar a ferramenta Free Transform Tool e usar o mouse para inverter o sentido do movieclip. Para isto basta clicar no movieclip e acionar a ferramenta Free Transform Tool, clique no lado esquerdo da figura e arraste para o lado direito, isso faz com que a figura inverta de direção. Por fim, para fazer o parado_dir e o parado_esq basta copiar o último sprite do movieclip entrada para o frame parado_dir, copie este mesmo sprite para o parado_esq só que neste invertendo sua direção com a ferramenta Free Transform Tool do flash como feito anteriormente.

A menos dos devidos ajustes que você possa fazer para deixar as animações bem alinhadas, o nosso personagem está praticamente pronto, só mecheremos nele na etapa de codificação.

O Cenário

Da mesma forma que os sprites, os cenários podem ser encontrados em sites na especializados na internet, eu utilizei um que está no site Background HQ. A montagem do cenário é mais fácil que o personagem, para fazer este tutorial usei apenas parte do cenário, pois ele é muito grande, por isso eu disponibilizei a versão que vou utilizar neste link. Na verdade o cenário nada mais é do que uma imagem de plano de fundo, que servirá como molde para desenhar os obstáculos e a plataforma.

Volte para a cena principal do nosso documento flash, agora vamos colocar todas a layers que precisaremos para manipular o jogo, cada layer vai ter 3 Key Frames. Faça como a imagem abaixo:

Figura 5 – Nome de cada layer com seus Key Frames.

Por enquanto o primeiro frame de cada layer não iremos utilizar, Para começar a montagem do jogo. Supondo que você já baixou o cenário no fim deste tutorial, insira um novo símbolo do tipo mocieclip e cole a imagem do cenário que você baixou.

Figura 6 – Movieclip terreno.

Veja que a figura ficou no movieclip que acabei de criar, certifique-se que você fez exatamente igual. Volte à cena e agora apenas arraste-o da biblioteca para o stage. Alinhe na posição x=0 e y=0 e certifique-se que este mc está na layer Terreno e no seu segundo frame. Dê o nome para esta intância de terreno de terreno_mc. Pronto, o terreno já está no lugar certo. Agora teremos uma a plataforma onde o personagem vai ficar durante todo o jogo, essa plataforma vai simular o piso do terreno. Para isto crie um novo movieclip vazio chamado de plataforma.

Agora preste muita atenção! O segredo do jogo funcionar corretamente está como você faz os próximos passos. Nesse movieclip vazio faço um quadrado qualquer, isso mesmo, um quadrado qualquer. Volte à cena e arraste para o stage este novo movieclip chamado de plataforma que ficará no segundo frame da layer Plataforma, dê o nome para esta nova instância da plataforma de plataforma_mc. Se você der dois cliques no mc plataforma_mc o terreno vai ficar como se fosse marcada d’agua, assim o terreno será seu molde para desenhar sobre ele a plataforma, agora você não vai utilizar aquele quadrado qualquer. Utilizando a ferramenta Rectangle Tool desenhe sobre as superfícies que o Magaman irá ficar apoiado, esses retângulos simularam a base onde o personagem pode caminhar. Veja abaixo:

Figura 7 – Movieclip plataforma_mc (cor banca) sobre o terreno_mc.

Veja que eu coloquei a plataforma na altura que o personagem pode caminhar, a parte de cima de cada retângulo é onde vai ficar os pés do Megaman. Pra terminar essa brincadeira com as imagens, vamos agora fazer o mc que vai representar as paredes do cenário. O processo para a construção das paredes “fictícias”, ou seja, retângulos que representarão as paredes e onde o personagem vai colidir, será feito como foi feito com a plataforma. Crie de novo um mc vazio chamado paredes e coloque um quadrado qualquer, volte à cena e arraste-o para o stage de modo que fique no segundo frame da layer Paredes , dê novamente dois cliques nesse novo mc, o que muda agora que você não mais vai colocar retângulos onde o Magaman pisa, e sim onde ele pode colidir de frente simulando uma parede. Chame essa instancia de paredes que você acabou de arrastar para o stage de paredes_mc. Veja como ficou:

Figura 8 – Em branco plataforma_mc e em azul paredes_mc.

Quando começar a testar as colisões algumas modificações devem ser feitas na largura na altura desses quadrados. Note que a idéia para simular paredes é cobrir de retângulos azuis tudo obstáculo que o Megaman pode colidir, não importa que esses retângulos fiquem bonitinhos por cima do terreno, o que importa é que eles não deixem o Megaman passar pelas paredes e nem sumir chão a dentro (Os ajustes são feitos quando começar a etapa de teste do game).. Onde ele não consegue colidir de frente não é necessário colocar paredes.

Agora falta colocar o Megaman no cenário. Vá a sua biblioteca e coloque no stage o movieclip megaman, ele foi feito em etapas anteriores. Chame essa instância de magaman_mc. Se você der dois cliques nesse mc, você vai entrar no modo de edição, veja que ele é composto de de 7 frames. Devemos colocar um stop() no primeiro frame para que a animação começe a executar quando o game começar. Ainda com o megaman aberto para edição, vá no frame pulando_dir que por sua vez possui o mc pulando_dir dê dois cliques nesse mc para edição. Já este mc, se você o construiu corretamente, tem 19 frames que é a quantidade de quadros da ação de pular. No último frame colque o seguinte código:

if(_root.direcao == “direita”)
_parent.gotoAndStop(“parado_dir”);
else
_parent.gotoAndStop(“parado_esq”);

Isso fará com que quando animação de pular saiba em que direção ficar parada depois que acabar, não precisa fazer para o pulando_esq, já que ele é uma instância de parado_dir.

O Código

Esta etapa que passamos agora no desenvolvimento de jogos é chamada de MODELAGEM, todo jogo, não importa em que plataforma você o faça, tem essa etapa, principalmente os games 3D. Assim você pode passar essa etapa para um colega seu que sabe muito de design de cenários e personagens, depois você dá vida ao jogo com a codificação.

Para codificar o jogo só usei uma arquivo de Action Script (AS), logo crie um arquivo de AS e chame-o de Megaman.as. Seu código está logo abaixo:

/* Todo o controle do personagem Megaman*/
megaman_mc.onEnterFrame = function()
{
//verifica se ainda não acabou a entrada do Megaman
if(entrada)
return;
/*verifica colisão com alguma parede do lado direito ou esquerdo
* Se houve colisão faz uma anulação do passo que ele deu para frente
*/
if( colisao_paredes(_root.paredes_mc, this, velAndar))
this._x-=velAndar;
/* simples simulação de gravidade
* Se ele não tiver em cima da plataforma então ele vai caindo
* sem aceleração
*/

if ( !colisao_plataforma(_root.plataforma_mc, this) && !pulando)
this._y += 6;

//se velocidade positiva estou andando para a
//direita senão estou indo para esquerda
if (velAndar>0)
direcao = “direita”;
else if (velAndar<0)
direcao = “esquerda”;

//só pula se não tiver pulando, claro
if ( Key.isDown(Key.SPACE) && !pulando )
{
pulando = true;

/*mostra a animação pulando para direita se o personagem
* está indo para a direita, caso contrário para a esquerda
*/

if(direcao == “direita”)
megaman_mc.gotoAndStop(“pulando_dir”);
else
megaman_mc.gotoAndStop(“pulando_esq”);
}
if( Key.isDown( Key.LEFT) )
{
if ( velAndar > -velMax ) //não deixa o personagem acelerar muito
velAndar–;
if(!pulando)
megaman_mc.gotoAndStop(“correndo_esq”);
}
else if( Key.isDown( Key.RIGHT) )
{
if( velAndar < velMax )
velAndar++;
if(!pulando)
megaman_mc.gotoAndStop(“correndo_dir”);
}
else if(!pulando and !entrada )
{
//se não tiver acontecendo nada ele fica parado
if(direcao == “direita”)
megaman_mc.gotoAndStop(“parado_dir”);
else
megaman_mc.gotoAndStop(“parado_esq”);
velAndar = 0;
}

/* nosso personagem não é carro mas tem aceleração, que é .85
* mude para um valor alto e veja o resultado
*/
velAndar *= .85;

/*esta função faz o bendito scrolling*/
movimento(this, terreno_mc, plataforma_mc, paredes_mc, velAndar);

if( pulando )
{
/* mais física aqui, veja na figura 9 o que acontece aqui*/
this._y -= velSaltar;
velSaltar -= 1.8;
if (velSaltar<0)
caindo = true;
if (velSaltar <-15)
velSaltar = -15;
}

function colisao_plataforma(obj1:Object, obj2:Object)
{
return obj1.hitTest(obj2._x, obj2._y+60, true);
}

function colisao_paredes(obj1:Object, obj2:Object, vel:Number)
{
return (obj1.hitTest(obj2._x-5, obj2._y+60, true) or obj1.hitTest(obj2._x+40, obj2._y+60, true))
}

function movimento(personagem_obj:Object, terreno_obj:Object,

if(direcao == “esquerda”)
{
if(personagem_obj._x < 100 and terreno_obj._x < 0)
{
terreno_obj._x -= velocidade;
limite_obj._x -= velocidade;
paredes_obj._x -= velocidade;

}
else
personagem_obj._x += velocidade;
}
}

Agora para funcionar o jogo, vá à layer Action no segundo frame da cena principal e coloque como segue abaixo:

stop();
/*inclusão do código do game*/
#include “Megaman.as”

Àqueles que mataram essa aula de física a figura abaixo mostra uma parte da física que diz: “Tudo que sobe tem que descer”, a idéia que o código das linhas 91 à 97 é simular desaceleração de um corpo quando este é lançado de baixo para cima, que nada mais é do que a gravidade atuando sobre o corpo que sobe, chega um momento que a velocidade chega a zero e depois inverte o sinal fazendo com que o corpo mude direção e comece a cair, o que foi codificado é uma aproximação desse efeito bem superficial , veja na figura abaixo como a magnitude da velocidade vai diminuindo, isto é, a cada passo de tempo seu valor vai se reduzindo até zerar e mudar de sentido (sinal). Esse moviemnto é chamado de Movimento Uniformemente Variado (MUV).

Figura 9 – Velocidade no decorrer do pulo.

Considerações Finais

Vimos durante o texto diversos conceitos referentes ao desenvolvimento de games de plataforma, é claro que o modo de fazer não é único, você pode achar várias formas de fazer, mas os conceitos sempre serão o mesmos. Você viu como fazer scrolling, uma pequena simulação física, que permite mais suavidade ao pulo do personagem, é claro que quanto mais detalhes nessa simulação fica mais próximo da realidade.

Espero que você tenha assimilado os conceitos mais básicos e mais importantes desse tipo de game. Calma que tem mais, você percebe que ainda falta os inimigos, fazer o Megaman atirar colocar um timer entre outros, para ficar bem parecido com o game real. Mas isso fica para uma próxima, nas próximas semanas estarei postando a constinuação deste artigo.

Espero que tenham gostado. Até a próxima.

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.

Download dos arquivos

Qualquer dúvida envie um e-mail para marciosilva@mxstudio.com.br ou acesse nosso fórum