daflash.com

PushButton Engine

Chris Jacobsen — Sun, 25 Sep 2011 23:42:05 +0000

I’ve recently gotten reacquainted with the PushButton Engine. I’ve heard about it in the past and dismissed it in favor of Flixel since it was easier for me to understand and more akin to how I would structure my code. But ever since I’ve gotten into Unity 3d this component style framework is making much more sense to me especially when it comes to games. I can definitely see the advantages in code re-use and sharing and that’s exactly what this engine is trying to accomplish.

The tutorials on their site don’t go into much depth at the moment and may be a bit underwhelming for someone wanting to start building complex games. But if you dig on the web you’ll find more information and tools that make it an attractive option. The team also worked on the Torque game engine which is quite impressive so I trust they’ll be taking it in the right direction.

Flash gaming is going to get a whole lot more exciting with these sort of developments and Flash 11 is just around the corner. I can already envision how a 3d component could integrate with the PushButton framework while re-using all it’s existing conventions. This is definitely something worth investing some time to get more familiar with.

Creating a Skybox with Papervision and Terragen in Flex

Chris Jacobsen — Mon, 26 Oct 2009 02:15:18 +0000

A skybox is a cube that is textured with a distant landscape on its 6 sides which is viewed by a camera at its center. This creates the illusion that you are inside a vast area without having to render too many polygons.

Our first step will be creating the textures. I will be using Terragen Classic v0.9 to render the landscape, you can find it here. Once you’ve downloaded, installed, and started up Terragen you’ll be presented with a window like this:

In the ‘Rendering Control’ window match the settings to the image below, starting from the red square at the top.

Now click on the ‘Image Size…’ and then the ‘Camera Settings…’ buttons and match them to the following images. If you want more detailed images you could set the width and height in ‘Render Settings’ to 1024.

Now open the ‘Cloudscape’ window by clicking the icon to the left with the clouds on it.

Change the ‘Sky size’ value to 8192 and x out.

Lets see what it looks like! Click the ‘Render Preview’ button in the ‘Rendering Control’ window, you should see something like this:

So far so good, lets add some terrain and water. In the ‘Landscape’ window press the ‘Generate Terrain…’ button.

Now press the ‘Generate Terrain’ button in the new window and close it.

Back in the ‘Landscape’ window press the ‘Modify…’ button.

In the new window set the height range from -16 to 16, click the ‘Set Height Range’ button, and close the window.

Lets preview our image again, you should get something like this:

Now we are ready to render our 6 textures for the skybox. For the front texture we will set ‘Camera Orientation’ to 0, 0, 0 (head, pitch, bank) and press the ‘Render Image’ button.

Once it has finished rendering click the ‘Save’ button and name it ‘front.bmp’.

Repeat the last few steps for the top, bottom, left, right, and back textures using the camera orientation values from the image below.

You should now have 6 bmp files, you will need to convert them to JPEGs in order for them to work with Papervision. Lets take a look at the ActionScript, I’m using Flex Builder 3 with Papervision 2. Here is the SkyboxComponent class:

package {
import flash.events.Event;

import mx.core.UIComponent;
import mx.events.ResizeEvent;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

public class SkyboxComponent extends UIComponent{
public var boxWidth:int=512;
public var boxHeight:int=512;

public var front:String="images/front.jpg";
public var back:String="images/back.jpg";
public var left:String="images/left.jpg";
public var right:String="images/right.jpg";
public var top:String="images/top.jpg";
public var bottom:String="images/bottom.jpg";

private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;

public function SkyboxComponent(){
super();
//init on 'added_to_stage' event so width and height are set properly
this.addEventListener(Event.ADDED_TO_STAGE,init);
//resize viewport when component resizes
this.addEventListener(ResizeEvent.RESIZE,onResize);
}

private function init(event:Event):void{
//setup papervision
viewport=new Viewport3D(this.width,this.height);
renderer=new BasicRenderEngine();
scene=new Scene3D();
camera=new Camera3D(60,10,Number.POSITIVE_INFINITY,true);
camera.zoom=10;
camera.focus=Math.round(((boxWidth+boxHeight)/2)/20);
camera.x=0;
camera.y=0;
camera.z=0;
this.addChild(viewport);
//here we will place the images, by using planes instead of a cube we can ensure correct image orientation
//front plane
var mat:BitmapFileMaterial=new BitmapFileMaterial(front);
var plane:Plane=new Plane(mat,boxWidth,boxHeight,8,8);
plane.z=boxWidth/2;
scene.addChild(plane);
//back plane
mat=new BitmapFileMaterial(back);
plane=new Plane(mat,boxWidth,boxHeight,8,8);
plane.z=-(boxWidth/2);
plane.rotationY=180;
scene.addChild(plane);
//left plane
mat=new BitmapFileMaterial(left);
plane=new Plane(mat,boxWidth,boxHeight,8,8);
plane.x=-(boxWidth/2);
plane.rotationY=-90;
scene.addChild(plane);
//right plane
mat=new BitmapFileMaterial(right);
plane=new Plane(mat,boxWidth,boxHeight,8,8);
plane.x=boxWidth/2;
plane.rotationY=90;
scene.addChild(plane);
//top plane
mat=new BitmapFileMaterial(top);
plane=new Plane(mat,boxWidth,boxHeight,8,8);
plane.y=boxHeight/2;
plane.rotationX=-90;
scene.addChild(plane);
//bottom plane
mat=new BitmapFileMaterial(bottom);
plane=new Plane(mat,boxWidth,boxHeight,8,8);
plane.y=-(boxHeight/2);
plane.rotationX=90;
scene.addChild(plane);
//render on 'enter_frame' event
this.addEventListener(Event.ENTER_FRAME,onEnterFrame);
}

//the camera will always stay in the center, only its rotation should be changed
public function setCameraRotation(x:Number,y:Number,z:Number):void{
camera.rotationX=x;
camera.rotationY=y;
camera.rotationZ=z;
}

private function onEnterFrame(event:Event):void{
//render
renderer.renderScene(scene,camera,viewport);
}

private function onResize(event:ResizeEvent):void{
if(viewport!=null){
//resize viewport
viewport.viewportWidth=this.width;
viewport.viewportHeight=this.height
}
}
}
}

