FITC Amsterdam Interview About Gaming

April 11th, 2011

Mr. Chris Allen and me featured in this video interview from FITC Amsterdam 2011.

Posted in Uncategorized | 1 Comment »

How To Rotate A Cube In 3D With Matrix

April 4th, 2011

Another simple trick to avoid locks when rotating objects in 3D.

Goal: rotate a cube in all axes and avoid axes to switch.

See the problem in a video:

1. Consider following scenario (WRONG):

Demo | Full source code

protected function init():void{
	box = new Box(200,200,200,2,2,2);
	box.setMaterialToAllFaces(new FillMaterial(0xFF0000,1,1));;
}
 
protected function onMouseMove(event:MouseEvent):void{
	if(!isDragging)
		return;
 
	var deltaX:int = lastX - event.stageX;
	var deltaY:int = lastY - event.stageY;
 
	lastX = event.stageX;
	lastY = event.stageY;
 
// IMPORTANT PART
	box.rotationZ += deltaX*Math.PI/180;
	box.rotationY += deltaY*Math.PI/180;
 
	camera.render();
}

When you use rotationZ and rotationY together you will find that by rotating the cube you switch axes and at the end you rotate different axes than you wanted at the beginning.

2. Solution: rotate with Matrix

Demo | Full source code

protected function init():void{
	box = new Box(200,200,200,2,2,2);
	box.setMaterialToAllFaces(new FillMaterial(0xFF0000,1,1));;
}
 
protected function onMouseMove(event:MouseEvent):void{
	if(!isDragging)
		return;
 
	var deltaX:int = lastX - event.stageX;
	var deltaY:int = lastY - event.stageY;
 
	lastX = event.stageX;
	lastY = event.stageY;
 
// IMPORTANT PART
	var matrix:Matrix3D = box.matrix;
 
	matrix.appendRotation(deltaX,new Vector3D(0,0,1));
	matrix.appendRotation(-deltaY,new Vector3D(1,0,0));
 
	box.matrix = matrix;
 
	camera.render();
}

See correct version – rotating a cube with:

Also if you have a different solution – don’t hesitate to share it. I am pretty sure, there are more ways to do this.

Tags: 3D, actionscript, as3, flash, gimbal lock
Posted in Uncategorized | 5 Comments »

First steps with 3D in Flash

March 24th, 2011

Building 3D games and apps in general might look like a big step for developers, who did only 2D programming before. The aim of my 3D tutorial series is to show you, that it’s pretty straightforward to start thinking in 3 dimensions.

(Try CubeRotator app)

As a 3D programmer you usually combine following things together:

View/Scene

- e.g. 800×600 rectangle

Camera
3D objects

- primitives (Cube, Plane, Sphere)
- models (imported from file via Collada, 3DS, etc.)
- 3D objects are placed in a 3D container

Materials

- color fill
- textures/bitmaps
- environment materials and other advanced or intelligent materials

Lights

- Directional
- Point light
- Omni light

Shadows
Physics
Animations
Shaders

– little programs that can change visual look of models by changing geometry (vertex shader) or pixels on a material (fragment shader), shaders are very widely used in 3D programming and you can use Adobe Pixel Bender 3D to create them

All currently available Flash 3D engines are slightly different in terms of API, but learning one over the another doesn’t take long – differences are mainly in the features and speed of development – some provide less features, but it’s easier to work with them, others are more powerful, but take more time do something. All in all – pick the one that suites you most:
- Away3D
- Alternativa 3D
- Flare3D
- Sophie3D
- Yoghurt3D
- Minko

(some of them have Molehill versions already available)

Let’s create a simple scene with a red box, watching it from top – visible as a square.

Alternativa 3D 7.6 code: (run example | source)

public function Alternativa1()
{
	camera = new Camera3D();
 	camera.view = new View(stage.stageWidth, stage.stageHeight);
	camera.z = -500; // zoom out
	addChild(camera.view);
 
	container = new Object3DContainer();
	container.addChild(camera);
 
	cube = new Box();
	cube.setMaterialToAllFaces(new FillMaterial(0xFF0000));
	container.addChild(cube);
 
	stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
 
protected function onEnterFrame(event:Event):void
{
	camera.render();
}

Away3D 4 Broomstick (Molehill): (run example | source)

public function Away1()
{
	view = new View3D();
	view.camera.z = -500; // zoom out
	addChild(view); // add to the sprite
 
	container = new ObjectContainer3D();
	view.scene.addChild(container); // add to scene
 
	cube = new Cube()
	cube.material = new ColorMaterial(0xFF0000)
	container.addChild(cube); // add to container
 
	stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
 
protected function onEnterFrame(event:Event):void
{
	view.render();
}

Flare3D code: (run example | source)

public function Flare1()
{
	scene = new Scene3D(this);
	scene.camera.setPosition( 0, 0, -50 ) // zoom out
 
	cube = new Cube();
	cube.setMaterial(new FlatColorMaterial("red",0xFF0000));
	scene.addChild(cube);
 
	// see that there is no need for calling render() in Flare3D
}

As you can see, it’s basically same approach, just with little differences. Of course more differences come with more code written, just pick one that is better for you.

Try adjusting camera position:

Open CubeRotator (simple app, that helps you understand how position and rotation work)

Away3D code:

view = new View3D();
view.camera.z = -500;
view.camera.y = -350;
view.camera.x = -350;
view.camera.rotationX = 45;
view.camera.rotationY = 0;
view.camera.rotationZ = -45;
addChild(view); // add to the sprite

*Note that all frameworks are slightly different with +/-
*For instance in Flare3D camera.rotationX will be -45, not 45. In Alternativa you will be setting a radian value.

We will do more stuff in the next tutorial. Loading models, rotations, camera hovering, lights, materials, and so on. I will keep these tutorials short, but focused on particular issues.

Examples and Sources

Alternativa1 | source
Away1 | source
Flare1 | source

CubeRotator | source

Posted in Uncategorized | 6 Comments »

Videos of 3D Flash Molehill in Action

December 1st, 2010

Great news everyone!

Flash Player 10.2 beta is now available to download. It features lot of great stuff including StageVideo, which dramatically reduces CPU costs and renders video on GPU.

Read the blog post about FP 10.2 by Thibault Imbert about it.

Get it here: http://labs.adobe.com/technologies/flashplayer10/

Tutorial: Getting started with StageVideo on Adobe Developer Connection

Posted in Uncategorized | 4 Comments »

Hey amigo!
I am Tom Krcha, Gaming Evangelist at Adobe. These are my notes
Follow @tomkrcha