Category Archives: Box2D

QuickBox2D Tetris Pieces

By Zevan | June 7, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. [SWF(backgroundColor=0x000000, width=700, height=600, frameRate=60)]
  4.  
  5. var sim:QuickBox2D = new QuickBox2D(this);
  6.  
  7. sim.setDefault({fillColor:0x003366, lineColor:0x2B80D5, isBullet:true});
  8. sim.createStageWalls();
  9.  
  10. var shapes:Array = [];
  11. shapes[0] = [[1,1,1,1]];
  12. shapes[1] = [[1, 0, 0], [1, 1, 1]];
  13. shapes[2] = [[0, 0, 1], [1, 1, 1]];
  14. shapes[3] = [[1, 1], [1, 1]];
  15. shapes[4] = [[0, 1, 1], [1, 1, 0]];
  16. shapes[5] = [[0, 1, 0], [1, 1, 1]];
  17. shapes[6] = [[1, 1, 0], [0, 1, 1]];
  18. var cols:Array = [0xFF0000,  0xFFFF00, 0xFF00FF, 0x0000FF, 0x00FF00,0x00FFFF, 0x00FF00,0xFAA703];
  19. var angs:Array =  [0, Math.PI / 2, Math.PI, Math.PI + Math.PI / 2];
  20. var bev:BevelFilter = new BevelFilter();
  21. with (bev) blurX = 10, blurY = 10, strength = 0.5;
  22.  
  23. var inc:int = 9;
  24. for (var i:int = 0; i<shapes.length; i++){
  25.     sim.setDefault({fillColor:cols[inc % cols.length]});
  26.     inc++
  27.     makePiece(shapes[i], 3 + i * 3, 3);
  28.     sim.setDefault({fillColor:cols[inc % cols.length]});
  29.     inc++
  30.     makePiece(shapes[i], 3 + i * 3, 8);
  31. }
  32.  
  33. function makePiece(pattern:Array, xp:Number, yp:Number, scale:Number = 0.7):QuickObject{
  34.     var parts:Array = [];
  35.     for (var i:int = 0; i<pattern.length; i++){
  36.         for (var j:int = 0; j<pattern[i].length; j++){
  37.             if (pattern[i][j] == 1){
  38.                 parts.push(sim.addBox({x:j * scale, y:i * scale, width:scale, height:scale, restitution:0, friction:1, isBullet:true}));
  39.             }
  40.         }
  41.     }
  42.     var ang:Number = angs[int(Math.random()*angs.length)];
  43.     var piece:QuickObject =  sim.addGroup({objects:parts, x:xp, y:yp, angle:ang});
  44.    
  45.     piece.userData.filters = [bev];
  46.     return piece;
  47. }
  48.  
  49. sim.start();
  50. sim.mouseDrag();

This snippet uses the QuickBox2D library to create some Tetris pieces.


Have a look at the swf here...

Also posted in QuickBox2D, misc | Tagged , , , | 3 Comments

QuickBox2D Groups

By Zevan | May 31, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. [SWF (backgroundColor=0xAA0000, width=700, height=600, frameRate=60)]
  4.  
  5. var sim:QuickBox2D = new QuickBox2D(this);
  6.  
  7. sim.createStageWalls();
  8.  
  9. /**
  10. create a dancing pill
  11. */
  12. // all x and y coords are relative to the center of the group
  13. var partA:QuickObject = sim.addCircle({x:-1, y:0, radius:0.5, restitution:.9});
  14. var partB:QuickObject = sim.addCircle({x:1, y:0, radius:0.5, restitution:.9});
  15. var partC:QuickObject = sim.addBox({x:0, y:0, width:2, height:1});
  16. // all the parts are passed into the objects array
  17. // addGroup() groups the parts together into one rigid body
  18. var pill:QuickObject = sim.addGroup({objects:[partA, partB, partC], x:3, y:3, angle:0.3});
  19.  
  20. /**
  21. create another group
  22. */
  23. partA = sim.addCircle({x:0, y:0, radius:1});
  24. partB = sim.addBox({x:0, y:1, width:1, height:1, fillColor:0x666666});
  25. partC = sim.addBox({x:0, y:-1, width:1, height:1, fillColor:0x666666});
  26. sim.addGroup({objects:[partA, partB, partC], x:8, y:3, angle:0.3});
  27.  
  28. /**
  29. create two circles linked together by a stretchy joint
  30. */
  31. partA = sim.addCircle({x:15, y:3, fillColor:0x000000, anglularDamping:1});
  32. partB = sim.addCircle({x:17, y:3, fillColor:0xFFFFFF, anglularDamping:1});
  33. // if x1, y1, x2 and y2 properties are not set, the joint is automatically placed
  34. // at the b2Body's center
  35. sim.addJoint({a:partA.body, b:partB.body, frequencyHz:1});
  36.  
  37. sim.start();
  38. sim.mouseDrag();

You'll need QuickBox2D Alpha 106 to run this... This snippet demo's the addGroup() method, which allows for easy grouping of shapes. I updated the docs today to feature a simple explanation of how this works.


Have a look at the swf here...

Also posted in QuickBox2D, motion | Tagged , , | 3 Comments

QuickBox2D Polys

By Zevan | May 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. [SWF(backgroundColor=0x000000, width=700, height=600)]
  4.  
  5. var sim:QuickBox2D = new QuickBox2D(this);
  6.  
  7. sim.setDefault({fillColor:0x003366, lineColor:0x2B80D5});
  8. sim.createStageWalls();
  9.  
  10. var i:int = 0;
  11. for (i= 0; i<10; i++){
  12.   sim.addCircle({x:5 + i, y:7, radius:0.3, linearDamping:1, angularDamping:1, fillColor:0x78B4C2, isBullet:true}); 
  13. }
  14.  
  15. for (i= 0; i<2; i++){
  16.     var poly:Array = [];
  17.     var r:Number = 3;
  18.     var step:Number = Math.PI / 6;
  19.     for (var t:Number = 0; t<=Math.PI; t+=step){
  20.         poly.push(r * Math.cos(t));
  21.         poly.push(r * Math.sin(t));
  22.     }
  23.     r = 2;
  24.     for (t = Math.PI; t>= -step; t-=step){
  25.         poly.push(r * Math.cos(t));
  26.         poly.push(r * Math.sin(t));
  27.     }
  28.     // using points instead of verts causes QuickBox2D to triangulate the polygon
  29.     // the wireframe boolean changes rendering style for polys
  30.     sim.addPoly({x:4 + i *7, y:16, points:poly, wireframe:Boolean(i), linearDamping:1.5, angularDamping:1});
  31. }
  32.  
  33. sim.start();
  34. sim.mouseDrag();

I just uploaded QuickBox2D Alpha 106 which includes a few bug fixes and support for compound shapes and easier polys. I used the algorithm from yesterdays post to significantly simplify the way QuickBox2D handles the description of polygons.

You'll need QuickBox2D Alpha 106 or greater, if you want to test this....


or just have a look at the demo here.

This triangulation is really better suited for 3D stuff - Box2D supports multiple convex polygons in one rigid body... this algorithm makes more shapes (triangles) than Box2D needs - I'll probably swap out the algorithm in the near future.

Tomorrow I'll be posting a demo about the way QuickBox2D simplifies compound shapes. I have yet to update the docs to include the new features of Alpha 106. That will happen along with tomorrows post.

Also posted in QuickBox2D, motion | Tagged , | 7 Comments

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

Also posted in QuickBox2D, motion | Tagged , , | 1 Comment