じさくみち６（口、目を動かすために、完成した後は）

前回は基本となる非アニメーションパーツの作成、今回作業する「a～e」までのアニメーションパーツを作成する為の下準備をお話して来ました。
では今回は目、口のアニメーション画像作成のお話が出来ればと思います。
また僕の素材動画の後半部分でも少しそこらへんに触れてありますので合わせてご覧頂ければと思います。
前回もそうですがこれはあくまでやり方の一例であり、絵心のある方には非常に回りくどいやり方になる恐れがありますので参考程度にお読み下さい。

8-1、～目のアニメーションパーツを作る～

以前までの記事で目、口は「00、00a、00b、00c、00d、00e」の６コマを作成することでアニメーションさせることが出来るようになると説明しました。
もし前回までの記事通りの手順でやっているのであれば開いた目と閉じた目が出来ているかと思います。

これらがアニメーションさせる為の基準になります
00

00e


既にこの２コマは出来ていますので目を閉じるまでの残りの中間画像「00a、00b、00c、00d」の４コマを作成していく形になります。
作成方法としては前回の「目の位置・サイズを揃えるために」の項目の手法を使うことになります。

では新たに描いたサンプル画像を載せていきながら説明したいと思います。

前回お見せした目のレイヤー構成ですがこれら全てをコピー、貼り付けし全く同じ構成の同じパーツを作成します。


この00aのパーツ（今の所00と全く同じ）を少しずつ閉じて行くように改造していきます。
ではまずは線画から。


コピーした画像。
これを少し閉じるように修正します。


上を消して


少し閉じたように線を描きました。


これは好みであってもなくても良いのですが、僕は目の下側も少し閉じるようにします。
手作業で描くとコマによってばらつきが出てしまう為、範囲選択で下側の線画を１ピクセル上に移動させます。



移動しました。
１ピクセルだけの移動では見た目にはほとんど分からないかも知れませんがアニメーションさせた際に00～00eまでの間に４ピクセルほど動きますので、かなり大きな差になってきます。
ジト目など目が細くあまり大きく動かせない場合などによっては「２コマで１ピクセルの移動」という形をとる事もあります。

ではこれで「00a」の線画はOKです。
次に線画を修正したのではみ出した白目や瞳の色を、目の光の位置を修正します。

＊瞳

わかりにくいですが下側もわずかにはみ出しています、きちんと処理します。

処理しました。
白目も同様に処理して下さい。

＊光

目を少し閉じているのに目の光は閉じる前のままの位置にあります。少し位置を下げます。

下げました。
注意点として、特に理由がない限りは光を横方向には動かさないようにして下さい。
アニメーションさせた時に光が横にブレていると違和感が出てしまいます。


これでパーツ「00a」が完成しました。


b、c、dも全く同じ要領で作成していきます。
00aの構成レイヤーを全てコピーして修正改造、00bを作成。
出来上がった00bレイヤーをコピー修正改造して00cを作成。
出来上がった00cレイヤーをコピー修正改造、00dを作成。
これでこの目の00パーツはアニメーションさせられる画像が全て完成しました。
他の感情の目の場合も全く同じ方法で作成することが可能です。

＊アニメーションを意識した閉じ方

目をabcdとどの程度の割合で閉じていけば良いのかですが、素材動画でも説明している通り等間隔で閉じていくと機械的な動きになってしまいあまり自然なアニメーションをすることが出来ません。


こちらも人によって最適だと思う設定に違いがあるかとは思いますが、

これくらいの間隔で閉じるとアニメーションでabcdまではなめらかに動き、00dから00eになる時にはまばたきの「パチッ」という感じが出て自然になるかと思います。
目の大きさによってはあまりに閉じていく間隔が小さすぎると00d～00eでカクつく可能性がありますのでほどほどが大事かと思います。

では目が完成しましたので次は口を作成していきます。

8-2、～口のアニメーションを作る～

口もほぼ同じ手順で作成していきます。
口パーツのアニメーションは目とは逆に下方向に大きく、上方向が1ピクセルずつ（もしくは動かない）という動作になります。
コピーしたものを修正すると言う手法でやるのが確実かとは思いますが、口パーツは上部分を動かさない場合は下部分を等分に削っていくだけですので目に比べればとても楽かと思います。完全な等分よりはある程度偏ったほうがいいかもしれませんが、やり過ぎると目同様動かした時にカクついてしまいます。
口00



緑の線はabcdそれぞれのパーツ用のアタリですので無いものと思って下さい。
目を描く際もこのようにアタリ線を別に描いておき参考にしつつパーツを作成するとやりやすいかも知れません。

口00をコピー貼り付けし、可能であれば上端部分のみ選択し１ピクセル下に下げます。
難しい場合は口パーツ全体として下げても問題ないかと思います。
口の上部分を動かさない場合はここの作業はスキップして下さい。


アタリを参考にしつつ口を閉じているように見えるよう削ります。


00aが完成しました。

これを繰り返し00eまでを作成すれば口アニメーションパーツの完成です。
目と違い口はレイヤー１枚ですので手間もかからず、アニメーションに納得がいかなかった場合でも修正が楽なのでは無いかと思います（とは言え手間は手間ですが）
口の場合も目と同様、縦幅が短い等の時のパーツ上部分の移動は２コマで１ピクセル、もしくは移動しないということもありです。


２コマで１ピクセル移動のパーツ。

移動なしのパーツ

これも絵柄やアニメーションのこだわりなどで色々やり方が変わってきますのでやり方の一つとしての参考程度にお考え下さい。

8-3、～基本形の完成～

ここまでで「体、髪、眉、目、口、顔」といった基本パーツが全て完成しました。
これで一応はYMM、yukktalkで動作させることが可能です。
後は出来るだけ各パーツのクオリティを上げる、アニメーションパーツを洗練させて自然に動くようにすると言った作業に集中していくことになります。
この洗練部分はこだわればこだわるほど良くなっていくものですので、基本素材の完成した今の時点がやっとスタート地点なのかもしれません。
僕は最初の素材を完成させてからひたすら修正修正を繰り返して来ましたが、「よし、これなら！」というものになるまで１年以上、アニメーションに納得が行くのにまた１年程掛かってしまいました。

　　初代＞＞＞＞＞＞２年＞＞＞ver3アニメーション素材　
　　　　　　　　　
というのも絵が描けない人間が全てを試行錯誤でやっていたからなのですが…。
少なくとも「こういうやり方もあるよ」という手本、参考になるものがあれば１ヶ月も掛からず作成できるでしょうし、絵が描ける方はもっと早くに出来ると思います。
自分の描いたものが動くというのは非常に楽しく、それを洗練させていくことはとてもやりがいのあるものです。
もしこの記事がそのお手伝いになっていれば幸いです。
不明な点があればまた補足させて頂きますのでお気軽に質問して下さい。

基本的な素材作成の説明はこれでおしまいなのですが、次回からはver3素材に使われているパ「体、後、他のアニメーション」やその対応スクリプトなどについて詳しくお話出来ればと思います。
少し難しい話になりますので上級者向けになるかもしれませんが良ければご覧ください。
ではここまでご覧頂きありがとうございました。