QuickBox2D Mini-Poly Editor

Actionscript:
  1. [SWF(width = 800, height = 600, frameRate = 60)]
  2. import com.actionsnippet.qbox.*;
  3. stage.frameRate = 60;
  4.  
  5. var sim:QuickBox2D = new QuickBox2D(this);
  6.  
  7. sim.createStageWalls();
  8.  
  9. sim.start();
  10.  
  11. var output:TextField = new TextField();
  12. output.text = "Click anywhere to add points to a polygon. Hit any key to test.\n\n";
  13. output.x = output.y = 50;
  14. with(output) width = 300, height = 400, border = true, selectable = true, wordWrap = true, multiline = true;
  15. addChild(output);
  16.  
  17. function display(str:*):void{
  18.     output.appendText(str.toString() + "\n");
  19. }
  20.                                
  21. var points:Array = [];
  22. var poly:Shape = new Shape();
  23. addChild(poly);
  24.  
  25. stage.addEventListener(MouseEvent.CLICK, onClick);
  26. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  27.  
  28. function onClick(evt:MouseEvent):void {
  29.     if (points.length == 0){
  30.         poly.graphics.beginFill(0xCCCCCC);
  31.         poly.graphics.lineStyle(1, 0xFF0000);
  32.         poly.graphics.moveTo(mouseX, mouseY);
  33.     }else{
  34.         poly.graphics.lineTo(mouseX, mouseY);
  35.     }
  36.     poly.graphics.drawCircle(mouseX, mouseY, 2);
  37.      
  38.     points.push(mouseX / 30.0, mouseY / 30.0);
  39. }
  40.  
  41. function onKeyPressed(evt:KeyboardEvent):void {
  42.      // average all points
  43.      var avgX:Number=0
  44.      var avgY:Number = 0;
  45.      
  46.      for (var i:int = 0; i<points.length; i+=2){
  47.          avgX += points[i];
  48.          avgY += points[i + 1];
  49.      }
  50.    
  51.      avgX /= points.length/2;
  52.      avgY /=  points.length/2;
  53.      avgX = avgX;
  54.      avgY = avgY;
  55.      
  56.      // subtract averages and fix decimal place
  57.       for (i = 0; i<points.length; i+=2){
  58.           var yp:int = i + 1;
  59.           points[i] -= avgX;
  60.           points[yp] -= avgY;
  61.           points[i] = Number(points[i].toFixed(2));
  62.           points[yp] = Number(points[yp].toFixed(2));
  63.      }
  64.      
  65.      display("points array:");
  66.      display(points);
  67.      
  68.      try{
  69.          var p:QuickObject = sim.addPoly({x:avgX, y:avgY, points:points});
  70.          p.userData.graphics.beginFill(0xFF0000);
  71.          p.userData.graphics.drawCircle(0,0,5);
  72.      }catch(e:*){
  73.         display("Invalid polygon data!");
  74.      }
  75.      
  76.      poly.graphics.clear();
  77.      points = [];
  78. }

This snippet shows the basic concepts needed to go about creating a polygon editor for QuickBox2D. I have an unreleased editor that I use for my QuickBox2D projects, at some point I may release it... but for now I figured I'd post this extremely simplified version for people to expand on.


Have a look at the swf here...

This entry was posted in Box2D, QuickBox2D and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

