Posts Tagged ‘BitmapAssetMaterial’

Papervision MouseClick

maio 7, 2009

mundi

Olá pessoal como havia prometido nosso mais novo tutorial papervision não estamos usando o Cubo, para diversificar um pouco decidi utilizar a Esfera.

Este tutorial é essencial para ter uma base de criação de site em papervion, neste tutorial vamos aprender a colocar nosso viewport para aceitar interação e definiremos nossa esfera para funcionar como botão simples, onde a única funcionalidade será pausar e retomar a rotação.

Depois de uma seqüência de tutoriais sobre papervision existe muitos pontos que não precisarei explicar de novo, como  por exemplo: inserir uma esfera e importar uma textura para ela. Hoje me focarei somente nos pontos chaves.

Viewport3D

O viewport é o nosso ambiente 3d, extremamente essencial para criar algo com o papervision, quando criamos nosso viewport3d podemos definir alguns parâmetros iniciais.

    new niewport3D(width, height, autoscale, interactive)
  • width (Number): Define a largura de nosso viewport3d;
  • height (Number): Define a altura de nosso viewport3d;
  • autoscale (Boolean): Determina se o viewport vai se escalar ao Stage.
  • Interactive (Boolean): Permite o uso de interações com o mouse, possibilitando o uso do evento InteractiveScene3DEvent.

Criando Interação

Em nosso código passaremos a definir o parâmetro interativo para true. Com o viewport definido para true poderemos definir agora nosso material para interative possibilitando ele ser clicado quando estiver em um objeto primitivo.Neste exemplo eu usarei o MovieMaterial, mas vocês poderiam utilizar qualquer outro tipo de material, lembrando que com o movie material eu importo um movieclip que esteja em minha biblioteca ou que já tenha sido instanciado.

     skin = new MovieMaterial(mov);
     skin.interactive = true;

Agora poderemos adicionar um listener em nossa esfera chamando o evento de interação especifico seguido de um método que será executado.

    esfera.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS,PRESS);

Código: main.as

package
{
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.Event;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.events.InteractiveScene3DEvent;
    public class main extends Sprite
    {
        public var cena:Scene3D;
        public var viewport:Viewport3D;
        public var camera:Camera3D;
        public var renderer:BasicRenderEngine;
        public var esfera:Sphere;
        public var mov:MovieClip = new earth();
        public var skin:MovieMaterial;
        public var paused:Boolean = false;
        public function main ()
        {
            Set ();
            Objetos ();
        }
        public function Set ():void
        {
            viewport = new Viewport3D(300,300,false,true);
            addChild (viewport);
            cena = new Scene3D ;
            renderer = new BasicRenderEngine ;
            camera = new Camera3D ;
        }
        public function Objetos ():void
        {
            skin = new MovieMaterial(mov);
            skin.interactive = true;

esfera = new Sphere(skin,300,30);

            cena.addChild(esfera);

esfera.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS,PRESS);

            addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
        }
        public function PRESS (e:InteractiveScene3DEvent ):void
        {
            paused = !paused;
        }
        public function Loop (e:Event):void
        {
            if (!paused)
            {
                esfera.roll(1)
                esfera.yaw(3)
                esfera.pitch(1)
            }
            renderer.renderScene (cena,camera,viewport);
        }
    }
}

Lembrando que para este tutorial funcionar devemos importer as classes do papervision e definir como classe padrão do fla a classe main,
Tentei fazer algo bem simples para demonstrar a interação do mouse com o papervision, com isso podemos criar diversas coisas seguindo a criatividade de cada um. Tentarei fazer algo mais elaborado para próximo tutorial. Espero que tenham gostado e que estes tutoriais sobre papervision estejam sendo úteis para vocês em seus estudos. Bem ate a próxima.


									

Papervision [Materiais]

março 10, 2009

Olá pessoal, dando continuidade aos tutoriais de papervision 3D, hoje em nosso segundo tutorial falaremos um pouco sobre materiais. Explicaremos o que é, como se cria um, alguns metodos e no final no totorial criaremos este exemplo.

ppv_mat

O que é Materiais?

Falando de maneira bem simples, os Materiais são as texturas que usamos para preencher nossos objetos 3d.

Como Utilizar?

Para utilizarmos um material devemos importar seu pacote, criar uma variável que simbolizará seu material, e passar como parâmetro a variável na hora que você esta construindo seu objeto primitivo.

