Amazonで商品を見るセール会場へ

【Live2D】Live2D cubism2に関連するTIPSまとめ

以下は保存されていた過去原稿をもとにした操作記録です。

掲載画像やメニューは当時のもので、現行版での再現試験は行っていません。

本記事ではLive2D Cubism 2に関連するTIPSをまとめて紹介します。

Cubism 2/2.1での制作メモを整理した記事です。

現在のCubism EditorやViewerとはファイル形式・画面・機能が異なるため、旧モデルを扱う際の参考として読んでください。

目次

Live2D Cubism 2のPSDデータインポート方法

Photoshopでパーツ分けしたPSDデータをLive2D(Cubism Modeler)へ取り込む際の手順と注意点をまとめました。

PSDデータの差し替えや追加は手軽に行えます。

PSDデータのインポートについて

PSDのデータ整理

インポート方法

Cubism Modelerに直接ドラッグ&ドロップ または『ファイル>PSDファイルをインポート』
  • 乗算などは適応されないので注意。再度手動で設定
  • 不透明度も適応されないので注意。再度手動で設定

取り込む時の推奨値

Cubism ModelerへのPSDインポート時の推奨値を示す画面。

画像リンクおよび参考資料です。

#02 PSDをインポートしよう – Live2D Cubism 2 マニュアル

ポリゴンが欠ける不具合

古いバージョンでは、取り込み時に三角形のポリゴン欠けが発生する場合があります。

PSDインポート時のポリゴン欠け不具合を改善しました! — Live2D コミュニティ

PSDデータの差し替え方法

再度、Cubism Modelerに直接ドラッグ&ドロップするか、「ファイル」>「PSDファイルをインポート」を選択します。

テクスチャの塗り足しやパーツの差し替え、新規パーツの追加を手軽に行えます。

Cubism ModelerでPSDデータを差し替える操作の様子。

新規パーツを追加する際の注意点

既存のパーツをレイアウトの都合上、全体移動などをさせていると、新規パーツは既存パーツと配置位置がずれます。

あらかじめ構図をPSD側で確定させておくと、パーツの差し替えがスムーズになります。

または下絵を読み込んでおき、追加パーツの位置を調整します。

02. PSDの再インポート – Live2D Cubism 2 マニュアル

テンプレート化

同様の仕様であれば簡単にパーツを差し替えられるため、デフォーマのセットアップなどを丁寧に作成しておけば、2体目以降を制作する際にテンプレートとして活用できます。

Live2D Cubism 2のPSDデータパーツ素材分けTIPS

Live2Dの制作では素材の事前準備が重要となるため、ポイントをまとめました。

パーツの切り分けについて

イラストの状態確認

  • 足りないパーツを一から描くことになるの手間なので、素材の状態確認して段取りをイメージ
  • 線画と分かれているか?隠れているパーツがちゃんと描かれているか?
  • 表情差分にも対応できるような素材を見極める
  • 動いた時に、下の素材の状態をイメージ。どのパーツを塗り足すか

完璧を目指さない

  • 最上部に見本をおいて、比較しながら作業
  • 1ピクセルもずれなく完璧を目指すよりかは、印象が変わらない程度に、線など綺麗にしたりすることも大事
  • 色の境目等、きたなかったら綺麗にする
  • 『Live2Dで動かしやすい』素材を作る

基本マスクを使って作業する

  • 単純作業としては消しゴムで消すほうが早そうですが、手戻りが発生したときにマスクのほうがスマート
  • 他人が触ったり閲覧する可能性があるのであれば、なおさらマスクで管理したほうが良いので、癖をつける

背景

  • ゴミを把握しやすくために、色を敷く
  • 背景色に関しては、要注意。補色で重なるとグレーになって、はみ出しに気が付かなかったり
  • Live2D側にもゴミ取りツール機能がある

影は段階ごとに分ける

1影、2影と別々に分ける

ツールを使いこなす

  • Photoshopの『境界線を調整』が便利。 余計なパラメーターを入力せず『半径調整ツール』で輪郭を自動調整、ちがったら『調整消去ツール』で元に戻す

http://retamame.com/refine_edge_beginner#i-6

01. 素材分けについて – Live2D Cubism 2 マニュアル

#01 インポート用のPSDを用意しよう – Live2D Cubism 2 マニュアル

Live2Dでのモデル制作は、ほかにも書いています。

Live2D Cubism 2の主要ショートカット・機能・TIPSまとめ

サンプルデータをもとに確認した、Live2Dの主要機能と操作方法の概要です。

