Make an open mouth have an outline

Wondering how to accomplish a certain animation task? Ask here.

Moderators: Víctor Paredes, Belgarath, slowtiger

Post Reply
CodyBDrawin'
Posts: 42
Joined: Sat Apr 02, 2022 7:23 am

Make an open mouth have an outline

Post by CodyBDrawin' »

So, for some context and also to show anyone who doesn't know what I'm describing what I'm describing, I was following this tutorial to make a mouth that breaks the shape/plane (or whatever you'd call it) of the head.



It's really cool, and I tried it for myself and it actually did work, but there's one issue with it that I can't solve on my own, that I was thinking more experienced users could help me with: the character the dude made in the video (and that appears in the thumbnail) has no outline, and while I'm fond of non-outlined art and animation, the current project I'm working on is outlined/has layers that are stroked (not all of them are though). Such layers include the face shape, and whenever I use the methods shown in the video, the mouth doesn't have any kind of outline at all, both on the inside of the head shape and on the edge of it, which contrasts with the rest of the design in a way that's undesired. The problem is further complicated by how I tried using an animated outline on the shapes that are actually visible, since I figured that might be an optimal means of solving the issue, but it did absolutely nothing (I don't know if this is a mistake on how I layered it all).

What I'm trying to do (mentioned separately to break up the text) is make it to where when the mouth is open, the area within the borders of the head has an outline (so basically where the character's lips would be), as does the border of the corner of the mouth, where it breaks the plane of the head

So in short, using the technique in the video I linked, is what I described possible, and how do I go about doing that?
User avatar
hayasidist
Posts: 3830
Joined: Wed Feb 16, 2011 8:12 pm
Location: Kent, England

Re: Make an open mouth have an outline

Post by hayasidist »

restructure the character?

> Group -- all (make this the bone layer for actions?)
>> Group body - outline on - mask: reveal all
>>> Vector Body shape (the round cornered "shape" from the video) -- but this shape has the colour you want and NO stroke -- mask this layer
>>> Vector - mouth shape (as per the video) - subtract from mask
>> Vector teeth as per the video
>> Vector back of throat -- similar to the video, but: constrain to be inside the body shape and with stroke to match / complement the outline colour in Group Body

I think that gives you what you want... have a go and let me know?

I didn't bother with bones / actions, just simple point animation to prove the idea - so if the above isn't clear, please say and I'll upload the example.

Image
CodyBDrawin'
Posts: 42
Joined: Sat Apr 02, 2022 7:23 am

Re: Make an open mouth have an outline

Post by CodyBDrawin' »

Thank you for the aid. I tried this, but is the entire thing done in just those steps?

I feel like it'd be easier for me to dissect it myself. That's not to say that the written instructions were bad - if anything, I feel like it's user-error on my part, so suffice to say, if you would be willing to upload that demo you did, that would be really helpful and greatly appreciated.
User avatar
MrMiracle77
Posts: 189
Joined: Mon Jun 24, 2019 2:30 am

Re: Make an open mouth have an outline

Post by MrMiracle77 »

Does 'outline on' work when the mouth mask isn't breaking the exterior of the character, though? (At work, so I can't test)
- Dave

(As Your GM)
User avatar
hayasidist
Posts: 3830
Joined: Wed Feb 16, 2011 8:12 pm
Location: Kent, England

Re: Make an open mouth have an outline

Post by hayasidist »

CodyBDrawin' wrote: Fri Jun 10, 2022 12:36 pm Thank you for the aid. I tried this, but is the entire thing done in just those steps?

I feel like it'd be easier for me to dissect it myself. That's not to say that the written instructions were bad - if anything, I feel like it's user-error on my part, so suffice to say, if you would be willing to upload that demo you did, that would be really helpful and greatly appreciated.
yep - plus a few point animations (which, if the plan is to emulate the video, need to be properly converted to actions)

It's here: https://www.mediafire.com/file/if9fsv83 ... .moho/file

two top-level groups: the "as in the video" (minus bones and actions); and other (I hope) answers your question.
MrMiracle77 wrote: Fri Jun 10, 2022 12:43 pm Does 'outline on' work when the mouth mask isn't breaking the exterior of the character, though? (At work, so I can't test)
Image
CodyBDrawin'
Posts: 42
Joined: Sat Apr 02, 2022 7:23 am

Re: Make an open mouth have an outline

Post by CodyBDrawin' »

This worked marvelously. Thank you so much.

I'm also curious; would it be possible to make individual cartoon-style mouth frames using this method?
User avatar
hayasidist
Posts: 3830
Joined: Wed Feb 16, 2011 8:12 pm
Location: Kent, England

