Monthly Archives: May 2009

Quick UI Creation (Brainstorming)

By Zevan | May 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. var ui:QuickUI = new QuickUI();
  2. ui.x = 20;
  3. ui.y = 260;
  4. ui.addEventListener(Event.CHANGE, onChange);
  5. addChild(ui);
  6.  
  7. var spriteA:Sprite = makeSprite(150,150,0xFF0000);
  8. spriteA.addEventListener(MouseEvent.CLICK, onShowAddProps);
  9.  
  10. var spriteB:Sprite = makeSprite(350,150, 0xCC6600);
  11. spriteB.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
  12.  
  13. var spriteC:Sprite = makeSprite(550,150, 0x550066);
  14. spriteC.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
  15.  
  16. function onChange(evt:Event):void{
  17.     // updates the property on the current target object
  18.     ui.updateObject(evt.target);
  19. }
  20. function onShowAddProps(evt:MouseEvent):void{
  21.     ui.rows = 3;
  22.     // onle show the following properties
  23.     //  add(property, label)
  24.     ui.add("name", "name:");
  25.     ui.add("x", "x location:");
  26.     ui.add("y", "y location:");
  27.     ui.add("scaleX", "x scale:");
  28.     ui.add("buttonMode", "show hand cursor");
  29.     ui.create(evt.currentTarget);
  30.     ui.window({title:"Select Properties: "+ evt.currentTarget.name});
  31. }
  32.  
  33. function onShowExcludeProps(evt:MouseEvent):void {
  34.     ui.rows = 5;
  35.     // don't show a few select properties - if add() is not called
  36.     // all properties will be shown
  37.     ui.exclude("doubleClickEnabled");
  38.     ui.exclude("useHandCursor");
  39.     // build the UI, give two custom labels to x and y properties
  40.     ui.create(evt.currentTarget, {x:"x loc:", y:"y loc:"});
  41.     // optionally render a window behind the UI elements
  42.     ui.window({title:"All Properties: " + evt.currentTarget.name});
  43. }
  44.  
  45.  
  46. function makeSprite(xp:Number, yp:Number, col:uint):Sprite{
  47.     var s:Sprite = Sprite(addChild(new Sprite()));
  48.     s.x = xp;
  49.     s.y = yp;
  50.     s.buttonMode = true;
  51.     with (s.graphics) beginFill(col), drawRect(-40, -40, 80, 80);
  52.     return s;
  53. }

This snippet is my first stab at creating a library that makes certain types of UI creation very easy. It works by automatically creating input text fields and check boxes for all public properties that make sense with that type of UI. It has a long way to go, but this is a good start

Take a look at the swf to get an idea of what this snippet does.

Download the source for the library and the fla for the above demo.

I hope to get this library to the point that it will at least be useful for internal UI - that is, for level editors and mini-cms systems.

Posted in UI, dynamic | Tagged , | 4 Comments

Global Illumination Links

By Zevan | May 22, 2009

Recently saw some great links making use of Global Illumination/Ambient Occlusion... these ones are from wonderfl posted by keim at Si :
This first example is based on something called AO bench.
one
two
three

and there is something called MiniLight which has been ported to Flex.

Posted in BitmapData, graphics algorithms, misc, pixel manipulation, setPixel | Tagged , | Leave a comment

drawPath() Boxes

