{"id":413,"date":"2009-09-22T13:40:15","date_gmt":"2009-09-22T20:40:15","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2224"},"modified":"2009-09-22T13:40:15","modified_gmt":"2009-09-22T20:40:15","slug":"quickbox2d-skinning-examples","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=413","title":{"rendered":"QuickBox2D Skinning Examples"},"content":{"rendered":"<p>I&#8217;ve been trying to finalize the way QuickBox2D skinning works&#8230; 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&#8230; the first is to show you lots of skinning examples from complex to simple &#8211; and the second is to get feedback&#8230; I want suggestions regarding this &#8211; 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&#8217;s skinning based on my needs, but I&#8217;d like to refine it&#8230; and make it more flexible&#8230; so post your comments and complaints \ud83d\ude09<\/p>\n<h2>Bug Note<\/h2>\n<p>There was a bug in QuickBox2D 1.0 with skinning&#8230; <a href=\"https:\/\/actionsnippet.com\/source\/QuickBox2D_v1.0.zip\">I&#8217;ve updated the zip<\/a>&#8230; so that this doesn&#8217;t break anyone&#8217;s projects&#8230; but I&#8217;ll also be zipping up QuickBox2D 1.1 and posting it late tonight&#8230; However in order to tweak these examples you&#8217;ll need to <a href=\"https:\/\/actionsnippet.com\/source\/QuickBox2D_v1.0.zip\">download this the new 1.0 zip.<\/a><\/p>\n<h2>Complex Skinning<\/h2>\n<p>Here is a demo showing the kind of stuff I use QuickBox2D for&#8230; I use lots of polygon rigid bodies so the skins are never scaled or anything&#8230; (I used my unreleased editor to generate the polygon data)<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"http:\/\/www.actionsnippet.com\/swfs\/skinning\/torso_skinned.html\" target=\"blank\"><br \/>\nCheck out the swf&#8230;<br \/>\n<img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/complex_skin.gif\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/skinning\\\/torso_skinned.swf&quot;,&quot;title&quot;:&quot;torso skinned&quot;,&quot;width&quot;:800,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: torso skinned<\/span><\/button><\/span><\/p>\n<p><a href=\"http:\/\/www.actionsnippet.com\/swfs\/skinning\/torso_skinned.fla\">Download the fla<\/a><\/p>\n<h2>Library Skinning<\/h2>\n<p>By default QuickBox2D will resize your skins to match your rigid bodies. There are times when this doesn&#8217;t make sense so I&#8217;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).<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"http:\/\/www.actionsnippet.com\/swfs\/skinning\/lib_skinning.html\" target=\"blank\"><br \/>\nHere is the swf&#8230;.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/lib_skin.gif\" \/><br \/>\n<\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/skinning\\\/lib_skinning.swf&quot;,&quot;title&quot;:&quot;lib skinning&quot;,&quot;width&quot;:800,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: lib skinning<\/span><\/button><\/span><\/p>\n<p>Below is the source&#8230; <a href=\"http:\/\/www.actionsnippet.com\/swfs\/skinning\/lib_skinning.fla\">Here is the fla<\/a><\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nimport com.actionsnippet.qbox.*;\r\nstage.frameRate = 60;\r\nvar sim:QuickBox2D = new QuickBox2D(this, {debug:false});\r\n\r\nsim.createStageWalls();\r\n\r\n\/\/ QuickBox2D by default scales library skins\r\nsim.addCircle({x:3, y:3, radius:2, skin:Xcircle});\r\nsim.addCircle({x:6, y:3, radius:0.5, skin:Xcircle});\r\nsim.addCircle({x:18, y:3, radius:1, skin:Xcircle});\r\n\r\n\/\/ sometimes you may not want this behavior\r\n\/\/ here the rays of the ToothSun skin are not part of the \r\n\/\/ rigid body...\r\nsim.setDefault({scaleSkin:false});\r\nsim.addCircle({x:12, y:3, radius:73 \/ 60, skin:ToothSun});\r\n\r\nsim.start();\r\nsim.mouseDrag();\r\n<\/pre>\n<h2>DisplayObject Skinning<\/h2>\n<p>This feature was requested by a few users. Basically it allows you to lay your DisplayObjects out on the stage&#8230; 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 &#8211; however currently setting x, y or angle in the params object will simply be ignored&#8230; 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&#8230; but really you should just use a library skin if you intend to set all the properties in ActionScript.<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"http:\/\/www.actionsnippet.com\/swfs\/skinning\/do_skinning.html\" target=\"blank\"><br \/>\nHave a look at the swf&#8230;<br \/>\n<img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/do_skin.gif\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/skinning\\\/do_skinning.swf&quot;,&quot;title&quot;:&quot;do skinning&quot;,&quot;width&quot;:800,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: do skinning<\/span><\/button><\/span><\/p>\n<p>This source is a bit long so you can <a href=\"http:\/\/www.actionsnippet.com\/swfs\/skinning\/do_skinning.fla\">download the fla here&#8230;<\/a><\/p>\n<h2>Looking for Feedback<\/h2>\n<p>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&#8230; I&#8217;d really appreciate any suggestions people have regarding this, so please post comments if you dislike something or find any bugs&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been trying to finalize the way QuickBox2D skinning works&#8230; 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&#8230; the first is to show you lots of skinning examples from complex to simple &#8211; and the second is to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,12],"tags":[3,14,15,4,16,131],"class_list":["post-413","post","type-post","status-publish","format-standard","hentry","category-box2d","category-quickbox2d","tag-actionscript","tag-as3","tag-box2d","tag-flash","tag-quickbox2d","tag-skinning"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=413"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/413\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}