Creating an Isometric Character in ffilmation
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:
