グラフィッカーのための簡単目パチアニメ講座
昨今のゲームでは、立ち絵が出てくれば必ずと言っていい程
目がパチパチしますよね。コレを「目パチ」といいます。
今日は本業でないくせにおせっかいにも
このゲーム等で使われる
目パチアニメを割と簡単に制作する手順を晒したいと思います。
まず最初にどんなものが出来上がるかというと、
こんな感じです↓
※gifアニメです。クリックして確認して下さい。
ちなみにこの方法は我流のため、本来の作り方とは違います。
結果やクオリティは保証しませんのであしからず。
ですが一応、誰でも一定のクオリティで目パチアニメが作れる方法だと思います。
では早速、制作に入りたいと思います。
まず目パチアニメを作る為に一枚絵を用意します。
今回はめんどくさかったので先日落書いた
「これゾン」の「ユークリウッド」を用意しました。
目パチを作る際に必要なイラストですが、
目を見開いている状態である事と、極端なパースがかかってない事が条件です。
もちろんパースがかかっていても目を閉じていても制作は可能なんですが
説明がケースバイケースになってしまうので今回は省略。
で、今回は目パチの制作なので顔だけをトリミングしました
次に下準備として目だけを別のレイヤーに分けます。
まず目だけを選択するための選択範囲をつくります。
私の場合、選択範囲を作る時は大体パスを使ってますが
方法はどんなでもおkです。目だけ選択できれば良いです。
ちなみに元から目が別レイヤーになってるのであればこの行程はいりません。
次にイラストのレイヤーを複製し、
選択範囲以外を消去、またはマスクで隠しておきます。
するとこんな感じの目だけのレイヤーができます。
そしたら元のイラストレイヤーの上に置いて、レイヤーの名前を「目01」とします。
名前はわかりやすければなんでもおk。
そこまでできたら一旦このレイヤーは非表示にします。
次にもう一度↑で作った選択範囲をとって新しいレイヤーの上に
肌色で塗りつぶします。
この時直接イラストを塗りつぶさないようにご注意を。
元の絵を残しておくのは保険です。
塗りつぶしたら適当にグラデーション等で下地との境目を無くします。
作業時間10分くらいでしょうか。結構雑です。
→
次にさっき↑で作った「目01」レイヤーを複製。
ちょっと画像がわかりにくいですが「目01」を複製したら「目02」という名前に変更します。
こちらも名前がわかればおk。
目だけのレイヤーが二つになりました。現時点で絵は一緒です。
（画像中には「目01」が二つありますが、片方は保険用です。）
そしたら「目02」レイヤーを選択し、自由変形を実行します。
今度はまず、左右の目尻が水平になるように、一時的に目を回転させます。
福笑いみたいでシュールですが気にしない。
この時ガイドを出しておくとやりやすいです。
ちなみに元々左右の目尻が水平なイラストの場合はこの過程はすっ飛ばして下さい。
そして重要なのが何度回転させたのかおぼえておいておくこと。
目を回転させて左右の目尻が水平になったら確定し、
もう一度自由変形を実行し、今度は縦方向のみ、大体90%の縮小をかけます。
赤丸の箇所に数値を入力するか、普通に適当に変形してもおk。
この時アンカーポイント(変形の起点になるポイント)を、画像の中心から
やや下にずらしてから変形すると良い感じになりますが、
ここはケーズバイケースなのですっ飛ばしておk。
次に縮小を確定させたら回転させた目をもとの角度に戻します。
もう一度自由選択を実行し、
先ほどおぼえておいた角度のマイナス値を赤丸の所に入力します。
ここは数値入力がおすすめ。
これで縦方向のみ、90%縮んだ目のレイヤーができました。
確定して下の顔のレイヤーと一緒に表示するとこんな感じです。
パッと見、何が変わったのかわからないレベルですが気にしない。
そして次の行程はもういきなり目を閉じた所を描いてしまいます。
閉じている目だけの絵を新しいレイヤーに描きます。
書き方もどんな方法でもおkですが、ここは手で描くしかありません。がんばれ。
私はいつも目を開いた状態のレイヤーを薄く表示させた状態で
いきなりパスで描いてしまいます。
この時、多少アニメする事を念頭に置きつつ、
目尻、目頭の位置を、あまり極端に動かさないように意識しつつ適当に作画します。
そして目閉じの完成がこちら。
我ながら正直微妙な完成度ゲフゲフ
あとは今描いた閉じた目のレイヤーの名前をわかりやすく変更。
今回はフォルダのまま「目03」と付けました。
ここも適当でおk。わかればよろし。
で、ここまでできたら絵の素材はおしまいです。目パチ(ほぼ)完成！
あとはアニメが作れるソフトにこのレイヤーを持っていって、
レイヤーをフレームに並べて再生させてみましょう。
ソフトもアニメーション／動画作成ソフトとかなら何でもおkです。
今回私はPhotoshop CSに付属しているイメージレディーを使用してみました。
顔のベースは表示させたまま、目のレイヤーだけ表示／非表示でフレームを付くります。
今回は「目01」→「目02」→「目03」→「目02」→「目01」の順番で並べます。
イメージレディーならフレームの秒間を「なし」に設定でおk。
ムービー作成ソフトであればプロジェクトが24fpsで、1コマ3フレームくらいが目安かと。
場合によって二回目に表示する「目02」はなしにしたり、
よりリソースの節約が必要な低スペックのゲーム等では
「目02」自体を省いてしまってもおkです。
今回は特にそういう制約がないので滑らかに見えるように
目02を閉じる時、開く時で二回表示してます。
そして↑の設定を
Gifアニメに出力したものがこちら↓
如何でしょうか？それなりに滑らかに目パチしているように見えませんか？？
この方法なら着彩済みのイラストがあれば大体30分程度で
目パチアニメを作る事が可能です。
最初から目パチを作る想定で目だけ別レイヤーでイラストを描けば
もっとさっくり出来上がります。
アドベンチャーゲームなどでは必須になる事が多いこの目パチですが、
作るとなると結構面倒なんですよね。
多くのゲームなどでこの目パチの中割り（今回の目パチ制作では目02レイヤーのこと）の絵を、
ゼロから手で描いていて、かつ半目（目を開いてる状態と閉じてる状態の丁度中間）で
描かれてる事があったりします。
ですが中割りに半目を使うと、目パチがぎこちなくなります。
アニメすると一瞬しか見えないはずの半目の状態が目に残るんですね。
なぜ中割りが目を半分とじた絵では滑らかに見えないのかというと
理屈で言えばまぶたの開閉スピードは一定ではないからなんですね。
私もグラフィッカーをやっている時、この現象に行き当たって困った事があり、
試行錯誤を繰り返した結果、行き着いた方法が今回の方法です。
とまあ、自分が苦労してきた事を、別の誰かも苦労してるのかと思うと、
少しでもグラフィッカーの工数削減、かつクオリティの向上の
ヒントになれば・・と思いペンを取りました。
もし目パチを作る機会があったら試してみて下さいね。
ーーーー追記ーーーー
はぁ〜〜〜〜
この記事、書き終わってプレビューしてたらブラウザが落ちやがりまして
小一時間以上かけて書いた記事が消えちゃいました・・・。
おかげで再度書き直すのに時間と精神力を大量消費・・・
目がパチパチしますよね。コレを「目パチ」といいます。
今日は本業でないくせにおせっかいにも
このゲーム等で使われる
目パチアニメを割と簡単に制作する手順を晒したいと思います。
まず最初にどんなものが出来上がるかというと、
こんな感じです↓
※gifアニメです。クリックして確認して下さい。
ちなみにこの方法は我流のため、本来の作り方とは違います。
結果やクオリティは保証しませんのであしからず。
ですが一応、誰でも一定のクオリティで目パチアニメが作れる方法だと思います。
では早速、制作に入りたいと思います。
まず目パチアニメを作る為に一枚絵を用意します。
今回はめんどくさかったので先日落書いた
「これゾン」の「ユークリウッド」を用意しました。
目パチを作る際に必要なイラストですが、
目を見開いている状態である事と、極端なパースがかかってない事が条件です。
もちろんパースがかかっていても目を閉じていても制作は可能なんですが
説明がケースバイケースになってしまうので今回は省略。
で、今回は目パチの制作なので顔だけをトリミングしました
次に下準備として目だけを別のレイヤーに分けます。
まず目だけを選択するための選択範囲をつくります。
私の場合、選択範囲を作る時は大体パスを使ってますが
方法はどんなでもおkです。目だけ選択できれば良いです。
ちなみに元から目が別レイヤーになってるのであればこの行程はいりません。
次にイラストのレイヤーを複製し、
選択範囲以外を消去、またはマスクで隠しておきます。
するとこんな感じの目だけのレイヤーができます。
そしたら元のイラストレイヤーの上に置いて、レイヤーの名前を「目01」とします。
名前はわかりやすければなんでもおk。
そこまでできたら一旦このレイヤーは非表示にします。
次にもう一度↑で作った選択範囲をとって新しいレイヤーの上に
肌色で塗りつぶします。
この時直接イラストを塗りつぶさないようにご注意を。
元の絵を残しておくのは保険です。
塗りつぶしたら適当にグラデーション等で下地との境目を無くします。
作業時間10分くらいでしょうか。結構雑です。
→
次にさっき↑で作った「目01」レイヤーを複製。
ちょっと画像がわかりにくいですが「目01」を複製したら「目02」という名前に変更します。
こちらも名前がわかればおk。
目だけのレイヤーが二つになりました。現時点で絵は一緒です。
（画像中には「目01」が二つありますが、片方は保険用です。）
そしたら「目02」レイヤーを選択し、自由変形を実行します。
今度はまず、左右の目尻が水平になるように、一時的に目を回転させます。
福笑いみたいでシュールですが気にしない。
この時ガイドを出しておくとやりやすいです。
ちなみに元々左右の目尻が水平なイラストの場合はこの過程はすっ飛ばして下さい。
そして重要なのが何度回転させたのかおぼえておいておくこと。
目を回転させて左右の目尻が水平になったら確定し、
もう一度自由変形を実行し、今度は縦方向のみ、大体90%の縮小をかけます。
赤丸の箇所に数値を入力するか、普通に適当に変形してもおk。
この時アンカーポイント(変形の起点になるポイント)を、画像の中心から
やや下にずらしてから変形すると良い感じになりますが、
ここはケーズバイケースなのですっ飛ばしておk。
次に縮小を確定させたら回転させた目をもとの角度に戻します。
もう一度自由選択を実行し、
先ほどおぼえておいた角度のマイナス値を赤丸の所に入力します。
ここは数値入力がおすすめ。
これで縦方向のみ、90%縮んだ目のレイヤーができました。
確定して下の顔のレイヤーと一緒に表示するとこんな感じです。
パッと見、何が変わったのかわからないレベルですが気にしない。
そして次の行程はもういきなり目を閉じた所を描いてしまいます。
閉じている目だけの絵を新しいレイヤーに描きます。
書き方もどんな方法でもおkですが、ここは手で描くしかありません。がんばれ。
私はいつも目を開いた状態のレイヤーを薄く表示させた状態で
いきなりパスで描いてしまいます。
この時、多少アニメする事を念頭に置きつつ、
目尻、目頭の位置を、あまり極端に動かさないように意識しつつ適当に作画します。
そして目閉じの完成がこちら。
我ながら正直微妙な完成度ゲフゲフ
あとは今描いた閉じた目のレイヤーの名前をわかりやすく変更。
今回はフォルダのまま「目03」と付けました。
ここも適当でおk。わかればよろし。
で、ここまでできたら絵の素材はおしまいです。目パチ(ほぼ)完成！
あとはアニメが作れるソフトにこのレイヤーを持っていって、
レイヤーをフレームに並べて再生させてみましょう。
ソフトもアニメーション／動画作成ソフトとかなら何でもおkです。
今回私はPhotoshop CSに付属しているイメージレディーを使用してみました。
顔のベースは表示させたまま、目のレイヤーだけ表示／非表示でフレームを付くります。
今回は「目01」→「目02」→「目03」→「目02」→「目01」の順番で並べます。
イメージレディーならフレームの秒間を「なし」に設定でおk。
ムービー作成ソフトであればプロジェクトが24fpsで、1コマ3フレームくらいが目安かと。
場合によって二回目に表示する「目02」はなしにしたり、
よりリソースの節約が必要な低スペックのゲーム等では
「目02」自体を省いてしまってもおkです。
今回は特にそういう制約がないので滑らかに見えるように
目02を閉じる時、開く時で二回表示してます。
そして↑の設定を
Gifアニメに出力したものがこちら↓
如何でしょうか？それなりに滑らかに目パチしているように見えませんか？？
この方法なら着彩済みのイラストがあれば大体30分程度で
目パチアニメを作る事が可能です。
最初から目パチを作る想定で目だけ別レイヤーでイラストを描けば
もっとさっくり出来上がります。
アドベンチャーゲームなどでは必須になる事が多いこの目パチですが、
作るとなると結構面倒なんですよね。
多くのゲームなどでこの目パチの中割り（今回の目パチ制作では目02レイヤーのこと）の絵を、
ゼロから手で描いていて、かつ半目（目を開いてる状態と閉じてる状態の丁度中間）で
描かれてる事があったりします。
ですが中割りに半目を使うと、目パチがぎこちなくなります。
アニメすると一瞬しか見えないはずの半目の状態が目に残るんですね。
なぜ中割りが目を半分とじた絵では滑らかに見えないのかというと
理屈で言えばまぶたの開閉スピードは一定ではないからなんですね。
私もグラフィッカーをやっている時、この現象に行き当たって困った事があり、
試行錯誤を繰り返した結果、行き着いた方法が今回の方法です。
とまあ、自分が苦労してきた事を、別の誰かも苦労してるのかと思うと、
少しでもグラフィッカーの工数削減、かつクオリティの向上の
ヒントになれば・・と思いペンを取りました。
もし目パチを作る機会があったら試してみて下さいね。
ーーーー追記ーーーー
はぁ〜〜〜〜
この記事、書き終わってプレビューしてたらブラウザが落ちやがりまして
小一時間以上かけて書いた記事が消えちゃいました・・・。
おかげで再度書き直すのに時間と精神力を大量消費・・・
