Papervision 2 -> 4. Uso de la clase Base
(Este tutorial es una traduccion del tutorial de Luke:
http://papervision2.com/4-basic-template-usage/)
Ahora que ya tienes creada tu clase Base, seguramente tendras mucho interés en probarla.
Vamos a empezar simplemente creando un cono rotando, algo como esto:
Usando la clase Base que has creado, puedes rapidamente hacer este simple ejemplo. Primero, crea un proyecto en FlashDevelop. Llamalo “ConeExample” o algo parecido. Ve a “Project > Properties…” y escribe cone.swf en el campo Output File. En la pestaña Classpaths, necesitas añadir 2 rutas de clases esta vez. Primero, en esa pestaña, pincha en AddClasspath…, busca el directorio de GreatWhite y pincha OK.
Ahora necesitas añadir la clase Base al proyecto. Pulsa en “Add Classpath…” de nuevo, y esta vez entra en el directorio donde guardaste la clase Base. Encuentra la carpeta que contiene PaperBase.as y pulsa OK.
Ahora necesitamos crear el codigo.
Click con el boton derecho en “ConeExample” en el arbol de proyecto, ve a Add y elige New Class.
Nombra la clase Main.as.
Click derecho en Main.as, en el arbol de proyecto y selecciona Always Compile.
Ahora estas listo para el codigo.
Primero, añadimos las siguientes lineas al Main.as, despues de la linea “package{”
import PaperBase; import org.papervision3d.objects.primitives.Cone;
Esas lineas importarán todos los paquetes que necesitamos.
Ahora, cambia la linea:
public class Main{
por
public class Main extends PaperBase{
Esto hara que nuestro proyecto importe todas las funciones y el codigo que hemos escrito en PaperBase.as. Ahora podemos añadir unas pocas lineas de codigo para que nuestro proyecto funcione.
Necesitaremos añadir un objeto Cono al escenario. Directamente debajo de esa linea:
public class Main extends PaperBase{
insertaremos esta:
public var cone:Cone = new Cone();
Esta linea creará un objeto cono y lo alojará en la variable “cone”.
Ahora, cuando el proyecto este corriendo, el codigo en “public function Main()” sera ejecutado. Queremos inicializar nuestro esqueleto Papervision cuando ejecutemos el proyecto. Para esto, cambia la funcion para que quede asi:
public function Main(){ init(); }
Esto ejecutará la funcion init() de nuestra clase PaperBase cuando corramos el proyecto.
Ahora necesitamos anular dos funciones de PaperBase. Son init3d() y processFrame().
Necesitaremos añadir nuestro cono a la escena en init3d, entonces lo rotaremos un poco cada vez que processFrame() sea llamado. Para hacerlo añade este codigo justo debajo de la funcion Main().
override protected function init3d():void{ cone.scale = <span style="color: #0000ff;">3</span>; <span style="color: #008000;">// Make the cone bigger</span> cone.pitch(<span style="color: #0000ff;">-40</span>); <span style="color: #008000;">// Tilt it towards the camera</span> default_scene.addChild(cone); <span style="color: #008000;">// Add it to the scene</span> } <span style="color: #0000ff;">override protected function</span> processFrame():<span style="color: #008080;">void</span> { cone.yaw(<span style="color: #0000ff;">5</span>); <span style="color: #008000;">// Rotate it a bit</span> }
Estas dos funciones sobreescritas correran en lugar de las originales en PaperBase. Cuando ejecutes el proyecto, deberías ver el cono rotando! Prueba jugando con los valores, añadiendo y cambiando un poco las dos funciones que hemos comentado.
El codigo final deberia quedar como esto:
package { import PaperBase; import org.papervision3d.objects.primitives.Cone; public class Main extends PaperBase { public var cone:Cone = new Cone(); public function Main() { init(); } override protected function init3d():void { cone.scale = 3; cone.pitch(-40) default_scene.addChild(cone); } override protected function processFrame():void { cone.yaw(7); } } }
Papervision 2 -> 3. Creando la clase Base Papervision
(Este tutorial es una traduccion del tutorial de Luke:
http://papervision2.com/3-creating-a-papervision-base-template/)
La primera cosa que debes hacer cuando creas un proyecto de Papervision 3D es crear una “Clase Base” que te servirá de plantilla para agilizar el inicio de cada proyecto Papervision que empiezes.
1) Creando un proyecto nuevo en FlashDevelop
Abre el FlashDevelop. En la pagina de inicio, pincha en New -> Project… En la parte de proyectos recientes.

La ventana de New Project aparecerá. En ActionSCript 3, pulsa Empty Project. Escribe el nombre en la caja de Name y pincha en la caja “Create Directory for Project”.
Pincha OK para cerrar el cuadro de dialogo. Veras el nuevo proyecto en la ventana de Proyecto. Necesitamos añadir un archivo al proyecto.
Lo primero que tienes que hacer en tu proyecto es importar el codigo de Papervision asi tu programa podrá usarlo. Del menú de arriba, elije Project, entonces Settings.
La caja de Project Setting aparecerña. Pulsa en la pestaña Classpaths y pincha en Añadir Classpath.
Ahora busca la carpeta donde descargaste el codigo de GreatWhite en el tutorial anterior. Elige la carpeta de greatwhite (deberia contener carpetas llamadas org, fl and com) y pulsa OK.
Ahora deberías tener un icono que parece un ladrillo de Lego conteniendo el codigo GreatWhite en tu proyecto.

Ahora necesitas hacer un script para ser ejecutado cuando corramos nuestro programa. Click en el boton derecho y en el arbol de proyecto ve a Add > New Class.

Nombra a la clase PaperBase.as y pincha en OK. Ahora crearemos el archivo Main.as en nuestro editor. El codigo es como este:
/** * ... * @author Default * @version 0.1 */ package { public class PaperBase { public function PaperBase() { } } }
Esta es una clase en blanco. Primero, necesitamos compilar esta clase cuando ejecutemos el proyecto. Para hacerlo, boton derecho en Main.as en el arbol de proyecto y elije “Always Compile“.
Tambien tenemos que especificar la ruta del archivo de salida SWF. Para hacerlo, en el menu de Project, elije Propiedades.
En la pestaña Output en General, veras una caja de texto llamada “Output File”. Pincha en Browse y elije donde colocar el archivo de salida.
Ahora, cambia el codigo fuente por este: (Los comentarios del codigo explican cada paso):
package { // These lines make differant 'pieces' available in your code. import flash.display.Sprite; // To extend this class import flash.events.Event; // To work out when a frame is entered. import org.papervision3d.view.Viewport3D; // We need a viewport import org.papervision3d.cameras.*; // Import all types of camera import org.papervision3d.scenes.Scene3D; // We'll need at least one scene import org.papervision3d.render.BasicRenderEngine; // And we need a renderer public class PaperBase extends Sprite { //Must be "extends Sprite" public var viewport:Viewport3D; // The Viewport public var renderer:BasicRenderEngine; // Rendering engine // -- Scenes -- // public var default_scene:Scene3D; // A Scene // -- Cameras --// public var default_camera:Camera3D; // A Camera public function init(vpWidth:Number = 800, vpHeight:Number = 600):void { initPapervision(vpWidth, vpHeight); // Initialise papervision init3d(); // Initialise the 3d stuff.. init2d(); // Initialise the interface.. initEvents(); // Set up any event listeners.. } protected function initPapervision(vpWidth:Number, vpHeight:Number):void { // Here is where we initialise everything we need to // render a papervision scene. viewport = new Viewport3D(vpWidth, vpHeight); // The viewport is the object added to the flash scene. // You 'look at' the papervision scene through the viewport // window, which is placed on the flash stage. addChild(viewport); // Add the viewport to the stage. // Initialise the rendering engine. renderer = new BasicRenderEngine(); // -- Initialise the Scenes -- // default_scene = new Scene3D(); // -- Initialise the Cameras -- // default_camera = new Camera3D(); // The argument passed to the camera // is the object that it should look at. I've passed the scene object // so that the camera is always pointing at the centre of the scene. } protected function init3d():void { // This function should hold all of the stages needed // to initialise everything used for papervision. // Models, materials, cameras etc. } protected function init2d():void { // This function should create all of the 2d items // that will be overlayed on your papervision project. // User interfaces, Heads up displays etc. } protected function initEvents():void { // This function makes the onFrame function get called for // every frame. addEventListener(Event.ENTER_FRAME, onEnterFrame); // This line of code makes the onEnterFrame function get // called when every frame is entered. } protected function processFrame():void { // Process any movement or animation here. } protected function onEnterFrame( ThisEvent:Event ):void { //We need to render the scene and update anything here. processFrame(); renderer.renderScene(default_scene, default_camera, viewport); } } }
Esta bien comentado, asi que deberia explicar todo lo que ocurre.
Cuando ejecutes el proyecto, veras una pantalla en blanco, esto es normal porque aún no hemos añadido nada en la escena.
Puedes descargar el archivo fuente con los comentarios o sin ellos desde este enlace: fuente
Ahora usaremos este archivo como base de cualquier proyecto de Papervision que hagas, y con unas pocas lineas de codigo puedes tener muy buenos resultados.
Papervision 2 -> 2. Obteniendo el codigo fuente
(Este tutorial es una traduccion del tutorial de Luke: http://papervision2.com/2-getting-the-source/)
Bienvenidos al tutorial numero 2. Aqui vamos a indicar los pasos para obtener el codigo fuente de Papervision 2.
Descargar TortoiseSVN
Primeramente necesitaras instalar un cliente de Subversiones. El mejor y mas rapido es Tortoise. Descargalo de esta pagina (normalmente querras el de 32bit msi, tu sabras si quieres el de 64bit): http://tortoisesvn.net/downloads
La instalacion es muy simple, ejecuta el archivo msi y sigue los pasos.
Obteniendo GreatWhite usando TortoiseSVN
1.) Crea una nueva carpeta en algun sitio facil de recordar. Yo he creado la mia en “C:\Greatwhite\”.
2.) Entra en la carpeta y pulsa boton derecho. En el menu desplegable, pulsa SVN Checkout…

3.) En donde pide la URL Repository, inserta la siguiente: http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/
(Para CS4, usad: http://papervision3d.googlecode.com/svn/trunk/branches/cs4/src/)
4.) Click Ok. El codigo fuente de Papervision3D 2.0a sera descargado en la carpeta que has seleccionado. Dependiendo de tu conexion, tardara una media de 1 minuto.
Ahora ya tienes el codigo de Papervision3D

Papervision 2 -> 1. Preparando las herramientas
(Este articulo es una traduccion de Papervision2 -> 1.Preparing your tools )
Elegir un IDE
Hay varios entornos de desarrollo disponibles. El mas usado para desarrollar Papervision es Adobe Flex 2. Podeis bajaros una demo de Flex de 30 dias, o podeis comprarlo. La desventaja de esto es que es caro.
Hay una alternativa gratis si usas Windows. La gente de FlashDevelop ha creado un IDE gratuito que junto con el Flex 2 SDK, puede ser usado como una alternativa gratuita a Adobe Flex. A continuacion vamos a ver como instalar FlashDevelop.
Descargando FlashDevelop y Flex SDK
Lo primero que necesitas es descargar el Flex SDK de la pagina de Adobe.
Puedes usar este link directo: Flex 3 SDK (81 Mb)
Ahora necesitas descargar una version de FlashDevelop desde su website.
Yo estoy usando la version 3.0.0 Beta5 in estos tutoriales, pero no deberia importar que version elijas.
Puedes descargar esta version usando este link: FlashDevelop 3.0.0 Beta8 (3.4 Mb)
Intalando FlashDevelop
NOTA: Esta instalacion requiere el Java Runtime Enviroment version 1.6. Si aun no lo tienes, puedes descargarlo aqui: http://filehippo.com/download_java_runtime/
Primero, doble click en el icono del instalador de FlashDevelop. Deberia aparecer esta ventana:

Pulsa en Siguiente, lee y acepta los Terminos de Licencia, entonces veras esta pantalla:

Yo añadi la opcion para permitir multiples instancias de la aplicacion, pero eso ya es eleccion tuya.
Pulsa Siguiente, entonces Install
Ya has instalado FlashDevelop en tu sistema. Aun necesitamos configurar el Flex SDK para poder usarlo para desarrollar Papervision 3D.
Instalando Flex SDK
Primero, descomprime los archivos del zip que has descargado.
Yo he descomprimido los archivos en C:\FlexSDK\ pero tu puedes extraerlos donde quieras.
Ejecuta FlashDevelop. En el menu de arriba del todo, pulsa en Tools, ahora en el menu desplegable selecciona Program Settings. Ahora veras la ventana de Configuracion.
En la lista de la izquierda, selecciona AS3Context.
A la derecha, veras una lista de opciones de configuracion. Encuentra la opcion de “Flex SDK Location” y pulsa en la caja de texto.

Aparecera un boton con puntos suspensivos. Pulsalo y elije el directorio donde has descomprimido los archivos de Flex SDK. Asegurate de elegir la carpeta que contiene las subcarpetas “asdoc, bin, frameworks” etc…
Pulsa en OK y cierra el panel de configuracion.
FlashDevelop esta configurado y listo para usar.
Traduccion de los Tutoriales de Papervision2.com
Hola a todos…
Este es el primer post, de presentacion supongo. En realidad es para avisaros que quiero traducir los tutoriales de papervision2.com que TANTO me han ayudado a empezar con PV3D… asi que nada, esta vez no me enrollo, que los disfruteis (y los aprovecheis).
