David J McClelland
eLearning Designer / Developer
Make a Bobblehead Character
Author: David McClelland
17 Jun
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.
To take that work a step further while continuing to avoid that deep dive into modeling and clothing figures, I present a labor-cheap alternative that I call a Bobble-head. I doubt this is original, I think I might have seen Terry Gilliam do something like this at some point.
I had a friend take a snapshot of me from 5 angles that I need to show my ffilmation character from an angle roughly matching that of the game. To get the angle I sat down on the floor. Flat lighting is essential to avoid weird shadows or color effects. You will save a lot of time on silhouetting backgrounds if you can find a solid color background or hang a blanket behind the subject. An office conference room is a good place.
I transformed the silhouetted head shapes so that it looked like each one fit on Ryan’s body at a given angle. To do this I put each angle of Ryan standing in a layer in Fireworks. Then I imported the head bitmaps into a copy of the .fla file containing Ryan, which I had already finished and tested.
A quick test using the script in this post on the .fla showed that I had some more work to do to make the head look natural. It just floated around like a stationary object pasted on Ryan.
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
Isometric Character Motion Analyzer
Author: David McClelland
18 May
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.
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.
Using Poser Character in Flash ffilmation
Author: David McClelland
11 May
Click a character and use the buttons to test it.
This is a continuation of my last post on the workflow involved in creating a character in Poser to use in a ffilmation project in Flash. We pick up after you have completed rendering all frames for all the angles you need to display a character that can walk around in an isometric game.
OK, maybe BART is not a catchy acronym but is better than when I started (Bulk replaced Wholesale, Full).
When you move an asset into a folder that contains another asset with the same name in Flash Library it will prompt if you want to replace it? If we carefully name all our assets we can use this feature to great advantage when importing assets to build each angle of our character.
The key is to organize assets into folders that ID the angle in their name, but only name the sequence files with the pose and sequence number. For example, the folder ryanRunLoop_90 contains runLoop_0001.png through runLoop_0015.png.
If I want to make a ryan_135 MovieClip from a copy of ryan_90 I can do this by importing the assets and dropping the appropriate bitmaps into their respective folders. For runLoop I would drop the imported bitmaps into char_runLoop_90, choose to replace existing, and rename the folder char_runLoop_135.
To save time, I installed a jsfl Command extension called Find and Replace that will automatically change library names. Unfortunately it doesn’t change folder names.
Create two files for creating your character: an asset .fla to contain all the clips that make up a complete character, and a conversion .fla where you replace assets. This will make creating each angle timeline easier and make any mistakes more obvious when they occur and less costly to fix once detected.
Keep assets for a particular angle in library folders that contain the angle as part of their name. Rename the folders before you copy the finished angle clip from the conversion stage fla and paste it in the asset fla to avoid copying over existing assets for another angle.
Once I had the character angles for 0, 45, 90, 135 and 315 I planned to flip 0, 45 and 90 (the mirror angles) to make 180, 225 and 270.
Gotcha: In order for ffilmation to access the angles at runtime you must make a link for each one. Flipping the mirror angle characters, even if they are duplicates of the mirror angles with the correct linkage names, will not work. You will see the character in your game just as it appears in the library, not on your character .fla stage.
To make movieclips with linkage names for every angle you will have to flip the bitmaps inside a copy of the Movieclip. I use the Edit Multiple Frames tool to select every frame and flip all bitmaps in a single operation. It only takes a few seconds and cuts down on your file size compared to Poncho, which has bitmaps for all angles. You will get the added benefit that any bitmap replaced for a mirrored clip will be also be replaced in its mirror.
Gotcha: Resist the urge to crop! After I saw first render sequence from Poser I realized that each image was the size of the render window, even though most of that area is transparent. So I batch cropped them. After which I noticed the file sizes increased, and I had to hand-register each frame because the cropping algorithm I used made the smallest possible image.
You will notice that every frame you export from Poser will be pin-registered automatically as long as you keep your character in one place and make variations from a copy of the original, standing character. When you replace the bitmaps to create each angle you don’t have to fiddle with their coordinates. Sweet!
[DDET How to filter mouse events to visible areas of png, allow for overlaps]
Use a mask over the standing pose to limit the clickable area to the visible portion of the character. Either a rectangle or a copy of the image will work, depending on how precise you want to be.
My next post will cover how to set up a test rig that I used to display the examples.
Animating an ISO Character in Poser
Author: David McClelland
6 May
Click a character and use the buttons to test it. This one is incomplete and has errors in it.
Since my last post on this topic I came up with several ways to streamline the production process, and learned some features of Poser that helped this along. I also got the latest version: Poser Professional 2010.
Streamlining a process with as many steps and dependencies as this one has requires some documentation because some of the techniques are subtle. For instance, not following a generic naming scheme when animating from Poser won’t matter until you realize you can’t automate bitmap replacements in the Flash library after spending a day rendering. Then you will have to decide if you want to re-render or run a batch rename process.
Another reason to document the process occurred to me after production got interrupted several times. I had trouble remembering every little detail that I had accumulated gradually while producing the first few angles of the character.
It helps to have a well-documented process if there is enough demand to warrant scripting some of the production, too. Poser is scriptable with Python, and it would be great to be able to automate motions, morphs and rendering to get a functional base character sequence. By the way, Poser uses Flex and AIR and includes a swc for the GUI. Haven’t looked at it yet, though.
In ffilmation, and probably any other 2.5D iso setup, there are some design decisions that should be made prior to production:
- How many angles can the character move in?
- How many frames per second will the character display in?
- What kind of motions will every character have to make (walk, run, stand…)?
- How big will the character need to be (pixels)?
ffilmation and practical constraints dictated the answer to the first two questions. 8 Angles of motion are pretty standard in ISO characters since you can use key combinations of the cardinal directions to get diagonals, and without diagonal motion your ISO world will be lame. ffilmation is made to work in 30fps, so I went with that because the motion looked very fluid. I tried doubling frames in the timeline to get 15fps and it looked surprisingly good – I could see this being a viable low-bandwidth hack.
For motions, I decided I needed to have every character stand, walk, run, jump and land. I can tack on other motions at the end of the timeline.
Eventually I created a test rig to analyze the character as I replaced Poncho with Poser renders:
I picked a stock character that came with Poser and used the pose library and walk designer to do most of the animating. The Walk Designer allows you to come up with a repeatable motion that can be applied to the character mulltiple times. It also blends between a starting pose (standing) and a walk, and can make loops for walking and running. The output can look very convincing without a lot of fussing, but there are some gotchas – more on those later.
Before rendering out the animations for all 8 angles, I recommend getting one angle worked out first, then applying it to the other angles. Make sure the transitions and loops are smooth, the character is the right size, and that it is registered properly to cast convincing shadows. I started out substituting bitmaps in a copy of Poncho, but it is better to work with a character with the right number of frames in each angle, if you have one.
I created a standing pose and made a copy of the Poser file to make the transitions to walking and running. The walk and running cycles were in two other files. Compared to doing all animations in a single Poser file, this allowed me to tweak each file separately and render sequences named after their contents, which proved very important later on.
My settings for Ryan are all saved in the pwk file
Once I was satisfied with the animations I saved out the motion settings for each from the Walk Designer as a.pwk file, naming them for the sequence they defined.
Creating all 8 angles of standing was trivial: I set this up in the original Poser file.
Here’s a gotcha: if you scale down the character in poser and then animate it, the motion will be all Captain Kirk – motions appear to be designed to work on 100% scale characters. The answer is to scale the rendered output instead.
Anyway, The steps I used to render a complete character to use in ffilmation/Flash:
Open one of the sequence animation files in Poser used in the Starting Production phase.
Remove all but the first frame.
Open Walk Designer and load the .pwk file for the frame
standing-to-walk transition
Adjust sticky settings (a bug IMHO that this is necessary every time)
Frame Rate Gotcha: If your loop cycle needs to cover more or less than 30 frames you will need to retime your animation in Poser. This is found in the Animation->Retime Animation…
Another Gotcha: How do you correlate a walk or run cycle with the distance traveled covered by the character in the environment? I followed the frame-count and rate already set in ffilmation. If you want to change it you should test in the Starting Production phase with a single character angle animation. Retiming can help here too.
Movie Settings
Render Settings
Animation-> Make Movie
Create folders to hold each angle of each animation and pose. I named them after the character, pose or loop, and angle:
Creating an Isometric Character in ffilmation
Author: David McClelland
29 Mar
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:
