Tag Archives: actionscript

Seamless Vector Texture

Actionscript:
  1. [SWF(width = 800, height = 450, backgroundColor=0xFFFFFF)]
  2.  
  3. graphics.beginFill(0xDEDEDE);
  4. graphics.drawRect(0,0,400,400);
  5.  
  6. var container:Sprite = Sprite(addChild(new Sprite()));
  7. draggable(rx(), ry(), 0x112233, 20);
  8. draggable(rx(), ry(), 0x2266FF, 15);
  9. draggable(rx(), ry(), 0x003299, 50, "rect");
  10. draggable(rx(), ry(), 0xFFFFFF, 30);
  11. draggable(rx(), ry(), 0x00CCFF, 15);
  12. draggable(rx(), ry(), 0x1188CC, 50, "rect");
  13.  
  14. function rx():Number{
  15.     return Math.random() * 200 + 100;
  16. }
  17. function ry():Number{
  18.     return Math.random() * 200 + 100;
  19. }
  20.  
  21. var guides:Shape = Shape(addChild(new Shape()));
  22. with(guides.graphics){
  23.        lineStyle(0, 0x666666)
  24.        moveTo(200,0);
  25.        lineTo(200,400);
  26.        moveTo(0, 200);
  27.        lineTo(400, 200);
  28.        moveTo(400,0);
  29.        lineTo(400,400);
  30.        moveTo(0,400);
  31.        lineTo(800,400);
  32. }
  33.  
  34. var canvas:BitmapData = new BitmapData(200,200,true, 0x00000000);
  35. var tex:BitmapData = new BitmapData(800,800,false, 0xFFFFFF);
  36.  
  37. var frame:Bitmap = Bitmap(addChild(new Bitmap(tex, "auto", true)));
  38. frame.x = 401;
  39. frame.scaleX = frame.scaleY = 0.5;
  40.  
  41. var pnt:Point = new Point();
  42. var m:Matrix = new Matrix();
  43.  
  44. addEventListener(Event.ENTER_FRAME, onLoop);
  45. function onLoop(evt:Event):void {
  46.     canvas.fillRect(canvas.rect, 0x00000000);
  47.     canvas.draw(container);
  48.     drawQuadrant(-200,0)
  49.     drawQuadrant(-400,0)
  50.     drawQuadrant(0,-200)
  51.     drawQuadrant(-200,-200);
  52.     tex.fillRect(tex.rect, 0xFFFFFF);
  53.     for (var i:int = 0; i<16; i++){
  54.         var px:Number = i % 4;
  55.         var py:Number = int(i / 4);
  56.         pnt.x = px * 200;
  57.         pnt.y = py * 200;
  58.         tex.copyPixels(canvas, canvas.rect, pnt, null, null, true);
  59.        }
  60. }
  61.  
  62. function drawQuadrant(x:Number, y:Number):void{
  63.      m.tx = x;
  64.      m.ty = y;
  65.      canvas.draw(container, m);
  66. }
  67.  
  68. // draggable Sprite
  69. function draggable(xp:Number, yp:Number, col:uint = 0xFF0000,
  70. size:Number=4, type:String="circle"):Sprite {
  71.        var s:Sprite = Sprite(container.addChild(new Sprite()));
  72.        s.x = xp;
  73.        s.y = yp;
  74.        with(s.graphics){
  75.                beginFill(col)
  76.                if(type == "circle"){
  77.                  drawCircle(size,size,size);
  78.                }else if(type == "rect"){
  79.                  drawRect(0,0,size, size);
  80.                }
  81.        }
  82.        s.buttonMode = true;
  83.        s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
  84.        return s;
  85. }
  86. function onDrag(evt:MouseEvent):void {
  87.     var w:Number = evt.currentTarget.width;
  88.     var h:Number = evt.currentTarget.height;
  89.     evt.currentTarget.startDrag(false, new Rectangle(0,0,400 - w, 400 - h));
  90. }
  91. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  92. function onUp(evt:MouseEvent):void{ stopDrag() }

This snippet creates a seamless texture from a few draggable vector shapes. BitmapData is used to combine four quadrants into one seamless tile.


Have a look at the swf

I created this snippet as a sketch for a new feature for my command drawing project.

Posted in BitmapData, Graphics, misc | Also tagged , | 4 Comments

QuickBox2D 3D

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. [SWF(width = 800, height=600, backgroundColor=0x000000, frameRate = 60)]
  3.  
  4. var main:MovieClip = MovieClip(addChild(new MovieClip()));
  5. main.z = 500;
  6. main.rotationX = -40;
  7.  
  8. var sim:QuickBox2D = new QuickBox2D(main);
  9.  
  10. sim.createStageWalls({fillColor:0x1133CC});
  11. sim.setDefault({lineColor:0xFFFFFF, fillColor:0x113355});
  12.  
  13. for (var i:int = 0; i<30; i++){
  14.     var b:QuickObject = sim.addBox({x:Math.random()*10 + 3, y:Math.random()*10 + 3,
  15.                                     width:0.25 + Math.random()*2, height:0.25 + Math.random()*2});
  16. }
  17.  
  18. sim.start();
  19. sim.mouseDrag();