主なポイントを以下にまとめます。

ショートカット

  • Ctrl+Shift+2 選択オブジェクト以外を全てロック
  • Ctrl+Alt+2 全てのロックを解除
  • Ctrl+H 描画オブジェクトの選択状態の表示・非表示
  • Ctrl+P パラメーターの選択状態をデフォルトに戻す
  • A 描画オブジェクト選択
  • G デフォーマー選択

ウィンドウメニュー

パーツウインドウ

  • 目玉アイコン 全ての表示のON/OFF
  • 鍵アイコン 全てのロックのON/OFF
  • -アイコン 表示をすべて折りたたむ

パラメーターウインドウ

  • 右クリック スライダーのスナップ
  • 絞り込み 選択したものの関連したパラメーターのみ表示
  • 1 / 2アイコン ポーズの保存
  • 記憶 / スナップショット キャプチャー保存と半透明表示

編集ウインドウ

  • クリップID 隠したい描画オブジェクトのIDを入力

ツールメニュー

ファイル

  • 統計情報でポリゴン数を確認します。当時は約4000を作業上の目安にしていましたが、最適な数は表示端末・モデル構成・用途によって変わります。

編集

  • コピペ 形状の複製
  • 形状をコピー / 貼り付け / ブレンド 任意の形状をパラメーターに保存できます。ブレンドもできる。

表示

  • グリッドを表示

デフォーマメニュー

  • デフォーマを削除し、パラメーターを子要素に反映  2つのデフォーマを統合する時に使います。

デフォーマ

  • 4隅の形状を自動生成 上下左右のパラメーターを統一(目玉 X/Y・口の変形/開閉・角度 X/Y)

TIPS

操作中に確認した挙動や設定のポイントです。

パラメーターをすべて削除する手順

パラメーターウィンドウの「絞り込み」にチェックを入れます。

パーツウィンドウから「デフォーマ」や「描画オブジェクト」を順次選択し、絞り込まれたパラメーターを個別に「全点削除」します。

パラメーターウィンドウの絞り込み機能を使って全点削除を行う手順。

まとめて削除することも可能ですが、選択数が多すぎるとソフトウェアがフリーズする恐れがあります。

赤丸のキー表示がすべて消えたら削除完了です。

パラメーターの赤丸のキー表示がすべて消えて削除が完了した状態。

左右対称に反転コピーする方法

キャンバスの中心が中心となる描画オブジェクトに対して、曲面デフォーマーを作成し、その階層下に反転したい複製した描画オブジェクトを入れて、親と反転させる。 回転デフォーマを基準面に対し左右対称に反転コピーする方法 | はちゃち的な。

デフォーマの形状を反転コピーする方法

複製→反転 オリジナルのパラメーターを入れたい場所のキーを削除 オリジナルを複製の子にして『デフォーマを削除し、パラメータを子要素に反映』にして、デフォーマーを統合。 ※ポリゴンが左右対称が条件 Live2Dでデフォーマの形状を反転コピーする方法 | はちゃち的な。

「形状のコピー」機能に描画順を含めない方法

ポリゴンを選択した状態で「形状のコピー」を実行します。

Live2D「形状をコピー」機能に描画順を含めない方法 | はちゃち的な。

準備メモ

準備

  • PSDインポート時にポリゴンが自動生成される
  • 読み込み先を複数のテクスチャで分割できる
  • サモンナイト5の工数(バストアップ・簡易アニメーション)平均すると1体あたりセットアップに3日、アニメーションに1.5日[ケーススタディ:バンダイナムコゲームス | Live2D]

パーツ

  • ポリゴン打ちの頂点は絶対に移動させない(テクスチャが伸びる)
  • ポリゴンを打ち直したいときは古い頂点の一部(三角形ポリゴン)を残して、打ち直し、最後に消す。(全部消すと配置がずれてしまう)

デフォーマー

  • デフォーマーを階層化してセットアップしていく
  • デフォーマーのタイプは2種類。回転と曲面
  • デフォーマーはサイズ変更可で、調整しやすいよう変形させる
  • 親が曲面/ワープデフォーマの場合、子の回転デフォーマは同じように曲がるのではなく、移動や回転の影響を受けます。親から独立しているわけではありません。
  • 回転デフォーマーの親に位置調整用の回転デフォーマーを置く

