Quick QuickBox2D Tip – Runtime Skinning

Been playing around a quite a bit with QuickBox2D lately (check out my last post for one example), and have been loving it.

One 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. The one drawback to this feature is that the you can’t simply use a Sprite or MovieClip instance as the skin – you have to use the actual class. The bad part of this is that you’re limited at runtime to what you can use as a skin. Say for example you want to let your users draw their own boxes or you want to use a webcam shot as I did in my little game.

Well, though this may be obvious to most folks, the quick tip is this: The skin of a QuickObject can be referenced with the userData property. To create a custom skin at runtime, all you have to do is add a child to the current skin of the QuickObject instance with: someQO.userData.addChild(someDisplayObject);

One gotcha to watch out for is that by default, the skin is scaled to the dimensions of the QuickObject created. If you don’t want that behavior, you can specify scaleSkin as false in the params object.

Here’s a quickie example where 5 boxes are skinned with randomly generated Sprite instances:

The Main.as file:

package {
 
	import com.actionsnippet.qbox.QuickBox2D;
	import com.actionsnippet.qbox.QuickObject;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
 
	[SWF(width='500', height='400', backgroundColor='#999999', frameRate='40')]
	public class Main extends MovieClip {
 
		public static const RATIO:int = 30;
 
		private var _sim:QuickBox2D;
 
		public function Main():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			initWorld();
 
			var t:Timer = new Timer(1000, 5);
			t.addEventListener(TimerEvent.TIMER, addBox);
			t.start();
		}
 
		private function initWorld():void {
			_sim = new QuickBox2D(this);
			_sim.createStageWalls();
			_sim.mouseDrag();
			_sim.start();
		}
 
		private function addBox(event:TimerEvent):void {
			var boxGraphic:Sprite = randomBox();
			var w:Number = randRange(100, 20) / RATIO;
			var h:Number = randRange(100, 20) / RATIO;
			var box:QuickObject = _sim.addBox( { width:w, height:h, skin:Skin } );
			box.userData.addChild(boxGraphic);
		}
 
		private function randomBox():Sprite {
			var c:uint = Math.random() * 0xFFFFFF;
			var s:Sprite = new Sprite();
			s.graphics.beginFill(c);
			s.graphics.drawRect( -50, -50, 100, 100);
			s.graphics.endFill();
			return s;
		}
 
		private function randRange(max:Number, min:Number = 0, decimals:int = 0):Number {
			if (min > max) return NaN;
			var rand:Number = Math.random() * (max-min + Math.pow(10, -decimals)) + min;
			return int(rand * Math.pow(10, decimals)) / Math.pow(10, decimals);
		}
	}
}

And the very simple Skin.as:

package  {
 
	import flash.display.Sprite;
 
	public class Skin extends Sprite{
 
		public function Skin() {
			graphics.beginFill(0x000000);
			graphics.drawRect( -50, -50, 100, 100);
			graphics.endFill();
		}
	}
}

5 Comments »

  1. samBrown says:

    I’ve been meaning to take more time to play around with Box2D…examples like this and those over at ActionSnippet are quite inspiring…nice work; thanks for the post

  2. Thanks for this example.
    I wrote an article about it. First, overriding DisplayObject properties http://www.eventdispatcher.fr/2009/10/14/overriding-displayobject-properties/
    and after apply a skin to QuickObjet.
    QuickBox2D is a very very nice library :p

  3. Zevan says:

    Hey Devon,
    Maybe I misread the article, but you can use DisplayObject instances as skins… check this out:

    http://actionsnippet.com/?p=2224

    again, maybe I misread, but just in case I figured I’d post that link…

    cheers :)

  4. Devon O. says:

    Hey Zevan,

    Thank you for the link. I may have misunderstood the description in the post on using DisplayObjects as skins (admittedly I didn’t even download the example file), but the post says something about laying the display objects out on the stage – but I was looking for a way to use DisplayObjects that were created dynamically at run time so couldn’t be on the stage or in the library. Again, though, it was probably my misunderstanding. I’ll check out that example file and probably realize there was an easier way than what I posted.

    cheers.

    d.

  5. [...] Introduction to QuickBox2D: Part 2 『 QuickBox2D 1.0 正式版リリース 』 API文档 Quick QuickBox2D Tip – Runtime Skinning //skinning rigid bodies [SWF(width=400,height=400,frameRate=60)] import [...]

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

