猫様の下僕姉弟の生活

猫様とゲームとコスメ

【Live2D Cubism 4】両目の開閉と笑顔の作成

Live2Dで両目の開閉と笑顔の作成していきます。

イラストの作成とパーツ分けで作成したPSDファイルを使用して各レイヤーの操作をおこなっていきます 

ファイルの読み込み

インストール時にデスクトップに作成した「Live2D Cubism Editor 4.0」のショートカットからエディターを起動します

f:id:kamiya11:20200111235445j:plain

エディターが起動したら、上部メニューにある「ファイル」⇒「ファイルを開く」から事前に用意したPSDファイルを開いてください

ドラッグ&ドロップでも開くことができます

f:id:kamiya11:20200111235449j:plain

ファイルを開くと、このように表示されます

各ウィンドウに表示されている内容については、実際に操作しながら解説していきます

f:id:kamiya11:20200111235451j:plain

基本的な操作方法

「ファイル」⇒「設定」⇒「キーボードショートカット」から変更できますので、自分のやり易いように振り分けておきましょう

拡大  ホイール前回転
縮小  ホイール後回転
回転  R + ドラッグ
保存  Ctrl + S
位置の移動  スペース + ドラッグ
1つ戻る  Ctrl + Z
1つ進む  Ctrl + Y

  

アートメッシュの割り当て

アートメッシュは各レイヤーに対して割り当てられており、その頂点を動かすことでイラストを変形させたりする役割を持っています

読み込んだ時点で一応生成されますが超大雑把なため、そのままでは使うことができません

なので自動的にアートメッシュを生成する機能を使用します

しかし、この機能だけでは実際に動かすには適さないアートメッシュが生成されるので、各工程で手動でいじっていく必要があります

メッシュの自動生成

「Ctrl + A」で全てのレイヤーを選択します(ここで表示されている四角が初期のアートメッシュです)

その状態で上にある「AUTO」というボタンをクリックしてください

f:id:kamiya11:20200112001921j:plain

そうすると「メッシュの自動生成」のウィンドウが表示されます

「プリセット」横の▼をクリックし「標準」に変更してください

これで各レイヤーにメッシュが割り当てられました

見た目が超ホラーなので×をクリックしてウィンドウを閉じたら、適当なところをクリックしてメッシュの表示を解除してください
f:id:kamiya11:20200112002009p:plain

 

閉じ目を作るための前準備

早速ですが両目を変形させていきます

他レイヤーの誤操作を防ぐために「すべてをロック」でレイヤーをロックしてから右目のフォルダーだけ個別に解除しておきましょう

f:id:kamiya11:20200112004316j:plain

右まつ毛上

髪などの目に重なるパーツは邪魔になるので非表示にしてください 

「右まつ毛上」のレイヤーを選択(もしくは画像を直接クリック)するとアートメッシュが表示されます

その状態で上にある「メッシュの手動編集」というボタンをクリックしてください

 他レイヤーが透過され、選択中のレイヤーのみがピックアップされます

f:id:kamiya11:20200112094237j:plain

そうしたら先ほど自動生成されたアートメッシュを一回削除します

これは目の周りは変形が大きいため、もう少し細かいメッシュを作成する必要があるからです

左上にある「消しゴム」を選択し、ドラッグで割り当てられているアートメッシュを全て消します

f:id:kamiya11:20200112094239j:plain

次に消しゴム横にある「+ペン」を選択し頂点を追加していきます

f:id:kamiya11:20200112095034p:plain

まずは実線を通るように真ん中に追加していき、続けて上、下と一周するように追加していきます

f:id:kamiya11:20200112093755g:plain

メッシュが引き終わったら「+ペン」の下にある「自動接続」をクリックすると各頂点をいい感じに繋いでくれます

f:id:kamiya11:20200112095036p:plain

メッシュの繋ぎ目が綺麗な三角形になっていればOKです

上にある✔マークをクリックして完了させます

f:id:kamiya11:20200112141943p:plain

同様の手順で「右まつ毛横」「右まつ毛下」「右二重」にもメッシュの割り当てをしていきます

右まつ毛横

f:id:kamiya11:20200112143033g:plain

右まつ毛下

f:id:kamiya11:20200112143049g:plain

右二重

f:id:kamiya11:20200112143058g:plain

変形させる前にクリッピング作業 

これで閉じ目を作成するためのメッシュ割り当ては完成です

ですが、このまま閉じ目を作成すると目玉や白目を弄っていないため変なことになってしまいます

例えばこんな感じですね

まつ毛は閉じているが目玉などは、そのまま表示されてしまいます

f:id:kamiya11:20200112144042j:plain

これを防ぐために「クリッピング」を設定します

まずはベースとなる「右白目」レイヤーを選択し、インスペクタ内にあるIDをコピーします

f:id:kamiya11:20200112145022j:plain

続けて「右目玉」を選択し、インスペクタ内にあるクリッピングにペーストしてEnterキーを押してください

「ハイライト」も同様に設定します

f:id:kamiya11:20200112145024j:plain

そうすると「右白目」のメッシュが動いた時に、クリッピングしたレイヤーが表示されないようになります

これを利用すればクリッピング元のメッシュを動かすだけで疑似的に他のレイヤーも見えないようにすることが可能となるわけです

f:id:kamiya11:20200112145026j:plain

 

閉じ目に変形

これで前準備が完了しましたので閉じ目に変形させていきます

Ctrlキーを押しながら、パーツウィンドウから「右二重」「右まつ毛上」「右まつ毛横」「右まつ下」「右白目」をクリックして選択します

f:id:kamiya11:20200112151133j:plain

次に「パラメータ」の「右目 開閉」をクリックしグレー色にします

色が変わったのを確認したら、上にある「キーの2点追加」をクリックし赤の点を一番左までスライドさせ数値を「0.0」にしてください

ここの「1.0」が基準の位置、「0.0」が移動後の位置を表しています

f:id:kamiya11:20200112151136j:plain

これで5つのレイヤーに対してキーが追加されましたので、それぞれを閉じ目の形に変えていきます

右まつ毛上

まず初めにメッシュを変形させやすいようにします

上にある「変形パスツール」をクリックし、画像のように①②③と変形パスを設定してください

これで緑の●をドラッグすることで周辺のメッシュを大まかに動かせるようになります

また、左上にある「Solo」ボタンをクリックすると対象のレイヤーがピックアップされて見やすくなるのでお好みで使用しましょう

f:id:kamiya11:20200112185205j:plain

今回はメッシュを上下に反転させてから形を整える簡易的な方法でやります

高クオリティを目指す場合は、「右まつ毛上」のレイヤーを下まで移動させてから形を整えるようにしてください

f:id:kamiya11:20200112191132g:plain
同様の手順で「右まつ毛横」「右まつ毛下」「右二重」「白目」のメッシュを変形させていきます

右まつ毛横

閉じたときの「右まつ毛上」に重なるように変形させてください

「右まつ毛下」と繋がるように位置を調整すると分かり易いです

f:id:kamiya11:20200112201407j:plain

右まつ毛下

今回は「右まつ毛上」で完全に覆われるため手を加えませんが、もし隠しきれなかった場合は縮ませると良いです

白目

閉じたときの「右まつ毛上」に重なるように変形させてください

位置や形が悪いと目を閉じるモーションの途中でまつ毛を貫通して白い部分が見えてしまうので、パラメータを動かしながら上手く調整します

f:id:kamiya11:20200112201420j:plain

右二重

まつ毛の動きに合わせて下げます

若干縮ませて右下がりにすると良いです

f:id:kamiya11:20200112201427j:plain

動作確認

ここまで完了したらパラメータを左右に動かしてみましょう

若干粗が見えますが十分だと思います

f:id:kamiya11:20200112202707g:plain

 

笑顔に変形

同様の手順で次は、笑顔の目に変形させていきます