調整

  • デフォーマー調整。始点と終点を動かして、間のハンドルの傾きを決める。最後に微調整。
  • 変形パスツールとソフト選択で描画オブジェクトの形状を変える。
  • 肌色のオブジェクトを仕込んで、はみ出たところを消す
  • After Effectsへのクリッピングマスクの反映は、モデルとプラグインの版によって異なります。後半のCubism 2.1用プラグインの記録も確認してください。
  • 不透明度で部品のすり替えという表現も可能(※ただし変形パーツが増えてしまう。)

チェック

  • Viewerでモーションの確認ができる(自動で目パチや呼吸も再生する)

アニメーション設定

  • キーポーズ作成作成して、開始と終わり1秒前後にキーを打つ
  • Ctrl押しながらクリックでキーが打たれる
  • パラメーターの一番上でCtrl押しながらクリックで全てにキーが打たれる
  • OFFにしたいパーツがあれば、タイムラインのパーツ表示の数字を1→0に
  • 瞬きなどはテンプレート化して、効率化を図る

Live2D Cubism 2 テンプレート適用機能の使い方

Live2Dに搭載されているテンプレート適用機能の解説です。

モデリングに慣れてから使う機能と考えていましたが、初期設定の手間を大きく削減できる機能でした。

実際に適用すると初期セットアップの手順を省けるため、制作の早い段階から導入するメリットがあります。

手順

1 テンプレート適用

  • ファイル>テンプレート適用

今回はLive2Dの学習書籍に付属していたデータを使用しています。

整った作画のサンプルデータです。

テンプレート適用で使用する学習書籍付属のサンプルデータ。

2 テンプレートモデルの選択

  • 同じ向きのイラストを選択。
同じ向きのイラストを選んでテンプレートモデルを指定する画面。

3 サイズ調整

  • Fキーで点滅を止める。
  • テンプレートを選択して、左ドラッグで移動、右ドラッグで拡縮できる
  • 右クリック位置が中心となるのでアゴの位置を合わせて、スケールを調整
  • 頭に@が付いているパラメーターをいじって、顔パーツの位置を微調整
  • 終わったらテンプレート適用プレビューボタンを押す
アゴの位置を基準にテンプレートモデルのサイズや位置を調整する様子。

4 パーツの適用調整

  • 動きを見ながら適用が間違っているパーツを探す
  • Fキーでアニメーションをストップ
  • 互いにあっているパーツ選択して、『選択要素を対応付け』(ショートカットはSキー)する
  • OKボタンを押して終了(ちなみに再度テンプレート適用すると、続きから編集できました。※推奨されていません)
動きを確認しながら対応するパーツを選択要素を対応付けで指定する画面。

5 手動調整

テンプレート適用後に細部を手動調整する前の追従アニメーション。
  • 上記の画像の通り、大きくは追従しているものの、細部はおかしいので修正していく。

Live2D Cubism 2のPSDデータで3Dソフトを用いて頂点ガイドを作成する方法

2Dイラストに立体的な動きをつけるLive2Dの検証記録です。

普段3Dソフトウェアを扱っている場合、3D側であらかじめ頂点配置のガイド(アタリ)を作成したほうが効率的に進められるか検証しました。

Live2D単体でも制作は可能ですが、別ツールを併用した手順の備忘録として残します。

Live2D単体作業での課題点

  • 頂点を移動するとテクスチャが伸びてしまう。

メッシュの流れや頂点間隔を調整するために頂点を移動させると、テクスチャが引き伸ばされてしまいます。

位置を修正するには頂点をいったん削除して打ち直す必要があり、細かな調整に手間がかかります。

画面内でポリゴンを割り当てる際、一度打った頂点を直接動かすことは推奨されません。

位置を変更したい場合は、既存の頂点を削除してから新規に打ち直します。

02. やってはいけないポリゴンの割り当て方 – Live2D Cubism 2 マニュアル

  • ポリゴン作成が頂点の手打ち

例えば左右対称の形状であっても、手作業ですべての頂点を打つ必要があります。

作業工数を減らすためにも、対称パーツの反転コピーが求められます。

  • 標準のデフォーマーがいまいち

頂点単位での変形や影響範囲の細かな調節は、一般的な3Dソフトウェアに比べると自由度に制限があります。

精度を高めるために頂点数を増やすと、手作業による細かな調整工数が増大します。

Mayaでベースとなるガイドを作成する方法

3Dソフトウェアで頂点のガイドを作成してから、Live2Dへ読み込んで作業を進めます。

主な作業は頂点の配置とデフォーマによる変形調整のため、Maya以外の3Dソフトウェアでも同様に再現できます。

  • imagePlaneにテクスチャを貼り付けて、イラストに沿うようにモデリング

半透明のマテリアルを設定しておくと作業しやすくなります。