Devon O. Wolfgang

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development”

Contributing Author of “Flash AS3 for Interactive Agencies”

Senior Flash Engineer PopCap Games, International Ltd.

Portfolio

Santabot: A Unity3D Flash Game


All right, so a Christmas game like “Santabot vs. The Flying Saucers from Mars” may be a day late[...]

Magnify – a jQuery Plugin


Let me begin by saying right up front, I have not given up on Flash[...]

It’s a Starling Halloween


Getting some practice for the upcoming Zombie Apocalypse[...]

Getting Started with Proscenium

So I had a chance this weekend to sit down and play around with Adobe’s new 3D framework for Stage3D, Proscenium, and thought I’d share a few of the results (a word of caution, there are no preloaders for any of the examples and may load a bit slowly). The first shows some reflections and [...]

Particle Editor for Starling Framework

An in-browser particle editor for the Starling 2D Framework for Flash Player 11.

So Long and Thanks for all the Flash on the Beach

So, another Flash on the Beach has just has just drawn to a close[...]

Game Development Tips from the Trenches of PopCap

Well, this is a post that’s a bit overdue, but, thanks to a well timed bank holiday, I finally had the opportunity to sit down and type up what I’ve been meaning to for some time now…

Old Skool Demoscene FX as 3D Textures

Many moons ago, I got the idea to create some demoscene plane deformation effects in Flash based on the formulas found here: http://www.iquilezles.org/www/articles/deform/deform.htm. I posted my less than desired results up on wonderfl. Thankfully, fellow wonderfl user, Hasufel, forked my attempt and optimized the hell out of it coming up with this. Well, today, for no [...]

Making The Gaming Scene (A Change in Careers)

And for my second blog post of the day, a much more personal note. After about three years of working with, what I would consider as objectively as possible, the best digital agency in Ireland, vStream Digital Media, I have made the immense career decision to leave the agency world and enter the arena of [...]

Feeling Lucky?

Images to dice, kick ascii style [...]

Adventures in Playbook Land

Adventures in Playbook Land


Now that the ordeal is over, I thought I’d take the time to sit down and share my account of what it was like to develop a Blackberry Playbook application using the Adobe Flex SDK[...]

Flash

Draw it for Me

So many ideas – so little time….

Kinect Application Running in Dublin

So, on Friday I just wrapped up our latest project at vStream Digital Media, a Kinect powered flipbook that lets users flip through the hand written notebooks of Philip Lynott of Thin Lizzy. The app uses OpenNI, runs in Adobe AIR and is currently on display at a pretty bitchin’ Phil Lynott exhibition running in [...]

Beach Ball Kinect Party

So we finally got a Kinect camera hooked up to a pc at work and, while it doesn’t seem to be legal to use it for commercial projects (but, hey, I’m no lawyer), the boss asked me to get it figured out and come up with some ideas just in case it would be feasible [...]

Facebook and Flash – A Book Review

Now, I should begin by saying I absolutely hate building Facebook applications. And I build a lot of them at work. Every time I get the word from above that we’re doing another FB app, I just groan – both inwardly and out. It’s become a running joke of the office. Why do I dislike [...]

Multitouch Fluid Dynamics with AIR for Android and RTMFP

The other day I was having some fun playing around with Eugene Zatepyakin’s (aka @inspirit) FluidSolverHD (Actionscript port of C++ fluid dynamics library, MSAFluid. Or is MSAFluid, the processing/java port of the C++ library? In any case it’s a very cool fluid dynamics thingamabob – the HD version using Alchemy). After a bit of tinkering, [...]