Feeds:
Posts
Comentários

Archive for the ‘papervision’ Category

Continuando a construção de nosso game temos que fazer o senário.

Esse tutorial vai ser dividido em pelo menos em  2 partes para não ficar muito grande num post apenas.

Pensei em fazer uma pequena casa primeiro para podermos aprender como fazer um cenário, então modelei uma pequena maquete virtual.

Peguei uma planta baixa de uma casa, que é muito facíl de se arrumar na internet.

Planta sendo modelada no Blender

Comecei a modelar primeiro as paredes, usei o minimo de poligonos possiveis.

Pos o  Desing de jogos e WEb tem que pensar também no desempenho das midias onde serão expostos seus trabalhos.

Aqui no nosso caso a Web.

Planta sendo modelada no Blender paredes

Coloco as texturas nas paredes e no chão de nosa humilde casa.

E a casa  fica assim:

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

try {
var pageTracker = _gat._getTracker(“UA-15902220-1”);
pageTracker._trackPageview();
} catch(err) {}

Anúncios

Read Full Post »

Continuação do post Anterior sobre modelos 3D no Papervision.

Agora que modelamos o perssonagem vamos para aparte do script no flash.

Abra o flash inicie um novo arquivo actionscript 3.0.

Comece o codigo a seguir. Aconcelho e não copiar mas escrver o codigo para compreender melhor as funções.

package {
//importando as class necessárias
import flash.events.Event;
//importando a class de eventos do flash
import flash.events.KeyboardEvent;
//importando a class KeyboardEvente para podermos usar o teclado
import flash.ui.Keyboard;
//importando a classe Keyboard que será usa para detectar as teclas do teclado.
import org.papervision3d.events.FileLoadEvent;
//importando a class FileLooadEvent do papervision onde usaremos
//a propiedade LOAD_COMPLETE, garantindo que todos ao arquivos sejam carregados.
import org.papervision3d.objects.DisplayObject3D;
//importando a class DisplayObject3D para podermos usar as propriedades
//dessa class para manipulação dos objetos, como nesse casso o perssonagem colada
import org.papervision3d.core.animation.clip.AnimationClip3D;
//importando a class AnimationClip3D para podermos fazer um controle da animação
import org.papervision3d.objects.parsers.DAE;
//importando a class DAE, class importante para podermos carregar o modelo 3D do Max3D
import org.papervision3d.view.BasicView;
//A class BasicView faz a mesma coisa que a class Sprit
//sendo que a class BasicView você não precisa ficar importando e
//configurando camera, viewport, scene, já ta tudo basicamente configurado.
[SWF(width=”700″, height=”600″, backgroundColor=”0x000000″, frameRate=”30″)]
//estou setando a janela do play do flahs manualmente.
public class Modelo3D extends BasicView
//declaramos a class Modelo3D e extendemos a class BasicView
{
private var modelo3D:DisplayObject3D;
//declaramos a 1ª variavél onde instaciamos  como sendo um
//objeto do tipo DiaplayObject3D

public function Modelo3D()
//declaramos a função construtora que tem o mesmo nome da class principal
{

stage.frameRate = 40;
//na class BasicView podemos setar o frameRate usando o metodo super

init();
//carregamos a função init()
startRendering();
//carregamos o renderizador
}
public function init()
//aqui iremos construir a cena 3D na função já inicializada init()
{
modelo3D = new DAE();
/*declaramos a variavel modelo3D que já estava instanciada como um DisplayObject3D
como contendo um arquivo do tipo DAE, onde começamos a importar o arquivo DAE feito
no 3DMax.*/
modelo3D.addEventListener(FileLoadEvent.LOAD_COMPLETE, _completo);
/*adicionamos um Evento no addEventListener, onde o ouvinte é o modelo3D
evento do tipo FileLoadEvent, propiedade LOAD_COMPLETE que vai dizer se o arquivo foi
carregado completamente, onde chamamos a função _completo como resposta do evento.*/
DAE(modelo3D).load(“sonic3D_0.dae”);
//aqui endicamos o local onde está o arquivo do tipo DAE .

}
private function _completo(e:FileLoadEvent):void
//função _completo que dara a resposta ao evento FileLoadEvent.LOAD_COMPLETE.
{
scene.addChild(modelo3D);
/*Carregamos o modelo3D a sena
declaramos que se o evento LOAD_COMPLETE for realizado com sucesso
adicionamos o modelo3D a DisplayLIst*/

var animationRight:AnimationClip3D = new AnimationClip3D(“right”,0,15.2);
var animationLeft:AnimationClip3D = new AnimationClip3D(“left”,15.2,35);
/*decalramos a variaveis que usaremos para controlar a animação feita no max3D
onde instanciamos na variavel animationRight que é um objeto do tipo
AnimationClip3D ,que terá o nome right como referencia ao controle do frame, que será
feito de 0 a 15.2 segundos, isso é feito devido ao total de tempos calculado pelo total de
frames. para saber o total de tempo só dividir total de frame por segundos.
um exemplo se temos uma animação feita com 360 frames com 30 frames por segundo
então é só dividir 360/30 que vai dar um total de 12 segundos, no meu casofoi um total
de 35 segundo onde eu instanciei que a primeira metade da animação tera de 0 a
15.2 segundos e apartir dai eu iniciarei a segunda
metade da animação que será de 6 a 12 segundos.*/

DAE(modelo3D).animation.addClip(animationRight);
DAE(modelo3D).animation.addClip(animationLeft);
/*aqui instanciamos o controle da animação ao modelo3D
apartir de agora podemos inicializar um evento que poderá controlar
essa animação, dizemos que a animação contida no modelo3D terá um controle
pelo metodo addClip, instaciamos as variaveis que faram referencia a esse
controle*/

DAE(modelo3D).play(“right”);
/*digo que a animação ira começar pela 1ª metade da animação que será de 0 a 15.2
segundos*/

stage.addEventListener(KeyboardEvent.KEY_DOWN, _controle);
//Adiciono um EventListener para captar um evento de teclado.
}
public function _controle(e:KeyboardEvent):void{
/*Na função _controle eu adiciono um “if” para testar quais as tecals
foram clickadas*/
if(e.keyCode == Keyboard.LEFT)
/* No “if” digo se a tecla que foi clickada é a seta da esqueda
comece a animação da segunda parte*/{
DAE(modelo3D).play(“left”);
//Dou um play na segunda parte da animação

}if(e.keyCode == Keyboard.RIGHT)
/*Nesse segundo “if” digo se atecla que foi pressionada é a da direita
do teclado então comece a animação pelo primeiro frame.*/
{
DAE(modelo3D).play(“right”);
// Dou um play na animação
}

}

override protected function onRenderTick(e:Event=null):void
/*É nessa função que rederizo tudo, Aqui estou sub escrevendo a função
onRenderTick já existente na class BasicView.*/
{

super.onRenderTick();
//Mando rederizar a cena
modelo3D.z = -960;
//Digo a posição z do modelo
modelo3D.scale=9;
//A escala do tamanho do modelo
modelo3D.rotationY -= 1;
//Rotaciono o modelo no eixo Y

}
}
}