Re: Make an open mouth have an outline

Post by hayasidist »

CodyBDrawin' wrote: Sat Jun 11, 2022 10:42 am This worked marvelously. Thank you so much.
you're very welcome. glad to have helped.

CodyBDrawin' wrote: Sat Jun 11, 2022 10:42 am I'm also curious; would it be possible to make individual cartoon-style mouth frames using this method?
not totally sure what you mean here .. Frames as in "for use in frame-by-frame"? Mouths "as in Preston Blair mouth shapes"? or ...???

But I'll have a guess that you're thinking about (logically) renaming "Body" as "Head" and then - yeah...
User avatar
Greenlaw
Posts: 10382
Joined: Mon Jun 19, 2006 5:45 pm
Location: Los Angeles
Contact:

Re: Make an open mouth have an outline

Post by Greenlaw »

Troy's technique is super cool!

Here's another way to do the cut out mouth in Moho. It's not as cool as Troy's technique but it gave us a lot of flexibility to address production notes immediately, like being able to add and edit new mouth shapes on the fly.

For a lot of our earlier TV shows, we either kept the mouth offset to the side (anime style) or we let the head shape just clip the forward mouth shape (we did this in our Dawn Of The Croods series a long time ago.)

Things got a little more complicated when we created rigs for our Netflix show Boss Baby: Back In Business because the character designs had cut out mouths and the art had to be outlined. When I started designing the rigs, I decided that keeping the techniques 'simple' would prepare us for any surprises that came along during production. (And there were a lot of surprises!)

The Boss Baby art was all drawn in Moho using mainly the Add Points, Transform, and Magnet tools. We needed the points to be precisely placed to get the best deformations with bones and for predictability in our Smart Bone Actions (SBA). I don't have the Boss Baby art to show here but I knocked out some quick sketches in Moho to illustrate how it worked...

The head turn setup was typical. We started with the front facing pose and smoothly animated the turn by moving points and layers in the SBA to just past the 3Qtr pose. Like so...

Image

Image

Then as the mouth reached the edge of the face, we switched to a different head/mouth setup, like this...

Image

This resulted in a 'pop' so it wasn't a completely smooth turn, but the head turns were quick enough that you never noticed that the rig switched to a different head setup for the profile pose. So, as long as you have enough frames in the side motion and the last frame in the motion aligns with the profile drawing, the animation should look pretty smooth. In the show, we sometimes had head turns that were fairly 'slow' and the switch was still barely noticeable if you weren't looking for that 'pop'.

To animate the mouth in profile, we cut out a duplicate of the head art used for the front-to-3Qtr pose morphing. To do this, I just drew a sideways 'U' and used Weld Crossings to punch out a hole. Like this...

Image

The profile mouth drawings were in a Switch layer that stayed in sync with the Front/3Qtr facing mouth Switch layer. So when the head turn was animated, the SBA used the corresponding side version of the mouth used in the front pose. Basically we had switch layers inside of switch layers, and the top switch layer switched between switch layers for each view. Setting this up is actually a lot easier than it probably sounds.

Here's what a typical profile mouth drawing looked like...

Image

Since everything in the character was created as vector drawings, whenever we needed to make a subtle change to the mouth shape or when we had to create a completely new mouth, we could quickly sculpt one from an existing mouth using the Magnet tool.

You can see actual production examples of the Boss Baby rigs in my 2019 demo reel. A 'cutout' side mouth transition can be seen at around 1:05. The 'cutout' side mouth is also visible later in the video for the T-Rex and other scenes with Timmy and Boss Baby. All of these are pretty quick I guess but that had more to do with the direction of the show and not the limitation of the rig.

Hope this was informative and maybe even a little fun. 😸
Last edited by Greenlaw on Sun Jun 12, 2022 5:07 am, edited 7 times in total.
User avatar
Greenlaw
Posts: 10382
Joined: Mon Jun 19, 2006 5:45 pm
Location: Los Angeles
Contact:

Re: Make an open mouth have an outline

Post by Greenlaw »

BTW, if you're wondering about the curves extending beyond the face edge in the example above, I find this trick gives me more control over the direction of the curve inside the face area. Since these lines aren't renderable, they make great handles for reshaping shapes.

This trick was more important before we got Bezier point in Moho but I still use this trick when I don't want to use Bezier points in my rig art. (Nowadays I might use Bezier points for the above situation...I'd have to play around with it to be sure.)

Anyway, this was just one more way to do something in Moho. You should use whichever method is easiest and does what's needed for the task. 😸
Post Reply