元の手描きイラストは完全な左右対称ではない場合があるため、左右ごとに微調整が必要になります。

イメージプレーンのイラストに沿って3Dソフト上でモデリングを行う様子。
  • PlanerでZ方向にマッピングしてUVを作成

テクスチャを割り当てたマテリアルをアサインし、スケールと配置位置を合わせます。

  • UV Snapshotでアタリを書き出す
Z方向にマッピングしてUVを作成しUVスナップショットでアタリを書き出す手順。

Live2Dでベースを作成する方法

  • UV Snapshotで書き出したワイヤーフレームをテクスチャにのせて、アタリ用のテクスチャを作成
書き出したワイヤーフレームを重ねて作成したLive2D用のアタリテクスチャ。
  • アタリを目安に頂点を打つ

書き出したアタリの画像を目安に、Live2D上で迷わず頂点を配置していきます。

書き出したアタリの画像を目安にしてLive2D上で頂点を配置する作業。

フェイシャルターゲットの作成方法

  • Mayaでフェイシャルターゲットのアタリを作成する方法

ベース形状と同様の手順で作成します。

表情差分用の追加テクスチャを用意する必要があります。

目を閉じた状態の参考画像です。

3Dソフト上でフェイシャルターゲット用のアタリとして作成した目を閉じた状態のモデル。

モデルはデフォーマのBend機能で曲げ、パーツの重なり順を整理しています。

Live2Dでフェイシャルターゲットを作成する方法

  • UV Snapshotで書き出したアタリを下絵に載せます。
書き出したアタリを下絵に配置してLive2D上で頂点を移動させる作業。
  • それをアタリにして頂点を移動させます。

ポリゴンの流れや間隔の構成を意識しておくと、歪みの少ない綺麗な変形を作成できます。

  • あとは隠したい場所等、必要に応じて調整

目頭や目尻のポリゴン分割数が不足していると、変形時にテクスチャが伸びてボケが生じる原因になります。

分割を追加すれば解決しますが、今回は検証作業をここで区切ります。

当時の検証では、アニメーションを再生して変形の連動を確認しました。

今回、現行版で再試験した結果ではありません。

Live2D単体で手作業によりフェイシャルターゲットを作るよりも、3Dソフトのツールでアタリを作ってから調整したほうが、変形の精度を安定させやすくなります。

まとめ

手作業の工程が多く、元のイラストに合わせた2D特有のデフォルメ感覚が重要になります。

各種ツールを組み合わせて効率的にセットアップできる方法を、今後も検証していきます。

Live2D Cubism 2の顔モデリング制作のヒント

公式サンプルデータの構造を分析しました。

今回は顔周りのセットアップ方法を解説します。

顔のパラメーター別セットアップ

デフォーマーの階層

首の回転(体の回転X・Y補助、首の位置調整用) L顔の回転(首の左右への傾き。パラメーター名は角度Z) L汗の曲面(角度 X・Y) L頬の曲面(角度 X・Y) L顔影の曲面(角度 X・Y) L顔影のZ(角度 Z) L顔影の揺れ(髪揺れ 前) L目の曲面(角度 X・Y) L目の変形(目の変形) L目玉の曲面(目玉のX・Y) L目玉の縮小(目玉の縮小) L目のハイライト L眉毛の曲面(目玉のX・Y) L眉毛の位置(眉 上下・左右) L眉毛の角度(眉 角度) L眉毛影の位置(眉 上下) L口の曲面(角度 X・Y) L鼻の曲面(角度 X・Y) L耳の曲面(角度 X・Y) L髪の曲面(角度 X・Y) L髪のZ(角度 Z) L髪の揺れ(髪揺れ 前・横・後) L首の曲面(角度Z) L首の曲面X(顔の傾き 体の回転X)

顔のパラメーター別セットアップと難易度

角度 Z(★★)

<アニメーション> 顔の左右への傾き <デフォーマー>
  • 上着の曲面
  • 顔の回転
  • 首の曲面
  • 顔影のZ
  • 前髪・後ろ髪のZ

制作メモ

  • 上着が左右へ微妙に動く
  • 首が9°くらい傾く
  • 傾きに合わせて首の形状修正
  • 前髪が重力で垂れるように形状修正
  • 髪の毛に合わせて顔影も調整

角度X・Y設定(難易度:高)

アニメーション動作

  • X(左右の振り向き)
  • Y(顔の見上げる・見下ろす)

デフォーマ構成

  • 汗の曲面
  • 頬の曲面
  • 顔影の曲面
  • 目の曲面
  • 眉の曲面
  • 鼻の曲面
  • 口の曲面
  • 耳の曲面
  • 髪の曲面

上下左右ともに基本的な調整項目は共通です。

各パーツごとに細かく形状を調整するため、全体を一括で変形するデフォーマは適用しません。

パーツごとにデフォーマを構成して顔の向きに合わせた輪郭調整を行う例。

顔の向きが回転する側は奥へ回り込むため面積を縮小し、頬の輪郭ラインを整えます。

反対側は手前に向くため面積を拡大し、横アゴのラインを整えます。

顔が回転する側の面積を縮小し頬や横アゴのラインを調整した状態。

上を向く動きではアゴ下が見えるように下部の形状を広げ、全体としてはやや圧縮されるように調整します。

下を向く動きではアゴを引くように形状をすぼめます。

描画オブジェクト

  • 鼻
  • 髪
  • 顔
  • 首

調整メモ

  • 首のライン 、顔の輪郭、鼻の形、髪の毛は直接、描画オブジェクトを触って形状調整。一番難易度が高い。

目の変形(★★)

<アニメーション>
  • 変形(ツリ目・タレ目)

デフォーマ設定

  • 目の変形

目の開閉/笑顔(★★★)

<アニメーション>
  • 開閉(眼をつぶる、ジト目、通常、見開く)
  • 笑顔

描画オブジェクト設定

*目

目の開閉や笑顔のアニメーションに合わせた目の描画オブジェクト設定。

作業メモ

  • 描画オブジェクトを変形させる

目玉 X/Y(★)

<アニメーション>
  • 目玉の位置

デフォーマ設定

  • 目玉の曲面

目玉 縮小(★)

<アニメーション>
  • 目玉の拡縮

デフォーマ設定

  • 目玉の縮小

眉 上下/左右(★)

<アニメーション>
  • 眉毛の位置

デフォーマ設定

  • 眉毛の位置
  • 眉毛影の位置

眉 角度(★)

<アニメーション>
  • 眉毛の角度

デフォーマ設定

  • 眉毛の角度

眉の変形(難易度:低)

アニメーション動作

  • 眉頭の下げ、眉中央の上げ

描画オブジェクト設定

  • 眉
眉頭の下げや眉中央の上げを行う眉の描画オブジェクト設定。

作業メモ

  • 描画オブジェクトを変形させる

口 変形・開閉(★★★)

<アニメーション>
  • 変形(開いた口の叫ぶ・通常・呆ける・笑う・すごく笑う)
  • 開閉(閉じた口のの叫ぶ・通常・呆ける・笑う・すごく笑う)

描画オブジェクト設定

  • 口 変形や開閉の動作を設定する口の描画オブジェクト設定。

作業メモ

  • 描画オブジェクトを変形させる

髪揺れ 前/後/横(★★)

<アニメーション>
  • 髪が左右に揺れる

デフォーマ設定

  • 前髪の揺れ
  • 後ろ髪の揺れ
  • 顔影の揺れ

感情表現(★)

<アニメーション>
  • 感情表現

描画オブジェクト設定

  • 頬
  • 汗

作業メモ

  • 不透明度調整
  • 描画オブジェクトを変形させる

Live2D Cubism 2の身体モデリング制作のヒント

公式サンプルデータを参考に構造を調査しました。

身体周りのセットアップ方法を解説します。

サンプルデータ集 – Live2D Cubism 2 マニュアル

身体のセットアップ

デフォーマーの階層

体の回転Z(左右への重心移動) L体の回転Y(前屈・後屈)   L呼吸 L体の回転X(左右への振り向き) L腕の位置(体の回転Xの補助、位置調整用) L腕の回転 L肘の回転 L首の回転(体の回転X・Y補助、首の位置調整用) L顔の回転(首の左右への傾き。パラメーター名は角度Z) L首の曲面(顔の回転 角度Zの補助。顔の傾きに合わせて衣服の移動) L首の曲面X(顔の傾き 体の回転Xに合わせて首の移動)

身体のパラメーター別セットアップと難易度

体の回転 Z(★★)

<アニメーション> 左右への重心移動 <デフォーマー>
  • 体の回転Z
左右への重心移動を行う体の回転Zのデフォーマ設定。

作業メモ

  • 全体を重心方向へ移動
  • 腰を曲げているので、頭・肩・胸は重心をかけた方へ大きく傾く
  • 腰より下はさほど変化しない。ただしスカートなどの服は引っ張られるのを意識
  • 片側のみ作成して反転コピーで可能

