タグ: お絵描き講座

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-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元絵のゴミや塗り残しを見つける方法

Live2D元絵をしっかり作っていないと、何度もペイントソフトとLive2Dを行ったり来たりしなければなりません。
可能であれば最初から完璧なデータを作れれば良いのですが、中々そうはいきません。

今回はその中でも、PSDデータに紛れ込むゴミやほぼ透明な半透明部分、塗り残しをペイントソフト側で防ぐ方法の紹介です。

例題

例えば、CLIP STUDIO PAINT上で以下のような髪の毛のパーツレーヤーがあったとします。

ScreenShot01025

一見、これで大丈夫なようですが、いくつか問題を抱えています。

CLIP STUDIO PAINTでの確認方法

CLIP STUDIO PAINTを使っている場合、境界効果機能というものがあります。

[colwrap] [col2]

全体

ScreenShot01026[/col2] [col2]

詳細

ScreenShot01026-2[/col2] [/colwrap]

境界効果ボタンをクリックし有効にすると以下のように、

  • 「フチの太さ」
  • 「フチの色」

項目が出てきます。


縁の色の横の3角(▶)を押すと、色の設定項目が出てきますので、任意の色を選択します。

ScreenShot01027

元のパーツや背景色から遠い色を選ぶようにしましょう。今回は赤色を選びました。

境界効果の比較

境界効果を適応すると画面上ではこのように表示されます。

ScreenShot01028

赤色の部分が出ましたね。
先に調整済みの画像と比較してみましょう。

ScreenShot01045

フチの赤色が全く違います。

問題の無い場合は上図の様に赤い線はパーツのフチに沿って見えます。
しかしそうでない部分には、余計なデータが存在しています。
また、パーツ内に赤色が見られた場合は塗り残しがあるということです。

[colwrap] [col2]ScreenShot01030[/col2] [col2][/col2] [/colwrap]

このように一見大丈夫に見えるパーツでも、データ上ではたくさんの不備があることがわかります。
これはLive2D側に持って行った際に予期せぬポリゴンの割当が起こったり、修正が必要になり何度もペイントソフトと行ったり来たりをしてしまうことになりかねません。

[aside type=”warning”]不備のチェックを終えたら境界効果機能を切りましょう。
切り忘れたままPSD出力をすると、Live2D側でも赤い線が出たままになります。

[/aside]

修正方法

修正方法は単純です。

  • ゴミや、余計な塗があるところは消しゴムツールで消してあげましょう。
  • 塗り残しのある部分は、きちんと描いていきましょう。

以上になります。
むしろそれ以外に方法がありません。

対策ができるとすれば、描く際に塗り残しやゴミが出ないよう細心の注意を払うくらいでしょうか。

複数レイヤーにまとめて境界効果を適応する方法

さて、このようにパーツをチェックして無駄や不備がないか確認できるのですが、多くのパーツを境界効果を設定し、色を指定し、終わったら解除作業をする…のは意外と手間です。

そこで一括でまとめて境界効果の指定と解除を行える方法があります。
それがレイヤーフォルダー機能に境界効果を設定する方法です。

レイヤーフォルダーを新規に作成する主な手順は以下の二通りあります。結果は同じなので、好きな方で作成します。

フォルダー作成方法1

ScreenShot01033

レイヤーパネルの下に並んでいるアイコンの内、上図のフォルダーアイコンをクリックすることでフォルダーを新規作成します。

フォルダーを作成後、レイヤーをフォルダー内にドラッグアンドドロップすることでフォルダー内に格納できます。

[colwrap] [col2]ScreenShot01034[/col2] [col2][aside type=”normal”]新規フォルダーは空の状態で制作されます。
手動でフォルダー内にレイヤーを入れましょう。[/aside][/col2] [/colwrap]

 

既にフォルダー機能を使っている人は、一番上階層に親フォルダーを設定しましょう。

フォルダー作成方法2

フォルダー内に格納したいレイヤーを先に選択します。

[colwrap] [col2]ScreenShot01036[/col2] [col2][aside type=”normal”]選択は、

  1. 格納したいレイヤーの先頭(または末尾)レイヤーを選択。
  2. Shiftを押しながら末尾(または先頭)をクリック。

を行うとまとめて選択が可能です。

一つずつクリックで選択したい場合は、

  1. Ctrl+レイヤークリック

にて個別に選択を追加もできます。

[/aside][/col2] [/colwrap]

次にレイヤーパネルで右クリックをすると以下のようにメニューが出てくるので、「フォルダーを作成してレイヤーを挿入」を選択。

[colwrap] [col2]ScreenShot01037[/col2] [col2][aside type=”warning”]レイヤーのサムネイル上でクリックすると、以下のように別メニューが表示されます。
この中には該当項目がありませんので注意しましょう。

ScreenShot01039[/aside][/col2] [/colwrap]

これで選択されたレイヤーが全てフォルダー内に格納されます。

ScreenShot01038

さて、フォルダーに格納したら、一番親(上階層)のフォルダーに境界効果を適応してみましょう。

表示結果を以下の例を見ながら確認していきます。

ScreenShot01032

今回フォルダー内には3つの顔文字が入っています。
そこにオレンジの境界効果を適応しています。

フォルダー内に入っていない (´・ω・`) は効果が適応されていません。

境界効果を指定したフォルダーの直下にある (`・ω・´) は問題なく境界効果が現れていますね。

また、フォルダーの中にフォルダーを作っている状態でも (^ω^) に境界効果は現れていますね。

(ΦωΦ) は、フォルダーの中のフォルダーの中のフォルダーに入れていますが大丈夫です。
また (ΦωΦ) を入れいているフォルダーは「透過」設定になっています。
フォルダーのレイヤーモードに関係なく適応されているのが分かりますね。

この親フォルダーに適応した境界効果を切れば、3つの顔文字にも境界効果が切れます。

ScreenShot01040

これで一箇所に境界効果を設定するだけで全体の確認が行えます。

元絵を制作している最中に随時確認するのもよいですし、最後にまとめてチェック作業をする場合にも便利に確認できます。

他のペイントソフトの場合

Photoshop

Photoshopには同様の機能があります。レイヤースタイル内の境界線機能です。

ScreenShot01043

CLIP STUDIO PAINTと同様に、レイヤーやフォルダーに設定することが出来ます。

ScreenShot01044

SAI

残念ながらSAIには似た機能がありません。


 

かつてこの機能を使う前の私は何度もPSDインポートを繰り返していてとても面倒だったので、是非活用してみてください。

Live2D用の正面絵を作る際に役に立つクリスタの機能

Live2Dは魅力的な機能が満載です。しかし、Live2Dの最初の難所は、元絵を準備するところです。
そんなLive2D用の「正面向きの絵」を描く場合に便利な方法をご紹介!

ペイントソフトは「CLIP STUDIO PAINT」です。ProでもEXでも大丈夫なはず。

対称定規

CLIP STUDIO PAINTには対称定規という機能があります。
これは片方を描けば反対側にも反映される機能です。

ScreenShot00437-2

何はともあれ、使ったこと無い方は一度使ってみるとすぐ分かります。

Animation 27

ね、簡単でしょ?

Live2Dにて正面の絵を動かそうと思った場合、左右対称のパーツが非常に多くなりますので、この機能を使って描き、その後片方を削除、Live2Dで再度左右対称処理を行うと製作が捗ります。

描けない場合の多くは、「特殊定規にスナップ」がされていないのが原因です。
表示メニューの中に「特殊定規にスナップ」という項目があるので✔チェックが入っているか確認しましょう。
ScreenShot00446

Live2D用に描く場合のワンポイント

真ん中に定規を引く

