http://HamisterTower.com.br

Novidades:

Nessa nova fase do blog  continuaremos com o foco em no flash e jogos a novidade é que também abordaremos assuntos como: Flex, Air, outras engines (Away3d, Sandy, Alternativa3d, Box2d,Jiblib), Realidade Aumentada, Componentes especifico para jogos e alguns de meus projetos pessoais entre outras coisas.

Não deixem de acompanhar o blog, lembrando que estamos em outro endereço: http://HamisterTower.com.br espero a visita de vocês lá, vlw Abraços.

Olá Pessoal, Para nosso tutorial de hoje, preparei exemplo muito simples, utilização do mouse ma interação de um objeto primitivo do papervision, assim poderemos possamos montar um menu num futuro.

Ao se trabalhar com Orientação a Objetos devemos sempre estar atendendo a instância do objeto, ao utilizar o papervision, para alterar algumas propriedades de um simples material instanciado para um plane devemos alterar o movieclip no qual o nosso material recebe de instancia.

movie = new MovieClip();
material = new MovieMaterial(movie,true,true);

Seguindo a lógica, o nosso material armazena a instancia de “movie” ou seja, se alterarmos o alpha ou o posicionamento do frame de nosso movie o nosso material sofrerá a mesma alteração.

Em nosso exemplo teremos um movieclip aonde a propriedade linkage dele será “MovieButton”.

Iniciaremos nosso plane com as rotações em 25 e alpha 0.8, e em nosso enterframe colocaremos o nosso plane para ficar rotacionando para exemplificar melhor que aquele plane é um objeto do papervision. Ao passar o mouse em nosso plane, alteraremos o alpha para 1, reposicionaremos as rotações em 0 e bloquearemos o enterframe. Vamos para o código completo.

package
{
    import flash.display.MovieClip;
    import flash.events.Event;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.view.BasicView;

    public class Menu extends BasicView
    {
        private var mov1:MovieClip;
        private var mat1:MovieMaterial;
        private var plane1:Plane;
        private var MOVE:Boolean = true;

        public function Menu()
        {
            viewport.buttonMode = true;
            viewport.interactive = true;

            camera.zoom = 5;
            camera.focus = 200;

            mov1 = new MovieButton();
            mat1 = new MovieMaterial(mov1, true, true)

            mat1.interactive = true;
            mat1.smooth = true;
            mat1.doubleSided = true;

            plane1 = new Plane(mat1, 130, 100)
            scene.addChild(plane1);
            plane1.rotationY = 25;
            plane1.rotationZ = 25;
            plane1.rotationX = 25;

            plane1.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, _mouseOver);
            plane1.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, _mouseOut);
            startRendering();
            mov1.alpha = 0.8;
            addEventListener(Event.ENTER_FRAME, _loop);

        }
        public function _loop(e:Event) {
            if (MOVE){
                plane1.yaw(3);
                plane1.roll(3);
                plane1.pitch(3);
            }
        }
        public function _mouseOver(e:InteractiveScene3DEvent):void
        {
            MOVE = false;
            mov1.alpha = 1;
            e.target.rotationY = 0;
            e.target.rotationZ = 0;
            e.target.rotationX = 0;

        }
        public function _mouseOut(e:InteractiveScene3DEvent):void
        {
            MOVE = true;
            mov1.alpha = 0.8;
        }

    }

}

Para dar um toque interessante ao seu menu aconselho a usar transições de tweeners, caurina, green sock ou ate mesmo o tweener do flash. Agora que eu já lhe mostrei a escada só falta vocês subirem ^^ até aproxima.

Olá pessoal, Muitos de vocês já se perguntaram como trocar o material de um objeto sua durante sua execução, o material de um plane, cylinder ou até mesmo a face de um cubo. Pois bem para fazermos esta mágica utilizamos o método replaceMaterialByName.

Este método consiste em substituir a instância de material que possui o nome indicado.

objeto.replaceMaterialbyName(material:Material,name:String);

Uma das divergências deste método é que o nome deste método deveria se chamar replaceMaterialByInstancia. Para vocês entenderem melhor este problema vou descrever um exemplo com um cubo.

    blue  = new ColorMaterial(0x0000FF);
    red   = new ColorMaterial(0xFF0000);
    lista = new MaterialsList()

    lista.addMaterial(blue, 'front');
    lista.addMaterial(blue, 'back');
    lista.addMaterial(blue, 'top');
    lista.addMaterial(blue, 'bottom');
    lista.addMaterial(blue, 'left');
    lista.addMaterial(blue, 'right');
    cube = new Cube(lista,100,100,100);
    cubo.replaceMaterialByName(red, 'right');

Teoricamente este código deveria criar um cubo com todas as faces ‘Azul’ e ao final ele colocaria a face da direita com a cor ‘Vermelho’. Porém ele no final deixa todas as faces ‘vermelho’, pois a instancia de material do lado direito ‘right’ é igual a instancia de material utilizado para as outras faces. Para que não aconteça isso é recomendado que cada face tenha sua própria instancia. Agora vamos ao código de nosso tutorial.

Tutorial replaceMaterialbyName

Neste tutorial decidi brincar um pouco mais. Vamos utilizar um pouco de ReflectionView e o componente ColorPicker (componente do próprio Flash)

Criaremos 3 ColorPicker que será responsável por 2 lados diferentes do cubo e um botão para resetar para o estado utilizando os MovieMaterial.

Logica:

package
{
    import fl.controls.ColorPicker;
    import fl.events.ColorPickerEvent;
    import flash.display.SimpleButton;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;

    public class ppv_changeMaterial extends ReflectionView
    {
        public var matsmile:MovieAssetMaterial;
        public var matface:MovieAssetMaterial;
        public var matLeftRight:MovieAssetMaterial;
        public var cubo:Cube;
        public var lista:MaterialsList;
        public var color1:ColorPicker;
        public var color2:ColorPicker;
        public var color3:ColorPicker;
        public var reset:SimpleButton;

        public function ppv_changeMaterial() {
            setChildIndex(viewportReflection, 1);
            viewportReflection.alpha = 0.8;

            matsmile  = new MovieAssetMaterial("smile");
            matface  = new MovieAssetMaterial("face");
            matLeftRight  = new MovieAssetMaterial("face");
            lista = new MaterialsList()

            lista.addMaterial(matface, 'front');
            lista.addMaterial(matsmile, 'back');
            lista.addMaterial(new ColorMaterial(0xF9EAAD), 'top');
            lista.addMaterial(new ColorMaterial(0x000000), 'bottom');
            lista.addMaterial(matLeftRight, 'left');
            lista.addMaterial(matLeftRight, 'right');

            cubo  = new Cube(lista, 200, 200, 250);
            scene.addChild(cubo);

            cubo.y = 150;

            color1 = new ColorPicker();
            color1.x = 20;
            color1.y = 100;

            color2 = new ColorPicker();
            color2.x = 20;
            color2.y = 140;

            color3 = new ColorPicker();
            color3.x = 20;
            color3.y = 180;

            reset = new Reset();
            reset.x = 20;
            reset.y = 220;
            addChild(reset);

            addChild(color1);
            addChild(color2);
            addChild(color3);

            color1.addEventListener(ColorPickerEvent.CHANGE, changeLeftRight);
            color2.addEventListener(ColorPickerEvent.CHANGE, changeTopBottom);
            color3.addEventListener(ColorPickerEvent.CHANGE, changeFrontBack);
            reset.addEventListener(MouseEvent.CLICK, clickReset);
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }
        private function changeLeftRight(e:ColorPickerEvent) {
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'left');
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'right');
        }
        private function changeTopBottom(e:ColorPickerEvent) {
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'top');
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'bottom');
        }
        private function changeFrontBack(e:ColorPickerEvent) {
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'front');
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'back');
        }
        public function clickReset(e:MouseEvent):void
        {
            cubo.replaceMaterialByName(matface, 'front');
            cubo.replaceMaterialByName(matsmile, 'back');
            cubo.replaceMaterialByName(new ColorMaterial(0xF9EAAD), 'top');
            cubo.replaceMaterialByName(new ColorMaterial(0x000000), 'bottom');
            cubo.replaceMaterialByName(matface, 'left');
            cubo.replaceMaterialByName(matface, 'right');

        }

        private function onEnterFrame(e:Event):void {
            singleRender();
            camera.orbit(Math.abs(mouseY+1 / 2), Math.abs(mouseX+1));
        }

    }

}

Pode ter certeza que este método será muito útil em diversas de suas aplicações,  até a próxima.

Olá pessoal , Hoje falarei sobre uma classe muito interessante e simples, ReflectionView. Uma classe que faz com que o viewport se transforme em um espelho tanto para cima do eixo y:0 quanto para baixo.

A classe ReflectionView é uma classe extendida da classe BasicView que por sua vez é extendido da classe AbstractView, o que eu quero dizer com tudo isso, que ao extender uma classe a RelectionView ele vai possuira atributos instanciados como:

AbstractView:
scene:Scene3D;
viewport:Viewport3D;
renderer:BasicRenderEngine;

startRendering();
stopRendering();
singleRender();

ReflectionView
viewportReflection : Viewport3D;
cameraReflection : CameraObject3D;
singleRender() (override - sobrescrevido)

Quando criávamos nosso BasicView ativávamos a função startRendering() para renderizar nossa aplicação, porem quando criamos um ReflectionView também podemos utilizar esta função para renderizar, porém não irá criar reflexo pois a função responsável pelo reflexo é a singleRender() que esta reescrita nesta classe para poder ativar o reflexo. Esta parecendo complicado mas as coisas são bem simples vamos analisar nosso código. Em resumo para funcionar precisamos apenas colocar dentro de um bloco ENTER_FRAME a função singleRender();

Como de custume trabalharemos com 2 arquivos. ppv_reflection.fla e ppv_reflection.as. Certifique de possuir 2 movieclip em sua biblioteca com os seguintes linkage: “smile” e “face”.

ppv_reflection.as

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;

    public class ppv_reflection extends ReflectionView
    {
        public var matsmile:MovieAssetMaterial;
        public var matface:MovieAssetMaterial;
        public var cubo:Cube;
        public var lista:MaterialsList;

        public function ppv_reflection() {
            setChildIndex(viewportReflection, 1);
            viewportReflection.alpha = 0.8;
            matsmile  = new MovieAssetMaterial("smile");
            matface  = new MovieAssetMaterial("face");
            lista = new MaterialsList(
                {front: matface,
                  back: matsmile,
                  top: new ColorMaterial(0xF9EAAD),
                  bottom: new ColorMaterial(0x000000),
                  left: matface,
                  right: matface} );
            cubo  = new Cube(lista, 200, 200, 250);
            scene.addChild(cubo);

            cubo.y = 150;
            addEventListener(Event.ENTER_FRAME, onEnterFrame);

        }
        private function onEnterFrame(e:Event):void {
            cubo.rotationY = mouseX - stage.stageWidth / 2;
            cubo.rotationX = mouseY - stage.stageHeight / 2;
            singleRender();
        }

    }

}

Uma classe simples que possui uma imagem de fundo com um cubo personalizado, aonde este cubo se movimenta respondendo os comandos do mouse.Na primeira linha de nosso construtor utilizamos o seguinte código:

    setChildIndex(viewportReflection, 1);

Quando criamos nossa classe extendida de ReflectionView automaticamente nosso viewport refletor é criado no índex 0 porem se eu quiser deixar uma imagem de background desenhado em alguma layer da time line esse background entrará em um índex acima de nosso viewport fazendo com que o viewport refletor fique por trás do background, este é o motive desta linha de comando, estamos trocando o posicionamento índex de nosso viewport.

Nosso viewport refletor ele funciona da seguinte maneira, tudo que esta do eixo y:0 para cima será refletido para baixo o eixo y:0 e vice versa, a imagem a seguir ilustra um cubo desenhado abaixo do eixo y:0.

Espero que tenham gostado deste tutorial, não precisam se preocupar que teremos mais coisas interessantes no decorrer da semana, até a próxima.

O site é uma espécie de compilador de flash online, aonde o usuário escreve seu código, compila e compartilha com outros usuários do site, encontrei uns códigos bem simples para usar como referencia em meus estudos da engine box2d, também encontrei bons exemplos de papervision, vale apena dar uma conferida no site. http://wonderfl.net/. Agora que vocês tem acesso ao código de um emulador de game boy classic desafio vocês a criar um emulador de game boy color. Heheh. Bem pessoal até o próximo post.

Para demonstrar o movimento de translação nada melhor que usar um exemplo já conhecido, o movimento da lua sobre a terra.

Criaremos 1 arquivo (.fla) e um arquivo (.as) rotulado como ppv_math, definimos no flash como document class nosso ppv_math. Nosso código não possui nenhum mistério para quem já vem acompanhando nossos tutoriais de papervision com exceção das seguintes linhas de código.

lua.z = Math.cos(teta) * 150;
lua.x = Math.sin(teta) * 150;
lua.y = Math.sin(teta) * 50;

