Metlivi ブログ

補間する口の切り替えと調整可能な口形状コントロールを組み合わせる方法

Mohoで補間する口の切り替えと調整可能な口形状コントロールを組み合わせるには、スイッチレイヤーで口の選択をアニメーション化し、形状変更には専用のコントロールを使います。まず互換性のあるベクターの口を作成し、サブレイヤーを補間を有効にします。次に、口の描画を選択する役割は持たせずに、幅調整や口角コントロールを追加します。

このガイドは、再利用可能な2Dの口リグを作るキャラクタークリエイター向けです。目標は、閉じた口、開いた口、丸い口の間を切り替えながら、幅と口角の位置を調整できるようにすることです。Mohoの公式マニュアルでは、補間するベクタースイッチと、話す口の形を変えるためのスイッチレイヤー内のボーンの両方が明示的にサポートされています。スイッチレイヤー

2026年10月29日読了時間 7分Metlivi Editorial Team
セクション 1

口の選択と口の形状に別々の役割を持たせる

リグを、連携する2つのシステムとして考えます。スイッチのキーフレームは、どの基本描画をいつ表示するかを決めます。形状コントロールは、アニメーション中にその描画をどう調整するかを決めます。

このワークフローでは、役割を次のように分担します。

コントロール 役割 アニメーションを付ける場所
口スイッチ 閉じた口、開いた口、丸い口のアートを選択する スイッチレイヤーのタイムライン
水平方向のレイヤースケール 口全体の幅を調整する 口スイッチの変形チャンネル
左右の口角ボーン 口角を局所的に調整する 口スイッチ内のボーン
任意のスマートボーン 作成済みの変形を制御する 独立した変形アクション

補間する切り替えを自由に選びたい場合は、口の選択シーケンスをスマートボーンアクションに入れないでください。Mohoの記録されたワークフローでは、選択ダイヤルを回すと保存された描画のシーケンスをたどります。ステップキーを使うと、連続的な遷移はなくなります。作者は、口の選択にはスイッチ選択ウィンドウを推奨しています。この制限が当てはまるのは描画を選択するダイヤルであり、スマートボーンのあらゆる用途ではありません。スイッチレイヤー用のスマートボーンダイヤルを作る

セクション 2

1つの基本形から互換性のある口の描画を作る

まず、意図的にシンプルな口を作ります。フレーム0で、Mouthという名前のスイッチレイヤーを作成し、子ベクターレイヤーとしてOpenを追加します。左の口角、上側の2点、右の口角、下側の2点からなる、6つの制御点を持つ塗りつぶしの閉じたループを描きます。

Openを複製してClosedとRoundを作ります。それぞれの複製で既存の点を変形します。Closedでは、上下の縁を近づけます。Roundでは、口角を内側に寄せ、上下の点を調整して丸い開口部を作ります。

基本的な補間設定では、ベクターサブレイヤーの制御点数を同じにする必要があるとMohoのマニュアルに記載されています。元のチュートリアル『Mohoのスイッチレイヤー』では、基本の口を複製して点を修正する方法を紹介しており、対応する構造を保つのに役立ちます。スイッチレイヤー、Mohoのスイッチレイヤー

点の数を合わせるのは最初の確認にすぎません。各点の役割を一貫させ、どの描画でも左の口角は左の口角のままにします。別のバリエーションを一から描き直したり、1つの口にだけディテールを追加したりしないでください。この初期リグでは、輪郭が正しく遷移するまで内部のアートは追加しません。

セクション 3

補間を有効にして遷移の中間点を確認する

Mouthレイヤーの設定を開き、サブレイヤーを補間を有効にします。スイッチ選択ウィンドウまたはスイッチレイヤーのコンテキストメニューを使って、メインタイムラインで短い選択テストを作成します。

説明用のシーケンスとして、次のように設定します。

フレーム 選択する口 目的
1 Closed 開始ポーズ
9 Open 縦方向の開きを確認する
17 Round 狭まりと丸みを確認する
25 Closed 戻りの遷移を確認する

このフレーム番号はテストに便利なシーケンスであり、アニメーションのタイミングとして指定されたものではありません。キーフレームの間をスクラブして、中間のシルエットを確認します。元のチュートリアルでは、補間によりスイッチのキーフレーム間に形状が作られ、その適性はアートとアニメーションのスタイルによって異なると説明されています。Mohoのスイッチレイヤー

コントロールを追加する前に、端点の間のフレームを確認します。輪郭の交差、予期しないねじれ、開口部を横切って動く口角がないかを見ます。端点は正しくても遷移がうまくいかない場合は、元の2つの描画で対応する点を比較します。別の変形を加える前に、基本アートを修正してください。

セクション 4

幅を調整するコントロールを追加する

最初の調整用コントロールとして、スイッチレイヤーの原点を口の中央に置き、水平方向のスケールをアニメーション化します。これにより、口のセット全体に共通の幅調整を適用できます。公開されているMohoのリグ作成に関する議論では、口の選択を済ませた後、親スイッチの変形を使って追加のスクワッシュ・アンド・ストレッチを行う方法が紹介されています。正確なリップシンクのための口の形状

説明用の初期範囲として、水平方向のスケールを0.9、1.0、1.1で試し、垂直方向のスケールは1.0に保ちます。これらの値は、少し狭めた幅、元の幅、少し広げた幅を示します。最終的な範囲は、アートを確認して決めてください。

3種類すべての基本の口を、それぞれの幅設定で試します。特に丸い口は注意深く確認してください。広げることで、選んだ形状の印象が損なわれることがあります。シルエットが本来の役割を果たさなくなる場合は、調整幅を小さくします。

幅スケールは全体の比率に使います。口角だけに影響する変化が必要な場合は、スケール調整を増やすのではなく、局所コントロールを追加します。

セクション 5

スイッチ内に局所的な口角コントロールを追加する

Mohoでは、スイッチレイヤーでもボーンツールを使えます。この小さなリグでは、点を明示的にバインドすると、それぞれの口角を専用のコントロールに割り当てられます。公式のバインドチュートリアルでは、ボーンを選択し、ベクターの点を選択してSpaceキーを押す方法を説明しています。また、手動バインドでは、異なるボーンにバインドされた領域の境目で急な変形が起こることがあるとも説明しています。ボーンツール、チュートリアル3.1:ボーンバインド

フレーム0で次のように設定します。

  1. Mouthを選択し、MouthCenter、CornerL、CornerRの3つのボーンを作成します。2つの口角ボーンはMouthCenterの子にします。
  2. Openベクターレイヤーを選択します。MouthCenterを選択し、ポイントバインドを有効にして6点すべてを選択し、Spaceキーを押します。
  3. CornerLを選択し、左の口角の点だけを選択してSpaceキーを押し、割り当て直します。
  4. CornerRを使って右側も同様に行います。
  5. ClosedとRoundにも同じ割り当てを適用します。対応するすべての口角が同じボーンに追従する必要があります。

フレーム0より後のアニメーションフレームに移動し、口角のボーンを少し動かします。最初は動きを小さくします。Mohoではセットアップとアニメーションが区別されています。フレーム0でボーンの位置を変えるとレイアウトが変わり、それ以降のフレームでボーンを動かすと、バインドされたアートがアニメーション化されます。ボーンツール

調整するたびに閉じた口を確認します。両方の口角を上げると、望ましくない隙間ができたり、鋭い折れ目が生じたりすることがあります。その場合は、動きを小さくするか、輪郭上の点の配置を見直します。6点の口はリグのよい出発点です。より複雑なアートには、さらに滑らかなバインドや変形メッシュが必要になる場合があります。

セクション 6

再利用できる変形ダイヤルが必要ならスマートボーンを使う

基本のリグが動作したら、スマートボーンを使って再利用できる形状調整を作成できます。Mohoの現行機能ドキュメントでは、スマートボーンは、表情などの要素をアニメーション化するアクションに連動したコントロールレバーとして説明されています。Mohoの機能

より複雑な口のアート全体に共通の変形を適用する場合は、記録されているメッシュ方式を検討してください。D. R. Greenlawは元の技術解説で、マスターメッシュをスイッチの外側に配置し、各口グループ内に参照コピーを追加して、それぞれに固有の名前を付け、アートを適切なメッシュ参照に割り当てる方法を説明しています。スマートボーンでマスターメッシュをアニメーション化します。メッシュワープ画像レイヤーを使ったスイッチレイヤーの補間 — 3ページ

これは、上記のシンプルな直接ベクター方式に代わる上級者向けの方法です。レイヤー構造が変わり、各口グループでメッシュの割り当てをテストする必要があります。輪郭の一部を個別に制御する価値が、追加の設定作業に見合う場合に使います。

同じ作者による後のワークフローでは、口の選択をメインタイムラインで行い、その後に別の変形ダイヤルを適用します。これは基本の口を個別に選べる状態に保ちながら、その見た目を調整するという中心的な設計方針を支えます。アクション内のサブレイヤーを補間する

セクション 7

シーケンス全体をアニメーション化する前に組み合わせをテストする

小規模な組み合わせテストを行い、個別のコントロールでは見つからない問題を探します。このテスト表は、選択と変形を分けるワークフローから導いた実用的な診断方法であり、製品ベンチマークの報告ではありません。

テスト 確認すること 最初に試す調整
各口をニュートラルのコントロールで確認 基本のシルエット 元の描画を修正する
各口を狭めた設定と広げた設定で確認 形状を見分けられるか 幅の範囲を小さくする
口角を上げた閉じた口 閉じた状態と滑らかな曲線 口角の移動量を減らす
コントロールを固定した状態で開いた口から丸い口へ遷移 中間形状が安定しているか 点の対応関係とバインドを確認する
切り替え中にコントロールを動かす 輪郭の動きが連続しているか 各コントロールを個別にテストする
テストシーケンスをレンダリングする 見た目が意図した結果と一致するか 該当フレームとレイヤーを確認する

複数の段階に分けてアニメーションを付けます。まず口の選択、次に幅と口角の動き、最後に追加の変形です。問題が起きたら、形状コントロールをニュートラルに戻します。それでも遷移がうまくいかない場合は、描画とスイッチの設定を確認します。ニュートラルなら動作する場合は、幅調整、口角のバインド、メッシュ変形を個別に切り分けます。

完成したリグでは、調整用コントロールを作り直さずに口のタイミングを変更できます。基本の口の互換性を保ち、各コントロールに明確な役割を持たせ、キーフレーム間の組み合わせを確認します。これにより、形状を編集しながら口を滑らかに切り替えるための実用的な基盤ができます。

セクション 8

出典

関連記事

このテーマをさらに見る