QuickBox2D Skinning Examples

I've been trying to finalize the way QuickBox2D skinning works... so that its flexible and so that I only add to the api rather than modifying it. So this post really has two main purposes... the first is to show you lots of skinning examples from complex to simple - and the second is to get feedback... I want suggestions regarding this - one of the reasons that Box2D allows you to manage skinning however you want is because there is no real general purpose solution for all cases. I designed QuickBox2D's skinning based on my needs, but I'd like to refine it... and make it more flexible... so post your comments and complaints ;)

Bug Note

There was a bug in QuickBox2D 1.0 with skinning... I've updated the zip... so that this doesn't break anyone's projects... but I'll also be zipping up QuickBox2D 1.1 and posting it late tonight... However in order to tweak these examples you'll need to download this the new 1.0 zip.

Complex Skinning

Here is a demo showing the kind of stuff I use QuickBox2D for... I use lots of polygon rigid bodies so the skins are never scaled or anything... (I used my unreleased editor to generate the polygon data)

Check out the swf...

Download the fla

Library Skinning

By default QuickBox2D will resize your skins to match your rigid bodies. There are times when this doesn't make sense so I've added a new property to disable this. This demo shows circles that are automatically resized and one circle that has automatic skin resizing turned off (scaleSkin = false).

Here is the swf....

Below is the source... Here is the fla

  1. import com.actionsnippet.qbox.*;
  2. stage.frameRate = 60;
  3. var sim:QuickBox2D = new QuickBox2D(this, {debug:false});
  5. sim.createStageWalls();
  7. // QuickBox2D by default scales library skins
  8. sim.addCircle({x:3, y:3, radius:2, skin:Xcircle});
  9. sim.addCircle({x:6, y:3, radius:0.5, skin:Xcircle});
  10. sim.addCircle({x:18, y:3, radius:1, skin:Xcircle});
  12. // sometimes you may not want this behavior
  13. // here the rays of the ToothSun skin are not part of the
  14. // rigid body...
  15. sim.setDefault({scaleSkin:false});
  16. sim.addCircle({x:12, y:3, radius:73 / 60, skin:ToothSun});
  18. sim.start();
  19. sim.mouseDrag();

DisplayObject Skinning

This feature was requested by a few users. Basically it allows you to lay your DisplayObjects out on the stage... QuickBox2D reads their width, height, x, y and rotation values and adjusts the rigid body accordingly. If you specify width, height or radius in the params object then QuickBox2D will use that value - however currently setting x, y or angle in the params object will simply be ignored... as your basically defeating the purpose of using a DisplayObject skin. You can however set x, y and angle immediately after using one of the QuickBox2D creation methods... but really you should just use a library skin if you intend to set all the properties in ActionScript.

Have a look at the swf...

This source is a bit long so you can download the fla here...

Looking for Feedback