体の回転 Y(★★)

<アニメーション> 前屈・後屈 <デフォーマー>
  • 体の回転Z
  • 首の回転

描画オブジェクト設定

  • 上半身
  • 腕

前屈動作

体の回転Yにおける前屈動作のセットアップ例。

作業メモ

  • 腰を曲げて屈む
  • 中心部分は全体的に下げる。特に胸辺りが一番動く。頭部分の頂点は動かさない。
  • 脚部分はすぼめて、パースを少しかける

後屈動作

体の回転Yにおける後屈動作のセットアップ例。

作業メモ

  • 両肩を特に上げる
  • 上部枠を下げて、肩の形を調整。パースをつける
  • 胸の中心は動かさない
  • 腰まわりは少し上がる程度
  • 顔まわりは逆に下げて、上がり幅を抑える
  • 首の位置を調整して動きを強調する
  • 描画オブジェクトを直接いじって微調整

呼吸(★)

<アニメーション> 呼吸 <デフォーマー> *呼吸 胸郭の膨らみをつける呼吸アニメーションのデフォーマ設定。

作業メモ

  • 胸や腰を若干上げる
  • 枠を少し広げて胸郭の膨らみをつける

身体の回転X設定(難易度:中)

アニメーション動作

左右への振り向き動作です。

デフォーマ設定

  • 体の回転X
  • 首の回転
  • 首の曲面X
  • 肘の回転

描画オブジェクト設定

  • 上半身
  • 下半身
  • 腕
左右への振り向き動作を行う体の回転Xのデフォーマと描画オブジェクト設定。

作業メモ

  • 回転した体の中心を意識して回転方向へ突き出す
  • 特に胸の動きをつけるとわかりやすい
  • 回転方向の腕が回りこむ、少し下がる
  • 回転方向ではない方の腕は回転方向に少し移動し、また少し位置を上げてパースをつける
  • 肩回りのパースを意識
  • 腕や首、脚も回転方向へ位置調整。回転側の腕は回りこむように。
  • 描画オブジェクトを直接いじって調整。より立体的になるように頂点を動かす。
  • 片側のみ作成して反転コピーで可能

腕の回転(★★)

<アニメーション> 左右への移動、または腰に当てたり <デフォーマー>
  • 腕の回転
  • 肘の回転
  • 手の回転
  • 肘の曲面

描画オブジェクト設定

  • 肩から肘
  • 肘から手首
  • 手
  • 指

作業メモ

  • デフォーマーと描画オブジェクトを直接いじって、つなぎ目を微調整

Live2D Cubism 2のモデリング実践TIPS

実際の作業過程で得られた注意点やノウハウをまとめました。

  • 見本の用意
  • ポリゴンの割直し
  • ポリゴンの割直し修正
  • 描画順
  • いつの間にか下絵とずれている
  • 複数のパラメータをいじると関連する階層下の回転デフォーマーの位置がおかしくなる
  • 1つのデフォーマーへパラメーターを集中させない
  • モデリングの順序
  • 段取り
  • 塗り足し
  • 差し替え
  • ポリゴン数
  • 反転コピー
  • 形状をコピー/形状を貼り付け
  • それでもデータがおかしくなる
  • 変形パス
  • テンプレート機能

見本の用意

斜め30度の顔アングルや各種表情差分を用意しておくと、制作作業を効率的に進められます。

ポリゴンの割り直し

PSDを取り込んだ後、特に目・眉・口などの線画パーツを中心にポリゴンを細かく再分割します。

分割ラインは、細いパーツなら中心線に沿って引き、太いパーツなら中心線と輪郭線の両方に引いていきます。

メッシュができるだけ正三角形に近い均等な形状になるよう意識して割ると綺麗に変形します。

ポリゴンの割り直しと修正

当時は既存の頂点を残しながら割り直す方法を参考にしました。

ただし、2点残せばアニメーションを必ず保持できるという保証はありません。

別名保存し、各パラメータの端点と中間の形状を確認してください。

Live2Dでポリゴン再構築する際の注意点 | はちゃち的な。

描画順の仕様

描画順の数値が同じ場合、階層構造の下側に配置されたオブジェクトが優先して手前に表示されます。

インポート時の自動順序に依存せず、意図した重なり順になるよう手動で数値を指定することをおすすめします。