This demo shows how you can render your QuickBox2D simulation to somewhere other than the main timeline. In this case, I render to a MovieClip that has altered z and and rotationX properties.


Have a look at the swf...

Posted in 3D, Box2D, QuickBox2D | Also tagged , , , , | 2 Comments

QuickBox2D Contacts Part 3

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*;
  3.  
  4. [SWF(width = 800, height = 600, backgroundColor = 0x222222, frameRate=60)]
  5.  
  6. var sim:QuickBox2D = new QuickBox2D(this, {debug:false});
  7.  
  8. sim.createStageWalls();
  9.  
  10. var cup:QuickObject = sim.addPoly({x:3, y:13, wireframe:false, density:0,
  11.                                    points:[0,0, .5, 0, .5,3,  2,3,  2,0,  2.5,0, 2.5, 3.5, 0, 3.5, 0,0]});
  12. var deleter:QuickObject = sim.addBox({x:4.251, y: 15.9, width:1.5, height:0.25, fillColor:0xFF0000});
  13.  
  14. // use a distance joint instead of a group since isCurrentContact
  15. // uses the QuickObject.body property
  16. sim.addJoint({a:cup.body, b:deleter.body, x1:deleter.x, y1:deleter.y+0.5});
  17.  
  18. var circles:Array = [];
  19. for (var i:int = 0; i<10; i++){
  20.     circles[i] = sim.addCircle({x:8 + i, y:5, radius:0.5});
  21. }
  22. var boxes:Array = [];
  23. for (i = 0; i<10; i++){
  24.     boxes[i] = sim.addBox({x:8.5 + i, y:10, width:0.5, height:0.5});
  25. }
  26.  
  27. sim.start();
  28. sim.mouseDrag();
  29.  
  30. var shootVec:b2Vec2 = new b2Vec2(4, -30);
  31.  
  32. // when circles are dropped in the cup they are destroyed
  33. // when boxes are droppped in the cup their linear velocity is altered
  34. var contacts:QuickContacts = sim.addContactListener();
  35. contacts.addEventListener(QuickContacts.ADD, onAdd);
  36. function onAdd(evt:Event):void{
  37.     for (var i:int = 0; i<circles.length; i++){
  38.         var circ:QuickObject = circles[i];
  39.         if (contacts.isCurrentContact(circ, deleter)){
  40.             // it's ok to destroy QuickObject here because they are only actually
  41.             // destroyed after the timeStep has finished at the end of QuickBox2D's
  42.             // internal loop
  43.             circ.destroy();
  44.         }
  45.      }
  46.      for (i = 0; i<boxes.length; i++){
  47.         var box:QuickObject = boxes[i];
  48.         if (contacts.isCurrentContact(box, deleter)){
  49.             box.body.SetLinearVelocity(shootVec);
  50.         }
  51.      }
  52. }

Note: This snippet requires QuickBox2D 1.0 or greater

Here is another example of using QuickBox2D style contacts. In this example there is a cup with a small red box inside of it. When circles are placed inside the cup they are destroyed. When boxes are placed inside the cup they are shot upward.


Have a look at the swf...

A Note About Creation and Destruction

It's worth noting that in Box2D your not supposed to destroy or create rigid bodies within the listener function for any contact events. QuickBox2D gets around this restriction by flagging the rigid body for destruction and destroying it at the end of QuickBox2D's internal loop. This is not the case with creation of rigid bodies - if you attempt to create a rigid body within one of these listener functions you will get an error. See QuickBox2D Contacts Part 1 for an example of creating rigid bodies when there is a collision.

Posted in Box2D, QuickBox2D | Also tagged , , , | 19 Comments

QuickBox2D 1.0 Features

Here is a quick list of the new features in QuickBox2D along with links to the docs.

1) The QuickBox2D.STEP event:
A few releases ago, frim (frame rate independent motion) was added to QuickBox2D. However, there was no way to execute calls to b2Body.ApplyImpulse() b2Body.SetLinearVelocity() etc... along with the b2World.Step() method. This meant that you couldn't call these methods in a way that would truly maintain frim. As you'll see in upcoming demos, rather than doing key controls or additional simulation logic in an enterframe event, I'll be listening for the QuickBox2D.STEP event. This is executed every time a timeStep occurs. If frim is on, this the STEP event will be executed independently of frameRate.

2) Some features were added to help trigger events at specific times in the simulation. See:

QuickBox2D.totalTimeSteps
QuickBox2D.addTimeStepSequence

...for an example of addTimeStepSequence() check out this recent post.

3) Some additional control was added to mouse dragging for QuickBox2D. There is a new property in the QuickBox2D params object called customMouse. When set to true, this enables you to pass in mouse coordinates rather than having QuickBox2D automatically use the coordinates of the DisplayObject that all the rigid bodies are being drawn to. This feature is useful if you are rendering using a 3D engine. See:

QuickBox2D customMouse
QuickBox2D.setMouse()

4) A few features were added to make contact points easy to work with. See:

QuickBox2D.addContactListener()
QuickContacts

...I'll be posting a few demos showing how to use QuickContacts - here are the first two (more to come in the next few days):
part 1
part 2

Posted in QuickBox2D | Also tagged , , | 1 Comment