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