CLIP STUDIO PAINTでは定規をキャンバスの真ん中に作る方法がありません。
(私が知らないだけだったらこっそり教えて下さいm(_ _)m)
そこで一手間かかりますが、簡単に真ん中を割り出す方法がこちらです。

  1. 何色でも良いのでキャンバス全体を塗りつぶします。
  2. 次に自由変形ツール(Ctrl+T)を押します。
  3. 元の画像の比率を維持の☑チェックが入っていたら外します
  4. 拡大率の横を50を指定し、半分の大きさにしEnterで確定します。
  5. レイヤー移動ツールを使って左(もしくは右)端に移動させます。
    (この時Shiftを押しながら移動させ、細かい調整は左右の矢印キーを使うと上手く行きます)
  6. キャンバスをできるだけ拡大します(虫眼鏡ツール or Ctrl+SPACE)
  7. 左右対称定規を選択し、境界の所をクリックします。
  8. 消去ツールを使って、一度レイヤー内を全消しします。
Animation 28

これでキャンバスの真ん中に定規を引くことが出来ます!

定規の影響範囲

左右対称定規のデフォルトの設定では設定したレイヤーにのみ作用します。
これではレイヤーをいくつも使うとき毎回同じ場所に定規を引かなくてはならないため非常に煩わしいです。

それを解決する方法が定規の表示についての機能です。

デフォルトでは以下のようになっています。
ScreenShot00439

右上にある定規アイコンをクリックします。
以下のように設定項目が出てきます。
ScreenShot00440

例えば すべてのレイヤーで表示 をクリックして☑チェックを入れてみましょう。
ScreenShot00438

若干レイヤー名の横のアイコンが変化しました。
定規は表示されている状態で効果を発揮しますので、一つのレイヤーに定規を設定し「全てのレイヤーで表示」を選択した場合他のレイヤーも定規の影響を受けます。

Animation 29

オススメの使い方その1

フォルダに定規を設定する方法です。

ScreenShot00441

定規のアイコンはドラッグアンドドロップで移動できます。
簡単なのは先の方法で真ん中に定規を設定し、その後フォルダへ移します。

Animation 30

フォルダへ設定するときは「編集対象の時のみ表示」設定する事をおすすめします。
表示対象とは、フォルダの中のことです。「同一フォルダ」とはその階層の事なので意味としては違ってきます。
これを行うことで、定規の線邪魔だな…と描いている途中で思った場合に、フォルダの外のレイヤーを選択することで定規が非表示になります。
途中で全体を確認したい場合等に地味に使えます。

オススメの使い方その2

定規用のレイヤーを作っておきます。

ScreenShot00445

レイヤー名を分かりやすく「定規」にしました。
対称定規の設定は「全てのレイヤーで表示」です。
サムネイルを分かりやすく黒で塗りつぶし、不透明度0%で完全に透明にします。
定規を含むレイヤーを間違えて動かさないようにレイヤーをロックします。

どこかしらにこのレイヤーを保持しつつ、Live2D用にいつも通り絵を描いていきます。


これで新規に何枚レイヤーを作ったとしても、全てのレイヤーで左右対称を行うことが出来ます。

左右対称定規を使いたくない場合

便利ですが全てが左右対称とは限りません。
一時的に左右対称を行いたくない場合は以下の方法があります。

オススメ2では、レイヤーを非表示にする事で左右対称されません。
これでも良いのですが、もう一つ、特殊定規にスナップを切る方法もあります。

ScreenShot00446

表示メニューの中の「特殊定規にスナップ」の✔チェックを外すか、
右下にある3つのアイコン(CLIPホームページの左横)の真ん中が「特殊定規にスナップ」アイコンで左右対称をさせなく出来ます。

ScreenShot00447

ScreenShot00448 ◀ 特殊定規にスナップアイコン

オススメ1ではこの方法で、オススメ2ではこの方法か先のレイヤー非表示によって使い分けることが可能です。

最後に

この左右対称定規、何故かPhotoshopやSAIでは無いようです。非常に便利な機能なので他のソフトでも使えるようになると良いですね(・∀・)

完全に左右対称の絵と言うのは中々描く機会がありませんが、Live2Dのような特殊な元絵を描く場合にこういった地味な機能が非常に重宝します。
これに気づく前は、毎回パーツを反転コピーして元絵を完成していましたorz
私と同じ轍を踏むことのないよう役に立てば幸いです(‘、3_ヽ)_