Tag Archives: flash

QuickBox2D Play

By Zevan | May 24, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*;
  3.  
  4. [SWF (backgroundColor=0xaa0000, width=700, height=600)]
  5.  
  6. const TWO_PI:Number = Math.PI * 2;
  7.  
  8. var sim:QuickBox2D = new QuickBox2D(this,{gravityY:20, debug:false});
  9.  
  10. var i:int = 0;
  11.  
  12. // add some circles
  13. var circles:Array = [];
  14. var circleNum:int = 20;
  15. for (i = 0; i<circleNum; i++){
  16.     circles[i] = sim.addCircle({x: 8, y:-2 - i, radius:0.1 + Math.random()*0.4, fillColor:0x000000});
  17. }
  18.  
  19. // add some boxes
  20. var boxes:Array = [];
  21. var boxNum:int = 20;
  22. for (i= 0; i<boxNum; i++){
  23.     var rx:Number = 4 + (i % 5) * 4;
  24.     var ry:Number =  4 + int(i / 5) * 4;
  25.     var ra:Number = Math.random() * TWO_PI;
  26.     boxes[i] = sim.addBox({x:rx, y:ry, width:3, height:0.4, angle:ra, density:0,fillColor:0xFF2200});
  27. }
  28.  
  29. // vector(0,0) used to reset velocity
  30. var resetVec:b2Vec2 = new b2Vec2();
  31.  
  32. sim.start();
  33. sim.mouseDrag();
  34.  
  35. addEventListener(Event.ENTER_FRAME, onLoop);
  36. function onLoop(evt:Event):void {
  37.      // rotate all boxes
  38.      for (i= 0; i<boxNum; i++){
  39.         boxes[i].angle += .05;
  40.      }
  41.      // move circles to top of sceen after they fall off bottom
  42.       for (i= 0; i<circleNum; i++){
  43.         if (circles[i].y> 20){
  44.             circles[i].y = -1;
  45.             circles[i].x = Math.random()*(stage.stageWidth / 30 - 9) + 4;
  46.             // access to Box2D b2Body methods
  47.             circles[i].body.SetLinearVelocity(resetVec);
  48.         }
  49.      }
  50. }

This is another QuickBox2D experiment. If you don't know what QuickBox2D is ... read about it here.

Take a look at the swf here

Posted in Box2D, QuickBox2D, motion | Also tagged , | 1 Comment

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 | Also 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 | Also 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 | Also tagged | Leave a comment