カテゴリー: 講座

1-10 ワープデフォーマの使い方2【Live2D Cubism3 入門講座】

角度Yを作る

顔のワープデフォーマを選択後、角度Yパラメータを選択し、キーの3点追加を行います。

 

角度Xの数値が0(赤点が真ん中の状態)になっていることを確認して下さい。

続いて角度Yの数値を30に合わせて上向きの形状を作っていきます。

角度Yの数値を-30に合わせて上向きの形状を作っていきます。

これで角度Yの形状がパラメータが完成しました。

パラメータを動かて動作を確認してみましょう。

パラメータの結合

角度X、角度Yとパラメータを設定してきました。

ここでパラメータをより見やすく扱いやすくする便利機能を紹介します。

角度Xの左隣に小さなアイコンがあります。これをクリックすると1つ下のパラメータと結合させることが出来ます。

これにより、角度Xと角度Yのパラメータを同時に動かすことが可能になります。

しかしここでパラメータを動かしながらビューエリアを確認してみましょう。

ちょっと分かりにくいですが、9つある白い点のうち、4隅の動きがおかしいですね。

現在顔のワープデフォーマに角度Xと角度Yのパラメータを割り当てました。

「3点と3点を合わせ、6箇所の動きをつければよいのでは?」と思われる方もいるかもしれませんが、実際は3点×3点=9点になり、9通りの形状を作る必要があります。

現在は以下の赤枠で囲われたキーが設定されている状態で、4隅が未完成です。

残りの4箇所を手動で作っても良いのですが、今回は自動で作ってくれる機能がありますのでそちらを使用していきましょう。

 




4隅の形状を自動生成

パラメータウィンドウの右端にあるアイコンをクリックするとメニューが新たに開きます。

この中の「4隅の形状を自動生成」を選択します。

 

4隅の形状を自動生成ウィンドウが表示されますので、以下のような設定でOKをクリックします。

  • パラメータ1:角度X
  • パラメータ2:角度Y
  • オプションの対象:全ての描画要素とデフォーマ

では状態で改めて4隅の動きを確認してみましょう。

たったこれだけで4隅の形状が自動で作られました。

今回はシンプルなモデルなので気になる箇所は少ないですが、自動生成はけっして万能ではありません。

気になる箇所は形状を個別に微調整しましょう。

 

(´・ω・`)ショボーン君完成!

10回に渡ってモデリングしてきた(´・ω・`)ショボーン君ですが、これにてモデルは完成です!

お疲れ様でした!(`・ω・´)

これで貴方はLive2Dモデリングの基礎の基礎を習得することができました。

もし、まだ自信の無い方は、もう一度ショボーンPSDをLive2Dにインポートするところから再チャレンジして見ると良いかもしれません。

二回目は当講座を一旦閉じて、自力でどこまでできるか試してみましょう。
途中で詰まったら再度講座を開いてどこで詰まったか確認してみると、どこがわからないかが分かるようになって、調べることもできるようになるでしょう!

 

…さて、当講座はいったんここで終了です。

ですがLive2Dモデルができただけです。
ここから先は、もっと高度なモデルを試してみるもよし、アニメーション制作をしてみるもよし、トラッキングソフト(FaceRigやPrprLive等)に組み込んでVtuberっぽいことをしてみるもよし、ゲームエンジンに組み込んでみるもよし!

興味のある分野にそれぞれ分岐して進んでいってください。

より高度なモデルを作りたい方は、公式チュートリアルか以下の書籍が参考になります。

ive2Dの教科書 静止画イラストからつくる本格アニメーション
10日でマスター Live2Dモデルメイキング講座

アニメーションや動画制作に興味のある方は、公式マニュアルの「アニメーション>モデルの読み込みと配置」のあたりから読み始めると良いでしょう。

 

Vtuber方面に進みたい方は、とりあえずPrprLiveというトラッキングソフトが無料で試せます。
利用にはLive2Dの組み込み用ファイルを書き出さなくてはなりませんが、やり方は公式マニュアルの「書き出し>組み込み用データ」の欄を見てみてください。

 

ゲームエンジンに興味のある方は、公式マニュアルの「SDK for Unity 入門」あたりから調べてみると良いかもしれません。



 

[1UP]パラメータの分散について

今回角度XとYで、3点×3点=9箇所 の形状を作る必要がありました。

では、もし角度Zのパラメータを同一デフォーマに割り当てたらどうなるでしょうか?

3×3×3=27

27箇所の形状を作っていく必要があります。
さらに3点追加すると、

3×3×3×3=81

81パターンの形を作っていくのは大変手間暇がかかります。

そこでワープデフォーマを複数作成し親子関係を設定することで、割り当てるパラメータを分散することが出来ます。

フリー版ではこのデフォーマを50個まで、PRO版では無制限に作ることが可能です。

もしもモデル制作中にフリー版の上限に引っかかるようになりだしたら、Pro版の検討もしてみてはいかがでしょうか(`・ω・´)

 



目次へ戻る

 

 

1-9 ワープデフォーマの使い方1【Live2D Cubism3 入門講座】

ワープデフォーマとは

Live2Dのメイン機能の1つであり、Live2Dモデルを作る上で最も使用頻度が高いであろう機能です。

このワープデフォーマはその名の通り、Photoshopのワープ機能のようにオブジェクトを変形させて動きをつけることのできる機能です。
(CLIP STUDIO PAINTに馴染み深い人はメッシュ変形機能をイメージして下さい)

またこのワープデフォーマは複数のオブジェクトを内包できますので、レイヤーフォルダ機能を兼ね備えています。

もっと簡単に説明すると、「オブジェクトをまとめて動きを付けられるよ!」ということですね。

それでは実際にワープデフォーマを使い顔全体の動きを付けていきましょう。

角度Xを作る

ワープデフォーマの作成

まずオブジェクトを選択します。

続いて、画面上の中央にあるワープデフォーマの作成ボタンをクリックします。

するとワープデフォーマを作成ウィンドウが表示されましたので以下のように項目を設定しワープデフォーマを作成します。

  • 名前:顔のワープデフォーマ
    (自分の分かりやすい名称で構いません)
  • 挿入先パーツ:Root Part
  • 追加先:選択されたオブジェクトの親に設定
  • ベジェの分割数:4×1
  • 変換の分割数:16×9

画面上に緑の格子が表示されたら無事に作成完了です。

左下のデフォーマウィンドウを確認しましょう。

顔のワープデフォーマの中にオブジェクトが格納されていいます。

顔のワープデフォーマを、顔オブジェクトをと表現し、親子関係が設定されました。

ワープデフォーマに子オブジェクトを追加する

パーツウィンドウから顔以外のオブジェクトを選択します。

選択は左目オブジェクトを選択後、Shiftを押しながら口オブジェクトを選択することでまとめて選択が可能です。

(ビューエリアでもShiftを押しながらオブジェクトの選択を行うことが出来ます)

次にインスペクタウィンドウのデフォーマタブを選択し、現在[Root]が選択されている項目を顔のワープデフォーマに変更します。

この項目はEnterを改めて押す必要はありません。

デフォーマウィンドウを見てみましょう。

顔のワープデフォーマの子としてオブジェクトが追加されました。

この状態で顔のワープデフォーマを動かすことで、子全てをまとめて動かすことが可能になります。

顔の角度Xを付ける

顔のワープデフォーマを選択後、角度Xパラメータを選択し、キーの3点追加を行います。

角度Xの数値を-30(赤点を左端)にして画面左側を見る(´・ω・`)を作ります。
あとは画面左側を見ている風に変形させるだけですが、言葉では分かり難いのでGIFアニメを用意しましたので参考にして下さい。

これと同じように角度Xの数値30(赤点を右端)でも同様に反対側の形状を手動で作ります。

目の反転コピーのように楽をする方法はないの?
と思われた方もいるかもしれません。

ありません。


【追記】

デフォーマの反転ができるようになりました!
公式マニュアル▶動きの反転


角度Xのパラメータを動かしてみて、以下のように動けば角度Xのパラメータ設定の完了です。

次回はいよいよモデリングも佳境!角度Yを作っていきます。

次 > 1-10 ワープデフォーマの使い方2

 




1-8 反転コピーとパラメータ変更【Live2D Cubism3 入門講座】

それでは右目の瞬きが完成しましたので左目も作っていきます。
まゆげの際にも両方手付けで作りましたね。

しかし、もう一回同じ作業をするのは面倒です。

そこで、右目をコピーし、反転させて左目を作ってみましょう!

 

【注意】
この方法は今回のような真正面向きでかつ目の形状が左右同一であるなどの条件下で使用できます。
斜め向きモデルでの使用は難しいので注意して下さい。

 

左目の削除

右目を複製しますので、今ある左目は不要になります。
左目オブジェクトを選択し、編集>削除(またはDeleteキー)を実行します。

右目オブジェクトの複製

続いて右目オブジェクトを選択し、「編集>コピー(Ctrl+C)」、「編集>貼り付け(Ctrl+V)」を実行します。

複製したオブジェクトがパーツウィンドウに追加されたのを確認しましょう。

一番上に追加されていますね。
Live2Dでは同名のオブジェクト名を使用しても問題ありません。これは名前とは別にIDを持っており、そちらでオブジェクトを判別しているからです。

しかしこれでは人間側が分かり難いので、オブジェクト名を変更します。

インスペクタウィンドウにある「名前」を左目に変更しEnterで確定させます。
確定させないと更新されませんので注意して下さい。

 

反転させる

現在は右目と左目が同じ場所で重なり表示されている状態です。

ビューエリア、もしくはパーツウィンドウから左目を選択した状態にし、反転を実行します。

反転処理は以下の二通りの手順があります。
内容は同じですので分かりやすい方で実行しましょう。

モデリング>形状の編集>反転

右クリック>反転

反転設定ウィンドウが表示されました。

水平方向に反転」にのみ☑チェックを入れOKを押します。

すると以下のように左目オブジェクトが左目に配置されました。

「右目 開閉」パラメータを動かしてみましょう。

これで左目を反転コピーで作ることが出来ました!

パラメータの変更

しかし現状では左目も「右目 開閉」パラメータに割り当てられていますね。
これを「左目 開閉」へ変更する機能がありますのでやってみましょう。

左目を選択し、パラメータを触ると右側に小さなウィンドウが表示されます。

逆三角形の[▼]を選択すると、4つの項目が出てきます。

今回はこの中で「変更」をクリックします。

パラメータ変更ウィンドウが表示されましたので、この中から「左目 開閉」を選択しOKをクリックします。

すると左目オブジェクトに割り当てられたパラメータが「左目 開閉」へ変更されました。

これで右目と左目を別々に動かすことが可能になります。

これにて反転コピーによる左目の作成が完了です。

次 > 1-9 ワープデフォーマの使い方1




[1UP]反転させる基準

今回のモデルでは目の位置調整が必要ありありませんでした。
これは、目の位置がほぼ左右対称であったためです。

この反転機能は、「親の中心を基準に反転させる」させます。
親とはワープデフォーマや回転デフォーマを指しますが、本チュートリアルではまだ使用しておりません。
なので今回はキャンバスの中心が反転させる基準となりました。

また、位置を調整する場合に注意が必要です。

位置情報もパラメータが記録していますので、(今回の場合は)目の開閉「0」と「1」の双方を調整する必要があります。

↓開いた目だけ位置調整した場合

目の位置を調整したと思ったら閉じた目は移動していません。

初心者が行いやすいミスの1つになりますので、パラメータを割り当てた後に位置調整する際は注意しましょう。

次 > 1-9 ワープデフォーマの使い方1

1-7 動かし方の基本3【Live2D Cubism3 入門講座】

細かくまばたきを作る

それでは早速動きを付けていきましょう。

オブジェクトをクリックしてパラメータを登録する作業はこれまでと同様です。
今回は「右目 開閉」にキーを2点挿入します。

今回は目を閉じている状態を「0.0」に、目を開いている状態を「1.0」で作っていきます。

数値を「0.0」に合わせ、閉じた目になるように頂点を動かします。
文字で説明するのも難しいので、実際にGIFアニメで見ていきましょう。

そして完成したのがこちらになります。

(´・ω・`) から (´ーωー`) になっていますね。

いえ、まだ片目だけなので (´ーω・`) ←これが正確ですね。

次回は作った右目を複製して左目を作っていきます。

次 > 1-8 反転コピーとパラメータ変更

 

 



[1UP]名称の違いについて

Live2Dでは「オブジェクト」「描画オブジェクト」「メッシュ」「アートメッシュ」「ポリゴン」と言った名称があります。

いったいこれらの違いは何なのか?

  • 「メッシュ」とは?
    • アートメッシュの略称で使われます。「メッシュの手動編集」などはアートメッシュを手動で編集するという意味になります。
  • 「アートメッシュ」とは?
    • Live2D Cubism3から新たに加わった要素ですが、これはCubism2にあった「描画オブジェクト」の名称を変更したものになります。
  • 「描画オブジェクト」とは?
    • PSDで読み込んだ絵のオブジェクトです。レイヤー毎にオブジェクトが生成されます。Cubism3で「アートメッシュ」と名称が変更されました。
  • 「オブジェクト」とは?
    • 描画オブジェクトの略称です。なのでアートメッシュとも同義なのですが、Cubism3でもオブジェクトと表記されている所もあり紛らわしいですね。
  • ポリゴンとは?
    • オブジェクトの頂点、エッジによってできる面のことです。
    • オブジェクトの中の3つの頂点で囲まれている1面の事を指しますが、ポリゴンを割り当てるのはオブジェクトのみなのでオブジェクトのことをポリゴンと呼称する人も居ます。

結論

「オブジェクト」=「描画オブジェクト」=「アートメッシュ」=「メッシュ」≧「ポリゴン」

こんな感じでしょうか。(間違えてたら指摘下さい)

当チュートリアルでは主に「オブジェクト」と書いています。
これはCubism2から使ってる身としては未だにアートメッシュという単語が慣れていないのと、Live2D公式もオブジェクトと表記している箇所あるし良いかな…と言う横着です。

深い意味はありません。

次 > 1-8 反転コピーとパラメータ変更

1-6 メッシュの手動編集【Live2D Cubism3 入門講座】

口と同じように目のまばたきを作る

目のまばたき、目パチを作っていきます。
ということでさっそく、口と同じ作り方でやってみました。

口と同じく縦に潰してみました。
これでも確かに(´・ω・`)ショボーン君ならまばたきとして使えますね。

ですが、折角なら (´ーωー`) こんな感じにしたいですね。

しかしこのままでは (チュートリアル的に新しい要素の解説が出来ない) 作り込みが出来ません。
より細かい動きを付けるためには前準備が必要になりますので、ここではそれを解説していきます。

テクスチャアトラス

画面上部の「テクスチャアトラスの編集」ボタンを押します。

画面上に「新規テクスチャアトラスの設定」ウィンドウが出ますので、サイズを2048pxにします。
サイズは2048pxでなくとも構いませんが、フリー版の上限が2048pxが1枚までになります。
(テクスチャ名は自分が分かればなんでも良いのでここではデフォルトのまま進めます)

「テクスチャアトラス編集」ウィンドウが表示されると、「自動レイアウトを行いますか?」と聞かれますのでLive2Dに任せてOKを押します。

随分と偏りましたが、等倍でこのサイズのようなので空いた部分は気にしないで進めましょう。
(テクスチャサイズを気にするのはゲームへの組み込みモデル等、リアルタイムで少しでも負荷を下げたい時になってからで構いません)

 

しかしベースとなる顔オブジェクトがなぜか縦に配置されていますね。
これを軽く修正してみましょう。

オブジェクトと同じように回転させ、任意の位置に移動できます。
Shiftを押しながら回転させると、45度ずつ回転できます。

位置はどこでも大丈夫ですが、薄い青色が被らないように気を付けましょう。
また、最終的な配置が白枠からはみ出さないよう注意して下さい。

メッシュの手動編集

右目のオブジェクトを選択肢、メッシュの手動編集ボタンをクリックします。

すると画面がメッシュの手動編集用の画面になります。ツール詳細ウィンドウを見ていきましょう。

先程までと表示が変わりましたね。
ツールの詳細は選択中のツールや処理によって表示が変わります。

頂点の削除

ツール詳細の右端に消しゴムツールがありますのでこれを選択します。

この消しゴムツールはオブジェクトを消すわけではありません。
実際にやってみましょう。

目の周りの点と線が消えました。

点を頂点、線をエッジ、エッジで囲まれた面をポリゴンと呼びます。

この消しゴムツールは頂点やエッジを削除するツールになります。

頂点の追加

頂点の追加ボタンを押すとビューエリアにて頂点を追加できるようになります。

目の円にそって以下のようにポリゴンを作成していきます。

頂点を追加し終えたら「ポリゴンを生成」ボタンを押すことで自動でエッジが追加されポリゴンになります。

また、左のカーソルアイコンの「選択・編集」を用いることで頂点の微調整が出来ます。

編集が終わったらメッシュ編集横の✔チェックをクリックし確定させます。

 

なぜ今回メッシュの手動編集という作業を行ったかというと、この「頂点ひとつひとつをパラメータに登録して動きを付けることができる」からです。

つまり、たくさんの頂点がある方が細かい動きを付けることが可能というわけですね。
(ただし多くした分だけ作業量も増えます)

[1UP]きれいなポリゴンとは?

「△正三角形に近い形の方が綺麗に動かしやすい」とよく言われています。

特にオブジェクトの境界は影響が生まれやすいため、頂点を打つ時や修正時に気を付けてみると良いでしょう。

【外周のポリゴンが正三角形に近い】

【外周のポリゴンが正三角形ではない】

 

それでは次回改めてまばたきを作っていきます。

次 > 1-7 動かし方の基本3




1-5 動かし方の基本2【Live2D Cubism3 入門講座】

まゆげのパラメータをつける

(`・ω・´)シャキーン君にする

まゆげの動きを付けつつ、もう少しパラメータについて掘り下げていきます。

Live2Dの基礎の基礎ということで活躍してくれている「(´・ω・`)ショボーン君」ですが、これを「(`・ω・´)シャキーン君」へ変えてみましょう!

オブジェクトは右まゆげ(画面左側)を選択します。
続きてパラメータは「右眉 角度」を選択します。

パラメータウィンドウ上部あるアイコンから、[+] 緑が3点あるボタンをクリックします。

「右眉 角度」パラメータに3点キーが挿入されればOKです。

パラメータを選択(背景色がグレーになっている状態)でないと目的のパラメータにキーの挿入が出来ませんので注意しましょう。

本チュートリアルでは以下のように「眉毛 角度」パラメータを付けていきます。

「0.0」…(´・ω・`)ショボーン君
「1.0」…(`・ω・´)シャキーン君

(`・ω・´)シャキーンのようなまゆげを作っていきます。
パラメータの選択を「1.0」にしましょう。

まゆげオブジェクト周りの赤い枠の外側部分にカーソルを合わせると、オブジェクトの回転を行うことが出来ます。

眉毛を回転させたらパラメータを動かしてみましょう。

口の変形に引き続き、まゆげの回転も付けることが出来ました。

 

( ・ω・ )モニュ君にする

オブジェクトの変形、回転がパラメータに割り当てられるのを確認しました。
しかし登録できるのはこれだけではありません。

オブジェクトの不透明度をパラメータで変えることが出来ます。

まず「右眉 角度」パラメータを「-1.0」にします。

続いてインスペクタウィンドウの設定を見ていきます。

インスペクタ内に「不透明度」の項目がありますので、これを0%へ変更しましょう。

この状態でビューエリアを見てもらうと、右まゆげが消えている事が確認できます。

それではパラメータを動かしてみましょう。

 

まゆげを動かすことで「( ・ω・ )モニュ?」「(´・ω・`)ショボーン」「(`・ω・´)シャキーン」が出来ました。

しかし、まゆげは左右で対になっていますので同じ工程を反対側でもやってみましょう。

反対側のパラメータを設定する場合、選択肢が2つあります。

【別パラメータ「左眉 角度」に割り当てる】

  • メリット
    • 左右で別のまゆげの形状にできるため表情の柔軟性が高い。
  • デメリット
    • 操作回数が少し増える。
    • 左右を同一の数値にしたい場合に数値が違っていないかの確認が必要になる。
    • パラメータを多く消費してしまう。(フリー版では設定できるパラメータ数に制限あり)

【同一パラメータ「右眉 角度」に割り当てる】

  • メリット
    • 複数のオブジェクトをまとめて動かすことができる。
    • パラメータ数の節約になる。(Pro版ではパラメータを無制限に制作可能)
  • デメリット
    • オブジェクトがまとめて動くので、微調整や別々の動きが出来ない。

 

今回のチュートリアルでは別々のパラメータに割り当てて進めていきます。
本チュートリアル終了後には人のモデルを制作することがあると思います。
その際に別けておくほうが何かと表情の調整がし易いため、今回もそれと同様の形式を取ります。
(ですので同一パラメータに設定しても問題ありません)

 

では次回は、目のまばたきを作って行きましょう。

次 > 1-6 メッシュの手動編集

 




[1UP]キーへの吸着について

 

パラメータの左右端にキーの挿入をしている場合は気になりにくいのですが、パラメータの途中や真ん中にキーがある場合、選択するのがやや難しくなります。

これはパラメータの数値が「0.0」と表示されてあっても小数点第2位以下が省略された表示の為、実際は完全な「0」ではありません。

これを手動で合わせるには非常に手間がかかりますが、右クリックで選択することでパラメータの吸着機能が使えます。
これを使えば最寄りのキーへの選択が補正されます。

[1UP]パラメータの色について

口とまゆげを制作してみてなんとなく分かるかと思いますが、状態によってパラメータ上の点の色が変わります。

一覧を以下に載せておきますので気になる方は参照して下さい。

●黒…現在の値。パラメータにキーが1点も挿入されていない場合

●赤…現在の値。パラメータにキーが挿入されている場合。

●青…現在の値。パラメータにキーが挿入されて、かつリピート設定がされているパラメータの場合。

…選択中のオブジェクトに挿入されたキーがある場合。

●白…選択外のオブジェクトに挿入されたキーがある場合。

+…選択中のオブジェクトに挿入さたキーがあり、パラメータの数値がキーと重なる場合。

●黄…複数のオブジェクトを選択中に、キーを挿入していないオブジェクトがある場合。

今すぐに全てを覚える必要はありません。特に青や黄は後回しで良いでしょう。

次 > 1-6 メッシュの手動編集

最初に読むべき「Live2D Cubism3」入門講座

はじめに

はちゃち
 
 
 
 
当記事はLive2D Cubism3 モデリングの入門講座です。Live2D公式マニュアルよりもさらにシンプルなモデルを作りながら学習していきます。

初心者が挫折し易いポイントはいくつかありますが、特に以下の2点で挫折する人が多い気がします。

  1. 初めから大量の情報に晒され情報過多を起こし混乱する。
  2. 何が分からないかが分からないので何をどう何と調べたら良いかが分からずに詰む。

そこでこの講座ではできるだけシンプルに必要な場面で必要な説明をすることで、初めてLive2Dを扱う人でも基礎の基礎を習得し、初心者と呼べるくらいには脱初心者することを目標に執筆しています。

目次


よくある質問

Q.Live2D Cubism3にモデルが表示されない!

A.オンボードの場合に正常に動かない場合があります。
GPU(グラフィックボード)を搭載のPCを用意しましょう。
▶詳細:Live2D Cubism3 動作環境

Q.自分は絵が描けないし…

A.Live2Dは絵を動かすことのできるツールですが動かせるのは自分の描いた絵だけではありません。フリー素材のイラストや、イラストレーターさんに原画を依頼することも可能です。
確かに絵を描けたほうが習得に有利ではありますが、プロのLive2Dモデラーの中には絵を描くのが苦手だからモデル製作に特化している人もいます。

Q.でもお高いんでしょう?

A.Live2D Cubism3は有料版と無料版がリリースされています。詳細
無料版でも一般ユーザーおよび小規模事業者(年間売上1000万円未満)は商用利用も可能です。

Q.講座記事内のGIFアニメの表示がおかしい。

A.GIFアニメ圧縮の関係上、一部で色が正確に表示されなかったりマウスカーソルの残像が残ったりしています。
回避方法がいまいちわからなかったので気にしないでください…!

Q.もっと高度なモデルの作り方が知りたい!

A.より高度なモデルを作りたい方は、公式チュートリアルか以下の書籍が参考になります。

ive2Dの教科書 静止画イラストからつくる本格アニメーション
10日でマスター Live2Dモデルメイキング講座

 

1-4 動かし方の基本1【Live2D Cubism3 入門講座】

パラメータウィンドウ

Live2Dモデルに動きを付けるためにはパラメータウィンドウを使う必要があります。

パラメータウィンドウは以下の部分になります。

文字で説明するようも実際に行ってもらった方が分かりやすいので、実際にやってみながら進めてみましょう!

口にパラメータをつける

口の「ω」部分を動かしていきます。
人の口の開閉をいきなり作るのは難しいので、上下の高さを動かしてモゴモゴとさせてみます。

まず口オブジェクトを選択します。

オブジェクトを選択した状態で、パラメータウィンドウの「口 開閉」を選択します。

パラメータの背景色がグレーになったら選択完了です。

パラメータウィンドウの左上のアイコンをクリックします。

すると「口 開閉」のパラメータの左右に緑色の点が追加されました。

緑色の点の事を「キー」、点を加える事を「キーの挿入」と呼びます。

挿入された2点の間をクリックすると、赤い点が動くのが確認できます。

赤い点が現在のパラメータ数値になり「口 開閉」では「0~1」の間で遷移します。
(パラメータによって数値の上限と下限が違います。また、それらの数値は自由に変更できます)

Live2Dモデルの動かし方の基本は「キー毎に形状を登録していく」ことになります。

まずは「口 開閉」数値0の状態(赤点がパラメータ左端)にし、選択中の口オブジェクトを変形させましょう。

オブジェクト周りの赤い線を動かすことで、(ペイントソフトで言うところの)自由変形のように動かすことが出来ます。

今回は手軽な変形方法として口を縦に短くしてみました。

この状態で「口 開閉」パラメータを動かしてみましょう

0のキー(左側)に変形させた口を、1のキー(右側)に元の形状の口が登録されている状態になります。
その間の数値ではLive2Dが自動で補完して形状を遷移させてくれます。

以上がLive2Dの基本的な動かし方になります。

まとめ

  1. オブジェクトを選択する
  2. 割り当てたいパラメータを選択する
  3. キーを挿入する
  4. オブジェクトを変形すると自動で形状が登録される。
  5. パラメータを動かしてみる
  6. 動く!

 

Live2Dは自由変形っぽい機能で形を登録していくだけで動かすことのできる簡単なソフトウェアです。

また、口を動かすために「口 開閉」パラメータに割り当てましたが、特にどのパラメータに割り当てても構いません。
パラメータの数値の上限下限、パラメータ名などは自由に変更し、パラメータの追加と削除も可能です。

キーの挿入も必要に応じて増やすことが出来ますが、あまり増やしすぎると管理が大変なことになるのではじめは「2~3点」のキーで作ることをオススメします。

 

それでは次回は3点キー挿入を用いて眉毛のパラメータを付けていきます。

 

次 > 1-5 動かし方の基本2




1-3 オブジェクトを選択する【Live2D Cubism3 入門講座】

パーツウィンドウについて

それでは早速動きを付けていきたいと思います。
ですがその前に、「パーツ」と書かれたウィンドウを見てみましょう。

この中には読み込んだPSD絵がレイヤー毎に表示されています。

ペイントソフトと比較してみましょう。
名称も並び順も全て同じですね。

パーツウィンドウ内には動かす絵のパーツが入っている事が分かります。

読み込まれたパーツは「オブジェクト」もしくは「アートメッシュ」と呼ばれます。

オブジェクトの選択

パーツウィンドウから選択

それではパーツウィンドウから「口」オブジェクトを選択してみましょう。

すると画面上の口 ω オブジェクトが何やら四角形で囲まれました。

これが、オブジェクトが選択された状態になります。

他のオブジェクトも選択肢てみましょう。
画面上に表示される(´・ω・`)ショボーン君の選択パーツが変わります。

ビューエリアから選択

この選択はパーツウィンドウ以外からも行えます。

(´・ω・`)ショボーン君が表示されている部分はビューエリアと呼ばれ、こちらで直接画面をクリックすることでも選択が可能です。

 

それでは次回からは、Live2Dの肝である動かし方について解説していきます。

 

次 > 1-4 動かし方の基本1

 




[1UP]ちょっと高度な選択の仕方

上記2つの方法で問題なく選択出来ますが、別の選択方法についても軽く触れていきます。
※この選択方法は効率化のための方法で、覚えていれば「楽な場面があるかもしれない」程度の認識で構いません。

右クリックから選択

選択肢たいパーツ上から右クリックをするとメニューが表示されます。
「カーソル位置オブジェクト」>表示されているオブジェクト候補 を選択することでもオブジェクトを選択できます。

Ctrl+右クリックから選択

右クリックする際にCtrlを選択しつつ行うと余計なメニューが表示されずクリックしたところにあるオブジェクトのみが表示されます。

使い所について

一見ただ面倒なだけな気もします。

しかし、モデルが複雑化し、様々なオブジェクトが重なり合った中から奥のオブジェクトを左クリックするのは難しい状態になります。
また、レイヤー数が膨大になれば、パーツウィンドウから探すのにも一苦労です。

そういった複雑なモデルを作る際の効率化のために右クリックから選択する方法が実装されています。

初心者向けではありませんが、脱初心者を目指す際に知っていると楽になりますので頭の片隅にでも置いておく事をオススメします。

 

次 > 1-4 動かし方の基本1

1-2 PSDインポート【Live2D Cubism3 入門講座】

Live2D Cubism3の起動

それではLive2D Cubism3を使っていきます。
まだ導入していない方はこちらからダウンロードとインストールを行って下さい。

Cubism3が正常に起動しない場合は、公式マニュアル「Editorが正常に起動しない場合の確認事項」を参照して下さい。そのうで上手くいかない場合は公式コミュニティで問い合わせましょう。

起動すると以下のような画面が表示されます。

Live2D Cubism3からはモデリングとアニメーションが同一ソフトウェア上で動かせます。

本講座ではまずモデリングの解説から行いますので、
画面左上の項目が  M  Modeler になっていることを確認して下さい。

PSDインポート

それでは先程準備した(´・ω・`)ショボーン君PSDを読み込んでいきます。
インポート方法は以下の2つがあり、どちらを行っても結果は同じですので好きな方を選んで下さい。

  • ファイル>ファイルを開く(Ctrl+O)を選択しPSDを読み込みます。
  • 画面上のどこかにPSDファイルをドラッグ・アンド・ドロップします。

(´・ω・`)ショボーン君がLive2Dに読み込めたらインポート完了です。

最初に全ての画面構成を説明してしまいますと「( ゚Д゚)ハァ?」との気分になりかねませんので、詳細は講座を進めていきながら必要になったら触れていきます。

次回は読み込んだパーツの選択の仕方について解説していきます。

次 > 1-3 オブジェクトを選択する




1-1 PSDの準備【Live2D Cubism3 入門講座】

対応するペイントソフトについて

Live2Dは2Dイラストを動かすことのできるソフトウェアになりますが、単体でお絵描き機能は付いていません。他のペイントソフトとの連携を前提としています。

元絵として読み込める形式はPSDとなります。
その為PSD形式で出力できるペイントソフトを準備しましょう。

  • Photoshop(推奨)
  • CLIP STUDIO PAINT(推奨)
  • SAI
  • メディバンペイント

上記以外にもPSD出力ができ、レイヤー機能があれば用いることが出来ます。

本チュートリアルで解説するモデルについて

Live2Dには公式サンプルモデルがいくつもあります。

桃瀬 ひより

Cubism3対応サンプルモデル

シンプルモデル

Cubism2にて初心者向け学習モデルとして提供されていたモデル

いずれもLive2Dを学習する上でありがたいモデルではあるのですが、Live2Dの基礎の基礎を解説していくにあたってはさらにシンプルなモデルを用いて行きます。

(´・ω・`)ショボーン君です。
非常にシンプルな形状で簡単そうですね!

今回はあらかじめPSDファイルを準備しましたので以下のURLからダウンロードをして下さい。
(自分でPSDを準備したい方はページ下部に仕様を載せています)

PSDファイル ▶ Download

それでは次回から早速モデリングの解説に入っていきましょう。

次 > 1-2 PSDインポート 

 




[1UP]元絵データを自分で用意する場合

(´・ω・`)ショボーン君PSDを見てもらえれば分かるのですが、構造はいたって簡単です。


上記画面は
CLIP STUDIO PAINT

レイヤー構造は以下の通り

  1. 左眉毛レイヤー
  2. 右眉毛レイヤー
  3. 左目レイヤー
  4. 右目レイヤー
  5. 口レイヤー
  6. 顔レイヤー

