In previous posts I showed a generic walking character rendered from Poser named Ryan. He is fine for getting somewhere quickly with a proof-of-concept without getting lost in the weeds of what is possible with Poser.

How To Bobble

How Not To Bobble

Sorry, Was I Bobbling?

Some tweening and testing for each angle made a convincing connection between the two images while maintaining a certain amount of artificiality to the whole thing. Most of the tweens in the mirror angles of the character could be reused by pasting them in and flipping them horizontally. Plan on spending some time on this part, although not as much as you might if you have a learning curve to climb with Poser.

Final Build

As I promised, I will describe how I set up the motion analyzer to test character animations without loading them into a game. It should go without saying that you should still test your character in the game – the idea is to eliminate simple issues before getting to that stage.

This is really quite simple: set up a document class that puts listeners on every character on the stage. put a button in your library and use it to set up the controls you want to wire up to the character. If the clip has a timeline it will run the lead-in and loop until you stop it.

I added a tile background to help visualize foot position and relative angles.

The same swf that is used to test can be used in the game as media. I recommend hiding the tiled background if you want to optimize file size. Do this by leaving “include hidden layers” unchecked in the publish dialog or setting the layer that contains them to be a guide.

The ActionScript is very basic. The connection between the frame animation and the document class are one of the things that keeps me coming back to Flash. At some point I want to try sprite sheets in ffilmation too though.

The code

package {
	import fl.controls.Button;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.filters.GlowFilter;
 
	public class FFChar_MotionAnalyzer extends MovieClip {
		public var FFChar_0:MovieClip;
		public var FFChar_45:MovieClip;
		public var FFChar_90:MovieClip;
		public var FFChar_135:MovieClip;
		public var FFChar_180:MovieClip;
		public var FFChar_225:MovieClip;
		public var FFChar_270:MovieClip;
		public var FFChar_315:MovieClip;
 
		public var run_btn:Button;
		public var walk_btn:Button;
		public var jump_btn:Button;
		public var stop_btn:Button;
 
		private var cur_FFChar:MovieClip;
		private var glowFilter:GlowFilter;
		private var rollFilter:GlowFilter;
		private var characters:Array;
 
		public function FFChar_MotionAnalyzer() {
			rollFilter=new GlowFilter(0x00FF00);
			glowFilter = new GlowFilter();
			characters = new Array(FFChar_0, FFChar_45, FFChar_90, FFChar_135, FFChar_180, FFChar_225, FFChar_270, FFChar_315);
			for each (var char:MovieClip in characters)
			{
				char.addEventListener(MouseEvent.CLICK, FFCharClicked);
				char.buttonMode = true;
			}
			run_btn.addEventListener(MouseEvent.CLICK, run_btnClicked);
			run_btn.label="Run";
			walk_btn.addEventListener(MouseEvent.CLICK, walk_btnClicked);
			walk_btn.label="Walk";
			jump_btn.addEventListener(MouseEvent.CLICK, jump_btnClicked);
			jump_btn.label="Jump";
			stop_btn.addEventListener(MouseEvent.CLICK, stop_btnClicked);
			stop_btn.label="Stop";
		}
 
		private function FFCharClicked(event:MouseEvent):void {
			trace(event.target.name);
			cur_FFChar=event.target as MovieClip;
			clearGlows();
			cur_FFChar.filters=[glowFilter];
		}
 
		private function clearGlows():void {
			for (var i:uint = 0; i < numChildren; i++) {
				getChildAt(i).filters=[];
			}
		}
 
		private function run_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndPlay("Run");
				cur_FFChar.filters=[];
			}
		}
 
		private function walk_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndPlay("Walk");
				cur_FFChar.filters=[];
			}
		}
 
		private function jump_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndPlay("Jump");
				cur_FFChar.filters=[];
			}
		}
 
		private function stop_btnClicked(event:MouseEvent):void {
			if (cur_FFChar!=null) {
				cur_FFChar.gotoAndStop("Stand");
				cur_FFChar.filters=[];
			}
		}
	}
}

My next post will show an example where using this approach is essential to setting up a hybrid Poser/Photo cartoon character.

Adding objects to a scene is very similar to the process for adding a character. According to the documentation the only difference is that objects are static, and they require less memory resources from the engine to exist on the stage.

You can use any method to create the graphics that make up an object. I used a prop in Poser and set it to an angle that I hoped would fit in my layout. You can create multiple angles using the same method as with characters. Keep the pixel dimensions of the object bitmap as small as possible – I keep a high-res version and make smaller copies from it. Make sure to set the export properties so that ActionScript can find it:

You can store multiple objects in a single fla/swf. I approach them as any shared library – you can organize libraries by project, theme or other principle that meets your project’s requirements. They don’t have to be placed on the stage as I’ve done either.

Create a definition file for your library to enable ffilmation to utilize it. The name should be the same as the swf name, only with an .xml extension. Here is a sample:

<?xml version="1.0" encoding="utf-8" ?>
<definitions>
<media src="../media/medicalProps.swf"/>
 <objectDefinition name="LabTube">

 <displayModel>
 <sprite angle="0" src="LabTube"/>
 </displayModel>

 <collisionModel>
 <box width="116" depth="70" height="200"/>
 </collisionModel>

 <shadowModel>
 <shadow type="sprite"/>
 </shadowModel>

 </objectDefinition>

</definitions>

Then you must add the library swf and object definition to your scene definition file.

In the head section add this:

<definitions src="../definitions/medicalProps.xml"/>

In the body section:

<object id="labTube" definition="LabTube" x="422" y="224" z="0" orientation="0"/>

You will probably need to experiment with a few details of your object: the location of the origin in the MovieClip and the collision area shape and dimensions. If you see light between the bottom-most parts of your object and/or weird Z-sorting, the origin is probably too high. I set mine near the bottom and center. I start the collision shape and dimensions that match as closely to my bitmap pixel dimensions and then test with a character in the game.

If you use png format when importing bitmaps your game will look better in low quality, since the quality setting will not effect their display, unlike shapes. Compare the gurney to the vacuum chamber in the screenshot. Also notice the built-in support for transparency in the object and the shadows, and Z-sorting.

ffilmation provides a demo that includes source for a hero character, “Poncho”. Poncho can walk, run, jump, crouch, roll, and shoot.

To create a custom character for my own game prototype, and to understand how ffilmation works with characters, I started with a copy of the Poncho source and replaced images in the movieclips it contained.

The angles ffilmation uses to determine vectors are different from those in Poser, so I created a reference:

Instead of a cowboy, I needed to create a bobble-head-like character. The base character would be a default poser character that could be readily animated with a walk, run, and gestures. I would superimpose scaled photos of actual people on the character to create the bobble-head look.

To do this, I set up Ryan Casual at the isometric angles in Poser (X:30,Y:45). I rendered the figure in a standing pose at the quality setting one notch above draft. I exported as a .png, Rotating and exporting at 45 degree increments until I had Ryan turned 180 degrees.

I had someone photograph me at approximately the same angle as the character and silhouette out the background. I superimposed, scaled distorted and color-corrected the photos to mate up with the Ryan character renders in Fireworks. Fireworks will preserve the alpha channel in each layer, which is important for this technique – if you use Photoshop or Gimp your mileage will vary.

I imported the .png file into the library of a copy of the Pancho.fla file. I did not select to import as a single flattened file, but to keep appearance of layers when prompted. Since I would have multiple characters based on the bobble-head concept, I kept the Ryan character layers separate from the head shots in Fireworks.

Once in the Flash library each image needs to be put in a movieclip so that the body and head can be displayed together, and so that a linkage name can be set for ffilmation to use them.

The linkage name should have the ffilmation angle in it and something identifying the character.

ffilmation engine will look for frame labels in each clip which determine what the character is doing. You can use the labels that come with Poncho or create your own. I decided to follow the naming used in the ffilmation examples, although I haven’t noticed anything magic about it. Since my character only stands at this point, the label is “Stand” which is what is used with Poncho.

Publish a swf and put it in the media folder of your project.

Open and copy FFCharacters_poncho.xml from the definitions folder of the examples build directory. Save it with a name that matches your swf file name, in my case it will be FFCharacters_mac.xml. Then do a find/replace in it, replacing “FFCharacters_poncho” with your new name. Notice that around line 59 there are listings for the sprite angle clip linkage names. If you use fewer angles in your character you can put the same src for more than one angle.

In order to see your new character you will need to add it to the scene. In the ffilmation examples the scene file is in the XML directory and matches the name of the fla file that creates the main swf. Replace Poncho references with your new file here too.

I decided to replace the Poncho class with a copy renamed Hero.as and changed all references to Poncho from the Document Class from Poncho to Hero. I am planning to generalize the hero character so that it can be changed during the game.

The entry in my scene file:

<character id="Hero" definition="FFCharacters_mac" x="500" y="500" z="0"/>

Here is the character in the scene:

The third game engine on my list, ffilmation has a lot going for it. By substituting the assets in the demo levels I am able to create a sketchy walkabout iso game proof-of-concept in about an afternoon. It also comes with a free level editor, and is tied pretty closely to the Flash IDE (it can be set up with Flex as well, but you will still need Flash to create assets).

What worries me is that it looks like a one-man labor of love project. There has been little/no activity on the site in quite a while. There doesn’t appear to be much of a community built up around it. I thought it must be because the source is not hosted under version control and there is no licensing information. But I was wrong- it is now hosted on Google Code – but still only the one contributor. And it has an MIT license.

Still, ffilmation has a lot of potential, and has the most complete feature set of any engine I have looked at so far for my goals.

That includes:

• texturing with bumpmaps
• animated, scriptable lighting
• simple 3d prisms
• projectiles
• heads-up display
• ISO character sprites
• Multiple characters
• Collision detection

Hoping to have something worthwhile to show clients from this soon.

Here’s a shot of a space adapted from one of the examples provided on the site. The character was created in Poser.