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.
