Archive for the 'as3' Category


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.

import flash.display.Sprite;
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
stage.addEventListener(MouseEvent.CLICK, go);
//First run

private function go(e:Event = null):void
addEventListener(Event.ENTER_FRAME, iterate)

//Loop through tests
private function iterate(e:Event=null):void
concat_total +=testConcat()
slice_total += testSlice()
clone_total += testByteArrayClone()
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.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.

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

Fastest way to copy an array

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


Keeping Lip-Sync in Sync

I’m currently working on a project where I have been handed a lot of movieclips with animated mouths to be sync-ed with spoken audio triggered from the library. Each sentence had been put together in a separate movieclip. Obviously this method exposes the frame rate on slow computers leading to loss of lip-synchronisation. I was told to go through all of the moveiclips and add the audio to the timeline – a very inelegant solution that would take a lot of time with poor results.

I came up with a simple solution that basically just pushes the playhead forward everytime it drops out of sync. I use the frame rate and getTimer to work out where the playhead should be on each iteration. If the playhead drops then it is moved to the position it should be at.

Very simple – saved me a lot of time.

private const FPS:int = 30//Current frame rate
private const ERROR_MARGIN:int=1
private var start_time:int
private var last_frame:int=0//Keep track of last frame to see if mc has stopped playing
private var loop_started:Boolean=false

public function sayPhrase(phrase:String) : void
last_frame=0 //reset last frame
start_time = getTimer()

private function lipSyncTracking(e:Event = null):void
if (mouth_mc.mouth)
var cframe:int = mouth_mc.mouth.currentFrame //get the current frame
var ctime:int = getTimer() //current time
var time_expired:Number = (ctime – start_time )
var target_frame:int = Math.floor((FPS/1000)*time_expired)
if(target_frame>1 && cframe>1)loop_started=true //need to check for looping
if (cframe == last_frame || (cframe==1 && loop_started))
{//MC must have stopped or looped back to beginning
{//If frame is out by the margin of error then correct
if (target_frame >= cframe + ERROR_MARGIN)

last_frame = cframe


Global Gam Jam – The Deep – How to produce a string in water with AS3

I attended the Global Game Jam 2009 recently – forming the team ‘Fish Don’t Flock’. We produced a game called ‘The Deep’ – in 48 sleepless hours.

In the game you get to control a deep sea bio-luminescent creature that is formed from two orbs and a membrane. The creature eats plankton by enveloping it inside it’s membrane.

There were a couple of innovations we managed fit into the game. The first I will detail here, the other will be in my next post.

(i) We needed to make the membrane behave like a ribbon under water:

I’m a huge fan of Box2D, and have done a few AS3 rope experiments. To get the behaviour I wanted, I figured that I could chain together a series of balls within Box2D, turn off the gravity for the top-down underwater view effect. This way I could detect collisions and if all creatures have mass within the physics engine they would interact correctly with the membrane.

The Deep: Rope membrane

The Deep: Rope membrane

(1) Create a chain out of box2D circles.

(2) Link the chain circles using revolute joints.

(3) Draw membrane/rope by drawing from joint point to joint point and add orb sprite.

(4) Remove rendering of circles.

The source is available for this game here.
(Obviously it was a rush job so expect a lot of code imperfection.)


Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Swingpants at Flash on the Beach

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates