2019年のCubism 4で、マスクの反転とグルーを組み合わせて口を作った記録です。線と肌の重なりを調整する方法で、どのモデルでも輪郭が鮮明になったり、調整が不要になったりするわけではありません。
Live2D Advent Calendar 2019の16日目の記事です。当時の作例投稿も残しています。今回、現行Editorでの再現試験は行っていません。
この構造では上下の口の線に肌を追従させ、口内の個別調整を減らすことを狙います。歯・舌・口内の変形や描画順は、必要な表情に応じて別途調整してください。
画像をクリックして気になるところまで読み飛ばす
クリッピングマスクの反転とは？
通常のクリッピングはマスクの範囲内を表示し、反転すると指定したアートメッシュで隠す表現になります。ここで紹介する反転機能はCubism 4で追加されたものです。
公式のマスク反転の説明 代表的な使い方として、目の範囲に半透明のクリッピング反転マスクを設定することで、髪の毛の透け表現を簡単に作成できます。
［準備］サンプルモデル「マークくん」
作例は公式サンプル「マークくん」の旧データを使っています。配布データの版や利用条件を確認し、編集前にモデルとPSDのコピーを残してください。
公式のサンプル配布案内からモデルとPSDを確認します。旧記事のボタン位置・ファイル名は現在の配布ページと異なる場合があります。
https://docs.live2d.com/cubism-editor-manual/sample-model/?locale=ja ダウンロードボタン下の「サンプルモデルで使用しているPSDはこちらからDLすることが出来ます。」の「こちら」からPSDデータもダウンロードしておきます。
http://res.live2d.com/res/sample_data/mark_jp/%E3%83%9E%E3%83%BC%E3%82%AF_free_%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88_t02.psd
クリッピングマスクの反転を用いた口の作成方法
サンプルモデルは従来の構造で作られているため、クリッピングマスクの反転を用いた構造に変更していきます。
サンプルモデルの表示
Live2D Cubism Editorを起動し、ダウンロードしたフォルダ内の「mark_free_t02.cmo3」を開きます。
※確認しやすいように、画像では口の開閉パラメータを1.0に設定しています。
公式の説明では、ターゲットとmoc3の書き出しバージョンをSDK4.0/Cubism4.0対応以降にします。旧3.3以前の書き出しでは反転対象のクリッピングID・反転フラグが出力されないため、読み込み先アプリ側の対応も確認してください。
サンプルモデルのPSDを開く
画像編集ソフトを起動し、ダウンロードしたデータから「マーク_free_インポート_t02.psd」を開きます。
※ここではPhotoshopを使用しています。
口フォルダ内のレイヤーを確認します。
※各レイヤーが見やすくなるよう、上下の重なり順を調整しています。
- 前歯
- 上口
- 下口
- 舌
- 口内
以上の構成になっています。
既存の口のレイヤーを残したまま、次の工程で肌のレイヤーを追加します。元のレイヤー名やキャンバス寸法を不用意に変更しないでください。
肌の塗り足し
「上口」と「下口」の上下に、肌色で塗り足したレイヤーをそれぞれ追加します。
肌のレイヤーを口の線と組み合わせ、口内の見せたくない範囲を覆う構造にします。表示用の肌と、反転マスクとして指定するアートメッシュを混同しないように管理します。
※Cubism2時代のサンプルモデルでよく見られたパーツ分けの手法です。
塗り足しが完了したらPSDを保存します。
「マーク_free_インポート_t02_edit.psd」
PSDの差し替え
保存したPSDをモデルへドラッグ＆ドロップし、対象の原画を確認して差し替えます。新しい肌レイヤーの取り込みと既存パーツの対応を確認し、保存前に口以外も表示を点検してください。
テクスチャのスペース確保
上部メニューの人形アイコンをクリックし、テクスチャアトラス編集ウィンドウを表示します。
口の肌塗り足し部分がまぶたパーツと重なっているため、位置を移動します。
作例ではアトラス上の髪を86%に縮小して空きを作りました。これは作例の値で、モデル形状を86%に縮める操作ではありません。縮小で解像感が落ちる場合は、アトラスの寸法や枚数も検討します。
※PSD内に左右の頬の新規パーツが表示される場合がありますが、今回は使用しないため配置せず進めます。
口の肌メッシュの作成
「上口」のメッシュ形状を「上口の肌」へコピーします。
- 「上口」を選択してCtrl+Cでコピーします。
- 「上口の肌」を選択してCtrl+Eでメッシュ編集モードに入り、Ctrl+Vでメッシュを貼り付けます。
- あとは塗り足した外枠部分の頂点をつなぎます。下口の肌も同様の手順でメッシュを作成します。
「口の線」と「口の肌」をグルーで接続する
口の線部分を変形させた際に、口の肌も追従して動くようにグルーで接続します。
- 「上口」と「上口の肌」を両方選択し、Ctrl+Eでメッシュ編集に入ります。
- 両メッシュの結び付けたい重なった頂点を選び、Ctrl+Gでバインドします。全頂点選択は不要な箇所までつながらない場合に限ります。緑のチェックでメッシュ編集を確定します。下口も同様に設定します。
公式グルー説明に従い、線側を優先する重みを調整して、肌が追従するか確認します。重みは頂点単位で、キーフォーム別には設定できません。口の開閉だけでなく関連する全パラメータを動かして形を点検します。
「口の中」に対するクリッピング反転の適用
肌を前面に置いて口内を覆うだけでも開閉は表現できますが、線との重なりや輪郭は別に調整が必要です。
この作例では重なり部分の見え方を調整するために反転を使います。適用前後を同じ拡大率で比べてください。
まずマスクに使う上口・下口のアートメッシュIDを確認します。パーツの表示名ではなくIDです。以下は例なので、既存IDをそのまま参照しても構いません。IDを変更する場合は他の参照先への影響も確認します。
- 上口のID：Mouth_Mask1
- 下口のID：Mouth_Mask2
- 口の中パーツのクリッピング：Mouth_Mask1, Mouth_Mask2
- 「マスクを反転」のチェックボックスをオンにします。
※半角カンマで区切ることで、複数のマスクIDを指定できます。
通常表示とクリッピング反転適用時の比較
この作例では、通常の状態や従来のクリッピングマスクで、「口の中」と「口の線」が重なる境界部分で線がぼやけたり濁ったりすることがあります。
反転マスクで口内の重なりを隠すと、この作例の輪郭の見え方を調整できます。結果はテクスチャの透明度・解像度・描画順にも依存し、常に線が鮮明になるとは限りません。
反転前後だけでなく、口を閉じたときの隙間や歯・舌のはみ出しも確認します。
作成結果の確認
口の開閉の全キーと中間値、口の変形・顔の角度との組み合わせを確認します。Editorで問題がなくても、書き出したモデルを実際の読み込み先で確認してください。
クリッピングマスクの反転を用いた口の作成方法のまとめ
メリット
- 「線」と「肌」を別パーツに分けても、グルー機能によって一体的に変形・追従させられる点です。
- 上下のリップラインに肌を追従させることで、口内の個別調整を減らせる場合があります。
- 反転マスクは口内と輪郭の重なりを調整する選択肢です。解像度や塗りの問題まで自動で解消する機能ではありません。
デメリット
- 口の線の変形パスとグルー設定の組み合わせにより、形状の微調整や制御に慣れが求められます。
意図通りの変形を得るにはある程度の試行錯誤とコツが必要です。
グルーを設定した後にメッシュ構造を変更する場合は、一度バインドを解除して編集し、接続と全パラメータを再確認します。
本文の画像と操作例は2019年のものです。現在のEditorやSDKでの実機検証は行っていません。
前年2018年のアドベントカレンダー記事も公開していますので、併せてご覧ください。
[参考] 口の中ベースでの場合
alive 2019で話題になった手法の参考情報です。
https://twitter.com/cg_method/status/1203670011417481223
デメリット
- 口の中にグラデーションが含まれている場合、変形に伴って塗りのグラデーションが不自然に歪む懸念があります。
- 口を完全に閉じた形状など、特定の口形状の作り込みが難しくなるケースがあります。
当時のアドベントカレンダーの次の記事は、がねーしゃさんの記事でした。
https://note.com/ganeesya/n/ncc7ce2a3aa99 公式Photoshop書き出しスクリプトを効率化・便利に扱う方法について解説しています。
Live2Dのモデル制作に関する記事は、ほかにも公開しています。
よくある質問：クリッピングマスクの反転とグルー
クリッピングマスクの反転とは、何ですか？
指定したアートメッシュの範囲を使って隠す表現です。マスク側のIDを対象のクリッピング欄に指定し、反転を有効にします。
この記事の結論を教えてください。
線と肌をグルーでつなぎ、反転マスクで口内との重なりを調整する作例です。必要な調整が必ず二つの線だけで済むわけではありません。
試すには、何を用意しますか？
旧サンプル「マークくん」のモデルとPSDを使用しました。現在の配布版と利用条件を確認し、原本のコピーで作業します。
口の肌のメッシュは、どう作りますか？
口の線のメッシュ形状を肌側へコピーし、外側の頂点・辺を追加します。両者の接続したい頂点を一致させ、テクスチャ全体を囲むか確認します。
「口の線」と「口の肌」を、グルーでつなぐ方法は？
重なった頂点を選びバインドし、線側を優先する重みを調整します。上下とも設定し、口の開閉と関連する全パラメータを確認してください。
「口の中」にクリッピングの反転を適用するには？
上口・下口のマスク側の実際のアートメッシュIDを、口内側のクリッピング欄へ半角カンマで指定し、反転を有効にします。対象とマスクを逆にしないよう、非表示になる範囲を確認します。
反転を使うと、何が良くなりますか？ 記事は、いつ時点の内容ですか？
2019年の作例で、重なり部分の見え方を調整する方法です。SDK4.0/Cubism4.0以降のターゲット・書き出しと、実行先の対応確認が必要です。現在の実機・画面比較は未実施です。
