Live2Dで両目の開閉と笑顔の作成していきます。
イラストの作成とパーツ分けで作成したPSDファイルを使用して各レイヤーの操作をおこなっていきます
ファイルの読み込み
インストール時にデスクトップに作成した「Live2D Cubism Editor 4.0」のショートカットからエディターを起動します
エディターが起動したら、上部メニューにある「ファイル」⇒「ファイルを開く」から事前に用意したPSDファイルを開いてください
ドラッグ&ドロップでも開くことができます
ファイルを開くと、このように表示されます
各ウィンドウに表示されている内容については、実際に操作しながら解説していきます
基本的な操作方法
「ファイル」⇒「設定」⇒「キーボードショートカット」から変更できますので、自分のやり易いように振り分けておきましょう
| 拡大 | ホイール前回転 |
|---|---|
| 縮小 | ホイール後回転 |
| 回転 | R + ドラッグ |
| 保存 | Ctrl + S |
| 位置の移動 | スペース + ドラッグ |
| 1つ戻る | Ctrl + Z |
| 1つ進む | Ctrl + Y |
アートメッシュの割り当て
アートメッシュは各レイヤーに対して割り当てられており、その頂点を動かすことでイラストを変形させたりする役割を持っています
読み込んだ時点で一応生成されますが超大雑把なため、そのままでは使うことができません
なので自動的にアートメッシュを生成する機能を使用します
しかし、この機能だけでは実際に動かすには適さないアートメッシュが生成されるので、各工程で手動でいじっていく必要があります
メッシュの自動生成
「Ctrl + A」で全てのレイヤーを選択します（ここで表示されている四角が初期のアートメッシュです）
その状態で上にある「AUTO」というボタンをクリックしてください
そうすると「メッシュの自動生成」のウィンドウが表示されます
「プリセット」横の▼をクリックし「標準」に変更してください
これで各レイヤーにメッシュが割り当てられました
見た目が超ホラーなので×をクリックしてウィンドウを閉じたら、適当なところをクリックしてメッシュの表示を解除してください
閉じ目を作るための前準備
早速ですが両目を変形させていきます
他レイヤーの誤操作を防ぐために「すべてをロック」でレイヤーをロックしてから右目のフォルダーだけ個別に解除しておきましょう
右まつ毛上
髪などの目に重なるパーツは邪魔になるので非表示にしてください
「右まつ毛上」のレイヤーを選択（もしくは画像を直接クリック）するとアートメッシュが表示されます
その状態で上にある「メッシュの手動編集」というボタンをクリックしてください
他レイヤーが透過され、選択中のレイヤーのみがピックアップされます
そうしたら先ほど自動生成されたアートメッシュを一回削除します
これは目の周りは変形が大きいため、もう少し細かいメッシュを作成する必要があるからです
左上にある「消しゴム」を選択し、ドラッグで割り当てられているアートメッシュを全て消します
次に消しゴム横にある「+ペン」を選択し頂点を追加していきます
まずは実線を通るように真ん中に追加していき、続けて上、下と一周するように追加していきます
メッシュが引き終わったら「+ペン」の下にある「自動接続」をクリックすると各頂点をいい感じに繋いでくれます
メッシュの繋ぎ目が綺麗な三角形になっていればOKです
上にある✔マークをクリックして完了させます
同様の手順で「右まつ毛横」「右まつ毛下」「右二重」にもメッシュの割り当てをしていきます
右まつ毛横
右まつ毛下
右二重
変形させる前にクリッピング作業
これで閉じ目を作成するためのメッシュ割り当ては完成です
ですが、このまま閉じ目を作成すると目玉や白目を弄っていないため変なことになってしまいます
例えばこんな感じですね
まつ毛は閉じているが目玉などは、そのまま表示されてしまいます
これを防ぐために「クリッピング」を設定します
まずはベースとなる「右白目」レイヤーを選択し、インスペクタ内にあるIDをコピーします
続けて「右目玉」を選択し、インスペクタ内にあるクリッピングにペーストしてEnterキーを押してください
「ハイライト」も同様に設定します
そうすると「右白目」のメッシュが動いた時に、クリッピングしたレイヤーが表示されないようになります
これを利用すればクリッピング元のメッシュを動かすだけで疑似的に他のレイヤーも見えないようにすることが可能となるわけです
閉じ目に変形
これで前準備が完了しましたので閉じ目に変形させていきます
Ctrlキーを押しながら、パーツウィンドウから「右二重」「右まつ毛上」「右まつ毛横」「右まつ下」「右白目」をクリックして選択します
次に「パラメータ」の「右目 開閉」をクリックしグレー色にします
色が変わったのを確認したら、上にある「キーの2点追加」をクリックし赤の点を一番左までスライドさせ数値を「0.0」にしてください
ここの「1.0」が基準の位置、「0.0」が移動後の位置を表しています
これで5つのレイヤーに対してキーが追加されましたので、それぞれを閉じ目の形に変えていきます
右まつ毛上
まず初めにメッシュを変形させやすいようにします
上にある「変形パスツール」をクリックし、画像のように①②③と変形パスを設定してください
これで緑の●をドラッグすることで周辺のメッシュを大まかに動かせるようになります
また、左上にある「Solo」ボタンをクリックすると対象のレイヤーがピックアップされて見やすくなるのでお好みで使用しましょう
今回はメッシュを上下に反転させてから形を整える簡易的な方法でやります
高クオリティを目指す場合は、「右まつ毛上」のレイヤーを下まで移動させてから形を整えるようにしてください
同様の手順で「右まつ毛横」「右まつ毛下」「右二重」「白目」のメッシュを変形させていきます
右まつ毛横
閉じたときの「右まつ毛上」に重なるように変形させてください
「右まつ毛下」と繋がるように位置を調整すると分かり易いです
右まつ毛下
今回は「右まつ毛上」で完全に覆われるため手を加えませんが、もし隠しきれなかった場合は縮ませると良いです
白目
閉じたときの「右まつ毛上」に重なるように変形させてください
位置や形が悪いと目を閉じるモーションの途中でまつ毛を貫通して白い部分が見えてしまうので、パラメータを動かしながら上手く調整します
右二重
まつ毛の動きに合わせて下げます
若干縮ませて右下がりにすると良いです
動作確認
ここまで完了したらパラメータを左右に動かしてみましょう
若干粗が見えますが十分だと思います
笑顔に変形
同様の手順で次は、笑顔の目に変形させていきます
Ctrlキーを押しながら、パーツウィンドウから「右二重」「右まつ毛上」「右まつ毛横」「右まつ下」「右白目」をクリックして選択し、「パラメータ」の「右目 笑顔」をクリックしグレー色にします
色が変わったのを確認したら、上にある「キーの2点追加」をクリックし赤の点を一番左までスライドさせ数値を「0.0」にしてください
右まつ毛上
元々曲線を描いており、そのままでも笑顔に見えるため高さの調整だけ行いました
そうではない人は、弓なりになるように変形させてあげると良いです
右まつ毛横
「右まつ毛上」に重なるように変形させてください
見えないようにできれば良いので多少雑でも問題ありません
右まつ毛下
こちらも「右まつ毛上」に重なるように変形させます
白目
こちらも同様です
ただし閉じ目の時と同じで、モーションの途中でまつ毛を貫通して白い部分が見えてしまうので、位置を上手く調整します
右二重
まつ毛の動きに合わせて少しだけ下げます
動作確認
ここまで完了したらパラメータを左右に動かしてみましょう
「右まつ毛下」が少し気になりますが良しとします
アートメッシュの複製
これでようやく片目が終わりました
しかし、ここからもう片方を作るとなると大変ですので左目は複製しましょう
「右目」のフォルダー内のレイヤーを全て選択し「Ctrl + C」でコピー、「左目」のフォルダーを選択してから「Ctrl + V」でペーストします
複製されたレイヤーが選択されていますので、その状態で「右クリック」⇒「反転」⇒「OK」を選択しましょう
これで右目のアートメッシュを持った左目ができたので、元の左目のある位置まで移動させます
「位置調整デフォーマ」をドラッグすれば、レイヤーを回転させることができます
完了したら元々あった左目のレイヤーを「選択」⇒「右クリック」⇒「切り取り」で削除し、複製したレイヤーの名前を「インスペクタ」で変更しましょう
パラメータの変更
複製が完了したら「右目 開閉」と「右目 笑顔」のパラメータを動かしてみてください
両方の目が動けば成功です
ですが、このままでは「左目」のアートメッシュが「右目」に依存している状態となってしまいます
なので、それぞれのパラメータを「左目 開閉」と「左目 笑顔」に変更しましょう
左目 開閉
Ctrlキーを押しながら、パーツウィンドウから「右二重」「右まつ毛上」「右まつ毛横」「右まつ下」「右白目」をクリックして選択し、「パラメータ」の「右目 開閉」を操作します
そうすると右側にアイコンが表示されるので、▼をクリックし「変更」を選択してください
「パラメータ変更」のウィンドウが表示されるので、変更先のパラメータとして「左目 開閉」を選択します
これで「左目 開閉」にパラメータが変更されました
実際にパラメータを動かすと独立していることが分かります
左目 笑顔
「左目 笑顔」も同様の手順で変更していきます
レイヤーは選択された状態になっているので、そのまま「パラメータ」の「右目 笑顔」を操作し、「変更」⇒「左目 笑顔」を選択すればOKです
以上で「閉じ目に変形」と「笑顔に変形」が完了となります
最初に変形させたパーツのため解説が長くなってしまいましたが、同じやり方で以降のパーツも変形できるので是非覚えてしまいましょう
次回は「困り眉と驚き眉」を作成していきます