Salve o arquivo onde está seu modelo 3D .dae.

Abra um novo arquivo FLA 3.0 e instancie o nome da class em propriedades.

De um CTRL+ENTER.

Tudo certo vai ficar assim.
Click para ver o video

Read Full Post »

Vamos usar agora um controle de sena pelo mouse e teclado.
Isso será um preparativo para próxima aula onde pretendo montar um game.
Nesta aula também usaremos um modelo Collada, extenção muito usada por jogos onde amaioria dos modeladores 3D tem a capacidade de exportar( Blender, 3d Max, Scketup, Maya).
Só que no caso do 3d max o plugin que vem com ele dá muitos bugs então sugiro baixarem esse aki,
ColladaNexGen :http://sourceforge.net/projects/colladamaya/ que é muito recomendado por todos os proficionas que usam papervision e 3d max.

Vamos começar usando o arquivo base da aula anterior:

O perssonagem em 3D que iremos usar Será modelado no Blender mas isso não impede de ser modelado em outro progragama como 3D Max, basta apenas depois importar como Collada.

Modele seu perssonagem usado bones ou outro metodo como objetos 3D da sena pivot e etc…

Faça uma pequena sena, onde no meu caso tem 35 segundos.

Ao terminar vá em file (tanto no Blender como no 3D max)

No Blender e no Max3D Vá em Export.

Agora no Blender vá em  COLLADA 1.4(dae). (ATENÇÂO tem que ser o 1.4).

Vai aparecer uma janela amarela onde você vai dizer onde vai ficar o arquivo (tem que ficar na mesma pasta do SWF do flash), as configurações são as que estão na imagem.
Tuto Sonic Blender

Agora no Max 3D depois de export, no Submenu va em COLLADA(dae), as configurações estão na imagem.

Tuto Sonic Max 3D

Agora podemos  ir para o flash.

Continuaremos no proximo post por que senão vai ficar muito grnade o tutorial num unico post então até o proximo post.

Read Full Post »

