Category Archives: motion

QuickBox2D 1.1 (2 major bug fixes)

By Zevan | November 7, 2009

Since the release of QuickBox2D 1.0 two bugs were discovered by numerous developers. The first bug was the inability to properly destroy group objects. The second bug was a small memory leak that caused most QuickObjects to remain in memory. Both of these bugs are now resolved.

Download QuickBox2D 1.1

Testing the memory leak. In QuickBox2D 1.0 if you created and destroyed 100s of rigid bodies, the ram would very slowly rise... Sometimes it would get garbage collected, but the memory would never fully be released. I created a simple test to make sure this is fixed in 1.1:

CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. var sim:QuickBox2D = new QuickBox2D(this, {debug:false});
  4.  
  5. sim.createStageWalls();
  6.  
  7. var levelParts:Array = [];
  8. const TWO_PI:Number = Math.PI * 2;
  9.  
  10. // destroys and then creates a bunch of rigid bodies
  11. // called every second
  12. buildRandomLevel();
  13. setInterval(buildRandomLevel, 1000);
  14.  
  15. var txt:TextField = TextField(addChild(new TextField()));
  16. txt.x = txt.y = 30;
  17. txt.backgroundColor = 0xFFFFFF;
  18. sim.start();
  19.  
  20. // display amount of ram used, to make sure garbage collection is working
  21. sim.addEventListener(QuickBox2D.STEP, onStep);
  22. function onStep(evt:Event):void{
  23.     txt.text = (System.totalMemory / 100000).toFixed(2) + "mb";
  24. }
  25.  
  26. function buildRandomLevel():void{
  27.     // destroy all rigid bodies
  28.     for (var i:int = 0; i<levelParts.length; i++){
  29.         levelParts[i].destroy();
  30.     }
  31.     levelParts = [];
  32.     // create a bunch of circles and boxes
  33.     for (i = 0; i<16; i++){
  34.         var rad:Number = 0.4 ;
  35.         levelParts.push(sim.addCircle({x:1 + i * rad * 4, y : 2, radius:rad - Math.random()*0.3}));
  36.        
  37.         var rot:Number = Math.random() * TWO_PI;
  38.         levelParts.push(sim.addBox({x:4+Math.random() * i * 2, y:4+Math.random()*i,
  39.                     width:3, height:0.25, angle:rot, density:0}));
  40.     }
  41. }

This snippet creates and destroys a bunch of rigid bodies again and again.... On my macbook 2.6 Ghz intel core duo... the ram runs between 79mb and 112mb. I let it run for 40 minutes and this did not change - it always eventually returned down to 79mb.


Have a look at the swf...

Thanks to all the people who gave feedback that lead to the discover of these bugs.

Also posted in Box2D, QuickBox2D, pixel manipulation | Tagged , , , | 25 Comments

BitmapData Frame Animation (w/ linked list)

By Zevan | October 29, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 100, height = 100)]
  2. var circle:Shape = new Shape();
  3. with(circle.graphics) beginFill(0x000000), drawCircle(20,20,20);
  4.  
  5. var currFrame:Frame;
  6.  
  7. // populate the linked list
  8. generateAnimation();
  9.  
  10. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  11. addChild(new Bitmap(canvas));
  12. var loc:Point = new Point(20, 20);
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.     // clear the canvas
  17.     canvas.fillRect(canvas.rect, 0x000000);
  18.     // draw the current frame
  19.     canvas.copyPixels(currFrame.bitmap, currFrame.bitmap.rect, loc, null, null, true);
  20.     // get the next frame of the animation
  21.     currFrame = currFrame.next;
  22. }
  23.  
  24. // generate and capture 40 bitmaps by altering the colorTransform of the circle shape
  25. function generateAnimation():void{
  26.     var channel:uint = 0;
  27.     var ct:ColorTransform = new ColorTransform();
  28.     var increase:Boolean = true;
  29.     var firstFrame:Frame;
  30.     var pFrame:Frame;
  31.     for (var i:int = 0; i<40; i++){
  32.         if (increase){
  33.            channel += 10;
  34.            if (channel == 200){
  35.               increase = false;  
  36.            }
  37.         }else{
  38.            channel -= 10;
  39.         }
  40.         ct.color = channel <<16 | channel <<8 | channel;
  41.         circle.transform.colorTransform = ct;
  42.         // populate linked list
  43.         currFrame = capture(circle);
  44.         if (pFrame){
  45.            pFrame.next = currFrame;
  46.         }
  47.         if (i == 0){
  48.            firstFrame = currFrame;
  49.         }
  50.         pFrame = currFrame;
  51.     }
  52.     // close the list
  53.     currFrame.next = firstFrame;
  54.     currFrame = firstFrame;
  55. }
  56.  
  57. // create the Frame instance and draw the circle to it
  58. // preserving the colorTransform information
  59. function capture(target:Shape):Frame{
  60.     var frame:Frame = new Frame();
  61.     frame.bitmap = new BitmapData(target.width, target.height, true, 0x00000000);
  62.     frame.bitmap.draw(target, null, target.transform.colorTransform);
  63.     return frame;
  64. }

Requires this little Frame class

CLICK HERE TO COPY
Actionscript:
  1. package {
  2.     import flash.display.*;
  3.     final public class Frame{
  4.         public var bitmap:BitmapData;
  5.         public var next:Frame;
  6.     }
  7. }

This is a small test I did today to see how easy it would be to use a circular linked list to loop an animation of bitmaps. I did this because I was thinking about using some animated sprites in conjunction with Utils3D.projectVectors() to do an orthographic 3D demo with lots of animating sprites. In the past I've had up to 7,000 animated sprites running nicely using arrays and copyPixels... figured it would be interesting to try and do the same with a circular linked list.

When compiled, this test simply draws a circle that fades from black to gray and back again... Pretty boring, but I threw it up over at wonderfl anyway... check it out.

I recently saw a few tweets (forget who from) about using the final keyword on linked list nodes... haven't tested it myself but it's supposed to be faster...

Also posted in BitmapData, Data Structures, misc, pixel manipulation | Tagged , , | 1 Comment

Flowing Leaves (optical illusion)

By Zevan | October 19, 2009


Saw this optical illusion today... figured I'd make a snippet to create a few variations on the illusion...

CLICK HERE TO COPY
Actionscript:
  1. [SWF( backgroundColor=0x2E7999, width=780, height = 600) ]
  2.  
  3. var leafNum:Number = 375;
  4. var spacing:Number = 12;
  5. var cols:Number = 25;
  6. var hh:Number = stage.stageHeight / 2;
  7. var hw:Number = stage.stageWidth / 2;
  8.  
  9. for (var i:Number = 0; i<leafNum; i++){
  10.     var leaf:Shape = makeLeaf();
  11.     leaf.scaleX = leaf.scaleY = 0.25;
  12.     leaf.rotation = 90;
  13.     leaf.x = 50 + (i % cols) * (leaf.width + spacing);
  14.     leaf.y = 40 + int(i / cols) * (leaf.height + spacing);
  15.     var dx:Number = leaf.x - hw;
  16.     var dy:Number = leaf.y - hh;
  17.     leaf.rotation = Math.sqrt(dx * dx + dy * dy);
  18. }
  19.  
  20. function makeLeaf():Shape{
  21.     var leaf:Shape = Shape(addChild(new Shape()));
  22.     leaf.graphics.beginFill(0x9DC4D4);
  23.     scaleYcircle(leaf.graphics, 50, .65, false);
  24.     leaf.graphics.endFill();
  25.     leaf.graphics.lineStyle(2, 0x003366, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
  26.     scaleYcircle(leaf.graphics, 50, .65);
  27.     leaf.graphics.lineStyle(2, 0xFFFFFF, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
  28.     scaleYcircle(leaf.graphics, -50, .65);
  29.     return leaf;
  30. }
  31.  
  32.  
  33. // original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
  34. // circle that can be scaled on the y axis
  35. function scaleYcircle(g:Graphics, r:Number, s:Number = 1, isHalf:Boolean=true):void {
  36.      
  37.     var c1:Number = r * (Math.SQRT2 - 1);
  38.     var c2:Number = r * Math.SQRT2 / 2;
  39.     var rs:Number = r * s, c1s:Number = c1 * s, c2s:Number = c2 * s;
  40.     var x_r:Number =  -r, y_r:Number = -rs, x_c2:Number =  -c2;
  41.     var y_c2:Number =  -c2s, x_c1:Number =  -c1, y_c1:Number =  -c1s
  42.     g.moveTo(r, 0), g.curveTo(r, c1s, c2, c2s);
  43.     g.curveTo(c1, rs, 0, rs), g.curveTo(x_c1,rs, x_c2, c2s);
  44.     g.curveTo(x_r, c1s, x_r, 0);
  45.     if (!isHalf){
  46.      g.curveTo(x_r,y_c1,x_c2,y_c2);
  47.      g.curveTo(x_c1,y_r,0,y_r), g.curveTo(c1,y_r,c2,y_c2);
  48.      g.curveTo(r,y_c1,r,0);
  49.     }
  50. }

Also posted in Graphics, Math, Vector, misc, pixel manipulation | Tagged , , , | 5 Comments

QuickFRIM

By Zevan | September 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.animation.*;
  2.  
  3. stage.frameRate = 60.0;
  4.  
  5. // args: main display object, Hz
  6. var frim:QuickFRIM = new QuickFRIM(this, 60.0);
  7.  
  8. // start QuickFRIM internal loop
  9. frim.start();
  10.  
  11. // listen for step and render
  12. frim.addEventListener(QuickFRIM.STEP, onStep);
  13. frim.addEventListener(QuickFRIM.RENDER, onRender);
  14.  
  15. // happes from 0 or more times per frame depending on your framerate and desired Hz
  16. function onStep(evt:Event):void {
  17.      //
  18. }
  19.  
  20. // happens once per frame after all STEP events have
  21. // been dispatched
  22. function onRender(evt:Event):void{
  23.      // number of times a step even was dispatched this frame
  24.      trace(frim.stepsPerFrame);
  25. }

I have been using this QuickFRIM class for the past few days and have been pretty happy with it. Being someone who still occasionally likes to roll their own AS animation... with Zeno's, Hooke's, Polar Coordinates etc... Having a simple solution for frame-rate independent motion is nice... especially for small games... I used to have a more complex technique for this that was significantly harder to maintain. The above is just the basic setup for using the class.

The most important part of the class is the Hz (Hertz) argument in the QuickFRIM constructor. This should be set to how many times you want your step event to be dispatched per second. Usually this would simply be set to your target fps... so if your swf fps is 30, you should probably pass 30 to the QuickFRIM constructor. If you were to have an fps of 30 and pass 60Hz to your constructor... the step event would consistently dispatch 2 times per frame. If you had an Hz of 10 and an fps of 30, your step even would only get triggered every three frames etc...

Here's a demo...

I should note that I spent some time looking at different FRIM implementations online and in the end I found this thread https://developer.playfirst.com/node/860 which my implementation is significantly based upon.

Here's the code for the class
Here you can download a zip of the class

... and here is some very quick documentation
QuickFRIM:

/*
@param main - the main timeline or other DisplayObject
@param hz - Hertz for he timeStep
*/
new QuickFRIM(main:DisplayObject, hz:Number = 60.0)

// dispatched every time a step even occurs
QuickFRIM.STEP

// dispatched after all step events have occurred at the end of the frame
QuickFRIM.RENDER

// start dispatching events
public function start();

// stop dispatching events
public function stop();

// 1.0 / Hertz
public var timeStep:Number;

// total number of time steps that have been dispatched
public var totalTimeSteps:Number=0;

// numer of step events dispatched this frame
public var stepsPerFrame:int=0;

// boolean to disable FRIM
public var disable:Boolean = false;

Posted in motion | Tagged , , | Leave a comment