Para fazer a translação padrão utilizamos como eixos base nosso “x” e “z” para interargimos lateralmente e com profundidade, para dar um efeito mais interessante na aplicação decidi colocar uma interação no eixo “y” para a lua percorrer em um sentido diagonal. Experimente comentar um dos eixos para ver o que acontece. Agora segue o código na integra.

ppv_math.as

package {
    //flash
    import flash.display.Sprite;
    import flash.events.Event;
    //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.BitmapAssetMaterial;
    // objeto
    import org.papervision3d.objects.primitives.Sphere;

    public class ppv_math extends Sprite {

        public var cena:Scene3D;
        public var viewport:Viewport3D;
        public var camera:Camera3D;
        public var renderer:BasicRenderEngine;
        //objetos Primitivos
        public var terra:Sphere;
        public var lua:Sphere;
        //Matemática
        public var alfa:Number = Math.PI / 180;
        public var teta:Number = 0;

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

            viewport = new Viewport3D(400,400);
            addChild (viewport);
            cena = new Scene3D ;
            renderer = new BasicRenderEngine ;
            camera = new Camera3D ;
            camera.zoom = 5;
            camera.focus = 200;

        }
        public function Objetos ():void {
            terra = new Sphere(new BitmapAssetMaterial("Earth"), 100, 15,15);
            lua = new Sphere(new BitmapAssetMaterial("moon"), 30, 15,15);

            cena.addChild(terra);
            cena.addChild(lua);

            addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);

        }
        public function Loop (e:Event):void {
            teta += alfa;
            renderer.renderScene (cena, camera, viewport);
            terra.yaw(1);
            lua.yaw(1);

            lua.z = Math.cos(teta) * 150;
            lua.x = Math.sin(teta) * 150;
            lua.y = Math.sin(teta) * 50;

        }
    }
}

Com conceitos básicos é possível criar diversas coisas interessantes com o papervision, tentarei criar mais tutoriais cultos envolvendo a matemática. Até a próxima!

Olá pessoal. Finalmente chegou a hora de vocês usarem seus conhecimentos do ginásio. Vocês sempre ouviram dizer que quem faz informática precisa saber matemática, bem se até hoje ainda não encontrou utilidade para ela, não se preocupe, hoje estarei estreando mais uma seqüência de tutoriais que mostrarão que a matemática é uma poderosa ferramenta para criação de jogos, menus interativos, aplicativos gráficos entre outra utilidade. O foco do nosso primeiro tutorial de matemática com actionscript será o movimento de translação.

Este é o plano cartesiano da matemática conceitual, no flash trabalhamos quase que exatamente igual com exceção que o eixo y é invertido, ao aumentarmos o valor de y a imagem segue para baixo.

Translação:

Para quem não se lembra, translação é o movimento que a terra faz em torno do sol. Resumindo , é quando um objeto circula um eixo sempre mantendo a mesma distância (raio).

Você com certeza já viram este recurso sendo usado em alguns jogos, assim como uma bola de fogo, bola de espinhos ou uma plataforma dinâmica. Para reproduzirmos este movimento precisamos relembrar alguns conceitos básicos de trigonometria.

Como podemos ver no circulo trigonométrico a distancia oposta ao angulo é o Cosseno vezes o raio e a distancia adjacente é igual ao seno vezes o raio, Porem no actionscript o angulo deve ser escrito em Radianos vamos analisar a figura e ver como ficaria a posição dos objetos.

Para efetuar o movimento de translação é necessário sempre estar incrementando o angulo por intermédio de enterframe ou timeout. Agora vamos seguir com o nosso exemplo pratico.

Iremos utilizar a linguagem estruturada em nosso exemplo, teremos apenas um arquivo .fla e já teremos um objeto que rotacionará o centro do palco, este objeto terá o nome de “ob”. No primeiro frame escreveremos o seguinte código.

No código a seguir utilizamos os seguintes métodos da classe Math:

Math.cos(n:Number): retorna o cosseno do ângulo.
Math.sin(n:Number): retorna o seno do ângulo.
Math.PI: constante que retorna o PI, PI é a representação gráfica de 180 em radianos.

Em nosso código o objeto ficará circulando o centro com um raio de 100px e a cada passada pelo loop de enterframe o angulo final receberá um ingremento de 2°.  O centro da circunferência será definido no final da equação. Adicionando o respectivo posicionamento do centro após a equação.

var angulo:Number = Math.PI/90;
var newAngulo:Number = 0;

addEventListener(Event.ENTER_FRAME,EnterFrame);

function EnterFrame(e:Event) {
	newAngulo += angulo;
	ob.x = Math.cos(newAngulo) * 100 + stage.stageWidth/2;
	ob.y = Math.sin(newAngulo) * 100 + stage.stageWidth/2;
}

Desculpe pela demora na postagem de um novo tutorial,  meu computador estava com problema e eu estava super atarefado no trabalho. Mas podem deixar que tentarei voltar a periodicidade^^ abraços.

BasicView é uma classe para aplicações simples, criando uma classe extendida de basicview você não precisa ficar instanciando cameras, viewports, renderes, pois a propria classe ja faz isso.

Veja como nosso código fica muito otimizado, Neste exemplo estamos criando apenas uma esfera, utilizando um MovieAssetMaterial para importar um movieclip com o id igual a “smile” de nossa biblioteca e rotacionando um pouco a esfera com o metodo yaw.

Arquivo: ppv_basic.as

package  {
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.view.BasicView;

	public class ppv_basic extends BasicView{
		public var sphere:Sphere =  new Sphere(
             new MovieAssetMaterial("smile"), 200,10,10);
		public function ppv_basic() {
			scene.addChild(sphere);
			sphere.yaw(-125);
			startRendering();
		}
	}
}

Apesar da simplicidade eu não recomendo usar basicview para projetos complexos, mas se você estiver interessado em algum projeto muito simples seu uso é indispensavel. Para complementar a classe BasicView possui os seguintes paramêtros opcionais, seguido de suas propriedades default:

BasicView (viewportWidth:Number = 640, viewportHeight:Number = 480,
 scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target")

Espero que tenham gostado deste post, ando meio ocupado estudando diversas coisas ao mesmo tempo, também comecei a estudar a engine Away3d muito utilizada também para construção de projetos 3d no flash, similar ao papervision, podes ter certeza que logo logo estarei compartilhando este novo conhecimento com vocês. Obrigado pela sua visita e até o proximo post

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.

Olá pessoal , para dar continuidade ao nosso estudo sobre papervision, hoje vamos falar sobre mais um tipo de material que podemos utilizar nos nosso objetos primitivos a textura MovieMaterial. Antes de começamos a falar sobre esse material vamos falar sobre um problema que ocorria com a classe MovieAssetMaterial.

Quando aprendemos sobre MovieAssetMaterial, passávamos uma string como parâmetro e importávamos de nossa biblioteca um movieclip onde o valor da propriedade linkage era igual da string referida. Mas a classe MovieAssetMaterial não aceita importar um movieclip que tenha come base uma classe que necessite de um parâmetro.

A classe MovieMaterial utiliza como parâmetro a instanciação de um movielip ao invés de uma string referindo sua propriedade linkage, com isso seu movieclip padrão não necessariamente precisa estar na bibliote, você pode trabalhar com um movieclip já instanciado, assim você pode utilizar o método gotoAndStop para indicar outro frame antes de ter instanciado ele como material..Outra vantagem é a possibilidade de utilizar um movieclip da biblioteca que tenha como base uma classe que exija parâmetro.

Construtor

Para criarmos um MovieMaterial devemos instanciar um objeto do tipo MovieMaterial.
Nosso único parâmetro obrigatório é um do tipo DisplayObject que é a referencia de nossa textura.

var  material:MovieMaterial =  new MovieMaterial(movieAsset);

movieAsset (DisplayObject): Referencia de um movieclip existente carregado na memória ou no stage.
Transparent (Boolean): Define se a textura possuirá transparência. [opcional]
Animated (Boolean): Define se o movieclip sera animado [opcional]

Tutorial

Neste tutorial eu quis brincar um pouco e mais uma vez dou uma demonstração de tile system com papervison, mas desta vez vamos ter uma classe que se comportará como movieclip aonde receberá como parâmetro um número que definirá qual vetor vai utilizar para criar o cenário, depois utilizaremos como material nosso cenário, A parte relacionada a papervision não terá mistério nenhum pois estarei usando a estrutura do tutorial anterior relacionado a materiais.

Arquivos

Neste tutorial trabalharemos com os seguintes arquivos:
1- MovieMaterial.fla
2- main.as
3- faceField.as: Classe que criará um cenário tile system para se comportar como material

MovieMaterial.fla:

1- faceField: Movieclip
2- obTile:MovieClip
3- main (definir como classe principal)

faceField.as

Esta classe não existe mistério nenhum, seu construtor recebe um numero como parâmetro e se for 1 desenha o vetor map1 e se for outro desenha o vetor map2. Em seguida percorre a seqüência de loops para desenhar o tile.

package
{
    import flash.display.MvieClip;
    public class faceField extends MovieClip
    {
        public var map1:Array = [
        [1,1,1,1,1,1,1,1,1,1,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,1,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,1,1,1,0,0,0,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,1,1,1,1,1,1,1,1,1,1],
        ];

        public var map2:Array = [
        [1,1,1,1,1,1,1,1,1,1,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,0,0,0,1,1,1,0,0,0,1],
        [1,0,0,1,0,0,0,1,0,0,1],
        [1,0,0,1,0,0,0,1,0,0,1],
        [1,0,0,0,0,0,1,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,1,0,0,0,0,0,1],
        [1,0,0,1,1,1,1,1,0,0,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,1,1,1,1,1,1,1,1,1,1],
        ];
        public function faceField (n:Number)
        {
            for (var j =0; j<11; j++)
            {
                for (var i=0; i<11; i++)
                {
                    var t:MovieClip = new obTile();
                    addChild (t);
                    t.x = i * 20;
                    t.y = j * 20;
                    if (n==1)
                    {
                        t.gotoAndStop(map1[j][i]+1);
                    }
                    else
                    {
                        t.gotoAndStop(map2[j][i]+1);
                    }
                }
            }
        }
    }
 }

main.as

Nossa classe principal não possui nenhum mistério, utilizamos a estrutura do tutorial papervision materiais.

Utilizamos apenas MovieMaterial para formação das faces do cubo, com a diferença apenas na maneira de que são chamadas desta apenas uma fogem do padrão.

    skinTile1.gotoAndStop(1);
    skinTile2.gotoAndStop(2);
    faceMovTile1 =  new MovieMaterial(skinTile1);
    faceMovTile2 =  new MovieMaterial(skinTile2);

Apesar dos objetos terem sidos criados no começo da classe só neste ponto que instanciamos os objetos para se portar como material, desta maneira garante que os moviesclips vão estar em seus respectivos frames antes de instanciarmos os materiais.

package
{
    //flash
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.Event;
    //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.MovieMaterial;
    // objeto
    import org.papervision3d.objects.primitives.Cube;

    public class main extends Sprite
    {
        public var cena:Scene3D;
        public var viewport:Viewport3D;
        public var camera:Camera3D;
        public var renderer:BasicRenderEngine;
        //Material
        public var skinMaterial1:MovieClip = new faceField(1);
        public var faceMov1:MovieMaterial = new MovieMaterial(skinMaterial1);

        public var skinMaterial2:MovieClip = new faceField(2);
        public var faceMov2:MovieMaterial = new MovieMaterial(skinMaterial2);

        public var skinTile1:MovieClip = new obTile();
        public var skinTile2:MovieClip = new obTile();
        public var faceMovTile1:MovieMaterial;
        public var faceMovTile2:MovieMaterial;

        //objetos Primitivos
        public var obCube:Cube;

        public function main ()
        {
            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 = 600;
            camera.zoom = 1;
        }
        public function Objetos ():void
        {
            skinTile1.gotoAndStop(1);
            skinTile2.gotoAndStop(2);
            faceMovTile1 =  new MovieMaterial(skinTile1);
            faceMovTile2 =  new MovieMaterial(skinTile2);

            //Cube
            obCube = new Cube(
                new MaterialsList(
                {front: faceMov1,
                 back: faceMov1,
                 left: faceMovTile1,
                 right: faceMovTile2,
                 top: faceMov2,
                 bottom: faceMov2}
                )
            ,220,220,220,1,1,1);
            cena.addChild (obCube);

            addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
        }
        public function Loop (e:Event):void
        {
            obCube.yaw (-4);
            obCube.pitch (-2);
            renderer.renderScene (cena,camera,viewport);
        }
    }
}

Espero que tenham gostado do tutorial, apesar de MovieMaterial ser uma textura bem útil não devemos esquecer das outras texturas, é sempre bom usar a textura certa para cada momento assim deixa o programa mais leve. Ao que parece vocês já devem estar enjoados de exemplos com cubo, por isso tentarei mudar um pouco de objeto para o próximo tutorial, estou dando uma olhada em coisas interessantes com o objeto “Plane” quem sabe ele não vira tema do nosso próximo tutorial de papervision. Obrigado pela visita e volte sempre.