Ctrlキーを押しながら、パーツウィンドウから「右二重」「右まつ毛上」「右まつ毛横」「右まつ下」「右白目」をクリックして選択し、「パラメータ」の「右目 笑顔」をクリックしグレー色にします

色が変わったのを確認したら、上にある「キーの2点追加」をクリックし赤の点を一番左までスライドさせ数値を「0.0」にしてください

f:id:kamiya11:20200112204427j:plain

右まつ毛上

元々曲線を描いており、そのままでも笑顔に見えるため高さの調整だけ行いました

そうではない人は、弓なりになるように変形させてあげると良いです

f:id:kamiya11:20200112205028j:plain

右まつ毛横

「右まつ毛上」に重なるように変形させてください

見えないようにできれば良いので多少雑でも問題ありません

f:id:kamiya11:20200112205035j:plain

右まつ毛下

 こちらも「右まつ毛上」に重なるように変形させます

f:id:kamiya11:20200112205055j:plain

白目

こちらも同様です

ただし閉じ目の時と同じで、モーションの途中でまつ毛を貫通して白い部分が見えてしまうので、位置を上手く調整します

f:id:kamiya11:20200112205103j:plain

右二重

まつ毛の動きに合わせて少しだけ下げます

f:id:kamiya11:20200112205252j:plain 

動作確認

ここまで完了したらパラメータを左右に動かしてみましょう

「右まつ毛下」が少し気になりますが良しとします

f:id:kamiya11:20200112210240g:plain

アートメッシュの複製

これでようやく片目が終わりました

しかし、ここからもう片方を作るとなると大変ですので左目は複製しましょう

「右目」のフォルダー内のレイヤーを全て選択し「Ctrl + C」でコピー、「左目」のフォルダーを選択してから「Ctrl + V」でペーストします

複製されたレイヤーが選択されていますので、その状態で「右クリック」⇒「反転」⇒「OK」を選択しましょう

f:id:kamiya11:20200112212342j:plain

これで右目のアートメッシュを持った左目ができたので、元の左目のある位置まで移動させます

「位置調整デフォーマ」をドラッグすれば、レイヤーを回転させることができます

完了したら元々あった左目のレイヤーを「選択」⇒「右クリック」⇒「切り取り」で削除し、複製したレイヤーの名前を「インスペクタ」で変更しましょう

 

パラメータの変更

複製が完了したら「右目 開閉」と「右目 笑顔」のパラメータを動かしてみてください

両方の目が動けば成功です

ですが、このままでは「左目」のアートメッシュが「右目」に依存している状態となってしまいます

なので、それぞれのパラメータを「左目 開閉」と「左目 笑顔」に変更しましょう

左目 開閉

Ctrlキーを押しながら、パーツウィンドウから「右二重」「右まつ毛上」「右まつ毛横」「右まつ下」「右白目」をクリックして選択し、「パラメータ」の「右目 開閉」を操作します

そうすると右側にアイコンが表示されるので、▼をクリックし「変更」を選択してください

f:id:kamiya11:20200112214348j:plain

「パラメータ変更」のウィンドウが表示されるので、変更先のパラメータとして「左目 開閉」を選択します

f:id:kamiya11:20200112214350j:plain

これで「左目 開閉」にパラメータが変更されました

実際にパラメータを動かすと独立していることが分かります

f:id:kamiya11:20200112214911j:plain

左目 笑顔

「左目 笑顔」も同様の手順で変更していきます

レイヤーは選択された状態になっているので、そのまま「パラメータ」の「右目 笑顔」を操作し、「変更」⇒「左目 笑顔」を選択すればOKです

f:id:kamiya11:20200112215232j:plain

 

以上で「閉じ目に変形」と「笑顔に変形」が完了となります

最初に変形させたパーツのため解説が長くなってしまいましたが、同じやり方で以降のパーツも変形できるので是非覚えてしまいましょう

次回は「困り眉と驚き眉」を作成していきます

 

www.geboku-kyoudai.com