Here is the class that rotates a camera around some cubes. If you were making a game or application this would contain the 3d objects you are displaying. The reason I separated this from the SkyboxComponent class is because you may want to clip distant polygons by setting the cameras far variable for better performance, by keeping them separated the skybox will never get clipped out.

package {
import flash.events.Event;

import mx.core.UIComponent;
import mx.events.ResizeEvent;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.special.CompositeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

public class RotateAroundCubeComponent extends UIComponent{
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;

private var rotationX:Number=0;
private var rotationY:Number=0;
private var rotationZ:Number=0;

private var randomizeRotationFrame:int=0;

public function RotateAroundCubeComponent(){
super();
//init on 'added_to_stage' event so width and height are set properly
this.addEventListener(Event.ADDED_TO_STAGE,init);
//resize viewport when component resizes
this.addEventListener(ResizeEvent.RESIZE,onResize);
}

private function init(event:Event):void{
//setup papervision
viewport=new Viewport3D(this.width,this.height);
renderer=new BasicRenderEngine();
scene=new Scene3D();
camera=new Camera3D(60,10,2000,true);
camera.zoom=100;
camera.focus=10;
this.addChild(viewport);
//create cubes material
var cubeMaterial:CompositeMaterial=new CompositeMaterial();
var wireframeMaterial:WireframeMaterial=new WireframeMaterial(0x000000,1,1);
var colorMaterial:ColorMaterial=new ColorMaterial(0xFFFFFF);
cubeMaterial.addMaterial(wireframeMaterial);
cubeMaterial.addMaterial(colorMaterial);
var materialList:MaterialsList=new MaterialsList();
materialList.addMaterial(cubeMaterial,"all");
//create cubes
var cube:Cube=new Cube(materialList,20,20,20);
scene.addChild(cube);
cube=new Cube(materialList,20,20,20);
cube.x=-40;
scene.addChild(cube);
cube=new Cube(materialList,20,20,20);
cube.x=40;
scene.addChild(cube);
cube=new Cube(materialList,20,20,20);
cube.z=40;
scene.addChild(cube);
cube=new Cube(materialList,20,20,20);
cube.z=-40;
scene.addChild(cube);
cube=new Cube(materialList,20,20,20);
cube.y=40;
scene.addChild(cube);
cube=new Cube(materialList,20,20,20);
cube.y=-40;
scene.addChild(cube);
//render on 'enter_frame' event
this.addEventListener(Event.ENTER_FRAME,onEnterFrame);
}

private function onEnterFrame(event:Event):void{
//randomize rotation value
if(randomizeRotationFrame%200==0){
rotationX=(Math.random()/2)-.25;
rotationY=(Math.random())-.5;
rotationZ=(Math.random()/8)-.0625;
}
randomizeRotationFrame++;
//place camera
camera.x=0;
camera.y=0;
camera.z=0;
camera.rotationX+=rotationX;
camera.rotationY+=rotationY;
camera.rotationZ+=rotationZ;
camera.moveBackward(1600);
//render
renderer.renderScene(scene,camera,viewport);
}

public function getCameraRotation():Object{
if(camera!=null){
return {x:camera.rotationX,y:camera.rotationY,z:camera.rotationZ};
}
return null;
}

private function onResize(event:ResizeEvent):void{
if(viewport!=null){
//resize viewport
viewport.viewportWidth=this.width;
viewport.viewportHeight=this.height
}
}
}
}

And here is the applications MXML file. Notice that I’m updating the skybox cameras rotation based on the rotatingCube camera with an enterFrame event.

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
[CDATA[
//update the skybox camera based on the rotatingCube camera
private function setSkyboxCameraRotation(event:Event):void{
var cameraRotation:Object=rotatingCube.getCameraRotation();
if(cameraRotation!=null){
skybox.setCameraRotation(cameraRotation.x,cameraRotation.y,cameraRotation.z);
}
}
]]>
mx:Script>
<mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Panel title="Skybox Example" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" width="90%" height="90%">
<mx:Canvas width="100%" height="100%">
<local:SkyboxComponent id="skybox" boxWidth="512" boxHeight="512" front="images/front.jpg" back="images/back.jpg" left="images/left.jpg" right="images/right.jpg" top="images/top.jpg" bottom="images/bottom.jpg" width="100%" height="100%"/>
<local:RotateAroundCubeComponent id="rotatingCube" enterFrame="setSkyboxCameraRotation(event);" width="100%" height="100%"/>
mx:Canvas>
mx:Panel>
mx:HBox>
mx:Application>