By Zevan | May 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. const TWO_PI:Number = Math.PI * 2;
  2. var boxNum:int = 3000;
  3. var pointNum:int = boxNum * 10;
  4. var rot:Vector.<Number> = new Vector.<Number>();
  5. var posX:Vector.<Number> = new Vector.<Number>();
  6. var posY:Vector.<Number> = new Vector.<Number>();
  7. var velX:Vector.<Number> = new Vector.<Number>();
  8. var velY:Vector.<Number> = new Vector.<Number>();
  9. var scale:Vector.<Number> = new Vector.<Number>();
  10. var rotSpeed:Vector.<Number> = new Vector.<Number>();
  11. var geometry:Vector.<Number> = new Vector.<Number>();
  12. var cmds:Vector.<int> = new Vector.<int>();
  13.  
  14. var stageWidth:Number = stage.stageWidth;
  15. var stageHeight:Number = stage.stageHeight;
  16.  
  17. populateGeom();
  18. function populateGeom():void{
  19.     for (var i:int = 0; i<pointNum; i+=10){
  20.         posX.push(Math.random() * stageWidth);
  21.         posY.push(Math.random() * stageHeight);
  22.         velX.push(Math.random()*4 - 2);
  23.         velY.push(Math.random()*4 - 2);
  24.         scale.push(Math.random() * 1 + .2);
  25.         rot.push(Math.random() * TWO_PI);
  26.         rotSpeed.push(Math.random() * 0.2 - 0.1);
  27.         geometry[i] = 0;
  28.         geometry[i + 1] = 0;
  29.         cmds.push(1);
  30.         geometry[i + 2] =  0;
  31.         geometry[i + 3] =  0;
  32.         cmds.push(2);
  33.         geometry[i + 4] =  0;
  34.         geometry[i + 5] =  0;
  35.         cmds.push(2);
  36.         geometry[i + 6] = 0;
  37.         geometry[i + 7] =  0;
  38.         cmds.push(2);
  39.         geometry[i + 8] =  0;
  40.         geometry[i + 9] =  0;
  41.         cmds.push(2);
  42.     }
  43. }
  44.  
  45. function run():void{
  46.     var inc:int = 0;
  47.     var xt:Number, yt:Number, s:Number, r:Number, rs:Number;
  48.     var cos:Number, sin:Number;
  49.     var cosN:Number, cosP:Number, sinN:Number, sinP:Number;
  50.     for (var i:int = 0; i<pointNum; i+=10){
  51.         xt = posX[inc] += velX[inc];
  52.         yt = posY[inc] += velY[inc];
  53.        
  54.         if (xt <0 || xt> stageWidth){
  55.             velX[inc] *= -1;
  56.         }
  57.         if (yt <0 || yt> stageHeight){
  58.             velY[inc] *= -1;
  59.         }
  60.          
  61.         s = scale[inc];
  62.         r = rot[inc] += rotSpeed[inc];
  63.         inc++;
  64.          
  65.         cos = Math.cos(r);
  66.         sin = Math.sin(r);
  67.        
  68.         cosN = -10  * cos;
  69.         cosP = 10  * cos
  70.         sinN = -10 * sin;
  71.         sinP = 10 * sin;
  72.         geometry[i] = xt + (cosN - sinN) * s;
  73.         geometry[i + 1] = yt + (cosN + sinN) * s;
  74.         geometry[i + 2] = xt + (cosP - sinN) * s;
  75.         geometry[i + 3] = yt + (cosN + sinP) * s;
  76.         geometry[i + 4] = xt + (cosP - sinP) * s;
  77.         geometry[i + 5] = yt + (cosP + sinP) * s;
  78.         geometry[i + 6] = xt + (cosN - sinP) * s;
  79.         geometry[i + 7] = yt + (cosP + sinN) * s;
  80.         geometry[i + 8]  = geometry[i];
  81.         geometry[i + 9]  = geometry[i + 1];
  82.     }
  83. }
  84.  
  85. addEventListener(Event.ENTER_FRAME, onLoop);
  86. function onLoop(evt:Event):void {
  87.      run();
  88.      graphics.clear();
  89.      graphics.beginFill(0x000000);
  90.      graphics.drawPath(cmds, geometry,GraphicsPathWinding.NON_ZERO);
  91.      graphics.endFill();
  92. }

I was messing with drawPath() today and did this snippet as a sort of performance test... the code isn't fully optimized but it's clear that drawPath() is rather fast. I wish that there were beginFill() and lineStyle() drawing commands that worked with it though... oh yeah, that's what IGraphicsData is for...

Posted in Graphics, motion | Tagged , | Leave a comment

Bounds 3 Ways

By Zevan | May 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. // make a complex poly and position it randomly
  2. var poly:Sprite = Sprite(addChild(new Sprite()));
  3. poly.graphics.lineStyle(3, 0xFF0000);
  4. poly.graphics.beginFill(0x00FF00);
  5. for (var i:int = 0; i<10; i++) {
  6.     poly.graphics.lineTo(Math.random()*100 - 50, Math.random()*100 - 50);
  7. }
  8. poly.x=Math.random()*stage.stageWidth;
  9. poly.y=Math.random()*stage.stageHeight;
  10.  
  11. // get bound information:
  12.  
  13. // is in pixels (whole numbers)
  14. trace("pixelBounds: ", poly.transform.pixelBounds);
  15. // doesn't include stroke width
  16. trace("getBounds: ", poly.getBounds(this));
  17. // includes stroke width
  18. trace("getRect: ", poly.getRect(this));

Three different ways to get the boundaries of a DisplayObject.

Posted in DisplayObject | Tagged , | 1 Comment