import org.papervision3d.materials.ColorMaterial;
..
public var faceColor:ColorMaterial = new ColorMaterial(0xFFFF00);
..
obSphere = new Sphere(faceColor,50,50);

Agora vamos detalhar um pouco mais sobre alguns tipos diferentes de materiais.

WireframeMaterial:

Quando criamos um objeto primitivo qualquer, com exceção ao cubo, o próprio papervision defini uma textura wireframe de cor aleatória para seu objeto. Criando sua própria textura wireframe você pode definir uma cor padrão e a espessura das linhas.

WireframeMaterial(color:Number = 0xFF00FF, alpha:Number = 100, thickness:Number = 0);

Parameters

  • color:Number (default = 0xFF00FF) – Cor da linha.
  • alpha:Number (default = 100) – Alpha da linha.
  • thickness:Number (default = 0) – Espessura da linha.

Obs: Nenhum dos parâmetros são obrigatórios.

ColorMaterial:

Define uma cor para o fundo da textura.

ColorMaterial(color:Number = 0xFF00FF, alpha:Number = 1);

Parameters

  • color:Number (default = 0xFF00FF) – Cor de fundo.
  • alpha:Number (default = 1) – Alpha do fundo.

BitmapAssetMaterial:

Este material importa um bitmap (jpg, bmp, gif, png entre outros) que esteja em sua biblioteca com a propriedade linkage ativada.

BitmapAssetMaterial(linkageID:String, precise:Boolean = false);

Parameters

  • linkageID:String — String utilizada na propriedade linkage do bitmap que esteja na bibllioteca
  • precise:Boolean (default = false) (opcional)

BitmapFileMaterial:

Este material importa uma imagem externa a partir de uma url.

BitmapFileMaterial(url:String = “”, precise:Boolean = false);

Parameters

  • url:String (default = “”) — String contendo o caminho da imagem.
  • precise:Boolean (default = false) (opcional)

MovieAssetMaterial:

Importa um movieClip que esteje em sua biblioteca.

MovieAssetMaterial(linkageID:String = “”, transparent:Boolean = false, animated:Boolean = false, createUnique:Boolean = false, precise:Boolean = false);

Parameters

  • linkageID:String (default = “”) — String utilizada na propriedade linkage do MovieClip que esteja na bibllioteca
  • transparent:Boolean (default = false) Permite a utilização de moviclips com fundos transparentes.(opcional)
  • animated:Boolean (default = false) Permite que seu movieclip seja animado. (opcional)
  • precise:Boolean (default = false) (opcional)

CompositeMaterial:

Este é um dos mais interessantes materiais, lhe permite colocar mais de um material como textura.

Métodos:

  • addMaterial() – Adiciona um material.
  • removeAllMaterials() – Remove todos os materiais.
  • removeMaterial() – Remove um material existente.

Ex:

public var faceWire:WireframeMaterial = new WireframeMaterial(0x006666, 100,3);
public var faceColor:ColorMaterial = new ColorMaterial(0xFFFF00);
public var composite:CompositeMaterial = new CompositeMaterial();
..
composite.addMaterial(faceColor);
composite.addMaterial(faceAssetMov);
obSphere = new Sphere(composite,50,50);

Metodos dos Materiais:

A classe Materials é uma classe extendida da classe “MaterialObject3D” com isso podemos utilizar alguns metodos.

  • doubleSided (): Permite que a imagem exibida pelo material seja exibida nos 2 lados do plano.
  • smooth (): Simplifica alguns pontos do bitmap para deixar o material mais leve.

Exemplo

Agora vamos construir um cubo utilizando todos os tipos de materiais descritos neste post.

Imagens que iremos utilizar:

mario Importaremos via BitmapFileMaterial, coloque esta imagem no mesmo diretorio que os arquivos.

luigi Importaremos via BitmapAssetMaterial impote esta imagem para biblioteca do flash.

bowser Esta imagem se transformará em um movieclip animado para importamos via MovieAssetMaterial.

Arquivo: ppv_mat.fla

Importaremos para biblioteca as imagens bowser.jpg e luigi.jpg. A partir da imagem do bowser criaremos um movie clip animado utlizando “Motion Tween” nos frames, o movieclip deverá ficar dessa maneira.

bowser_movieclip

Obs: não esquecer de importar os pacotes do papervision e defininir em document class “ppv_mat”

Arguivo: ppv_mat.as

Segue o codigo na integra deste noss exemplo.

