The first thing I wanted to know was, is there a way to make an animation that can be shared among characters in a game? And could characters be “skinned,” so the same character could change appearances, add/remove body parts or attachments, etc. and retain the same animations? I see it all the time in big-budget 3D games; each character has a skeleton, to which animations may be applied. Each animation can be applied to any character, and each character can use any 3D character model (each of which can of course be “skinned”). So you have three components in the system:

• Skeleton
• Animation
• Skin

Never having been involved with a big-budget game, I can’t tell you the best way to design a system like that. However, as a Flash developer, I can find a good way to do it in 2D, in your browser.

This is a quick example of the system (v0.1) in action. This looks like a timeline animation, but it’s actually done with code. To prove it, click the stage to toggle the animation speed. Notice that it slows down to “bullet time,” but totally smoothly, without the jerkiness of a frame-based animation going down to 3 fps. Also, because of how the system is designed, it can be combined with a physics engine (Box2D, for example) for ragdoll falls from any point in the animation. Think of the possibilities!

Anyway, just wanted to put that out there. I’ve got a couple projects in line first, but I’d like to explore this further to see what kind of gameplay could come of it.

Usually I like to post glamorous stuff, like 3D swirly things and experiments. Occasionally, however, I feel the need to release a little code in the interest of helping a few people out. This code is a review of sorts, since I already posted a similar utility back in June. However, since then I have been expanding my code library and I thought I’d share the latest and much improved version. It’s really a simple concept, but having this in my toolbox has lightened my workload as an ActionScripter considerably.

Advantages

This utility allows you to publish any symbol from Flash and access it at runtime from an ActionScript-only project, such as in Flex Builder. This has a few advantages:

• Easy storage of many assets in one file
• Ability to change graphics without recompiling the main application
• Faster load times with only one HTTP request (as opposed to many separate images and sounds)
• Ability to import vector graphics and animations at runtime
• Smaller main SWF size

The one disadvantage that I can think of is that you’ll need to recompile your library SWF every time you make a change. However, I think the advantages above outweigh this.

Differences in v1.5

Here are the main differences from the last version:

• The class is no longer static. This allows for more than one instance of SWFLibrary at a time.
• The class can now return instances of Sprites, MovieClips, and Sounds from a library SWF.

Usage

1 - In Flash, select “Export for ActionScript” in the symbol’s Linkage settings in the Library (ex. ‘Character’).
2 - Publish the Flash file as a SWF.
3 - Load the SWF into an instance of SWFLibrary
4 - Access the symbol through SWFLibrary, using the class name chosen in Step 1.

A SWFLibrary can be used with four lines of code. Here’s what you’ll need:

// creates an instance of SWFLibrary, adds a listener, and loads a SWF
var gameAssets:SWFLibrary = new SWFLibrary
gameAssets.addEventListener( Event.COMPLETE, handleAssetsLoaded );
gameAssets.load( "myCustomGameAssets.swf" );
 
// accesses the asset (assumes there is a symbol exported as 'Character' in the loaded SWF, as seen in step 1 above)
// this code should run after the Event above has fired
var mySprite:Sprite = gameAssets.getSprite( "Character" );
addChild( mySprite );
 
// gets the asset as a MovieClip (assuming, of course, that it actually is a movieclip)
var myMC:MovieClip = gameAssets.getSprite( "Character" );
addChild( myMC );
 
// getting a sound
var mySound:Sound = gameAssets.getSound( "SoundLinkageNameHere" );
mySound.play();
// === ===

After a symbol has been retrieved from SWFLibrary, it may be treated like any other object.

Download

DOWNLOAD SOURCE

So have fun with this. Hopefully it saves you as much time as it saves me.

To explain what this is, and instead of writing something new, I’ll just quote directly directly from the website:

So there you have it. Go take a look and let me know what you think!

Fig. 1: 27 Cubes

Fig.2: The VectorCube Class

/**
 * A vector Cube class for Mathieu Badimon's excellent FIVe3D library
 * @author Zack Jordan
 * { P I X E L W E L D E R S . C O M }
 */
package com.pixelwelders.five3d
{
	import five3D.display.Sprite3D;
 
	public class VectorCube extends Sprite3D
	{
 
		public var faces		: Array;
 
		public function VectorCube( size:Number, colors:Array = null )
		{
			super();
 
			if ( !colors ) colors = [ 0xFF0000, 0xFF0000, 0xFF0000, 0xFF0000, 0xFF0000, 0xFF0000 ];
			createCube( size, colors );
		}
 
		/**
		 * Creates a new cube at the size specified
		 * 
		 * @param		size			Size of the cube to be created
		 * @return					The new cube
		 */
		private function createCube( size:Number, colors:Array ): void
		{
			faces = new Array();
 
			var xP:Array = new Array(	0, size / 2,	0, -size / 2, 0, 0 );
			var yP:Array = new Array(	0, 0,	0, 0,	-size / 2, size / 2 );
			var zP:Array = new Array(	-size / 2, 0, size / 2, 0, 0, 0	);
			var xR:Array = new Array(	0, 0,	0, 0, -90, 90 );
			var yR:Array = new Array(	0, -90, 180, 90,	0, 0 );
			var zR:Array = new Array(	0, 0,	0, 0, 0, 0 );
 
			for ( var i:int = 0; i < 6; i++ )
			{
				var face:Sprite3D = new Sprite3D();
				face.graphics3D.lineStyle( 1, 0x000000, 1 );
				face.graphics3D.beginFill( colors[ i ] );
				face.graphics3D.drawRect( -size / 2, -size / 2, size, size );
				face.graphics3D.endFill();
				face.singleSided = true;
 
				face.x = xP[ i ];
				face.y = yP[ i ];
				face.z = zP[ i ];
				face.rotationX = xR[ i ];
				face.rotationY = yR[ i ];
				face.rotationZ = zR[ i ];
 
				faces[ i ] = face;
				addChild( face );
			}
 
		}
 
	}
}

So what is this good for? Really, it’s just an easy way to create six faces and arrange them into a cube. You don’t have to worry about depth sorting or any of that stuff because each of the faces is one-sided. However, if you are using more than one of these in your presentation, make sure you specify that container.childrenSorted = true, where container is the Sprite3D containing your Cubes. Otherwise you’ll get some weird results.

Another note: the faces Array is public so you can continue to draw on each face of the cube, and even add children. So really, this is just a starting point; I’ll let you find something useful to do with it.

So between games, I started this little project in Papervision. I’m not sure how far I’ll take it, but it might end up being my entry into the PaperKing3D contest. I found some great images of a Victorian-style deck of cards, and painstakingly clone-brushed a full deck out of the few cards I could find. I then put together the actual game– which is obviously not finished. However, it does actually deal out the cards and keep track of players- the next step is to actually make it judge hands (flush vs. full house, etc.).

The best part of this little demo is what happens when you mouse over your cards (the closest hand). That is Bartek Drozdz’s bend modifier in action. I think it’s pretty eye-catching.

Anyway, that’s it on Pokervision for today; hopefully I’ll have the time to finish this (multiplayer 3D poker, anyone?). In the meantime, I’ll be working on another, possibly more awesome project that I’ll be presenting at tomorrow’s Chicago Flash Meetup. I’ll post more details here later this week.

I make a lot of decisions daily based on things I think I know, but really have just always assumed. And so, on this bus ride, I decided to get to the bottom of a few of them. The first experiment I tried was with the read and write speeds of Objects, Arrays, and Dictionaries. In the past, I have always used Arrays when I need all the nifty sorting and organization methods, Dictionaries when I need fast access, object keys, or weak references, and Objects pretty much never (because they’re messy and slow). So yesterday I decided to see if my assumptions were actually valid, or if I had been doing things wrong this whole time.

So I set up a quick class to test. I created a Dictionary, an Object, and an Array, and then I put 100,000 integers in each one for the write test, and read them back out for the read test. This is what I got (all times are average and in milliseconds).

Obviously there are many more benchmarks that I could have run, but I also had a pretty good book on that bus. I think I’ve done enough experimentation to prove that, once again, my assumptions are invalid.

Sorry for the lack of updates, everyone: I’m currently in Switzerland enjoying the fondue (true story). However, I did stumble across something interesting during my last five-Franc Internet session. Although we’ve all heard for years that Google does index SWFs in some mysterious way, no one has really understood exactly what that meant. All we knew was that it was pretty much useless. However, it looks like Google is getting a little more serious about it, as mentioned in the links below.

Google’s blog:
Google Learns to Crawl Flash

Adobe’s press release:
Adobe Advances Rich Media Search on the Web

However, I still have no idea what this means. After all, any Flash RIA developer worth his salt will be bringing in all his/her data dynamically instead of embedding it in the SWF. I would assume this is the data that Google will be reading, non? Otherwise I’m not sure how it would be different than what we’ve got now. And also because I like to hope for the best, and that would be pretty slick. Game-changing, I’d even say.

So anyway, I’ll leave the in-depth analysis to others. The Alps, after all, are calling.

This is something simple enough that I hesitate to post it, but maybe someone else can benefit. Plus, I always try to have something new on Mondays. Anyway, this a technique I once used back in the dark ages of ActionScript development (meaning AS2). Last week, however, I suddenly had need of it again.

The Scenario

The AS3 event model is a pretty slick deal- much better than the six different ways we used to do it back in AS2. However, I ran into a spot last week in which it failed me. I had several different components in completely different parts of an application, and I wanted them all to listen to each other. That in itself is no problem. The problem was that I also wanted them to be completely unaware of each other, in hopes of keeping the code a bit more encapsulated. So how does one listen for an event that comes from a source whose very existence is unknown?

Option #1

Option #1 was to make all my events bubble, and have each component add event listeners to some display list parent that all the components shared. This would ensure that everyone got their events, but it makes everyone dependent on the current setup. What if I wanted to move a component elsewhere and now it didn’t share that parent? Plus, it’s not a solution that is guaranteed to work in a different app. Plus, it involves children referencing their parent, which I am against on a fundamental, perhaps even a spiritual level. So, scratch Option #1.

Option #2

Then I thought maybe each component should store a reference to all the other components. But once again, you can throw the whole “loosely-coupled” idea out the window. Something about this solution just didn’t feel right.

Option #3

Option #3 was the old AS2 method of creating a central static Broadcaster class and telling everyone to listen to it. Now the only dependency each component had was to one static communication class. Everything else could change as long as they were listening to the Broadcaster. And so, as my great-grandmother has told me, sometimes the old ways are best.

Source

There’s really not much to explain with this class. The only challenge was making a static class into an EventDispatcher, but that turned out to be pretty easy (thanks to G. Skinner, who originally gave me the idea for a static EventDispatcher). Behold:

/**
 * A central event broadcaster
 *
 * @author	Zack Jordan
 * 			{ P I X E L W E L D E R S . C O M }
 */
package com.pixelwelders.events
{
	import flash.events.Event;
	import flash.events.EventDispatcher;

	public class Broadcaster
	{

		private static var eventDispatcher			: EventDispatcher;

		/**
		 * Broadcasts an event to all listeners
		 * To listen to any and all events, use Broadcaster.addEventListener()
		 *
		 * @param	event		The Event to broadcast
		 * @return				nothing
		 */
		public static function broadcast( event:Event ): void
		{
			dispatchEvent( event );
		}

		// === S T A T I C   E V E N T   D I S P A T C H E R ===
		public static function addEventListener( type:String, listener:Function, useCapture:Boolean=false,
			priority:int=0, useWeakReference:Boolean=true ):void
		{
			if ( !eventDispatcher ) eventDispatcher = new EventDispatcher();
			eventDispatcher.addEventListener( type, listener, useCapture, priority, useWeakReference );
		}

		public static function removeEventListener( type:String, listener:Function, useCapture:Boolean=false ):void
		{
			if ( eventDispatcher ) eventDispatcher.removeEventListener( type, listener, useCapture );
  	    	}

		public static function dispatchEvent( p_event:Event ):void
		{
			if ( eventDispatcher ) eventDispatcher.dispatchEvent( p_event );
		}

	}
}

As you can see, this is just a static wrapper for an instance of EventDispatcher. I just route all the methods of the EventDispatcher to static methods, and voilá. As always, if you can think of a better way, just drop it in the comments.

The arc code, by the way, is from an ancient AS2 function called drawWedge() by Ric Ewing, which drew pizza-style wedges. Close enough. With a little elbow grease I managed to bend it to my will. Here’s an example of a bunch of arcs doing their thing:

And here is the code that draws the arc, which extends FIVe3D’s Drawing class. This could probably be cleaned up a bit, since I run through Ric’s arc code twice to create the thing; it wasn’t originally that way, but getting the fill on the inside of the arc proved more difficult than I originally thought.

/**
 * An extension of Mathieu Badimon's FIVe3D Drawing class.
 * This class draws an additional shape onto a FIVe3D Graphics3D instance.
 * This class includes code from by Ric Ewing.
 * 
 * @author 	Zack Jordan
 * 			{ P I X E L W E L D E R S }
 */
package com.pixelwelders.five3d
{
	import five3D.display.Graphics3D;
	import five3D.utils.Drawing;
 
	public class PXWDrawing extends Drawing
	{
 
		/**
		 * Draws a wedge shape onto a Graphics3D instance.
		 * 
		 * @param 	graphics		a Graphics3D instance on which to draw
		 * @param 	x				x position of the center of this wedge
		 * @param	y				y position of the center of this wedge
		 * @param	startAngle		the angle of one straight line of this wedge
		 * @param	arc				the angle (in degrees) of the total arc of this wedge
		 * @param	xRadius			the external radius along the x axis
		 * @param	yRadius			the external radius along the y axis
		 * @param	innerXRadius	the internal radius along the x axis
		 * @param	innerYRadius	the internal radius along the y axis
		 * @param	color			the color of the wedge fill
		 * @param	fillAlpha		the alpha value of the wedge fill
		 * 
		 * @return					nothing
		 */
		static public function drawWedge( 
			graphics:Graphics3D, 
			x:Number, 
			y:Number, 
			startAngle:Number, 
			arc:Number, 
			xRadius:Number, 
			yRadius:Number, 
			innerXRadius:Number, 
			innerYRadius:Number, 
			color:uint = 0xFF0000, 
			fillAlpha:Number = .5 
		): void
		{
			var segAngle	: Number
			var theta		: Number
			var angle		: Number
			var angleMid	: Number
			var segs		: Number
			var bx		: Number
			var by		: Number
			var cx		: Number
			var cy		: Number;
 
			segs = Math.ceil( Math.abs( arc ) / 45 );
			segAngle = arc / segs;
			theta = -( segAngle / 180 ) * Math.PI;
			angle = -( startAngle / 180 ) * Math.PI;
 
			graphics.lineStyle( 1, 0x000000, 1 );
			graphics.beginFill( color, fillAlpha );
			graphics.moveTo( 
				x + Math.cos( startAngle / 180 * Math.PI ) * innerXRadius,
				y + Math.sin( -startAngle/180 * Math.PI ) * innerYRadius 
			);
 
			// line 1
			graphics.lineTo( 
				x + Math.cos( startAngle / 180 * Math.PI ) * xRadius,
				y + Math.sin( -startAngle / 180 * Math.PI ) * yRadius 
			);
 
			// outer arc
			for ( var i:int = 0; i < segs; i++ ) {
				angle += theta;
				angleMid = angle - ( theta / 2 );
				bx = x + Math.cos( angle ) * xRadius;
				by = y + Math.sin( angle ) * yRadius;
				cx = x + Math.cos( angleMid ) * ( xRadius / Math.cos( theta / 2 ) );
				cy = y + Math.sin( angleMid ) * ( yRadius / Math.cos( theta / 2 ) );
				graphics.curveTo( cx, cy, bx, by );
			}
 
			// line 2
			graphics.lineTo( 
				x + Math.cos( ( startAngle + arc ) / 180 * Math.PI ) * innerXRadius, 
				y + Math.sin( -( startAngle + arc ) / 180 * Math.PI ) * innerYRadius 
			);
 
			theta = -( segAngle / 180 ) * Math.PI;
			angle = -( ( startAngle + arc ) / 180 ) * Math.PI;
 
			// inner arc
			for (var j:int = 0; j < segs; j++ ) {
				angle -= theta;
				angleMid = angle + ( theta / 2 );
				bx = x + Math.cos( angle ) * innerXRadius;
				by = y + Math.sin( angle ) * innerYRadius;
				cx = x + Math.cos( angleMid ) * ( innerXRadius / Math.cos( theta / 2 ) );
				cy = y + Math.sin( angleMid ) * ( innerYRadius / Math.cos( theta / 2 ) );
				graphics.curveTo( cx, cy, bx, by );
			}			
			graphics.endFill();			
		}
	}		
}

Another note on this experiment: the SWF is 16k. Holy crap.