画像をクリックして気になるところまで読み飛ばす
Cubism4の新機能 クリッピングマスクの反転とは？
Cubism3から搭載されたクリッピングマスク機能を反転し、特定の部分を隠す表現などが可能になります。
https://docs.live2d.com/cubism-editor-manual/invert-mask/?locale=ja 代表的な使い方として、目の範囲に半透明のクリッピング反転マスクを設定することで、髪の毛の透け表現を簡単に作成できます。
［準備］サンプルモデル「マークくん」
手順をすぐに試せるように、今回は公式サンプルモデルの「マークくん」を使用します。
下記URLの中段あたりにある「FREE ダウンロード」ボタンをクリックします。
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に設定しています。
左上のターゲットバージョンのプルダウンから、クリッピングマスクの反転機能を使うためにSDKのバージョンを4.0に変更します。
サンプルモデルのPSDを開く
画像編集ソフトを起動し、ダウンロードしたデータから「マークfreeインポート_t02.psd」を開きます。
※ここではPhotoshopを使用しています。
口フォルダ内のレイヤーを確認します。
※各レイヤーが見やすくなるよう、上下の重なり順を調整しています。
- 前歯
- 上口
- 下口
- 舌
- 口内
以上の構成になっています。
標準的なパーツ分け構成ですが、この既存レイヤーの追加や削除などの変更は行いません。
肌の塗り足し
「上口」と「下口」の上下に、肌色で塗り足したレイヤーをそれぞれ追加します。
追加したレイヤーは、後ほどクリッピングマスクの反転によって口の中に適用します。
※Cubism2時代のサンプルモデルでよく見られたパーツ分けの手法です。
塗り足しが完了したらPSDを保存します。
「マークfreeインポート_t02_edit.psd」
PSDの差し替え
Live2Dの画面上へ先ほど保存したPSDをドラッグ＆ドロップし、「差し替え」を選択してテクスチャを更新します。
テクスチャのスペース確保
上部メニューの人形アイコンをクリックし、テクスチャアトラス編集ウィンドウを表示します。
口の肌塗り足し部分がまぶたパーツと重なっているため、位置を移動します。
※髪の毛パーツの倍率を86%まで縮小し、細かいパーツを移動して右下に配置スペースを確保しました。
※PSD内に左右の頬の新規パーツが表示される場合がありますが、今回は使用しないため配置せず進めます。
口の肌メッシュの作成
「上口」のメッシュ形状を「上口の肌」へコピーします。
- 「上口」を選択してCtrl+Cでコピーします。
- 「上口の肌」を選択してCtrl+Eでメッシュ編集モードに入り、Ctrl+Vでメッシュを貼り付けます。
- あとは塗り足した外枠部分の頂点をつなぎます。下口の肌も同様の手順でメッシュを作成します。
「口の線」と「口の肌」をグルーで接続する
口の線部分を変形させた際に、口の肌も追従して動くようにグルーで接続します。
- 「上口」と「上口の肌」を両方選択し、Ctrl+Eでメッシュ編集に入ります。
- Ctrl+Aで全頂点を選択し、Ctrl+Gでグルーを適用します。コピー元と重なっている頂点同士にグルーが設定されます。
グルー機能を適用したことで、口の開閉パラメータを動かしても肌部分が綺麗に追従するようになります。
「口の中」に対するクリッピング反転の適用
口の開閉動作自体は、クリッピングマスクを適用しなくても肌の追従によって成立します。
輪郭の表示クオリティを一段階高めるための追加処理として設定します。
まず各パーツのIDを指定・確認します。
- 上口のID：Mouth_Mask1
- 下口のID：Mouth_Mask2
- 口の中パーツのクリッピング：Mouth_Mask1, Mouth_Mask2
- 「マスクを反転」のチェックボックスをオンにします。
※半角カンマで区切ることで、複数のマスクIDを指定できます。
通常表示とクリッピング反転適用時の比較
[memo title=”ポイント”] 通常の状態や従来のクリッピングマスクでは、「口の中」と「口の線」が重なる境界部分で線がぼやけたり濁ったりすることがあります。
しかしクリッピングマスクの反転を使用すると、「口の中」の重なり部分がマスクされて抜けるため、「口の線」のシャープな輪郭を綺麗に維持できます。
[/memo]
作成結果の確認
以上で設定は完了です。
クリッピングマスクの反転を用いた口の作成方法のまとめ
メリット
- 「線」と「肌」を別パーツに分けても、グルー機能によって一体的に変形・追従させられる点です。
- 上下のリップラインを動かすだけで自然な口の開閉を作成できます。
- Cubism4のクリッピングマスク反転を活用することで、従来のクリッピングによる境界線の重なりや滲みを防ぎ、綺麗な輪郭を保てます。
デメリット
- 口の線の変形パスとグルー設定の組み合わせにより、形状の微調整や制御に慣れが求められます。
意図通りの変形を得るにはある程度の試行錯誤とコツが必要です。
解説は以上です。
今回はLive2D制作を効率化するPhotoshopツールの紹介も検討していましたが、Cubism4の新機能についていち早く共有するため本手順をまとめました。
（※今後Live2DにJavaScriptのスクリプト実行機能などが拡充された際にあらためて公開予定です） 前年2018年のアドベントカレンダー記事も公開していますので、併せてご覧ください。
[参考] 口の中ベースでの場合
alive 2019で話題になった手法の参考情報です。
https://twitter.com/cg_method/status/1203670011417481223
デメリット
- 口の中にグラデーションが含まれている場合、変形に伴って塗りのグラデーションが不自然に歪む懸念があります。
- 口を完全に閉じた形状など、特定の口形状の作り込みが難しくなるケースがあります。
次回はがねーしゃさんによる記事です。
https://note.com/ganeesya/n/ncc7ce2a3aa99 公式Photoshop書き出しスクリプトを効率化・便利に扱う方法について解説しています。
Live2Dのモデル制作に関する記事は、ほかにも公開しています。
