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)
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).
Below is the source... Here is the fla
-
import com.actionsnippet.qbox.*;
-
stage.frameRate = 60;
-
var sim:QuickBox2D = new QuickBox2D(this, {debug:false});
-
-
sim.createStageWalls();
-
-
// QuickBox2D by default scales library skins
-
sim.addCircle({x:3, y:3, radius:2, skin:Xcircle});
-
sim.addCircle({x:6, y:3, radius:0.5, skin:Xcircle});
-
sim.addCircle({x:18, y:3, radius:1, skin:Xcircle});
-
-
// sometimes you may not want this behavior
-
// here the rays of the ToothSun skin are not part of the
-
// rigid body...
-
sim.setDefault({scaleSkin:false});
-
sim.addCircle({x:12, y:3, radius:73 / 60, skin:ToothSun});
-
-
sim.start();
-
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.
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...
33 Comments
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.
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…
cool,
thx for the bug correction.
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!
Hey, do you know how can I skin rigid bodies in flex develop or flashdevelop?
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…
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!
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.
@Nicolas…. have you tried running the fla files included in this post… and have you downloaded the latest version of QuickBox2D?
@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…
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
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?
Thanks.
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
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.
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.
This is the result: http://quickbox.maadserver.com/
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!
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
Thanks!
“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.
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.
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?
check the comments for this post I answer that question somewhere in there… http://actionsnippet.com/?p=2793#comments
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?
Library skinning works great, but when I create a skin class, it attaches well, but doesn’t scale the skin… any hints?
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?
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)…
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
code:
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
{
trace(’hitobject’);
trace(e.currentTarget.hello);
}
traces “hey man”.
Look ok?
That looks good.
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…
Hello. This library does make my life easier!
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”));
Yes. You can do :
createBox({x:3, y:3, skin:MyClass});
I’m facing a problem with skining.
It works great with box and circles, but not with polys.
cheers bro for posting do you’ve feed here? I’d like to add them to my reader
Is there a way to skin AND display the wireframe? I’d like to tweak my polygon/skin combo.
5 Trackbacks
[...] テクスチャサイズの自動調整 – QuickBox2D Skinning Examples [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]