顔文字で表すと以下の通り

  1. (´・ω・)
  2. (´・ω・`)
  3. (´・ω`)
  4. ω・`)
  5. (´・ω・`)
  6. (´・ω・`)

手書きでも構いませんし、文字入力ツールで顔文字を書いても構いません。
6番の顔の肌と、目や口、眉のパーツが別レイヤーになっていることに注意してください。

準備が出来たら次へ進みましょう!

次 > 1-2 PSDインポート 

生放送等のコメント読み上げに合わせてLive2Dモデルに口パクをさせる方法(複数モデル対応)

はじめに

ニコニコ生放送やFRESHのような配信サービスにて、Live2Dモデルを表示してコメント読み上げに合わせて口パクさせる方法を解説していきます。
棒読みちゃんやボイスロイドでコメントを読み上げられる環境であれば、様々な場面で可能になります。

例えば私が不定期に行っているお絵描き配信では以下のような画面になります。

screenshot02353

ボイスロイドの結月ゆかり、琴葉茜、東北きりたんでコメントを読み上げ、それに合わせてボイスロイドLive2Dモデルで口パクをさせています。より、ボイスロイドが文章を読み上げている感じを演出できます。

なお、解説は Windows10 にて進めていきますが、7や8.1でも問題ないと思います。
MACについては私が持っていないので未確認です。

[aside type=”warning”]

【注意】

FaceRigを用いた配信方法の解説ではありません。
FaceRigはWebカメラを用いて配信者の顔をLive2Dや3Dモデルに追従させるソフトウェアです。

当解説では、あくまでデスクトップマスコットのような状態で生放送上に表示させてコメント等に合わせて口パクをさせるやり方についてになります。
また、FaceRigを使用しないが、Live2Dモデルに自分の声に合わせて口パクだけを実装したい場合は当解説で可能です。

[/aside]

使用ソフト一覧

VOICEROID+ 結月ゆかり EX ダウンロード版 [ダウンロード] VOICEROID+ 東北きりたん EX ダウンロード版|ダウンロード版 VOICEROID+ 東北ずん子 EX ダウンロード版 [ダウンロード] VOICEROID+ 琴葉 茜・葵 ダウンロード版 [ダウンロード] VOICEROID+ 民安ともえ EX ダウンロード版 [ダウンロード] VOICEROID+ 京町セイカ EX ダウンロード版 [ダウンロード] VOICEROID+ 月読アイ EX ダウンロード版 [ダウンロード] VOICEROID+ 鷹の爪 吉田くん EX ダウンロード版 [ダウンロード]

Live2D モデルを表示する

まずはデスクトップ上にLive2Dモデルを表示していきます。
最も簡単な方法として、Live2D Viewerというソフトウェアがあります。

公式サイトからダウンロードし、インストールを済ませておいて下さい。
(※動作にはAdobe Airが必要になります)

screenshot02354

起動すると以上のような画面が表示されますが、表示するLive2Dモデルがないとこれ以上何も出来ません。

今回は解説に結月ゆかりLive2Dモデルを使用していきます。
結月ゆかりモデルは以下のURLにて配布していますので、ダウンロードします。

screenshot02355

結月ゆかりLive2Dモデル : http://library.live2d.com/Libraries/view/000149/

ダウンロードしたZIPファイルを任意の場所に解凍すると、以下のようなファイルが表示されます。

screenshot02356

今回使用するファイルはmocフォルダの中身です。

screenshot02357

mocフォルダは以上のような構成になっています。
この中のyukari.model.jsonファイルを先程のLive2D Viewerにドラッグ・アンド・ドロップします。

screenshot02358

新たにウィンドウが2つ現れました。yukari ( SDK 2.1 )  と yukari (60.00%)  です。

[aside type=”normal”]Q.mocとmodel.jsonの違いについて。

Live2D Viewerには
「mocファイルをドロップして下さい」
と書いています。しかし実際はmodel.jsonファイルをドロップします。
混乱する人もいるかもしれませんので、両者の違いを簡単に解説します。

[colwrap] [col2]

mocファイルを読み込んだ場合

screenshot02360

[/col2] [col2]

model.jsonファイルを読み込んだ場合

screenshot02359

[/col2] [/colwrap]

model.jsonの方では yukari.physics.json (物理演算設定ファイル)とmotionsフォルダ(モーションデータをまとめたフォルダ)が増えています。

これらのファイルはmocフォルダの中に入っています。

screenshot02361

これら関連付けの設定を予め保存したものがmodel.jsonファイルになります。
今回の結月ゆかりモデルでは予め私が設定した状態での配布になっているため、model.jsonファイルを読み込むことだけで問題ありません。

mocファイルを読み込み、 yukari.physics.json と motionsフォルダ を手動でドロップすることでも同様の状態になります。

ただし、自作モデルや配布モデルの中にはmodel.jsonファイルがない場合がありますので、その場合はmocファイルから読み込んで自分で設定構築後、model.jsonファイルを書き出す必要があります。
(※書き出しに付いては後述)

[/aside]

yukari (60.00%) のウィンドウの端にカーソルを合わせるとウィンドウサイズを自由に変更できます。
また、ウィンドウをスクロールすることでモデルの表示が変わります。(カッコ内の%は現在の拡大率)

ご自身の環境によって理想のサイズが変わると思いますので調整してみて下さい。

[aside type=”warning”]【注意】

Live2D Viewer 現バージョン( 2.2.10 ) では、

  • ウィンドウサイズの変更
  • デスクトップ表示(Win+D)
  • 管理者権限確認時の暗転

等で拡大率がリセットする仕様(不具合?)があります。

また、切りの良い数字(例:100.00%)に手動で合わせる機能がありません。
jsonファイルを直接書き換えて再読込することで可能ですが、初心者向きではないので割愛します。[/aside]

次に配信で使うためのViewerの設定を行っていきます。

アニメーションの中はデフォルトでは以下のようになっています。

screenshot02363
  • 自動目パチ
  • アイドリングモーション
  • 呼吸

に☑チェックを入れます。

次に表示内の背景色を変更します。

screenshot02364

左中段にある緑色(#00FF00)を選びます。

screenshot02365

OKを押し背景色を確定すると以下のような状態になると思います。
アイドリングモーションが再生されながら、背景画緑色になっていれば大丈夫です。

screenshot02367

 

画面の大きさや位置、背景画を毎回設定するのは手間なので、それらの設定を保存します。
(自身でmodel.jsonファイルを書き出す際も同じ手順で行なえます)

screenshot02368

プロジェクト▶書き出し▶モデル設定ファイル(サンプル用)をクリックして下さい。

screenshot02369

書き出しの設定についてこのような画面が出てきますので、settings.json を書き出すに☑チェックを入れてOKを押します。
では、yukari.model.jsonを上書き保存しましょう。(別名で保存でも可)

screenshot02370

書き出すと、yukari.settings.jsonファイルが新たに書き出されました。

screenshot02371

settings.jsonはウィンドウの位置、拡大率、背景画等のデータを保存してくれています。
このsettings.jsonは特段扱う必要はありません。先程書き出した際にmodel.jsonにてsettings.jsonを読み込む設定になっています。

無事に書き出せているかどうか、yukari.model.jsonファイルをLive2D Viewerにドラッグ・アンド・ドロップして見ましょう。書き出す直前のウィンドウ状態になればOKです。

ただし、アニメーション内のアイドリングモーション等の設定は再びデフォルトに戻っています。
こちらはsettings.jsonに含まれませんので、毎回手動で設定する必要があります。(仕様?)

screenshot02363

続いて、Live▶リップシンク▶追加 を行います。
(Live2D機能を有効にするに☑チェックが入っていない場合は入れて下さい)

screenshot02373

lip syncという項目が追加され、クリックするとLive2D Viewer上でリップシンク入力と言う項目が追加されます。

マイクをお持ちの方は、マイクをチェックし、使用しているマイクの種類を選択します。

screenshot02374

この時点で、マイクに話しかけてみて下さい。
自分の声に合わせて結月ゆかりが口パクをしてくれます。

コメント読み上げではなく、
自分の声に合わせてLive2Dモデルを口パクさせる方は、
次を飛ばして3ページ目の「配信ソフトでのLive2Dモデル取り込み方法」へ進んで下さい。

次ページからは、ボイスロイドや棒読みちゃんの音声に合わせて口パクを行う方法を解説していきます。