はじめに
らん こんばんは！世界。VTuberを目指して少しずつ準備してる、バーチャルメンヘラの鈴子らんです。
皆さん、楽しくイラストを動かすライフを送っていますか…？
今回は「イラストをうにょ～んと動かせる」フリーソフト、AnimeEffectsの記事第2弾、
「まばたきと喋ってる口編」です！
前回の記事はこちら
akumu-hinageshi.hatenablog.com
前回は基本的な使い方を見ていきながら、
キャラクターにおおまかに動きをつける方法を紹介しました。
らん 前回の記事を見てくれた方、ありがとうございます！
らん それでは早速、まばたきと喋ってる口の作り方について解説していくよ～！
まばたきと喋ってる口を作ってみたよ！
らん まずは完成したものから…
今回作ってみたものはこちらです！
思いつきで作ったものなので動きは荒いですが、
一応まばたきをして、喋ってるように口を開閉しているのがおわかりでしょうか…？
こんな感じのを作っていきたいと思います…！レッツゴー！
※基本的な操作については今回は触れないので、ぜひ前回の記事を参考にしてみてください。
画像ファイルの作り方
まずはAnimeEffectsで読み込むイラスト（画像ファイル）を作る時の
ポイントについて解説していきたいと思います。
画像ファイルの作り方はわかるという方は次の項目まで飛んで大丈夫です。
一枚絵ではなく、レイヤー分けされた、「PSDファイル」の作り方について説明します。
上のサンプルである「えふぇ子」のPSDファイルは
こちらからzipでダウンロードできますので、
よかったら使ってみてください。
※基本的なファイルの作り方については前回の記事の「画像ファイルの作り方」で解説していますので、
どうぞそちらを参考にしてみてください。
今回は、「まばたきと喋ってる口」に特異な点について説明していきます。
まずはまばたきの用意から
①輪郭に影をつける
今回、まばたきの動きを確認するために、輪郭（少しわかりにくいですが、ここでは髪などのパーツを除く頭のことをこう読んでいます。要はのっぺらぼうの頭のことです。）に影をつけておきます。
ふつうの影で大丈夫です。
髪が動いた時に対応できるように髪の下全体に影をつけます。
②表情のうち、「二重の線・目の上の線・瞳左右・目の下の線・白目」を別レイヤーに分けて作る。
画像は目の上の線と瞳を消した状態。
※今回の動きでは、瞳を左右で分ける必要も、瞳と「目の下の線」を分ける必要もありません。
ですが、今後表情をつけて瞳を動かしたい場合は分けておくと便利なので、
サンプルでは分離させてありますし、説明でも分離するように書いてあります。
ここらへんはお好みでどうぞ。
③まぶたを作る。
「瞳の上の線」の下にまぶたを作ります。
この時、まぶたを下に下げると、瞳と「目の下の線」を全て覆うようにします。
覆えることを確認したらまぶたは元の位置に戻します。
④まぶたに輪郭の影と頬の赤みをクリッピングする。
この作業が重要です。
このままではまぶたが顔の中で浮いてしまっているので、
輪郭の影と頬の赤みをコピーしてきて、まぶたにクリッピングします。
クリッピングはAnimeEffectsでも有効なので、
これによって、AnimeEffectsでまぶたを動かした際に輪郭の影が追随し、
自然なまばたきを可能にすることができます。
頬の赤みは、今はまぶたの上にかかっていませんが、
まぶたを下に下げた時にはかかってくるので、きちんとクリッピングしておきます。
※レイヤー名は、AnimeEffectsでファイルを再読み込みした際にスムーズに行くように全て別の名前にしておくことをおすすめします。
これでまぶたのファイルの準備は完了です。
次に口の準備です。
口も別レイヤーで作り、開けた口と閉じた口の2種類を作っておきます。
これで口のファイルの準備は完了です。
最後に表情や口のレイヤーの並び順を確認します。
画像ファイルの準備ができました！
AnimeEffectsでの作業
では、いよいよAnimeEffectsでの作業に入っていきます。
プロジェクトを新規作成し、最大フレーム数は、今回も2秒なので120にします。
完成した動画をループさせた方が良い場合は、
プロジェクト→ループからループさせるにチェックを入れておいてください。
それと、動画を作成中にループで確認したい方は、
タイムラインの横の再生ボタンなどが並んでいるところの一番下の
ループマークを押しておいてください。
それでは行ってみましょう。
まばたき
つける動きの概要
まず、つける動きの概要について確認します。
0.5秒から1.5秒の間、1秒間かけてまばたきの動作をしていることがわかります。
これは、1秒で目を閉じた状態になり、
0.5秒と1.5秒では元の目を開けた状態になっているというわけなので、
0.5秒と1.5秒では何か特別な動きを指定しているわけではありません。
それでは、具体的な操作を見ていきます。
まぶたの移動
まぶたの移動を0秒、1秒に追加します。
1秒にまぶたを下に移動させ、瞳と「目の下の線」を覆い隠します。
ちょっと出てますが、このぐらいなら「目の上の線」で隠せるので大丈夫です。
※画像はまぶたに頬の赤みをクリッピングし忘れているのでまぶたの境界線が出ていますが、
皆さんは大丈夫なはずです。
「目の上の線」の移動
次に、「目の上の線」の移動を0秒、1秒に追加します。
1秒に「目の上の線」を下に移動させます。
位置の目安は、まぶたに丁度重なるくらいです。
（まぶたと元々重なっていた感じにすればOK）
「目の上の線」の変形
まず「ポリゴンのワイヤーフレームを表示する」に設定します。
「自由な形状に変形する」→「頂点を操作する」を選択します。
この頂点を1つ1つ動かし、目が下に向くようにします。
元の状態を指定
あとは、0.5秒と1.5秒に、0秒時点での「まぶたの移動」、
「目の上の線の移動と変形」のキーをコピペしたら終わりです。
これで1秒間かけてまばたきをする動作が完成しました。
喋ってる口
次は口の動作です。
口では少々指定するキーが多いので、ややこしく感じられるかもしれません。
でも1つ1つをとっていけば簡単な指定の積み重ねなので、
ぜひチャレンジしてみてくださいね。
つける動きの概要
まず、つける動きの概要について確認します。
まばたきや以前の立ち絵の動作よりは、
対称性の低い動きをしているのがわかると思います。
口を開けたり閉じたりしている作業が指定されているのですが、
このままでは何が何やらという感じだと思うので、以下で詳しく説明していきます。
つける動きの見通し
次につける動きの見通しをつけます。
だいたい以下のように動きを指定しています。
Move→移動
Scale→拡縮
Opa→不透明度
色をつけてない部分は無視していただいて構いません。
赤い0と1は不透明度を表していて、0が0％、1が100％を表し、
つまり0では「全く見えない。」、1では「100％見える」ということです。
前半の拡大。
後半の拡大。
口を閉じた状態から半分開ける
①口を閉じている状態を作る。
閉じ口の0秒に不透明度のキーを追加します。この時、不透明度の割合は1です。
開け口の0秒に不透明度のキーを追加します。この時、不透明度の割合を0にします。
これで口を閉じている状態は完成です。
②口を少し開けている状態を作る。
閉じ口の1/60秒に不透明度のキーを追加します。この時、不透明度の割合を0にします。
開け口の1/60秒に不透明度のキーを追加します。この時、不透明度の割合は1です。
今のままだと口がいきなり開いているので、口を半分に変形します。
0秒に拡縮のキーを追加してから、1/60秒にも拡縮のキーを追加し、
拡縮で口を半分ぐらいの大きさにします。
※らんの場合は開け口の重心を下に移動させたので、移動のキーが0秒と1/60秒に入っています。
こうした方が良いのか、こうしない方が良いのか、この点は確かめていないのでわかりません。
気になる方は両方やって確かめてみてください。
これで口を少し開けている状態は完成です。
上の口を開ける瞬間について、少し解説します。
解説が不要な方は次の項目まで飛んでください。
上の作業では口を閉じた状態の0秒から1/60秒でいきなり口を開ける、
という動作に移っています。
なぜこのような動きをしているのかというと、
不透明度を使用して1/60秒以上の間隔を開けると、
「だんだん画像が薄くなっていく」または「だんだん画像が濃くなっていく」という
移行の仕方をするからです。
（皆さんもぜひ2つの移行の間隔を開けて試してみてください。）
これを回避するために、AnimeEffectsにおける「最短時間」つまり、
1/60秒で画像の不透明度を0から1に、もう1つは1から0に切り替えているわけです。
以上で、口を開ける瞬間についての解説は終わりです。
口を開ける
口を開けている状態を作ります。
この状態が口の開け幅の最大値なので、先程のキーから少し離れた場所、
20/60秒にキーを追加します。
ここのキーは初めに作った「開け口」の画像のままの状態を持ってくれば良いわけなので、
0秒の開け口の「移動」と「拡縮」のキーをコピペすればOKです。
（0秒では「開け口」は不透明度が0なので見えませんが、拡縮などは行っていないので、編集前の「口を開けている状態」のままになっています。）
※ここで、「口を閉じた状態から半分開ける」で、重心の移動を行った方は「移動」のキーが必要ですが、重心を移動していない方の場合は、「移動」のキーは必要ありません。
これで、口を開けている状態は完成です。
そして、25/60秒にも口を開けている状態のキーをコピペします。
こうして「口を開けている」と「口を開けている」のキーで挟んだ時間は、
次の動作に移行することなく、「口を開けている」という状態を維持できます。
これは「口を閉じている状態」でも同じことが言えます。
※今回、「口を少し開けている状態」で挟んだ部分はありません。
キーをコピペ
その後はそれぞれの時間に3種類のキーをコピペしてくだけです。
33/60秒に「口を少し開けている状態」のキーをコピペ。
34/60秒に「口を閉じている状態」のキーをコピペ。
（この間は口を閉じている。）
42/60秒に「口を閉じている状態」のキーをコピペ。
43/60秒に「口を少し開けている状態」のキーをコピペ。
（この間は口をだんだん開けていく。）
1秒に「口を開けている状態」のキーをコピペ。
（この間は口を開けている。）
1秒と11/60秒に「口を開けている状態」のキーをコピペ。
（この間は口をだんだん閉じていく。）
1秒と22/60秒に「口を少し開けている状態」のキーをコピペ。
（この間は口をだんだん開けていく。）
1秒と31/60秒に「口を開けている状態」のキーをコピペ。
（この間は口をだんだん閉じていく。）
1秒と56/60秒に「口を少し開けている状態」のキーをコピペ。
1秒と57/60秒に「口を閉じている状態」のキーをコピペ。
（ここから2秒までは口を閉じている。）
途中から秒数の割当が適当になっているのがわかると思います…（笑）
以上で、喋ってる口の動作が完成しました。
これで、AnimeEffectsでの作業は終わりです。
大変お疲れ様でした。
おまけ：身体の動きをつけてみる
最後に、前回の身体の動きを簡単にですがつけてみました。
※AnimeEffectsではファイル間のキーのコピペは不可なので、前回作ったファイルからコピペすることはできません。
おわりに
らん まばたきと喋ってる口の作り方の説明は以上になります。
いかがでしたか…？
口はキーが多くて少しややこしかったかもしれません。
それでも、何か参考になるところがあると嬉しいです！
皆さんもぜひAnimeEffectsでいろいろ試して、オリジナルの動きを作ってみてくださいね！
（そしてらんに教えて下さい←）
今回も、感想などがあればぜひお寄せくださいー！
質問もらんのわかる範囲であればお答えしますので、お気軽にどうぞ。
らん ではでは、ここまで読んでくださってありがとうございました。
最後にちょっと感謝の気持ちとか
らん 実は、なんと前回の記事をマモールさんという方に紹介していただきました…！
たぶん一番わかりやすい使い方の記事
なんて嬉しいお言葉をありがとうございます！
また頑張ってAnimeEffectsをいじっていろいろ作りたいと思います。
らん それでは、これで本当におわりです。またね、世界。
