#Character Portraits
#
The talking character portraits in Shining Force are so charming!
I wanna make something like this for my Flash games.
# My RPG Maker could already show still faces inside the textbox, but somehow these aren’t as lively or interesting. It might be as simple as making them animate, but I suspect there’s more to it.
# For one thing. They’re rectangular and taller than the textbox. I wonder why that is?
# But the game isn’t consistent with the size of the faces or even the art style. Some pictures seem to have more anti-aliasing than others as well. I wonder if different artists made different characters?
# No, it looks like the designs were all created by one person. I guess they were just experimenting and figuring things out as they went.
# I think the key to its charm is the exaggerated art style. It might not even matter what the art style is. This game happens to use a light-hearted old anime look.
# … and since I like to make adult games, let’s look at an old-skool adult artist like Satoshi Urushihara.
# Specifically I’ll look for examples of faces that fit the personalities of my characters. Unfortunately Satoshi Urushihara only has about 3 styles of faces. The plucky happy girl, the sad gentle girl, and the sweet motherly woman. But it’s a start.
# Interesting… I just noticed that when I cropped these faces, they tended to be tall rectangles. If I didn’t there would be a lot of empty space on the sides. I guess that’s why Shining Force did that.
# Part of the charm is also how the characters sound when they’re talking. A lot of old games use little bleep noises when text is being typed out on the screen, and the pitch implies the voice of the character. Let’s see what they look like.
#
I’m not surprised that it’s a square wave.
But what IS surprising is that the sound doesn’t have any silent breaks between letters like I expected. Instead the peaks of the sound warble. The top and bottom peaks both follow the same arcing sweep.
# But even though I have a repeating loop, it doesn’t look like I can just change the pitch to create a female “voice”
# I don’t see any obvious way to imitate Shining force’s volume warble, so after a little tinkering I figured out a different way to make a textbox voice chirp. Here’s my simple 2-step recipe.
- Generate a square wave. 0.08 Seconds long. 500Hz for a “teen” girl voice.
- Apply an envelope using a typical ADSR volume pattern (Attack, Delay, Sustain, Release)
# My RPG Maker also already had the option to use “typing” sounds. I just didn’t tend to bother using them. I wonder if I should speed up how frequently it plays or make it quieter? The only way to know is to pair it with an animated face to see if it feels right.
# Okay now let’s tackle coding. I’ll start off with the simplest possible version of this. Just hard code a picture to use and react to textbox events so we can see how this feels.
#
I have to admit this already feels much more lively than before.
I had this big elaborate plan for programming separate modular animations that could overlap any on-screen picture and react to textboxes based on which character is talking, but… I have to admit it’s probably overkill. This seems to be enough.
# I should probably refine this into something easy to use and customize before I jump into all that other stuff.
# Aaahh, I can’t help it. I’m gonna take another crack at figuring out Shining Force’s character voices. Okay let’s see… let’s match Gort’s deep voice and, wait what? I already have a warble in the sound just from the end of it being cut off?? That’s… an interesting breakthrough!
# It’s still not quite the same though. The tone used in the game doesn’t sound like a pure square wave. It’s also not clear why the voice in Shining Force has a warble since all of its waves are the same length.
# But let’s ignore the breakthrough for a bit because I want to try something else first. Creating a warble directly with volume envelopes. Basically just make the volume fade in and out rapidly. In theory that should work too.
# In an effort to reverse-engineer Gort’s voice in Shining Force I painstakingly spent about an hour modifying a square wave to resemble the slopes of the recording. My re-creation doesn’t sound like a pure square wave anymore.
# … but it still has no warble. I’m baffled about where the effect comes from in the game’s version. But I suppose I could just manually add a warble to my recreation using a volume envelope.
# Re-creating the exact shape of the game’s sound was a pain in the ass. I wonder if there’s an easier way I can approximate it. Just wiggle the waves a bit to add some kind of texture. It’s not like I want all my girls to sound like Gort. I just don’t want them to beep.
# So let’s see. Add a fade-out-fade-in envelope to a square wave to give it texture. Then repeat that wave 4 times, and add another envelope to make it warble. I feel like I’m getting closer.
# Okay, that’s enough gruff guys growling grimly. Let’s try a higher pitched “teen” voice. Same approach but maybe I’ll alter the warble to fade-out slower and fade-in quick. Why? Because the whole point of the warble is to create the impression of text rapidly being typed out without completely re-starting the sound from silence. A kind of “soft” typewriter sound. And a quick fade-in emphasizes the sound “starting” or “typing”. It repesents the start of a new letter. Of course it doesn’t have to exactly match up. If you hear rapid sounds and see rapid letters appearing you just kind of assume the sounds go with the letters.
# Here’s another idea. What if I just make my simple “beep” softly fade in and out? That would also make it less harsh and Beep-y.
# And what does it sound like if I add the soft fade-in fade-out to my warbling voice? Well, let’s just compare them all. Warble with fade actually sounds half-decent. Definitely better than a pure square wave.
# What about in-game? I like the 3rd one. It takes more steps to create but the slight fuzz makes it feel less artificial.
# Are you tired of staring at sound waves yet? Me too. Let’s stare at programming code instead.
# Well maybe no coding just yet. I gotta plan out how the animated face’s editor should work first. Coding it in-game is easy. Figuring out an intuitive GUI for editing it is where the real challenge is. But I have some ideas.
# I could easily re-create Shining Force talking portraits, but why stop there? I could also make these animations overlap a full illustration and make different characters in a scene talk. Kind of like Knights of Xentar. Or I could go full visual novel and have animated characters above the textbox like the Phoenix Wright games.
# But some of these have borders and some don’t. Some animations are simple 2-frame mouth flaps, and others are full image sequences with many frames. Sometimes characters blink and sometimes they don’t. Just how many features does this stupid thing need!? How do I decide??
# So I took a step back from my over-designed plans for the editor and decided to instead focus on implementation. Modify my textbox and just let its needs emerge as I go.
# It occurs to me that everything becomes WAY simpler and way more flexible if I skip borders entirely and just manually include them in the picture itself if I want them. That way I can make characters “overlap” the border or appear to pop outside of it. Or I can have no border at all and just have the raw picture overlapping whatever is behind it. I like the powerful elegance of this appraoch.
# Aargh, why is all of this old code glommed together into one giant blob!? What a disorganized mess! Who programmed this garbage?? … oh wait, it was me… 8 years ago. Okay it’s really not THAT bad, but I’ve gotten much better at organizing my code over time. Welp, time to make everything modular and pretty.
# Okay so let’s start with the basic goal. A Shining Force talkie face. I’ll just feel-out the needs as I go. First I’ll delete the textbox’s old non-animated face and the setting that goes with it. Now we need an animated picture. I’ll just use my old animated sprite system for this. It uses a set of variables to control it so I’ll just throw them all into an object and name that setting “animatedFace”
# Next I need to be able to change the position of this animation, so I’ll add a setting for that. An object with X and Y pixel coordinates on the screen that represent the top-left corner of the animated picture. Different sized pictures can just expand to the right and downward from this corner. So I can put any sized picture anywhere I want on the screen.
# If the picture overlaps the text, I want to indent the text to make room for the picture, so I’ll add an “indentText” setting which is just the number of pixels the textbox needs to shrink to the right. To know whether the picture is overlapping the text we need its position and its size. So whenever either of those things change we re-check things and change indentText if necessary. This overlapping behavior is a module of code separate from everything else that just responds to the “change_facePosition” and “faceLoaded” events and changes the “indentText” setting. The textField reacts to that setting being changed and doesn’t need to know what caused the change. That’s the key to modular programming. Blocks of code don’t know about each other’s existance and therefore don’t rely on each other.
# Now let’s explore another goal. Phoenix Wright animations. Longer animations just need different animation settings. And then we’ll just set the position to be waaaay up above the textbox. Easy.
# And a Knights of Xentar scene. Of course it would probably help if I kept this animation outside of the textbox. But it basically works.
# See? Easy enough. I guess I would need a smaller picture if I wanted to show Ridinghood talking as well. But this picture obviously wasn’t designed for my game.
# Now here’s a tricky one. Sometimes characters in Phoenix Wright don’t talk. Instead showing an animated reaction. So either I should add a setting to turn off talking, or maybe I should just place an animation and then place a textbox underneath it as 2 separate steps? It seems like it could be useful to be able to display animations on their own anyway. But doing it this way would require placing 2 or 3 commands while I’m editing a game in my RPG Maker instead of just the one for the textbox. Less convenient. But my gut tells me I should try to keep the programming itself as simple and flexible as possible.
# Then again, how hard would it really be to make this new textbox display a one-off animation instead of making it talk with the text? Just change the animation settings and stop reacting to the text-typing events. So it’s only 2 changes. Talking could be a boolean toggle. And I could just allow the animation settings be manually modified when desired. So sure, why not?
# Or I could just… completely SKIP this edge case and be happy with what I already have.
# But part of me REALLY wants to re-create this boob meme.
# … also, Renamon Appreciation Month isn’t over yet, so here… have some fox-tits!
# Now that I have gone through all those scenarios and made them work at a programming level, these are the settings that emerged from that. So now I just need to add a way to edit these in my RPG Maker.
# Okay now that I’ve created the editor, we can do the boob meme properly… and other things too I suppose.
# And here’s the animated face editor in action, easily re-creating all of these situations!
# I’ve made a few portraits for my characters so far. They look okay, but something’s missing, and I don’t just mean my rusty drawing skills. They all have the same generic “happy” expression. The same default personality. But characters aren’t supposed to be identical. I need to figure out their unique differences and exaggerate those as much as I can. Give each one a different default mood. Maybe I just need a little inspiration…
#
. . .
My jaw… is on the freakin’ floor! Excuse me while I pick it back up… So there’s a game developer called TinkleBell, and NOBODY animates the way they do! I’m sorely tempted to try rotoscoping one of these characters, just to see what it would look like as a smoothly animated sprite. Sure it would probably take a week to do, but with characters that look this good it might just be worth it!
# Also… buy their stuff. Talent like this deserves our thanks.
# I’m also tempted to start posting artist recommendations on my Baraag account, not just boosting posts on Mastodon. I want to share the most amazing artists I’ve seen over the years. I’m constantly recommending artists on my website when they inspire me.
# That aside, figuring out character personalities is not a new problem. I’ve tried tackling this before a couple times. One approach is to boil each personality down to its simplest possible form, and then use that as a guide.
# Another approach is to keep a picture of a similar character with the personality you want visible while working on something, which guides you on an intuitive level toward re-creating that personality. This is mostly useful when writing stories.
# Art by Dean Yeagle
# Animators do this too, but I think the most important part is figuring out how each character expresses various emotions. After all, no two people express things the same way. Basically asking “How does this particular character laugh? How does this character look when they’re mad?”
# I think this is what I need to do.
# But where can I find good reference material for facial expressions? Photos would probably be best since people naturally differ from each other. Some search engines might have okay results, but those tend to look hammy and intentional. Maybe looking at movies would be better?
# Yes… WAY better! Professional actors and animators are masters of expression and interesting exaggerations. That’s everything they do!
# So… I just need to figure out which expressions I need for a given story, then find suitable reference for how a particular character expresses those things. Yes, it’s a flawless plan… if my stories ever include anything besides sex.