You can download the Flex project here.

Using Papervision as a Component in Flex

Chris Jacobsen — Sat, 10 Oct 2009 23:30:40 +0000

It may come in handy at times to take advantage of all the UI components in Flex to manipulate a 3d scene in Papervision. In this example I add a Papervision component that renders a sphere to the applications MXML document. I’m using Papervision 2 and Flex Builder 3.

Here is the component class:

package {
import flash.events.Event;

import mx.core.UIComponent;
import mx.events.ResizeEvent;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.special.CompositeMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

public class PV3DComponent extends UIComponent{
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var sphere:Sphere;
private var rotationX:Number=.5;
private var rotationY:Number=-.5;
private var rotationZ:Number=.5;

public function PV3DComponent(){
super();
//init on 'added_to_stage' event so width and height are set properly
this.addEventListener(Event.ADDED_TO_STAGE,init);
//resize viewport when component resizes
this.addEventListener(ResizeEvent.RESIZE,onResize);
}

private function init(event:Event):void{
//setup papervision
viewport=new Viewport3D(this.width,this.height);
renderer=new BasicRenderEngine();
scene=new Scene3D();
camera=new Camera3D(90,10,2000,true);
camera.z=-100
camera.zoom=10;
camera.focus=100;
this.addChild(viewport);
//create sphere
var sphereMaterial:CompositeMaterial=new CompositeMaterial();
var wireframeMaterial:WireframeMaterial=new WireframeMaterial(0x000000,1,1);
var colorMaterial:ColorMaterial=new ColorMaterial(0xFFFFFF);
sphereMaterial.addMaterial(wireframeMaterial);
sphereMaterial.addMaterial(colorMaterial);
sphere=new Sphere(sphereMaterial,10,16,16);
scene.addChild(sphere);
//render on 'enter_frame' event
this.addEventListener(Event.ENTER_FRAME,onEnterFrame);
}

private function onEnterFrame(event:Event):void{
//rotate sphere
sphere.rotationX+=rotationX;
sphere.rotationY+=rotationY;
sphere.rotationZ+=rotationZ;
//render
renderer.renderScene(scene,camera,viewport);
}

private function onResize(event:ResizeEvent):void{
if(viewport!=null){
//resize viewport
viewport.viewportWidth=this.width;
viewport.viewportHeight=this.height
}
}

public function setSphereRotation(x:Number,y:Number,z:Number):void{
rotationX=x;
rotationY=y;
rotationZ=z;
}
}
}

And here is the applications MXML:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:classes="classes.*" xmlns:local="*">
<mx:Script>
[CDATA[
import mx.events.SliderEvent;
private function onRotationSliderChange(event:SliderEvent):void{
pv3dComponent.setSphereRotation(xRotationSlider.value,yRotationSlider.value,zRotationSlider.value);
}
]]>
mx:Script>
<mx:HBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Panel title="Papervision3D Flex Component Example" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" width="90%" height="90%">
<mx:VBox width="100%" height="100%">
<local:PV3DComponent id="pv3dComponent" width="100%" height="100%"/>
<mx:HRule width="100%"/>
<mx:HBox width="100%">
<mx:Label text="X Rotation:" fontWeight="bold"/>
<mx:HSlider id="xRotationSlider" minimum="-5" maximum="5" value=".5" change="onRotationSliderChange(event);" width="100%"/>
mx:HBox>
<mx:HBox width="100%">
<mx:Label text="Y Rotation:" fontWeight="bold"/>
<mx:HSlider id="yRotationSlider" minimum="-5" maximum="5" value="-.5" change="onRotationSliderChange(event);" width="100%"/>
mx:HBox>
<mx:HBox width="100%">
<mx:Label text="Z Rotation:" fontWeight="bold"/>
<mx:HSlider id="zRotationSlider" minimum="-5" maximum="5" value=".5" change="onRotationSliderChange(event);" width="100%"/>
mx:HBox>
mx:VBox>
mx:Panel>
mx:HBox>
mx:Application>

You can download the Flex project here.

My New Blog

Chris Jacobsen — Sat, 10 Oct 2009 02:14:54 +0000

Finally I’m going to put something on my website! This is my first time using WordPress and it’s pretty neat, there are so many plugins! It’s too bad you can’t sort them by ratings or downloads on their website. Maybe I could scrape it and put together my own sortable list.

Lately with all my free time I’ve been getting into PaperVision3d. I’m putting together a 3d map maker, it’s really simple for now and I’m focusing on low polygon counts and high frame rates so it won’t be the prettiest thing. I’ll see where it goes from there and add features as time permits.