I’ll be speaking at IGDA Switzerland in Bern in few weeks,
a great opportunity for me to talk about the Flash Platform as a gaming platform, to share the experience I had making the engine of Wazzamba and to meet new people I only “met” in twitter or in their blogs 
The meeting will take place in february 25th at “Nothing” (great name guys 
) hq in Wabern, you can find more info here in IGDA Switzerland blog.
See you there
UPDATE!!!
A new method has just been added to IObjectFactory committed on spring actionscript svn repo in order to let autowire non visual classes!! w00t!:)
Take a look at
IObjectFactory.createInstance(clazz:Class, constructorArguments:Array = null):*; |
this solves the problem and we have no longer to extend AutowiringObjectBase
Take a look to the commit http://bit.ly/dmhZWd and update your source
Thanx Roland to have done the whole work and for the support
—————
First of all a little explanation on the title of this post:
I’m having some fun with spring actionscript, an as3 IoC framework. It’s my first experience with inversion of control in actionscript and I found it a little weird at first, but now I (think I’ve) understood how it works I’m having really lots of fun with it .
Anyway, Spring actionscript provides two ways of autowiring object properties:
- for non visual objects: you define your object and its properties in the context (xml or mxml) and when that object is being created the framework automatically wires up all its properties driving into each of them the defined value.
- for visual objects: you mark your component’s properties with the custom metatag [Autowired] and when your component is added to the display list spring actionscript automatically wires up all marked properties.
But what if I want to create a non visual object at runtime and I want the framework to autowire its marked properties?
I created a base class in order to do that, it’s built upon the pureMVC extension for spring actionscript, which is actually the microarchitecture framework I’m using right now.
Here’s the code:
package { import flash.utils.describeType; import org.as3commons.lang.ClassUtils; import org.puremvc.as3.patterns.facade.Facade; import org.springextensions.actionscript.context.IConfigurableApplicationContext; import org.springextensions.actionscript.puremvc.interfaces.IIocFacade; /** * This class provides autowiring for subclasses. * * @author pigiuz * */ public class AutowiringObjectBase { private var _iocFacade:IIocFacade; public function AutowiringObjectBase() { _iocFacade = Facade.getInstance() as IIocFacade; autoWire(); } private function get container():IConfigurableApplicationContext { return _iocFacade.container; } private function autoWire():void { var typeDescription:XML = describeType(this); for each (var metaDataNode:XML in typeDescription..metadata) { if (metaDataNode.attribute("name") == "Autowired") { var host:String; var chain:String; var propertyNode:XML = metaDataNode.parent(); var property:String = propertyNode.@name.toString(); trace("Found Autowired property: " + property); var objectName:String = property; var autowireByType:Boolean = true; for each (var arg:XML in metaDataNode.arg) { if (arg.attribute("key") == "host") { host = arg.attribute("value") } else if (arg.attribute("key") == "chain") { chain = arg.attribute("value"); } else if (arg.attribute("value") == "byName") { autowireByType = false; } } if (autowireByType) { if (host && chain) { // CHAINED AUTOWIRE trace("Autowiring: " + property + " in " + this + " from " + host + "." + chain); var hostObject:Object = container.getObject(host); if (hostObject) { this[property] = hostObject[chain]; } } else { // AUTOWIRE BY TYPE var clazz:Class = ClassUtils.forName(propertyNode.@type.toString()); var objectNames:Array = container.getObjectNamesForType(clazz); if (objectNames.length == 1) { objectName = objectNames[0]; } trace("Autowiring by type: " + property + " in " + this); this[property] = container.getObject(objectName); } } else { // AUTOWIRE BY NAME trace("Autowiring by name:" + property + " in " + this); this[property] = container.getObject(objectName); } propertyNode = null; host = null; chain = null; } metaDataNode = null; } // dispose describetype typeDescription = null; } } } |
As you can see, as the constructor is called the iocFacade (the puremvc’s facade decorated in a springy fashion) is retrieved in order to be able to locate the application context (iocFacade is not needed if you are not using puremvc, just make sure you can locate the context otherwise it won’t work!) and the autoWire method is called.
Basically what autoWire() does is checking which properties are marked as [Autowired] and looking up the container for object definitions satisfying required conditions (name\type\host-chain), then wire each property with the found object.
Good thing is in order to leverage this autowiring capability you just have extend this class and create your own classes feeling free to mark properties as [Autowired].
Is there some better solution out there?
Today I spent a whole morning to figure out that AS3 sucks.
Today I’ve been implementing a simple factory method which receives a Class object and some parameters to be passed to the concrete class instance, something with a signature like this:
static public function createInstance(c:Class, ... args):Object |
BUT…the implementation of such a clear and simple method has been a bloody bath, because AS3 doesn’t support a really cool way to do really cool stuff like this 
I thought the implementation would be simply something like
static public function createInstance(c:Class, ... args):Object { return new c(args); } |
or any other easy way (python taught me to think simple ) BUT…
“new c(args);” means my class constructor accepts one parameter typed as an Array, and I really don’t want my custom classes to have this defect of form nor my custom factory not to be able to instance classes written by someone else, so the solution “classes to be instanciated by the factory must accept an array as constructor parameter” is absolutely out.
Next approach, “reflect all properties instead of having parameters passed to the constructor”… not really a solution. Not always classes’ properties have the same name\type\whatever of constructor parameters. It’s a compromise that my factory can’t accept because I wouldn’t be able to create whatever class instance but only “some” class instance :\. out.
Next approach, “use Function.apply to pass some parameters (array) to a function as they were single variables”..hey! that’s a good one! Let’s try it with some function
class MyClass{ public function myfunc(foo:String,bar:uint):void { trace(foo, bar); } } class MyOtherClass{ public function callmyfunc(... args):void { var c:MyClass = new MyClass(); c.myfunc.apply(null,args); } } |
HEY! IT WORKS! holy crap! AS3 rocks!…wait, let’s try it with a constructor function…
class MyClass{ public function MyClass(foo:String,bar:uint):void { trace(foo, bar); } } class MyOtherClass{ public function callmyfunc(... args):void { var c:MyClass = new MyClass().apply(null,args); } } |
…ok, it doesn’t work :\ and throws a runtime error :/ “Property apply not found on MyClass and there is no default value”…mmm
ok, maybe I have to reference the constructor function, but how can I do it!?
let’s try with “Class.prototype.constructor”
class MyClass{ public function MyClass(foo:String,bar:uint):void { trace(foo, bar); } } class MyOtherClass{ public function callmyfunc(... args):void { var c:Class = MyClass; var f:Function = c.prototype.constructor; } } |
…error… Class.prototype.constructor returns the type of the caller class (in this case MyClass)…
so…what can I do?
Discarded solutions:
- “classes to be instanciated by the factory must accept an array as constructor parameter”
- “reflect all properties instead of having parameters passed to the constructor”
- “use Function.apply to pass some parameters (array) to a function as they were single variables”
here’s the solution: (drums) THE CRAPY ONE!
better known as “switch it all baby”….
static public function create(c:Class, ... args):Object { switch(args.length){ case 0: return new c(); case 1: return new c(args[0]); case 2: return new c(args[0],args[1]); case 3: return new c(args[0],args[1],args[2]); case 4: return new c(args[0],args[1],args[2],args[3]); case 5: return new c(args[0],args[1],args[2],args[3],args[4]); default: throw new Error("too many arguments"); } return null; } |
if you need to pass more than 5 arguments just add some lines to the factory and you’re done…
I was completely pissed off when I found this horrible lack in AS3, really, I was about for starting to cry, so I submitted a feature request on bugs.adobe… I think it’s really a MUST for a “respectable” language, if you find it as necessary as I think take a minute to vote this feature.
https://bugs.adobe.com/jira/browse/FP-3364
You know what? I found the jump very easy and those guys at Adobe’s hq did a wonderful job on driving people into this new release of the Flex framework.
I’m not posting some code this time, just a link to a project which can be sooooooo helpful to take your dive: “Flex in a Week”.
Nothing hard, just take your time, your headphones and a good internet connection, drive your browser to http://www.adobe.com/devnet/flex/videotraining/flex4beta/index.html and start from the beginning…
If you’re not new to flex programming it will take you half a day to get into this new baby.
bye for now
Flash on the beach is each day closer and I started to plan my own schedule.
Each choice has been quite hard because of the high quality the conference is offering, the good thing is that even if I’m not 100% convinced to be attending some sessions I’m sure that I can switch to another one with the same or even higher quality
sunday:
papervision3D workshop by seb lee-delisle
monday:
Richard exposes all! – Richard Galvan
Casual game architecture – Keith Peters
Visualizing the voice – Chuck Freedman
Who’s a bright spark then! – Mike Jones
Cybernetic art revsited – Dr. Woohoo!
Telling Stories – Hillman Curtis
Epiphany – Joel Gethin Lewis
tuesday:
3 minute wonders – many (looking forward to Michiel van der Ros 3D optimization for MMOs)
Quick as a Flash – Grant Skinner
Leaving the sandbox – Joa Ebert
Application Frameworks – Richard Lord
More than bending pixels – Paul Burnett
Unconventional Webapps – Des Traynor + Eoghan McCabe
Choose your own adventure – Craig Swann
wednesdey
Play with vectors – Koen de Weggheleire
Connecting the dots – Mario Klingemann
Work/Play – Seb Lee-Delisle
Flashed Fashion – Andy Mcdonald
Research realtime graphics – Ralph Hauwert
Space – Joshua Davis
I’m getting in Brighton on saturday 19th, you’re allowed to poke me
I’m pleased to be speaking at “Arrivano i guru” stage of Milan the next September 26th.
Arrivano i guru is a moving conference iterating the whole italian peninsula. Here’s the complete list of stages
Main topics are Adobe Flash Platform , SEO, and graphics. Great speakers are involved, such as Tiziano Fruet, Luca Mezzalira, and many others.
This is my session’s outline:
(ITALIAN)
Special Effects in Flash CS4
Impariamo ad utilizzare bitmaps, filtri e tweens in Flash CS4 per creare effetti speciali custom.
I filtri in flash
- cosa sono i filtri in flash
- applicare i filtri con AS3
I blendmode in flash
- cosa sono i blendmode in flash
- applicare i blendmode AS3
Sveliamo i bitmap
- cos’è un bitmap in Flash
- i bitmap come tela di un pittore
- manipolare i bitmap in AS3
TweensyFX
- cos’è Tweensy
- animare i propri effetti speciali
(ENGLISH)
Special Effects in Flash CS4
Let’s learn to use bitmaps, filters and tweens within Flash CS4 to create custom special effects.
filters
- what are filters in flash?
- applying filters using AS3
blendmodes
- what blend modes are
- applying blendmodes using AS3
discovering bitmaps
- what are bitmaps for Flash?
- bitmaps as a painter’s canvas
- manipulating bitmaps using AS3
TweensyFX
- what’s Tweensy?
- creating and animating our own special effects
See you there
Just bought my ticket for Flash on the Beach 09! w00t!
I really can’t wait to reach Brighton and attending such a great conference.
See you there guys
Yesterday night it was too warm to sleep and I have no air conditioning at home, so I thought it was a good opportunity to make some experiments related to the high temperature… “the burning man”
Here’s the algorithm in human language:
- pick up the image from the webcam
- perform a threshold on it to exclude (alpha 0) every pixel below the average skin amount of red (between 44 and 90 depending on the light)
- perform a second threshold to exclude (alpha 0) every pixel above the average skin amount of green and blue (between 3344 and 6677 depending on the light)
- draw the result onto a new bitmapdata with the ADD blendmode
- apply blur to the bitmapdata
- generate a perlin noise of one channel (i chose red)
- displace the bitmapdata towards -y
- apply again a displacement map filter to displace horizontally (i used a cos function to make the x displacement a little likely)
- apply a displacement map towards +y with just a bit less strenght than the previous “-y” one (this is to make the fire propagation much more likely)
- then merge the original webcam output with the displaced one…and you’ve the burning man!
here the actionscript implementation
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.display.BlendMode; import flash.display.Sprite; import flash.events.Event; import flash.filters.BlurFilter; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.ColorTransform; import flash.geom.Matrix; import flash.geom.Point; import flash.geom.Rectangle; import flash.media.Camera; import flash.media.Video; [SWF(width="320",height="240",frameRate="31",backgroundColor="0x000000")] public class BurningMan extends Sprite { private var _cam:Camera; private var _vid:Video; private var _fireThreshold:BitmapData; private var _firePerlin:BitmapData; private var _fireOffset:Point; private var _fireSpeed:int = 20; private var _fireDisplaceUP:DisplacementMapFilter; private var _fireDisplaceDWN:DisplacementMapFilter; private var _fireDisplaceSrc:BitmapData; private var _fireBlur:BlurFilter; private var _fireColorTransform:ColorTransform; private var _fireMerge:BitmapData; private var _camBd:BitmapData; private var _b:Bitmap; private static const WIDTH:Number = 320; private static const HEIGHT:Number = 240; private static const ORIGIN:Point = new Point(); private static const REFLECT:Matrix = new Matrix(-1,0,0,1,WIDTH,0); private static const RESIZE_2X:Matrix = new Matrix(2,0,0,2); private var _rect:Rectangle; public function BurningMan() { super(); init(); } private function init():void { _cam = Camera.getCamera(); _cam.setMode(WIDTH,HEIGHT,31); _vid = new Video(WIDTH,HEIGHT); _vid.attachCamera(_cam); _fireOffset = new Point(); _fireThreshold = new BitmapData(WIDTH,HEIGHT,true,0x00000000); _fireMerge = new BitmapData(WIDTH,HEIGHT,true,0x00000000); _firePerlin = new BitmapData(WIDTH*.5,HEIGHT*.5,false,0x000000); _fireDisplaceSrc = new BitmapData(WIDTH,HEIGHT,false,0x000000); _fireDisplaceUP = new DisplacementMapFilter(_fireDisplaceSrc,ORIGIN,BitmapDataChannel.RED,BitmapDataChannel.RED,0,-15,DisplacementMapFilterMode.CLAMP); _fireDisplaceDWN = new DisplacementMapFilter(_fireDisplaceSrc,ORIGIN,BitmapDataChannel.RED,BitmapDataChannel.RED,0,9,DisplacementMapFilterMode.CLAMP); _fireBlur = new BlurFilter(2,2,4); _fireColorTransform = new ColorTransform(1.3,1.1,1,.7); _camBd = new BitmapData(WIDTH,HEIGHT,true,0x00000000); _rect = _camBd.rect; _b = new Bitmap(_camBd); _firePerlin.lock(); _fireMerge.lock(); addChild(_b); addEventListener(Event.ENTER_FRAME,update); } private function update(e:Event=null):void { //locks _camBd.lock(); _fireOffset.y+=_fireSpeed; _firePerlin.perlinNoise(_firePerlin.width*.125,_firePerlin.height*.125,1,0,true,false,BitmapDataChannel.RED,false,[_fireOffset]) _fireDisplaceSrc.draw(_firePerlin,RESIZE_2X); _camBd.draw(_vid,REFLECT); _fireThreshold.setVector(_rect,_camBd.getVector(_rect)); _fireThreshold.threshold(_fireThreshold,_rect,ORIGIN,"<",0xFF440000,0x00000000,0xFF0000,true); _fireThreshold.threshold(_fireThreshold,_rect,ORIGIN,">",0xFF003344,0x00000000,0x00FFFF,true); _fireMerge.draw(_fireThreshold,null,_fireColorTransform,BlendMode.ADD,_rect); _fireDisplaceUP.scaleX = Math.cos(((_fireOffset.y/(2<<3))%360)*180/Math.PI)*2; _fireDisplaceDWN.scaleX = -_fireDisplaceUP.scaleX; _fireMerge.applyFilter(_fireMerge,_fireMerge.rect,ORIGIN,_fireBlur); _fireMerge.applyFilter(_fireMerge,_rect,ORIGIN,_fireDisplaceUP); _fireMerge.applyFilter(_fireMerge,_rect,ORIGIN,_fireDisplaceDWN); _camBd.draw(_fireMerge,null,_fireColorTransform,BlendMode.HARDLIGHT,_rect); //unlocks _camBd.unlock(); } } } |
here’s a preview of myself empowered by the force of the fire!:D
click the photo to see the demo in action
Today I encountered this blog post from Zevan (which blog is REALLY a good daily reading I suggest everyone to take) about bitmapData merging and I started tweaking some code doing some benchmarks to find out which way is the most performing. Here are my tests:
First strike (Zevan’s one): copyPixels
[SWF(width=650, height=650)] var loader:Loader = new Loader(); loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded); var w:Number; var h:Number; var rows:Number = 20; var cols:Number = 20; var tiles:Vector.<BitmapData> = new Vector.<BitmapData>(); var locX:Vector.<Number> = new Vector.<Number>(); var locY:Vector.<Number> = new Vector.<Number>(); var rX:Vector.<Number> = new Vector.<Number>(); var rY:Vector.<Number> = new Vector.<Number>(); var sX:Vector.<Number> = new Vector.<Number>(); var sY:Vector.<Number> = new Vector.<Number>(); function onLoaded(evt:Event):void{ w = evt.target.width; h = evt.target.height; var image:BitmapData = Bitmap(evt.target.content).bitmapData; var tileWidth:Number = w / cols; var tileHeight:Number = h / rows; var inc:int = 0; var pnt:Point = new Point(); var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight); var startTime:Number = getTimer(); for (var i:int = 0; i<rows; i++){ for (var j:int = 0; j<cols; j ++){ var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000); rect.x = j * tileWidth; rect.y = i * tileHeight; currTile.copyPixels(image, rect, pnt, null, null, true); tiles[inc] = currTile; rect.x += 25; rect.y += 25; sX[inc] = rect.x; sY[inc] = rect.y; locX[inc] = rX[inc] = -rect.width * 2 locY[inc] = rY[inc] = Math.random() * stage.stageHeight; setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y); inc++; } } trace("copyPixels",getTimer()-startTime,"ms"); addEventListener(Event.ENTER_FRAME, onLoop); } function startAnimation(index:int, dx:Number, dy:Number):void{ var interval:Number; var animate:Function = function(index:int):void{ locX[index] += (dx - locX[index]) / 4; locY[index] += (dy - locY[index]) / 4; if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){ locX[index] = dx; locY[index] = dy; clearInterval(interval); } } interval = setInterval(animate, 32, index); } var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF); addChild(new Bitmap(canvas)); var loc:Point = new Point(); function onLoop(evt:Event):void { canvas.fillRect(canvas.rect, 0xFFFFFF); var startTime:Number = getTimer(); for (var i:int = 0; i<tiles.length; i++){ var tile:BitmapData= tiles[i]; loc.x = locX[i]; loc.y = locY[i]; canvas.copyPixels(tile, tile.rect, loc, null, null, true); } trace("copyPixels",getTimer()-startTime,"ms"); } |
in my machine (mbp, osx) it takes ~27 ms to extract data and ~2-3ms each iteration for setting data on the canvas bitmapData
Second strike: getVector\setVector
[SWF(width=650, height=650)] var loader:Loader = new Loader(); loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded); var w:Number; var h:Number; var rows:Number = 20; var cols:Number = 20; var tiles:Vector.<Vector.<uint>> = new Vector.<Vector.<uint>>(); var tileRect:Rectangle; var locX:Vector.<Number> = new Vector.<Number>(); var locY:Vector.<Number> = new Vector.<Number>(); var rX:Vector.<Number> = new Vector.<Number>(); var rY:Vector.<Number> = new Vector.<Number>(); var sX:Vector.<Number> = new Vector.<Number>(); var sY:Vector.<Number> = new Vector.<Number>(); function onLoaded(evt:Event):void{ w = evt.target.width; h = evt.target.height; var image:BitmapData = Bitmap(evt.target.content).bitmapData; var tileWidth:Number = w / cols; var tileHeight:Number = h / rows; tileRect = new Rectangle(0,0,tileWidth,tileHeight); var inc:int = 0; var pnt:Point = new Point(); var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight); var startTime:Number = getTimer(); for (var i:int = 0; i<rows; i++){ for (var j:int = 0; j<cols; j ++){ rect.x = j * tileWidth; rect.y = i * tileHeight; tiles[tiles.length] = image.getVector(rect); rect.x += 25; rect.y += 25; sX[inc] = rect.x; sY[inc] = rect.y; locX[inc] = rX[inc] = -rect.width * 2 locY[inc] = rY[inc] = Math.random() * stage.stageHeight; setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y); inc++; } } trace("vector push:",getTimer()-startTime,"ms"); addEventListener(Event.ENTER_FRAME, onLoop); } function startAnimation(index:int, dx:Number, dy:Number):void{ var interval:Number; var animate:Function = function(index:int):void{ locX[index] += (dx - locX[index]) / 4; locY[index] += (dy - locY[index]) / 4; if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){ locX[index] = dx; locY[index] = dy; clearInterval(interval); } } interval = setInterval(animate, 32, index); } var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF); addChild(new Bitmap(canvas)); var loc:Point = new Point(); function onLoop(evt:Event):void { canvas.fillRect(canvas.rect, 0xFFFFFF); var tmpVec:Vector.<uint>; var startTime:Number = getTimer(); for (var i:int = 0; i<tiles.length; i++){ tmpVec = tiles[i]; tileRect.x = locX[i]; tileRect.y = locY[i]; canvas.setVector(tileRect,tmpVec); } trace("vector push:",getTimer()-startTime,"ms"); } |
on my machine it takes only ~9 ms to extract tiles slices (yes, 3 times faster!!!) and ~1ms for pushing them all in the canvas for each loop iteration
Third strike: getPixels\setPixels
[SWF(width=650, height=650)] var loader:Loader = new Loader(); loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded); var w:Number; var h:Number; var rows:Number = 20; var cols:Number = 20; var tiles:Vector.<ByteArray> = new Vector.<ByteArray>(); var tileRect:Rectangle; var locX:Vector.<Number> = new Vector.<Number>(); var locY:Vector.<Number> = new Vector.<Number>(); var rX:Vector.<Number> = new Vector.<Number>(); var rY:Vector.<Number> = new Vector.<Number>(); var sX:Vector.<Number> = new Vector.<Number>(); var sY:Vector.<Number> = new Vector.<Number>(); function onLoaded(evt:Event):void{ w = evt.target.width; h = evt.target.height; var image:BitmapData = Bitmap(evt.target.content).bitmapData; var tileWidth:Number = w / cols; var tileHeight:Number = h / rows; tileRect = new Rectangle(0,0,tileWidth,tileHeight); var inc:int = 0; var pnt:Point = new Point(); var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight); var startTime:Number = getTimer(); for (var i:int = 0; i<rows; i++){ for (var j:int = 0; j<cols; j ++){ rect.x = j * tileWidth; rect.y = i * tileHeight; tiles[tiles.length] = image.getPixels(rect); rect.x += 25; rect.y += 25; sX[inc] = rect.x; sY[inc] = rect.y; locX[inc] = rX[inc] = -rect.width * 2 locY[inc] = rY[inc] = Math.random() * stage.stageHeight; setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y); inc++; } } trace("getPixels",getTimer()-startTime,"ms"); addEventListener(Event.ENTER_FRAME, onLoop); } function startAnimation(index:int, dx:Number, dy:Number):void{ var interval:Number; var animate:Function = function(index:int):void{ locX[index] += (dx - locX[index]) / 4; locY[index] += (dy - locY[index]) / 4; if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){ locX[index] = dx; locY[index] = dy; clearInterval(interval); } } interval = setInterval(animate, 32, index); } var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF); addChild(new Bitmap(canvas)); var loc:Point = new Point(); function onLoop(evt:Event):void { canvas.fillRect(canvas.rect, 0xFFFFFF); var startTime:Number = getTimer(); for (var i:int = 0; i<tiles.length; i++){ tileRect.x = locX[i]; tileRect.y = locY[i]; canvas.setPixels(tileRect,tiles[i]); tiles[i].position = 0; } trace("setPixels",getTimer()-startTime,"ms"); } |
a nice one, ~ 17 ms to extract and ~2ms to loop on my mac, faster than copyPixels but vectors are still leading…
Fourth strike: merge
[SWF(width=650, height=650)] var loader:Loader = new Loader(); loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded); var w:Number; var h:Number; var rows:Number = 20; var cols:Number = 20; var tiles:Vector.<BitmapData> = new Vector.<BitmapData>(); var locX:Vector.<Number> = new Vector.<Number>(); var locY:Vector.<Number> = new Vector.<Number>(); var rX:Vector.<Number> = new Vector.<Number>(); var rY:Vector.<Number> = new Vector.<Number>(); var sX:Vector.<Number> = new Vector.<Number>(); var sY:Vector.<Number> = new Vector.<Number>(); function onLoaded(evt:Event):void{ w = evt.target.width; h = evt.target.height; var image:BitmapData = Bitmap(evt.target.content).bitmapData; var tileWidth:Number = w / cols; var tileHeight:Number = h / rows; var inc:int = 0; var pnt:Point = new Point(); var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight); var startTime:Number = getTimer(); for (var i:int = 0; i<rows; i++){ for (var j:int = 0; j<cols; j ++){ var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000); rect.x = j * tileWidth; rect.y = i * tileHeight; currTile.merge(image,rect,pnt,0xFF,0xFF,0xFF,0xFF); tiles[inc] = currTile; rect.x += 25; rect.y += 25; sX[inc] = rect.x; sY[inc] = rect.y; locX[inc] = rX[inc] = -rect.width * 2 locY[inc] = rY[inc] = Math.random() * stage.stageHeight; setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y); inc++; } } trace("merge",getTimer()-startTime,"ms"); addEventListener(Event.ENTER_FRAME, onLoop); } function startAnimation(index:int, dx:Number, dy:Number):void{ var interval:Number; var animate:Function = function(index:int):void{ locX[index] += (dx - locX[index]) / 4; locY[index] += (dy - locY[index]) / 4; if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){ locX[index] = dx; locY[index] = dy; clearInterval(interval); } } interval = setInterval(animate, 32, index); } var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF); addChild(new Bitmap(canvas)); var loc:Point = new Point(); function onLoop(evt:Event):void { canvas.fillRect(canvas.rect, 0xFFFFFF); var startTime:Number = getTimer(); for (var i:int = 0; i<tiles.length; i++){ var tile:BitmapData= tiles[i]; loc.x = locX[i]; loc.y = locY[i]; canvas.merge(tile, tile.rect, loc, 0xFF,0xFF,0xFF,0xFF); } trace("merge",getTimer()-startTime,"ms"); } |
~36 ms to extract and ~12ms to merge tiles on the canvas!!!…too slow all the way…:\
There are still some methods left such as getPixel\setPixel, getPixel32\setPixel32, and copyChannel but they’re a too much restrictive choice because they’re handling one pixel, or channel at time therefore a further loop would be required to get them doing this task.
Summary:
getVector\setVector : ~9ms\~1ms
getPixels\setPixels: ~17ms\~2ms
copyPixels: ~27ms\~2-3ms
merge: ~36ms\~12ms
make your choice
NOTE: these benchmarks are valid from flash player 10 because we (both me and Zevan) used the Vector native type to store lists of typed data. To make them valid for previous version of the player make sure to replace vectors with arrays and check other types are already supported by the target player.
stay tuned
Just posted the first episode of a cool tutorial on building RIAs with Cairngorm and Doctrine (a PHP ORM). This episode is about client only, next one will be about server side development.
Have a huge coffee cup and take a read
Here’s the link