package {
	//flash
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.Stage;
	//papervision
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	//Material
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.BitmapAssetMaterial;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.special.CompositeMaterial;
	// objeto
	import org.papervision3d.objects.primitives.Cube;

	public class ppv_mat extends MovieClip {
		public var cena:Scene3D;
		public var viewport:Viewport3D;
		public var camera:Camera3D;
		public var renderer:BasicRenderEngine;
		//Material
		public var faceWire:WireframeMaterial = new WireframeMaterial(0x006666, 100,3);
		public var faceColor:ColorMaterial = new ColorMaterial(0xFFFF00);
		public var faceAssetBmp:BitmapAssetMaterial = new BitmapAssetMaterial("luigi.jpg", true);
		public var faceFileBmp:BitmapFileMaterial = new  BitmapFileMaterial("mario.jpg",false);
		public var faceAssetMov:MovieAssetMaterial = new MovieAssetMaterial("bowser", true, true, false, false);
		public var composite:CompositeMaterial = new CompositeMaterial();
		//objetos Primitivos
		public var obCube:Cube;

		public function ppv_mat () {
			Set ();
			Objetos ();
		}
		public function Set ():void {

			viewport = new Viewport3D(400,300,true,false,true,true);
			addChild (viewport);
			cena = new Scene3D ;
			renderer = new BasicRenderEngine ;
			camera = new Camera3D ;
			camera.focus = 100;
			camera.zoom = 10;

		}
		public function Objetos ():void {
			//Definindo transparencia nos materiais
			faceWire.doubleSided = true;
			faceColor.doubleSided = true;
			faceAssetBmp.doubleSided = true;
			faceFileBmp.doubleSided = true;
			faceAssetMov.doubleSided = true;
			composite.doubleSided = true;
			//Composite
			composite.addMaterial(faceColor);
			composite.addMaterial(faceAssetMov);
			//Cube
			obCube = new Cube(
			new MaterialsList(
			{front: faceWire,
			      back: faceFileBmp,
			      left: composite,
			      right: faceAssetMov,
			      top: faceColor,
			      bottom: faceAssetBmp}
			)
			,200,200,200,5,5);
			cena.addChild (obCube);

			addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
		}
		public function Loop (e:Event):void {

			obCube.yaw (-2);
			obCube.pitch (-1);
			renderer.renderScene (cena,camera,viewport);
		}
	}
}

Árvore de Natal + Papervision

dezembro 11, 2008

tree

clique na imagem para visualizar

今日は皆-さん. Olá pessoal o natal está chegando e eu percebi que não tinha montado minha arvore de natal ainda. Achei que seria interessante eu montar uma arvore de natal personalizada e via actionscrtip 3 + papervision3D. Vejam como ela ficou.

Não vou fazer um tutorial explicativo por que eu não sou tão nativo em papervision, esta é a minha segunda aplicação. Mas vou ensinar como baixar os arquivos do papervision usando o controle de versão e postarei o código fonte.

Instalando Papervision:

O papervision não é um programa, na verdade ele é um conjunto de classes prontas, aonde o programador só direciona o flash para importar-las para poder usar. Como não se tem um setup e cada dia que passa os programadores fazem mudanças no código. Então com instalar?
1- faça um downlaod de um cliente SVN. Eu usei o Tortoise Faça o download aqui.
2- crie uma pasta aonde você ira colocar os arquivos do papervision. Após ter instalado o tortoise clique com o botão direito sobre a paste e selecione a opção “SVN checkout” na caixa que abrir coloque o seguinte endereço http://papervision3d.googlecode.com/svn/trunk
3 – Abra o Flash CS3, vá em Edit>Preferences>Actionscript e clique no botão “Actionscript 3.0 settings”. Clique no sinal de “+” para adicionar mais um caminho para classe depois vá em classpath (veja na imagem) vá na pasta que você criou do papervision e siga os diretórios “as3/trunk/src” e clique em ok.

ppv_instal

Pronto as classes do papervision estão importadas. Agora vocês poderão dar uma olhadas nos exemplos prontos que tem na pasta “as3/tags”. Agora vamos a Nossa Arvore.

Criando flash:

propriedades

Para nosso exemplo precisaremos de 3 movieclips com as propriedades linkage definidas como “tree”(O cone central da arvore), “base1” e “base2” são os respectivos pedaços do vaso. Nas propriedades do nosso flash teremos 300×400, 30 frame rate: 30 Document class: ppv_cone. Noss arquivo fla não terá nenhum código, todos os códigos estarão no arquivo “ppv_cone.as”. Mande criar um actionscrtipfile salve no mesmo diretório do seu arquivo fla com o nome de ppv_cone.

newarquivo

Código ppv_cone:

package {
	// Flash AS3 import
	import flash.display.Sprite;
	import flash.events.Event;
	// Papervision import
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	// objeto Papervision import
	import org.papervision3d.objects.primitives.Cone;
	import org.papervision3d.objects.primitives.Cylinder;
	// materiais Papervision import
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.BitmapColorMaterial;

	public class ppv_cone extends Sprite {
		public var cena:Scene3D;
		public var viewport:Viewport3D;
		public var camera:Camera3D;
		public var renderer:BasicRenderEngine;
		//Declarando Objetos 3D
		public var tree:Cone;
		public var treeTrunk:Cylinder;
		public var treeBase1:Cylinder;
		public var treeBase2:Cylinder;
		//Declarando Material
		public var matMov1:MovieAssetMaterial = new MovieAssetMaterial("tree",false,false);
		public var matMov2:MovieAssetMaterial = new MovieAssetMaterial("base1",false,false);
		public var matMov3:MovieAssetMaterial = new MovieAssetMaterial("base2",false,false);
		public var matColor:BitmapColorMaterial=new BitmapColorMaterial(0x000000);

		public function ppv_cone () {
			Set ();
			Objetos ();
			Listeners ();
		}
		public function Set ():void {
			cena = new Scene3D ;
			viewport = new Viewport3D(500,800,true,false,true,true);
			addChild (viewport);

			camera = new Camera3D ;
			renderer = new BasicRenderEngine ;
		}
		public function Objetos ():void {
			treeTrunk = new Cylinder(matColor,20,200,8,6);
			cena.addChild (treeTrunk);

			treeBase1 = new Cylinder(matMov2,50,80,8,6,60);
			treeBase1.y =-80;
			cena.addChild (treeBase1);

			treeBase2 = new Cylinder(matMov3,60,30,8,6,70);
			treeBase2. y=-40;
			cena.addChild (treeBase2);

			tree = new Cone(matMov1,150,400);
			tree.y = 200;
			cena.addChild (tree);

			camera.focus = 15;
			camera.y = 80;
		}
		public function Listeners ():void {
			addEventListener (Event.ENTER_FRAME,Render);
		}
		public function Render (e:Event):void {
                        //Rotacionando o cone
			tree.yaw (3);
			renderer.renderScene (cena,camera,viewport);
		}
	}
}

OBS: O papervision a cada dia que passa está sofrendo mudanças, este codigo foi montado com base na versão: Papervision3D Public Beta 2.0 – Great White (September 9th, 2008)

A lógica do código:

1-Importamos as classes necessárias.
2-Criamos uma cena3d, viewport e câmera
3-Criamos 4 objetos: 1 cone para ser nossa parte principal da arvore, um cilindro para ser o caule e mais 2 cilindros deformados para ser o vaso.
Se vocês reparem criamos variáveis do tipo “MovieAssetMaterial” e “BitmapColorMaterial”. As variáveis materiais determina a textura de nossos objetos 3D.
MovieAssetMaterial: importa um movieclip usando a propriedade linkage.
BitmapColorMaterial: Cria um bitmap com a cor especificada.
BitmapFileMaterial: importa uma imagem de fora do flash.

Bem eu ainda não estou tomando uma coça do papervision, por isso não pude detalhar mais o código. Mas mesmo assim achei que seria interessante colocar o código aqui para vocês darem uma olhada. Assim que eu aprender mais sobre o papervision eu vou postando aqui.vlw pessoal espero que tenham gostado. Até a próxima. また見てね.

PaperVision 3D

novembro 17, 2008

今日は皆-さん.Olá pessoal, Hoje estou aqui para lhes mostrar minha primeira aplicação utilizando a biblioteca papervision para o flash e actionscript 3.0. Eu fiz uma aplicação muito simples, criei um cubo 3d que fica rotacionando para todas as direções em um ponto fixo e personalizei todos os lados do cubo com imagens importadas da biblioteca via linkage.

Bem pessoal eu ainda sou muito iniciante nesse sistema para poder explicar com mais detalhes ou até mesmo montar um tutorial, mas meus estudos continuam e espero logo logo poder conversar melhor sobre o assunto. E pode ter certeza que este aprendizado será replicado para futuros jogos^^ vlw pessoal até a próxima, CYA. また見てね.