参考設定例(サンプルモデル:千歳)

  • 850 眉毛 目・瞼 線
  • 830 前髪
  • 820 二重
  • 810 眉影
  • 750 顔影
  • 660 頬
  • 600 汗 口関係(口の中・下唇・上唇・唇) 鼻 上下瞼 塗り
  • 550 目玉・ハイライト・目の中
  • 500 顔
  • 450 耳 腕
  • 400 首
  • 300 後ろ髪 体

下絵との位置ずれを防ぐ方法

オブジェクトのロック機能を活用して誤操作を防ぎます。

選択外オブジェクトのロックは「Ctrl+Shift+2」で実行できます。

複数パラメータ操作時に下位デフォーマの位置がずれる場合の対処

回転デフォーマや曲面デフォーマには複数のパラメータを割り当てられますが、それらを同時に動かすと意図しない形状破綻が生じることがあります。

パラメータの組み合わせごとに手動で調整して修正することも可能ですが、1デフォーマ・1パラメータの原則で階層構造を組んだほうが管理しやすく、複数パラメータ連動時にも意図通りの挙動を保てます。

パラメータ数と組み合わせを確認する

当時は3個以内を目安にしていました。

全バージョン共通の上限ではありません。

パラメータが増えるほどキーフォームの組み合わせも増えるため、使用中の版の検証機能を使い、意図しない変形がないか確認します。

モデリングの作業順序

安全にセットアップを進めるため、基本的には上位階層のデフォーマから順に設定していきます。

事前準備の段取り

本格的な形状モデリングを行う前に、必要なデフォーマとパラメータをすべて配置・作成しておきます。

デフォーマ作成のショートカットキーは「Ctrl+G」です。

初期段階ではデフォーマの各種パラメータ設定はデフォルトのままで問題ありません。

その後、必要な箇所へあらかじめキーフレームを打っておきます。

左右に分かれているパーツは、後から判別しやすいよう名称に「右」「左」を明記しておきます。

テクスチャの塗り足し作業

アニメーションをつけていくとパーツの隙間や加筆が必要な箇所が見つかるため、PSD側のテクスチャを修正して再インポートします。

描画領域が広がった場合は、追加された範囲に合わせてポリゴンを追加配置します。

修正箇所が多い場合は、レイヤー名を変更して新規パーツとして取り込み、差し替える方法もあります。

パーツの差し替え

直接頂点を操作せずデフォーマによる変形構造を維持していれば、パーツ画像を差し替えるだけで動きが引き継がれるため、デフォーマを活用した設計を推奨します。

ポリゴン数の目安

約4000ポリゴンは当時の作業目安です。

一律の推奨値として扱わず、実際に表示する環境で負荷と見た目を比較します。

反転コピー機能

対称パーツのセットアップ工数を削減できる便利な機能です。

選択した階層下にある要素をまとめて削除したい場合は「Ctrl+Delete」を実行します。

Live2Dでデフォーマの形状を反転コピーする方法 | はちゃち的な。

形状のコピーと貼り付け

特定のキーフレームで整えた形状をコピーし、別のキーフレームへそのまま貼り付けられます。

表情差分や対称動作を作成する際に役立ちます。

データ破損や不具合への対策

作業中はこまめにバージョン番号を変えて別名保存し、定期的に動作チェックを行います。

構造に慣れることでトラブルの発生率を下げられます。

変形パスツール

キーを設定したうえで、目や口など滑らかな曲線変形が必要なパーツに適用すると効率的です。

テンプレート機能

別のモデルを作成する際に、共通の構造を流用して効率化できる機能です。

05. テンプレート機能 – Live2D Cubism 2 マニュアル

Live2D Cubism 2の物理演算で髪を揺らす方法

Live2D Viewerを使用した物理演算の設定手順を解説します。

Live2D Viewerの導入

以下はCubism 2時代のLive2D Viewerの参照先です。

現在のViewerと同じアプリとして扱わず、旧モデル形式への対応状況を確認してください。

Live2D Viewer – Live2D Cubism 2 マニュアル

証明書のエラーが出る場合は、旧版の競合と決めつけて再インストールしないでください。

インストールを中断し、公式の配布元と対応環境を確認します。

証明書の検証を無効にする方法は使いません。

モデルとモーションデータの準備

Live2D Cubism Modelerからモデルデータの書き出し

ファイル>mocの書き出し
  • model.1024
  • model.moc
  • model.model.json

Live2D Cubism Animatorからアニメーションデータの書き出し

ファイル>モーションデータの出力
  • model.mtn

物理演算の設定手順

データのインポート

Live2D Viewerを起動して、.mocと.mtnをドラッグ&ドロップ Live2D Viewerへmocファイルとmtnファイルをドラッグ&ドロップしてデータをインポートする操作画面。