Para quem tem dificuldade em saber como botar um movieClip na bibliotece do flash segue um tudo sobre como se faz e como linkar ele para ser exportado para o
papervision.

Continuando nossa sere de tutos, como de prache:
Abra o flash inicie um novo projeto, primeira opção para criar um arquivo FLA.

Depois de configurar a dimenção do palco, cor e outros parametros que não vem ao caso discutir aqui, click em “OK”.
Ai vamos na aba File.

Lá tem um submenu chamado Impot.
Vá em Import to Libriry.

Diga onde está o bitmap e click em “Abrir”.
Depois desse passo vamos linkar o “bitmap”(que nesse caso foi um arquivo do tipo “gif”).
Vá em “library”, depois click em “Symbol1”, depois de celecionado lá em baixo tem um icone com um “i” num circulo azul, click nele.

Agora vai aparecer uma janela de edição da biblioteca, click em “Export for actionscript”,
Ai vai ser extendido um prompte onde você vai dar um nome ao simbolo, esse nome será referência no nosso script.

Click em “OK”.
Bom o seu bitmap já está linkado na biblioteca do flash, salve em alguma pasta de sua escolha, onde também iremos depositar os outros arquivos do projeto.
Vamos continuar agora abrindo um novo arquivo “AS”,aperte “CTRL+N” ou vá em file e depois em New.( não fecho o arquivo “FLA”)
Comece o nosso package.

package{

import flash.events.Event;
//Importamos a classe “Event” do flash, classe necesária para
//os eventos que ocorreram em nossa cena

import org.papervision3d.view.BasicView;//aprtir de agora usaremos a classe BasicView
//ela nos permite uma maior praticidade, pois não precisamos configurar a camera, viewport
//e scene, tudo já está pronto parausso(rsrsrs), quero dizer podemos começar sem ter que importar
//as classes Camera3D, Viewport3D e Scene3D.
import org.papervision3d.objects.primitives.Plane;
//Importamos um Plano
import org.papervision3d.materials.MovieAssetMaterial;
//Importamos a classe MovieAssetMaterial, que nos permite importar um movieClip da biblioteca
//do flash como material para um objeto3D
[SWF(width = “600”, height = “480”, backgroundColor =”0x98D2FE” )]//Estou instanciando o tamanho
//da janela do player do flash e a cor de fundo manualmente

public class Biblioteca extends BasicView{//estendo minha classe para a BasicView
//tornando minha class uma Sub-class da BasicView

public var plano:Plane;//carrego uma varialvel com a classe Plane

public var material:MovieAssetMaterial;//carrego uma variavel com a classe
//MovieAssetMaterial

public function Biblioteca(){//função construtora
stage.frameRate = 30;//informo que minha scene vai ter 30 frames por segundo

material = new MovieAssetMaterial(“kirby”, true, true);//instancio meu
//MovieAssetMateria dizendo qual é o MovieClip da biblioteca do flash,
//se vai ter a transparência(alpha) ligado, digo que é verdadeiro(true)
//se vai ligar a animação do MovieClip digo que é verdadeira(true)
material.doubleSided = true;//informo que vai aparecer dos dois lados

plano = new Plane(material, 600, 550, 4, 4);//instâncio a Classe Plane com
// o materia aser usado, a largura, altura, os seguementos horizontais e
//os seguimentos verticais
scene.addChild(plano);//adiciono o plano a cena

startRendering();//chamo o render
}

override protected function onRenderTick(e:Event=null):void{//aqui sub-escrevo a
//função onRenderTick que é da classe BasicView
super.onRenderTick();//Mando rederizar a cena
}

}

}

Se estiver tudo certo vai ficar assim:

Tuto_Papervision_3D_by_vanderels.jpg

Read Full Post »

Estou iniciando uma série de tutorias sobre Papervision 3D,
Com o objetivo de ajudar a comunidade que fala portugues,
pois os tutorias são todos comentados, linha por linha.
Espero que totos gostem.
Não deixem de comentar.

Read Full Post »

Bom Continuando!!

Vamos usar o mesmo arquivo “AS”.(só copie o codigo do arquivo anterior e cole num “AS” novo)

Agora iremos não só criar um elemento 3D como também carregar com uma textura sua textura.

Bom vamos comesar.

Abra o flash, inicie um novo arquivo FLA que é a primeira opeção.

Bom no flash Cs3 a aba propriedade é em baixo, no Cs4 é na direita,

procure o campo class, vai ter um prompt(espaço para escrever algo).
Escreva o nome da class (sem o “.as”).
Que será Cubo3D.
Salve o arquivo.

Até ai tudo bem.

Agora vamos iniciar um novoa arquivo “As”.

Abra em File
New ou aperte CRTL+N

Escreva o codigo a baixo, ele esta todo comentado.
Onde temos duas “/” o flash indentifica como comentário.

package{

import flash.display.Sprite;
//Importando a classe Sprite, para poder usar
//as suas propriedades

import flash.events.Event;
//importando a class Event do flash

import org.papervision3d.cameras.Camera3D;
//class camera

import org.papervision3d.view.Viewport3D;
//importando a class Viewport3D

import org.papervision3d.scenes.Scene3D;
//importando a class Scene3D

import org.papervision3d.render.BasicRenderEngine;
//importando a class BasicRenderEgine

import org.papervision3d.objects.primitives.Cube;
//importando a class Cubo

import org.papervision3d.objects.DisplayObject3D;
//importando a class DisplayObject3D

import org.papervision3d.materials.ColorMaterial;
//importando a class ColorMaterial para usar a cor como Textura

import org.papervision3d.materials.utils.MaterialsList;
//importando a class MaterialsList para criar um array com as cores

import org.papervision3d.materials.BitmapAssetMaterial;

import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.MovieAssetMaterial;
//import org.papervision3d.materials.WireframeMaterial;

import com.greensock.*;
import com.greensock.easing.*;
//classe do TweenMax um conjunto de class
//em que torna as animações do flash muito mais leves e rapidas

public class Cubo3D extends Sprite{
//Extendendo a class Cubo3D a class Sprite, tornando a class
//Cubo3D uma sub class da Sprite

public var camera:Camera3D;
//Carregamos as propriedades da class Camera3D
//na variavel camera

public var viewport:Viewport3D;
//Carregamos as propriedades da class Viewport3D
//na variavel viewport

public var scene:Scene3D;
//Carregamos as propriedades da class Scene3D
//na variavel scene

public var render:BasicRenderEngine;
//Carregamos as propriedades da class BasicRenderEngine
//na variavel render

public var cubo3d:Cube;
//Carregamos as propriedades da class Cube
//na variavel cubo3d

public var amarelo: ColorMaterial;
//Aqui adicinaremos o material ColorMatirial
//a cada variavel com o nome da sua respectiva cor

public var laranja: ColorMaterial;
//depois de amarelo
//a laranja

public var vermelho: ColorMaterial;
//avermelha

public var preto: ColorMaterial;
//a preta

public var azul: ColorMaterial;
//a azul

public var verde: ColorMaterial;
//a verde

public var materialBiblioteca:BitmapAssetMaterial;
//Carregamos as propriedades da class BitmapAssetMaterial
//na variavel materialBiblioteca

public var mc:DisplayObject3D;
//Carregamos as propriedades da class DisplayObjeto3D
//na variavel mc

public var plano:Plane;
//Carregamos as propriedades da class Plne
//na variavel plano

public var planoMovie:MovieAssetMaterial;
//Carregamos as propriedades da class MovieAssetMaterial
//na variavel planoMovie

public var papelobj:Plane;
//Carregamos as propriedades da class Camera3D
//na variavel camera

public function Cubo3D ():void {
//Essa é a class construtora, onde contruiremos
//uma cena 3D

camera = new Camera3D();
//criando uma camera

viewport = new Viewport3D(800, 800, true, true);
//construindo uma viewport
addChild(viewport);
//adicionamos a viewport a cena

scene = new Scene3D();
//adicionamos uma cena

render = new BasicRenderEngine();
//canstruindo um render

amarelo = new ColorMaterial(0xFFFF00, 0.5, true);
//aqui instanciamos as propriedades das ColorMaterial
//como a cor, o alpha que vai de 0 a 1,toas as cores estão com alpha
//em 50% e estão com a função interativa como verdadeira(true)

laranja = new ColorMaterial(0xF7AE09, 0.5, true);
//aqui instanciamos as propriedades das ColorMaterial
//como a cor, o alpha que vai de 0 a 1,toas as cores estão com alpha
//em 50% e estão com a função interativa como verdadeira(true)

vermelho = new ColorMaterial(0xEE1111, 0.5, true);
//aqui instanciamos as propriedades das ColorMaterial
//como a cor, o alpha que vai de 0 a 1,toas as cores estão com alpha
//em 50% e estão com a função interativa como verdadeira(true)

preto = new ColorMaterial(0x000000, 0.5, true);
//aqui instanciamos as propriedades das ColorMaterial
//como a cor, o alpha que vai de 0 a 1,toas as cores estão com alpha
//em 50% e estão com a função interativa como verdadeira(true)

azul = new ColorMaterial(0x0480FB, 0.5, true);
//aqui instanciamos as propriedades das ColorMaterial
//como a cor, o alpha que vai de 0 a 1,toas as cores estão com alpha
//em 50% e estão com a função interativa como verdadeira(true)

verde = new ColorMaterial(0x81C639, 0.5, true);
//aqui instanciamos as propriedades das ColorMaterial
//como a cor, o alpha que vai de 0 a 1,toas as cores estão com alpha
//em 50% e estão com a função interativa como verdadeira(true)

materialBiblioteca = new BitmapAssetMaterial(“kirby”);
//carrego aqui um bitmap
//direto da biblioteca do flash

materialBiblioteca.doubleSided = true;
//Estou usando a propriedade doubleSided
//e instanciando ela como verdadeira(true)
//poderiamos usar a propriedade oneSid
//fazendo isso eu estou indicando que o material
//deve aparecer dos dois lados

plano = new Plane(materialBiblioteca, 400, 400, 4, 4);
//Estou aqui instanciando o objeto Plane
//carreguei ele com o material da biblioteca do flash
scene.addChild(plano);
//adiciono o plano a cena

mc = new DisplayObject3D();
//esse é um pivo que tem a caracteristica de ser envisivel
//onde o cubo cerá filiado a ele
scene.addChild(mc);
//adiciono ele a cena

planoMovie = new MovieAssetMaterial(“bolinha”, true);
//carregando um movieClip da
//biblioteca do flash dando o nome dele onde foi linkado no asset
//liguei o alpha como verdadeiro(true)

papelobj = new Plane(planoMovie, 700, 700, 7, 7);
//Estou aqui instanciando o objeto Plane
//carreguei ele com o material do tipo MovieClip da biblioteca do flash

//material.oneSide = false faz o mesmo que doubleSided = true;
//material.opposite = true; inverte a visualização da meteria

scene.addChild(papelobj);
//adicionado mais um plano acena

var color : MaterialsList = new MaterialsList();
color.addMaterial(amarelo, “front”);
//adiciono a variavle com a cor e a face do cubo corespondente
color.addMaterial(laranja, “back”);
color.addMaterial(vermelho, “left”);
color.addMaterial(preto, “right”);
color.addMaterial(azul, “top”);
color.addMaterial(verde, “bottom”);
//contruindo um array com todas as cores
//onde será nescerário para adicionar ao cubo

cubo3d = new Cube(color, 300, 300, 300);
//construindo o cubo, instanciando ele com a materia ColorMaterial
//que está carregado com a variavel color
//depois intanciamos a largura, depois altura e profundidade

mc.addChild(cubo3d);
//adicionamos o cubo a cena
//usamos o metodo de filiação para animar o cubo
//filiamos o cubo ao pivot(mc)
//o pivot(mc) será o pai e o cubo será o filho

addEventListener(Event.ENTER_FRAME, _enter);
//criamos um addEventeListener com a função ENTER_FRAME
//que irar fazer com que o render desenhe toda cena a cada evento
//a cada evento o ENTER_FRAME vai chamar a função _enter

}

public function _enter(e:Event):void{
//essa é a função que faz o render iniciar

render.renderScene(scene, camera, viewport);
//aqui diz onde o ENTER_FRAME vai detectar os eventos
//para o render

TweenLite.to(papelobj, 4, {x:400, rotationY:-100, ease:Back.easeOut});
//usei a classe TweenMax para deslocar e rotacionar o plano

//trace(plano.boundingBox().size); //cria uma caixa dizendo o tamanho do objeto 3d
plano.yaw(-8);
//fiz uma animação com o plano girando no eixo Y

cubo3d.x = -450;
//desloquei o cubo para esquerda

//cubo3d.rotationX +=5;
camera.lookAt(mc);
//indiquei a camra para olhar para o pivot(mc)

mc.rotationY +=5;
//estou rotacionando o pivot(mc)
//como o cubo está filiado ao pivot(mc)
//ocubo irá girar

//plano.scaleX =1; faz alteração na escala do eixo X

cubo3d.rotationX += 5;
//rotaciono o cubo no eixo X
//cubo3d.rotationY +=3;
}

}

}

se estiver certo o resutado será esse:

Cubo3D

Read Full Post »

Bom Continuando!!

Vamos usar o mesmo arquivo  “AS“.(só copie o codigo do arquivo anterior e cole num AS” novo)

Agora iremos  não só criar um elemento 3D como também carregar com uma textura sua textura.

Bom vamos comesar.

Read Full Post »

Older Posts »