## Archive for the 'Flash' Category

15
Jan
10

### Away3DLite: Translating 3D Coordinates to 2D Screen Position

I have been playing with the awesome Away3DLite. Playing with 1000s of polygons is very liberating, but still doesn’t mean we can slack off with the optimisation. It is important to take any opportunity to lessen the number of calculations performed per frame by the player.

To this end, I was just putting together a 2D layer above my 3D scene when I found that the camera.screen function (available in the standard Away3D library) that projects 3D coordinates(x,y,z) to 2D screen positions (x,y) wasn’t present.

In Away3DLite we have to calculate this ourselves. The salient information can be gained through a model or container’s viewMatrix3D property. To get an accurate screen position the the x,y,and z positions are drawn from viewMatrix3D. Each of x and y are divided by the z value and any screen offsets are applied.

Here is the method as a function:

public function calc2DCoords(screen_element:*):Point
{

var posn:Vector3D = screen_element.viewMatrix3D.position
var screenX:Number = posn.x / posn.z;
var screenY:Number = posn.y / posn.z;

return new Point(screenX+screenW_offset,screenY+screeH_offset)
}

Pass through a screen element (a model, primitive or object container) and the 2D result will be returned. The screenW_offset and screenH_offset are required if the ‘view’ has been centred on the stage.

I have put together a demo here to demonstrate the function. I load a couple of models into the scene and let a 2D info panel follow each around the screen.

Got to keep a close eye on those tubbies

18
Nov
09

### Ranged Numbers. Non-Linear response curves for Sliders and TouchPads.

I’ve been building a few apps recently and have found that a linear response over a range of numbers has been a poor solution. I needed to be able to apply different response curves to user interface components (knobs, sliders, touchpads) as well as on screen display objects, characters, etc.

I needed a good name for the class, but instead came up with the pretty poor moniker ‘RangedNumbers’. I’ll change it when I come up with a better one.

So the idea is, a ‘ranged number’ is instantiated, initialised for the required range then a simple call with a value in that range will result with a percentage that can be applied to the intended recipient accordingly. I realised that an inverted curve would be handy too, so have added that functionality.

I have included exponential and powered curves as well as linear.

So to use the ranged number system:

//Instantiate and Initialise
var ranged_num:RangedNumber=new RangedNumber(min,max)
//Where min is the minumum number in the range and max is the maximum

//In use:
trace ( ranged_num.calculatedRangeNumber(value, curve_type, inverted) )
//Where:
// value is the value within the range to be calculated
// curve_type is the type of response curve.
// Curve types: RangedNumber.LINEAR, RangedNumber.EXPONENTIAL, RangedNumber.POWERED
// inverted is a boolean flag. True if the inverted response is required

I have put together two demos to show the RangedNumber class in action:

Firstly using a Slider component. Grab the slider and watch how the markers are represented on all the displayed response curves.

A demonstration of how to implement non-linear response curves

Now here is the same demo but this time using a TouchPad. Click on the touchpad to engage. In this demo horizontal movement controls the standard curves and vertical the inverted.

How to implement non-linear response curves with a touchpad

The source for these demos and the Ranged Number class can be found here: Ranged Number ZIP

12
Nov
09

### FOTB09 Full Presentation Video Now Available

The full video of my presentation at Flash on the Beach is now available. “How to build a game in 3 minutes” became “How to build 3 games in 3 minutes” (just showing off).

Flash on the Beach 09: 3 Games in 3 Minutes

On the back of this presentation I have now been invited to do a full hour presentation at FOTB2010, which is great news!!

I am still (slowly – too many projects on the go at once) building the Games Sketchpad and will post the app and some source as soon as it is ready. It’s already great fun to play with – just needs a bit more functionality.

29
Sep
09

### Flash on the Beach (Part #1): Elevator Pitch… AS3 Genie Effect Transition.

My ‘build a game in three minutes’ session at this year’s excellent Flash on the Beach somehow morphed into building three games in three minutes.

My initial thinking was to code on the fly and put together something simple – I wanted physics and the ability to render a 3D version. It only took a couple of experiments to realise that trying to write AND compile in a strict 3 minutes would be near impossible. I needed some assets and wanted to produce these in the allotted time too.

While cogitating the pitch, I had a lot of game commissions and ideas come through my desk. I clicked that a Game Scratchpad would be a really handy app. Something that I could sketch out a game with – to demonstrate an idea during a brainstorm – at the speed of thought.

More on the Game Sketchpad in Part#2. See the last two minutes of the pitch here (not sure what happened to the first minute):

In the meantime, I got asked by quite a few about the transition effect I used on my slides. To save time I did all of my presentation from within a swf. I wanted a fun quirky transition. The Genie (Ginny) effect is newish – I’d spotted it on wonderfl.net by Clockmaker (inspired by Fladdict). So I grabbed the method and adapted it to allow me to fire it off from a given point – connecting relevant sprites (humorous and tasteless in good measure).

I have packaged the Genie effect here as a Class, with example implementation.

//Usage
import com.swingpants.effect.GenieBmd
var gb:GenieBmd=new GenieBmd(400,300,20)// image width, height, number of segments
gb.startGenie(bmd) // Bitmapdata
gb.fireAtPoint(50,100,3) //x, y, speed (in secs)

Swingpant's AS3 Genie Effect implementation

In part#2 I will explain how the Game Sketchpad works, the component parts, the swf and some source code.

Genie Effect (zip): source

19
Sep
09

### Wonderfl Checkmate Challenge: Cityscape 3D

Wonderfl is a service that allows for AS3 coding and swfs to be built online. The site has been running a series of challenges called the Checkmate Challenge. Each month an AS3 superstar sets a challenge each for professionals and amateurs.

Takayuki Fukatsu set a professional challenge to develop an interesting application that used dot patterns to create a visual effect.

I decided to build a generated 3D Cityscape – using the dot patterns to give me a limited variation of windows.

I needed an algorithm that would randomly create the design for a skyscrapers. The building block shapes I decided on were a cube, a cylinder and a tapered cylinder. Each skyscraper was given a maximum number of iterations and a target height. The base was built and each subsequent iteration was at most 70% of the size of the level below it.

3D engine Papervision was used, my choice was restricted here as I was building within Wonderfl.net, which doesn’t have Away3D (my usual weapon of choice) installed. PV3D was fine and did the job well.

The city was built on a grid system, this means I will be able to add roads, traffic, etc at a later date. It employs a very random tower creation system, maybe a Fibonacci sequence pseudo random system would give more useful and recreatable results.

The 3D Cityscape was awarded Knight status and elicited the comment: “The texture of 3D city composed of a monochrome dot was minimal and very fantastic.”

Cityscape 3D

Sources and swf available here.

04
Sep
09

### Swingpants presenting at Flash on the Beach 09

I’m honoured to be doing a presentation at this year’s Flash on the Beach. My pres is titled “How to make a game in three minutes“, and will be part of the Elevator Pitch: 3 Minute Wonders session. Why is it called an Elevator Pitch? This is based on the maximum amount of time you’d have in a lift (elevator) to explain an idea to someone. 20 Flash luminaries (new and old) will be quick fire presenting cool ideas, concepts, code, design or latest work. It’s sure to be a (data) blast.

In “How to make a game in three minutes” I will be making a game on the fly. This will incorporate a few topics I’ve been interested in and using heavily, such as colour mapping, collision detection, physics and more. Only three minutes? Yeah, got to prep a few libraries which hopefully I can get ready in time. Certainly I won’t have any time to make mistakes. I’ll post the content here as soon as it is available.

FOTB is a great event. The best conference in the calendar, which every year has the world’s best Flash/Actionscript/Design talent: Mario Klingemann, Andre Michelle, Carlos Ulloa, Joa Ebert, Grant Skinner, Ralph Hauwert, Seb Lee Delise +++ as well as over 1200 delegates.

Flash on the Beach Speaker

30
Apr
09

Quick post to describe how to apply a gradient mask to a display object in AS3 (& AS2).

#2 Put the object to be masked on the stage.
#3 Set both the mask and the ‘object to be masked’ to cacheAsBitmap
#4 Apply the mask to the object

In #AS3

In #AS2

It really is as simple as this.
Note to designers: Gradient masks can’t obviously be done directly from the IDE (see below), but these three lines can be placed on the timeline if so desired.

To put a gradient mask on dynamic text you will need to place the text within a container (movieclip/sprite) and mask that.