I think those few fla files cover most of the different ways you can do skinning in QuickBox2D. I may elaborate a bit in a future post or in the comments... I'd really appreciate any suggestions people have regarding this, so please post comments if you dislike something or find any bugs...

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


  1. Posted September 22, 2009 at 2:04 pm | Permalink

    I don’t know if you’re doing it this way, but for my own game engine I can create a special “bounds” Sprite that is a rectangle representing the collision width and height. The engine will set that object to visibility=false, but use its dimensions for the physics engine.

  2. Posted September 22, 2009 at 2:58 pm | Permalink

    That’s not how it works, but I have considered adding that feature - I didn’t implement it because I pretty much use my unreleased editor for creating skins… I think I will release a simplified version of my editor in the next week or so…

  3. Posted September 22, 2009 at 6:07 pm | Permalink


    thx for the bug correction.

  4. DieTapete
    Posted September 23, 2009 at 10:36 am | Permalink

    Hey it would be really great if you release your editor. Those examples look really promising! Thank you for the effort you put into this!

  5. systat
    Posted September 27, 2009 at 1:03 pm | Permalink

    Hey, do you know how can I skin rigid bodies in flex develop or flashdevelop?

  6. Posted September 27, 2009 at 4:51 pm | Permalink

    There are a few ways… but you could put all your library assets from flash in a SWC… you could also load SWF files and get the linkage classes from them… another way would be just using bitmaps and Loaders…. lot of different options…

  7. CD
    Posted October 23, 2009 at 5:26 pm | Permalink

    Your classes have my life SO much easier and really appreciate your work!
    But - Is there any way to change the width/height/scale of an object already defined? Thanks!

  8. Nicolas
    Posted October 24, 2009 at 5:01 pm | Permalink

    scaleSkin is not working properly for me…. not sure whats going on. My skins stay what the size they were from the library and don’t scale no matter what.

  9. Posted October 26, 2009 at 6:08 am | Permalink

    @Nicolas…. have you tried running the fla files included in this post… and have you downloaded the latest version of QuickBox2D?

  10. Posted October 26, 2009 at 6:09 am | Permalink

    @CD … Box2D doesn’t have any way to scale rigid bodies unfortunately…the only way to do that is to destroy the object and then create it again…

  11. systat
    Posted October 31, 2009 at 4:34 pm | Permalink

    Zevan, I have the same problem as Nicolas, do you have any idea why scaling skin doesn’t work properly?

    And yes I tried to run your .fla file

  12. systat
    Posted October 31, 2009 at 4:59 pm | Permalink

    One more question regarding gravity, I added option to change gravity, and I saw that after object get still, and I try to change gravity again, those object’s won’t respond until I click on them, or they get hit by other object, why that happens?


  13. Posted November 10, 2009 at 7:35 am | Permalink

    Hi there, firstly I absolutely love what your doing with this! But i find my skins don’t autoscale to the size of my rigid bodies. Even if I download FLA’s from this page and run them, all the skins remain their original sizes regardless of “scaleSkin:true”. Any idea what could be causing this? Thanks

  14. Posted November 10, 2009 at 8:07 am | Permalink

    hey doug… which version of quickBox2D are you using and which version of Box2DFlashAS3 are you using?… also, if you post a link to the fla file I’ll take a look.

  15. Posted November 10, 2009 at 9:17 am | Permalink

    I’m using box2D version 2.0.2 and Quickbox2D version 1.1. If I download and publish this .FLA http://www.actionsnippet.com/swfs/skinning/lib_skinning.fla it runs fine with no errors but the skins are all the same size. Even though the 3 same-skinned balls are 3 different physical sizes. Thanks for looking at this for me, it looks like there are a few people experiencing the same issue.

  16. Posted November 10, 2009 at 9:22 am | Permalink

    This is the result: http://quickbox.maadserver.com/

  17. Posted November 10, 2009 at 9:34 am | Permalink

    Ok i feel like a complete idiot. It turns out i was in fact using the latest version of Box2D with version 1.0 of Quickbox. Even though i had downloaded 1.1 I was still linking to the old version in my build path. Changing to version 1.1 of Quickbox solved the issue!

    Thanks for your help anyway and keep up the good work mate!

  18. Posted December 23, 2009 at 5:52 pm | Permalink

    Hi Zevan,

    I’m having a small skinning issue. It works perfectly when you run the swf alone, but it breaks when it’s in an html page. I’m using a library item as the skin for a wheel in a game. After it spins for about 20 seconds, the skin ceases to rotate. I know the object itself continues to rotate because the car still works, but the skin just holds still. If I spin it the other direction for a while, it starts working again making me think there’s a limit to the number of rotations the skin can do. Here’s the link so you can see it in action: http://designxcore.com/stock/flash/box2dCar/JeepSafari.html


  19. Posted March 11, 2010 at 11:52 am | Permalink

    “another way would be just using bitmaps and Loaders…. lot of different options…”

    I’m trying to cobble together an example with using loaders and I’m so far unsuccessful. It looks like CircleObject is just checking for a Display Object. In this example I’m waiting until a bitmap is loaded in, wrapping it in a sprite and trying to set it as the skin.

    	import com.actionsnippet.qbox.*;
    	import flash.display.Loader;
    	import flash.display.MovieClip;
    	import flash.display.Sprite;
    	import flash.events.Event;
    	import flash.net.URLRequest;
    	public class SimpleSkin extends MovieClip
    		private var _ldr:Loader;
    		public function SimpleSkin()
    			var req:URLRequest = new URLRequest("images/thumb.png");
    			_ldr = new Loader();
    			_ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
    		private function imgLoaded(e:Event):void {
    			var s:Sprite = new Sprite();
    			stage.frameRate = 60;
    			var sim:QuickBox2D = new QuickBox2D(this, {debug:false});
    			sim.addCircle({skin:s});//sprite just sits there... 

    It seems to be getting stuck. Also, if there were a way to set a skin after an object was constructed that would be awesome too, but I could see reasons for not wanting that.

  20. sam
    Posted March 15, 2010 at 4:30 am | Permalink

    Hi Zevan, i’ve created several circles inside a “for in” loop. i’ve added a skin which fit perfectly. But my question is, how do you target the skin after creation?

  21. Posted March 15, 2010 at 6:21 am | Permalink

    check the comments for this post I answer that question somewhere in there… http://actionsnippet.com/?p=2793#comments

  22. Mauricio
    Posted March 30, 2010 at 10:32 pm | Permalink

    Hi,.. this is not related to skinning, but i hope is useful…
    I would like an option (feature) that returns the QuickObject
    that you clicked on stage…
    Something like the “GetBodyAtMouse()” private function
    used on QuickBox2D.as to drag&drop, but returning the quickObject reference
    that you just clicked… is that possible?

  23. Jon
    Posted April 13, 2010 at 2:02 pm | Permalink

    Library skinning works great, but when I create a skin class, it attaches well, but doesn’t scale the skin… any hints?

  24. ctmanic
    Posted April 22, 2010 at 3:10 am | Permalink

    I was wondering is it possible t attach event listeners to a QuickObject? Like I would like to have it that either a mouseover or click even would trigger something. A click, I am sure, is gobbled up by the mouse down interactivity but a mouse over would be sufficient for my purposes. Any thoughts?

  25. Posted April 22, 2010 at 5:32 am | Permalink

    yes you can add mouseEvents by adding them onto the display object that is associated with the rigid body:

    myQuickObject.userData.addEventListener(MouseEvent.ROLL_OVER, onOver)…

  26. ctmanic
    Posted April 22, 2010 at 5:53 pm | Permalink

    Thanks for responding to my question about event listeners. The target of the event then is the skin. so if I pass values for the skin, then I can call that back up is that right it works for me, just wanted to see if that is the “proper” way to be doing things ;)
    var patternGroup:QuickObject = _sim_quickbox2D.addGroup({x:PHYSICS_SCALE*(xPos), y:PHYSICS_SCALE*(yPos), objects:patternPiecesArray, angle:rot, draggable:false, skin:Pattern3Skin});
    (patternGroup.userData as Pattern3Skin).hello = ‘hey man’;

    patternGroup.userData.addEventListener(MouseEvent.MOUSE_UP, upHandler);

    and then the handler
    public function upHandler(e:MouseEvent):void

    traces “hey man”.

    Look ok?

  27. Posted April 23, 2010 at 6:36 am | Permalink

    That looks good.

  28. Jon
    Posted April 27, 2010 at 2:02 pm | Permalink

    I’m also seeing some strangeness around where I am telling the body to originate from (x,y)… seems to work until i attach a class to it as the skin… then it seems to come from 0,0 on the stage…

  29. Ecky
    Posted June 5, 2010 at 1:56 am | Permalink

    Hello. This library does make my life easier! :D

    however, is there any way to use an INSTANCE instead of Class for skin? So that you can do stuff like this :
    q.addCircle({ skin:new CustomSkin(”ball.png”) });
    or maybe
    QObj.setSkin(new CustomSkin(”ball.png”));

  30. Posted June 5, 2010 at 7:22 am | Permalink

    Yes. You can do :

    createBox({x:3, y:3, skin:MyClass});

  31. Posted July 31, 2010 at 5:29 am | Permalink

    I’m facing a problem with skining.
    It works great with box and circles, but not with polys.

  32. Posted August 16, 2010 at 9:43 am | Permalink

    cheers bro for posting do you’ve feed here? I’d like to add them to my reader

  33. scott
    Posted October 20, 2010 at 12:20 pm | Permalink

    Is there a way to skin AND display the wireframe? I’d like to tweak my polygon/skin combo.

5 Trackbacks

  1. [...] テクスチャサイズの自動調整 – QuickBox2D Skinning Examples [...]

  2. [...] of the coolest features I’ve found so far is being able to easily skin QuickObjects by just specifying a DisplayObject class as the skin property of the QuickObject’s params object. [...]

  3. [...] Over the past few months, more skinning features have been added at the request of developers making use of QuickBox2D. I use the techniques described above exclusively, but if you’re interested in seeing a few additional skinning techniques, have a look at this post on actionsnippet. [...]

  4. [...] Over the past few months, more skinning features have been added at the request of developers making use of QuickBox2D. I use the techniques described above exclusively, but if you’re interested in seeing a few additional skinning techniques, have a look at this post on actionsnippet. [...]

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

    [...] Over the past few months, more skinning features have been added at the request of developers making use of QuickBox2D. I use the techniques described above exclusively, but if you’re interested in seeing a few additional skinning techniques, have a look at this post on actionsnippet. [...]

Post a Comment

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