19 Comments

  1. Posted December 1, 2009 at 11:31 am | Permalink

    it is impossible to select/copy point coords

  2. Posted December 1, 2009 at 11:49 am | Permalink

    made the text selectable… this snippet is really intended to be expanded on though… could be altered to write to a text file etc…

  3. Posted December 1, 2009 at 2:50 pm | Permalink

    It may be good thing that I couldn’t do it - I made a giant penis and tried to copy/paste vertices list here :)

  4. Posted December 1, 2009 at 3:40 pm | Permalink

    great ! many thanks for this and your jog in general :)

  5. Posted December 1, 2009 at 3:58 pm | Permalink

    that is ace

  6. J
    Posted December 2, 2009 at 10:07 am | Permalink

    Yeah ! really cool

  7. HeadFizz
    Posted December 2, 2009 at 12:09 pm | Permalink

    This is great Zevan. I was looking at building something similar as a level editor but this is almost exactly what i would have ended up doing anyway.

    Very much appreciate all you hard work and effort you put into your tuts.

  8. Posted December 2, 2009 at 1:10 pm | Permalink

    Nice !!! Thank you for sharing !

  9. Posted December 3, 2009 at 5:21 am | Permalink

    That is excellent! Keep up the good work :)

  10. Posted December 10, 2009 at 3:38 pm | Permalink

    Hey, i’m trying to make a gate that after it opens, it’ll close by itself. like this:

    [] is a box
    0——- is the gate

    scene 1
    ………[]
    =0——-===

    scene 2
    =0…….===
    …..\[]
    …….\

    scene 3
    =0——–===
    …………
    ………[]

    A box will push it down from gravity, then it will go back up.

    How do i do that?

    Thanks,
    Thomas Francis

  11. Oliver
    Posted December 18, 2009 at 12:31 pm | Permalink

    Hello Zevan,
    i just want to say thank you very much for making QuickBox2D and all the corresponding examples.

  12. Posted December 19, 2009 at 10:04 am | Permalink

    thanks

  13. Tancredi
    Posted January 3, 2010 at 12:37 pm | Permalink

    I’m tryin’ to create a poly based on an array that contains the verts coords, it results like this on trace: 0,0,3.2,2,1.3,4.8

    but when I give the function: var polyMade:QuickObject = st.addPoly ({x:5, y:5, mass:1, skin:poly_1, verts:act_coords});

    it returns the error: ReferenceError: Error #1069: Property length not found on Number and there is no default value.
    at com.actionsnippet.qbox.objects::PolyObject/build()
    at com.actionsnippet.qbox::QuickObject/init()
    at com.actionsnippet.qbox::QuickObject()
    at com.actionsnippet.qbox.objects::PolyObject()
    at com.actionsnippet.qbox::QuickBox2D/create()
    at com.actionsnippet.qbox::QuickBox2D/addPoly()
    at 6_fla::MainTimeline/frame1()

    I’m getting mad, how can I solve this?

  14. Posted January 4, 2010 at 9:07 am | Permalink

    @tamcredi … try using the “points” param instead of the “verts” param

  15. Tancredi
    Posted January 5, 2010 at 3:48 am | Permalink

    I tried that too, no way!

  16. Posted January 22, 2010 at 10:18 pm | Permalink

    Very nice thing. i like it.

  17. Posted February 25, 2010 at 2:17 pm | Permalink

    Also I’m having the same problem as ‘Tancredi’, When I paste the coordinates produced by the editors into the following

    “banana=world.addPoly({x:6,y:11.5, verts:[[-1,0.37,-0.87,0.52,-0.36,0.65,0.22,0.53,0.59,0.2,0.67,-0.19,0.56,-0.3,0.52,-0.53,0.56,-0.61,0.39,-0.56,0.41,-0.47,0.41,-0.29,0.3,-0.09,0.04,0.08,-0.2,0.14,-0.49,0.16,-0.75,0.17,-0.98,0.22]],density:uniqueDensity,friction:uniqueFriction, skin:BananaSkin});”

    it returns:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.actionsnippet.qbox.objects::PolyObject/build()
    at com.actionsnippet.qbox::QuickObject/init()
    at com.actionsnippet.qbox::QuickObject()
    at com.actionsnippet.qbox.objects::PolyObject()
    at com.actionsnippet.qbox::QuickBox2D/create()
    at com.actionsnippet.qbox::QuickBox2D/addPoly()
    at packedlunch_engine_fla::MainTimeline/createLvl()
    at packedlunch_engine_fla::MainTimeline/frame1()

    But however this works fine:

    “lunchBox=world.addPoly({x:14, y:11.5, verts:[[0.2,0.03,1.13,0.03,1.33,0.33,1.33,0.96,0,0.96,0,0.33]],density:uniqueDensity,friction:uniqueFriction, skin:lunchBox_skin})”

    When I created these coodinates manually, before I found this editor I found I would get the same error if I used like over 16 values in the array I also get the same errors on return.

    So personally I think it is some sort of limit, but the object was created in the editor.

    So confused help!

  18. Guest
    Posted March 29, 2010 at 1:12 am | Permalink

    hi, What about Sensors in QuickBox2D?…
    Some times game logic needs to know when two shapes overlap yet there should be no collision response… i know you can use groupIndex to avoid collissions, but Box2D has a special property for this:
    myShapeDef.isSensor = true;
    Maybe quickbox2d could have some variable for this? regards

  19. Ricardo
    Posted April 29, 2010 at 1:40 pm | Permalink

    Hello, guys

    For those who tried to paste the generated points into the addPoly() method, I’ve tested a bit and managed to get it working. Please try the following:

    for instance, instead of {verts: [[-1.38,-2.59,2.18,-2.42,2.95,0.18,1.08,2.41,-1.92,2.31,-2.92,0.11]]}, try {points:[-1.38,-2.59,2.18,-2.42,2.95,0.18,1.08,2.41,-1.92,2.31,-2.92,0.11]} (please note the single pair of brackets ‘points:[points_list]‘, and avoid the double one ‘points:[[points_list]], which I was experiencing problems with too)

    Hope this can help. Lets us know if that worked for you.

    PS: sorry for my english, since I’m not a native speaker
    Cheers

3 Trackbacks

  1. By Introduction to QuickBox2D: Part 2 - GFX Me on June 25, 2010 at 4:24 am

    [...] build yourself some kind of simple polygon editor. There is an example of such an editor on actionsnippet.com. You may want to take a look at it for a few minutes before reading on. It should help solidify [...]

  2. [...] build yourself some kind of simple polygon editor. There is an example of such an editor on actionsnippet.com. You may want to take a look at it for a few minutes before reading on. It should help solidify [...]

  3. By QuickBox2D介绍(二) « FED视野 on June 30, 2010 at 5:40 pm

    [...] build yourself some kind of simple polygon editor. There is an example of such an editor on actionsnippet.com. You may want to take a look at it for a few minutes before reading on. It should help solidify [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*