Physics.jsonの作成

プロジェクト>サンプル>物理演算:髪揺れを選択 Live2D Viewerでサンプルから髪揺れの物理演算設定を選択してファイルを作成する手順。

パラメータのより詳細な仕様については公式マニュアルを参照してください。

01. 物理演算の設定 – Live2D Cubism 2 マニュアル

適切な揺れ具合に調整できたら、設定内容をファイルに書き出して保存します。

設定ファイルは「physics.json」として出力されます。

この記録ではphysics.jsonという名前を使っています。

読み込み設定で参照する名前と実ファイル名を一致させてください。

Cubism 3以降のphysics3.jsonなどとは形式を混同しないようにします。

髪の揺れ動作の確認

物理演算の設定を完了した後の確認手順です。

リスト内の.mtn項目を選択し、再生ボタンを押して挙動を確認します。

Live2D Cubism Animatorへのベイク・変換方法

物理演算の記録

Live2D Viewerの.mtnの項目を選択して「再生してパラメーターを記録」を押す アニメーションを撮りたい項目を選択して「物理演算パラメーター選択」ボタンを押す
  • PARAM_HAIR_FRONT
  • PARAM_HAIR_BACK

対象のパラメータにチェックが入っていることを確認し、OKボタンをクリックします。

Live2D Viewerの物理演算パラメーター選択で対象のパラメータにチェックを入れる設定画面。

アニメーションが再生され、物理演算によるキー情報が計算されてモーションファイル(.mtn)として保存されます。

Live2D Cubism Animatorへのインポート

Animatorを起動し、作成中のアニメーションシーンへ書き出した.mtnファイルをドラッグ&ドロップします。

これで計算済みの髪揺れアニメーションをタイムラインへ追加できます。

Live2D Cubism Animatorのタイムラインへ書き出したmtnファイルを追加する手順。

「許容する誤差」の数値を大きめに設定しておくと、余分なキーフレームが間引かれてデータが軽量化されます。

最後にタイムラインを再生して動きを確認し、不自然なノイズがあれば手動でキーを調整します。

タイムラインで物理演算による髪揺れの動きやキーフレームを確認している様子。

Live2D Cubism 2モデルをAfter Effectsへ読み込んで表示する方法

作成したLive2DモデルをAfter Effectsで扱うための連携手順を紹介します。

プラグインの導入

以下はCubism 2向けAfter Effectsプラグインの資料です。

現行のAfter Effectsでそのまま使えるとは限りません。

旧moc形式と、Cubism 3以降のmoc3形式を区別してください。

After Effects プラグイン – Live2D Cubism 2 マニュアル

書き出しと運用の注意点

当時の環境では、次の条件で不具合が起きる場合がありました。

現在の全環境で同じ問題が起きるという意味ではありません。

  • ファイルのパス(保存場所)に日本語が含まれている。

mocファイルの書き出し手順

  1. ファイル > mocファイル書き出し
  2. SDKのバージョンを2.1、すべてのチェックを外して、OKボタン
  3. AEを起動
  4. 新規コンポと平面を作り、平面にエフェクト>Live2D>Live2D Loaderをクリック
  5. Load.mocボタンをクリック
  6. Modelに.mocのデータを選択、Texture(s)はテクスチャデータ(複数可能)を選択
Live2Dから書き出したmocファイルをAfter EffectsのLive2D Loaderエフェクトで読み込む手順。

詳しい手順は公式マニュアルをご確認ください。

After Effects プラグイン – Live2D Cubism 2 マニュアル

インポート結果と追加機能

After Effectsへ読み込んだLive2Dモデルの表示結果とクリッピングマスク適応の様子。
  • さきほど紹介したクリッピングマスクでの目パチも適応されています。
  • さらにパーツごとの透明度も調節できるように!

備考

  • インポートされたデータはパーツ単位での選択やパーツの表示ON/OFFはできない。あらかじめパラメータに仕込む必要がある。

クリッピングマスク機能

Cubism 2.1以降のクリッピングマスク機能もAfter Effectsへ反映できるようになりました。

白目や口内の変形に合わせて瞳や歯を自動でマスキングできるため、Cubism 2.0以前のように肌色で塗りつぶして隠す手法が不要になります。

After Effectsで白目や口内の変形に合わせて瞳や歯を自動マスキングするクリッピングマスク機能の表示例。

VTuberの始め方や配信環境の構築については、まとめ記事もあわせてご覧ください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

VTuberのおすすめ書籍

配信PCの選び方

配信機材の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次