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();
		}
	}
}

4 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.

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 Software Developer in Dublin, Ireland

Portfolio

Bayer Pixel Bender Filter

Bayer Mosaic Filter in Pixel Bender


Now, seeing as how I’ve been trying to learn some Pixel Bender coding lately[...]

Liquitext

Liquid Text Effect


Haven’t been too active around here lately due to a major on going project at work lately as well as the fact that my wife and I are in the slow process of moving homes. Really, the only free time it seems I have these days is during the lunch hour. So, over the past two days, I came up with this fun little toy during lunches[...]

Google’s Text To Speech Engine in Flash

I’m not sure how I managed to miss this, but I just happened to run across a ‘new’ (well, newish), albeit still unofficial, offering of Google today: text-to-speech. You can see what few details there are on this Techcrunch post. Basically, it just boils down to this though – you send your phrase to be [...]

Quick Sound Effects Generator


Need some beeps, boops, or bops, to go with your UI or games [...]

Quick QuickBox2D Tip II – Collision Detection

Custom collision detection/handling in QuickBox2D [...]

None of This Runs Eternal


No Flash/Actionscript stuff here. Just me rambling about the upcoming Current 93 concert [...]

Playing Around with the New UndoManager

Included in the Flex 4.0 SDK and the, just released, Flash Professional CS5 lies a new hidden little gem of a class: flashx.undo.UndoManager (although the Flex 4.0 SDK’s been out for awhile, I have to admit I didn’t even notice this until I installed Flash CS5 and started poking around the documentation looking for new [...]

Making Waves

In a previous post, “Digging into the Microphone in Flash Player 10.1″, reader David Law asked in the comments how it would be possible to save .wav files to the server. I wasn’t sure right offhand, but thought I’d spend my lunch hour yesterday looking into it. Well, after reading this quick tutorial on Adobe [...]

Some Drawing Fun and a Bad Movie You’ll Never See

Earlier today, Dave Gillem posted a link on Facebook to an incredible Processing based drawing application. Thought I’d have a go at reproducing something similar in Flash. Well, I failed miserably, but the results were still interesting enough to check out. You can play around with it below. Just mouse down to draw in the [...]

Animating Bezier Curves


The other day I got the notion in my head that I wanted to draw some bezier curves in an animated fashion. I’m sure this has been done a million times before, but sometimes reinventing the wheel can be a good learning experience [...]

My God, It’s Full of Stars…


Just a quick little thing I got an idea for (i.e. pretty much ripped off) while browsing Processing examples.

Another Year, Another Look

As a few folks may have noticed, the blog is looking a little bit different as of today [...]

The Webcam Warholizer


Just a little bit of quick Friday fun with webcam and bitmapata…

More With the JiglibFlash Terrain

Playing around a bit more with the animated JiglibFlash terrain idea from my last post, I wanted to see how it would work in conjunction with a webcam. So, needless to say, you’ll need a webcam to check out the results below.

Rockin and Rollin with the JiglibFlash Terrain


Finally got the chance to play around with the new JiglibFlash height map terrain, today, and have to say I am very impressed [...]