The object to be masked can also contain animation, text or video though this will require a bit more processor as the bitmap will need to redraw on each frame. Often this is well worth it as the effect can be great.

There is a way of achieving this same effect with no code at all and here it is:

#2 Put the object to be masked on the stage.
#3 Put both of these items into a movieclip/sprite (the container) making sure the mask is on a layer above the object
#4 Give the mask a blend mode of ‘Alpha’
#5 Give the ‘container’ a blend mode of ‘Layer’

And there you have it. Gradient masking achieved with blendModes and absolutely no code.

I used each method to mask an embedded video – then placed an instance on the display list and ran at varying frame rates.
Initially there was negligible difference between the code and blend mask methods. I ramped up the FPS to 120 and put four instances of the video on screen. With this set up the code method (cacheAsBitmap) was up to 4% faster than the blendMode Mask method.

Conclusion: The code method is faster but very marginally. If you are desperate for a bit of extra juice go with code.

12
Mar
09

### Fastest Way to Copy An Array: Concat() or Slice(0)

What is the fastest way to copy an array? Concat or Slice? There is only one way to find out. FIGHT!

OK, so we can dismiss any kind of for-loop – far too slow, so that leaves us with:
1) array.concat() – i.e. concatenate an array onto nothing and deliver that as a new array.
2) array.slice(0) – i.e. return a new array consisting of all of the elements of the old array – from 0 till the end (up to a max of 16777215)

I’ve set up an array with a cool 1million entries (ok, it is not big, and it is not clever so it certainly isn’t cool). I need to copy this. The following code executes each method once on every iteration. It keeps a running total and records the average time each takes. I’ve limited the code to 100 iterations.

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.utils.*;
public class TestConcat extends Sprite
{
private var iteration_count:int=0
private var concat_total:int=0
private var slice_total:int=0
private var clone_total:int=0
private var tf:TextField = new TextField()
private var test_array:Array = [];

public function TestConcat():void
{
tf.x = tf.y = 100; tf.width = 600;

//Set up array to copy
for(var i:int = 0; i < 1000000; i++) test_array.push(i);
//Mouse click to rerun test
//First run
go()
}

private function go(e:Event = null):void
{
iteration_count=concat_total=slice_total=clone_total=0
}

//Loop through tests
private function iterate(e:Event=null):void
{
concat_total +=testConcat()
slice_total += testSlice()
clone_total += testByteArrayClone()
iteration_count++
tf.text = "Av. Concat time=" + (concat_total / iteration_count)
+ "ms Av. Slice time=" + (slice_total / iteration_count)
+ "ms Av. BA Clone time=" + (clone_total / iteration_count) + "ms";
if(iteration_count<99) removeEventListener(Event.ENTER_FRAME,iterate)
}

//test array slice
private function testSlice():int
{
var time_slice_start:Number = getTimer();
var slice_copy:Array = test_array.slice(0);
return getTimer()-time_slice_start
}

//test array concat
private function testConcat():int
{
var time_concat_start:Number = getTimer();
var concat_copy:Array = test_array.concat();
return getTimer()-time_concat_start
}

//test BA Clone method
private function testByteArrayClone():int
{
var time_concat_start:Number = getTimer();
var concat_copy:Array = clone(test_array);
return getTimer()-time_concat_start
}

//Clone method for Deep Objects(via Bruno)
private function clone(source:Object):*
{
var myBA:ByteArray = new ByteArray();
myBA.writeObject(source);
myBA.position = 0;
}
}
}

On my laptop I’m clocking the concat at 14ms and the slice at over 29ms.

So a conclusive result. concat is twice the speed (with large arrays – the difference diminishes considerably with smaller arrays)

Give the code a few run throughs and see what you get. Let me know if your results are markedly different.

UPDATED:
I have updated the code and added a swf to try out here and the source code here

Test the array copy for yourself

I’ve also added in a test for the Byte Array Clone method suggested by Bruno (see his comments below). This method seems a great one for copying ‘deep’ arrays – arrays of complex objects (arrays, objects or other types). In this context and test (copying shallow arrays) the instantiation, writing and reading adds too much overhead. I’ll need to test this in a useful context: with deep arrays.

Demo: Array Copy test
Source: Source.as