Thursday, March 29, 2007

Soundjotter

FuturLab team member Dan has recently reworked the Soundjotter website for his band of the same name.

Soundjotter is a fine example of Dan's musical genius, especially when you consider he's responsible for most of the electronic music found on Prism too.

Check it out: Soundjotter

Oh, did I mention he can Illustrate and Animate and code ActionScript 3.0 games as well?

Makes me sick (only kidding Dan, I loves ya ;)

New FuturLab Game - Fuel

What do you do when you've got some spare time? Play games online? Read some blogs?

Nah... make an Abstract Audio Puzzle Game!

Well, that's what I asked Dan to do, and he came back with this idea in about five minutes...





... and we're still working on it a month later, but the to-do list is getting shorter by the day and it should be ready to unleash early next month...

I can't wait!

Saturday, March 24, 2007

Great Games Experiment

A social networking site that doesn't just feel like a waste of time!

The Great Games Experiment is such a simple idea; a place online for people who make games to share space with people who play them. There are sites that have done this in the past, but the (extensive and well realised) features on GGE are geared heavily toward showcasing games at any stage of development, and encouraging community feedback.

It covers the whole spectrum of games including Flash, and what's most exciting to me is that there's no difference in terms of presentation and features between games made in Flash, and games made on every other platform; Flash games and console games are given the same level of exposure. This obviously helps to keep the site fresh because Flash games are generally fast to develop and can be submitted to the site regularly.

Our Flash game Prism has been been reviewed a few times and is receiving good exposure on the site because of it. The administrator for the Flash Devs group selected it to be showcased on their group page too, which further helps to put our game demo in front of players.

I think the GGE is great, go check it out!

Friday, March 02, 2007

Eureka 3D

The penny has dropped on how to create a 3D object in Flash; something that has evaded my understanding for too long. I'm going to attempt to explain it here, to give other people a shot at understanding it, and to help me nail it once and for all!

Virtual 3D to Actual 2D

To present a 3D object in Flash, we have to convert a hypothetical three dimensional location (x, y, z) into an actual two dimensional location on the screen (x, y). To do this we have to use a formula which scales the x and y coordinates of an object relative to a centre point.

Let's use an analogy to describe this formula, as I find that's the easiest way to learn (and to teach).

We are Flash



Consider for a moment that our field of vision represents a 2D coordinate system with the origin (0,0) set at whatever we're focusing on. Anything to the left of that focus point is in the negative x region, anything above is in the negative y region, anything to the right is positive x and anything below is positive y.

House in the country



Imagine walking down a drive to a house in the country. A chimney at the top left corner of the house starts off near the centre of our vision because the house is quite far away, but gradually moves upwards and toward the left of our vision as we move closer. Likewise a pond on the right hand side of the house starts off fairly close to our central point of focus, and gradually moves further right and down, until we've walked past it.



The x and y values associated with the chimney and the pond are being scaled in relation to our centre point of focus (the front door); anything in a negative region will become more negative, and vice versa.

This scaling is achieved by using a combination of the Z value (how close we are to the house) and our field of view.

There is no Field of View in Flash!?

In mapping 3D to a 2D screen and giving the effect of perspective, we scale the amount of impact the Z position of the object has on its x and y coordinates. We do it using the field of view value as a modifier because it's our real-world field of view that determines the amount of perspective distortion that we see with our eyes.

However, there is no such thing as field of view in Flash, so we set up an artificial field of view value which can be adjusted to achieve the right balance of perspective distortion for the 3D scene.

If the field of view is really small (such as 1), a Z value of 100 would have a great impact on the scale of the x and y values, creating massive visual distortion. Conversely, setting an extremely high field of view will diminish the significant effect of scaling that the Z value has on the x and y, creating a flattened image with next to no perspective at all.

--------------------------------------------------------------------------------------------------

This is most easily understood by thinking that the field of view diminishes the significance of the Z value; the higher the field of view, the less impact the Z value has in scaling the x and y values.

--------------------------------------------------------------------------------------------------

A standard value for a natural looking scene is around 300 using the formula described below.

2D to 3D Formula

scaleRatio = fieldOfView/(fieldOfView + Z);

This is the formula, but let's break it down so that we understand it

//=====[ with a low field of view ]======//
scaleRatio = 10/(10+100)

scaleRatio = 0.09, creating massive distortion when applied to x and y


//=====[ with a high field of view ]=====//
scaleRatio = 10000/(10000+100)

scaleRatio = 0.9, which is very close to 1, creating minor distortion

--------------------------------------------------------------------------------------------------

Code:

// a natural-ish value for fieldOfView, play around with it
var fieldOfView = 300;

// calculate scaleRatio using a stored Z value for an object
var scaleRatio= fieldOfView/(fieldOfView + zPos3D);

// apply the scaling on the x and y in relation to the centrePoint
var xPos2D = (centrePointX + xPos3D) * scaleRatio;
var yPos2D = (centrePointY + yPos3D) * scaleRatio;

// position the object in 2D space
mc.x = xPos2D;
mc.y = yPos2D;

--------------------------------------------------------------------------------------------------

Of course, you still have to move these 3D coordinate values around, updating the 2D values on each frame, but this represents the building blocks of rendering 3D in Flash!


Woohoo... Thanks to Seb, Alan and Kirupa.com :D