PaperVision Materials – Parte 2

No Post anterior começamos a falar sobre materiais em papervision, paramos em materiais que trabalham com bitmap, neste post iremos continuar a abordagem sobre o assunto começando por materiais que utilizam MovieClip. Grande vantagem de se trabalhar com a textura em movieclip, é que podemos aproveitar toda a interatividade do do movieClip, animação e transparência podem ser aplicados na textura. Existem dois tipos de materiais que trabalham com movieclip o MovieAssetMaterial e o MovieMaterial.

MovieAssetMaterial
Carrega o movieClip através do linkageID do movieClip na biblioteca esse recurso é utilizado com o Flash CS3 ou superior, por já ter mostrado no post anterior sobre materiais como incluir o linkageID então não vou repetir o passo-a-passo, link para o post anterior. As principais propriedades que o MovieAssetMaterial trabalha são :

  • linkageID:String, o nome no linkage do movieclip
  • transparent:Boolean, define se o material vai ter transparência ou não (true ou false)
  • animated:Boolean, define se o material vai ser animado (true ou false)

Então vamos ao código :

package  {

	/**
	* ...
	* @author Fellyph Cintra
	*/

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import org.papervision3d.materials.MovieAssetMaterial;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.objects.primitives.Plane;
	import flash.events.Event;

	import flash.events.Event;

	public class MainMateriaisMovieAsset extends Sprite{

		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;

		private var _renderizador 	:BasicRenderEngine;
		private var plano			:Plane;
		private var plano2			:Plane;
		private var material  		:MovieAssetMaterial;

		public function MainMateriaisMovieAsset() {

			//criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();

			// com o movie material trabalhamos com as seguintes propriedades
			//(linkageId, transparência um valor Booleano , se a textura vai ser animada um valor também Booleano)
			material = new MovieAssetMaterial("face",true,true);

			//nesse exemplo eu vou trabalhar com dois planos
			// para dar a impressão de um plano com dupla face
			plano = new Plane(material, 300,300, 8, 8);
			plano2 = new Plane(material, 300, 300, 8, 8);

			//no segundo plano um rotação de 180 para fica no sentido oposta ao primeiro plano
			plano2.rotationY -= 180;

			//adicionamos nossos 2 planos na Scene3D _cena
			_cena.addChild(plano);
			_cena.addChild(plano2);

			//aplicamos um onEnterFrame para rotacionar os objetos
			addEventListener(Event.ENTER_FRAME, onRender);

		}

		public function onRender(e:Event):void {
			plano.rotationY += 3;
			plano2.rotationY += 3;
			_renderizador.renderScene(_cena, _camera, _viewport);

		}
	}

}

Como podemos ver para burlar a falta de planos de dupla face nessa versão do papervision criamos dois planos em sentidos contrários. então temos o seguinte resultado :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2009/05/movieasset.swf w=450 h=300]

MovieMaterial

Este tipo de material trabalha com Objetos do tipo DisplayObject criados em tempo de execução, ou seja podemos trabalhar com MovieClips e Sprites, é bem parecido com o material anterior , mas o objeto primitivo que vamos trabalhar dessa vez é o cubo(Cube), vamos ao código :

package  {

	/**
	* ...
	* @author Fellyph Cintra
	*/

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.utils.MaterialsList;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.objects.primitives.Cube;
	import flash.events.Event;
	import Formas;
	import flash.events.Event;

	public class MainMateriaisMovie extends Sprite{

		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;

		private var _renderizador 	:BasicRenderEngine;

		//Nesse Exemplo vou trabalhar com um objeto cubo
		private var cubo			:Cube;
		private var material  		:MovieMaterial;

		// Para trabalhar com o MovieMaterial eu vou criar
		//uma classe que extends de Sprite que eu criei em um tutorial anterior
		private var movieForma		:Formas;
		private var materialList 	:MaterialsList;

		// Criamos mais dois materiais para diversificar mais os materiais
		//na montagem do cubo
		private var corAmarela		:ColorMaterial;
		private var corAzul			:ColorMaterial;

		public function MainMateriaisMovie() {

			//Criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();

			// Estou inicializando meu objeto movieForma
			movieForma = new Formas();

			// Com o movie material trabalhamos com as seguintes propriedades
			//(o nosso movie que é um displayObject ou seja pode ser um movieclip, Sprite ou shape,
			//transparência um valor Booleano , se a textura vai ser animada um valor também Booleano)
			material = new MovieMaterial(movieForma,false,false);
			corAzul = new ColorMaterial(0x00027F);
			corAmarela = new ColorMaterial(0xFCFF00);

			// criamos um materialList para montar nosso cubo
			materialList = new MaterialsList( { front:material,back:material,left:corAmarela,right:corAmarela,top:corAzul,bottom:corAzul } )

			cubo = new Cube(materialList,330,50,240, 6,6,6);

			//adicionamos nosso cubo na Scene3D _cena
			_cena.addChild(cubo);

			addEventListener(Event.ENTER_FRAME, onRender);

		}

		public function onRender(e:Event):void {
			cubo.rotationY += 1;
			cubo.rotationZ += 1;
			_renderizador.renderScene(_cena, _camera, _viewport);

		}
	}

}

Nesse exemplo trabalhamos com a classe Formas que extends de Sprite, essa classe foi criada em um tutorial anterior link para o tutorial, ela possui o seguinte código :

package {

	import flash.display.Shape;
	import flash.display.Sprite;

	/**
	* ...
	* @author Fellyph Cintra
	*/
	public class Formas extends Sprite {
		public var bola		:Shape;
		public var rect 	:Shape;
		public var rect2 	:Shape;

		public function Formas() {

			criaRect();
			criaLosango();
			criaBola();

		}

		public function criaRect():void {
			rect = new Shape();
			rect.graphics.beginFill(0x008300);
			rect.graphics.lineStyle(1, 0x008300);
			rect.graphics.drawRect(0,0,330,240);
			addChild(rect);
		}

		public function criaLosango():void {

			rect2 = new Shape();
			rect2.graphics.beginFill(0xFCFF00);
			rect2.graphics.lineStyle(1, 0xFCFF00);
			rect2.graphics.moveTo( 165, 10);
			rect2.graphics.lineTo( 310, 120);
			rect2.graphics.lineTo( 165, 230);
			rect2.graphics.lineTo( 20, 120);
			rect2.graphics.lineTo( 165, 10);
			rect2.graphics.endFill();
			addChild(rect2);

		}

		public function criaBola():void {

			bola = new Shape();
			bola.graphics.beginFill(0x00027F);
			bola.graphics.lineStyle(1, 0x00027F);
			bola.graphics.drawCircle(165, 120, 70);
			bola.graphics.endFill();
			addChild(bola);
		}

	}

}

O resultado que temos é o seguinte :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2009/05/exemplo_movie.swf w=450 h=300]

Anteriormente tinha previsto o post sobre materiais dividido em dois, mas será necessário um terceiro post sobre o assunto, então pessoal até o próximo post sobre materiais.