キャラクターを動かそう！簡単アニメーション【目パチ】

こんにちは！デザイナーのクロです！

最近乙女ゲームなどのシナリオゲームで、動く立ち絵が人気なのをご存知でしょうか？

こういったゲームは、3D映像ではなく、2D絵を動かせる専門のソフトで動かしている場合が多いです！

専門のソフトの使い方をご紹介する前に、今回は初級編として、絵が生きているように見えるGIFアニメ「目パチ」の作り方を紹介したいと思います！

下準備！絵を用意しよう！

今回PhotoshopはGIFアニメを作成するために使います。photoshopがない場合は、Adobe FlashやフリーソフトParafla!を使用して作成することも可能です。

フォルダーを3つに分ける

目パチを作るために、まずはキャラクターの通常(目を開いた状態)画像を作りましょう。

この時に、「前髪」「目」「土台」のフォルダーに分けて書いておくとアニメーションを作るときに楽になります。

フリーソフトやフラッシュでアニメーションを作る場合は、前髪、目、土台のパーツに分けた透過有りのPNG形式で保存しましょう

土台

一番下位のフォルダーになります。中には、前髪、目以外のパーツを書き込んだ画像を作成します。

今回このパーツはアニメーションさせません。

目

今回のアニメーションの要になる目です！「開いた状態の目」「半目」「閉じた状態の目」を作成しましょう！

1.開いた状態の目を描く

通常時の目を作成します。一番長く表示される画像ですので、納得の行くまで手を入れましょう。

この時、「瞼」「瞳」「白目」を分けて作成しておくと後の作業が楽になります。

2.閉じた状態の目を描く

瞼を閉じた状態を作成します。通常下瞼は動かず、上瞼が動くことで目が開閉します。下瞼のラインに合わせて、目を閉じた時のラインを描きましょう。

萌絵や、少女漫画など、目が縦に大きいキャラクターの場合、閉じたラインだけ描くと顔の印象が寂しくなってしまうことが有ります。

そんな時は、上瞼のラインを、線や影で表現しましょう。

3.半目を描く

1.2.で作成した目のちょうど半分のあたりに上瞼が来るように描きます。

今回は3枚でのアニメーションですので半目で描きますが、ゆっくり実況などで使われるキャラ素材のように6枚で瞬きのアニメーションを作る場合は、半目状態を書かずに開きかけ、閉じかけのまぶたを細かく割って素材を作ったほうが自然な動きに見えるようです。

前髪

一番上位のフォルダーになります。「前髪」フォルダーにはその名の通り、前髪を描いたレイヤーを入れておきましょう。

前髪を透かしたい場合は、マスクでレイヤーを半透明にしておきましょう。

アニメーションの設定

絵素材ができたらPSD形式で保存し、PhotoShopで開きましょう。

上部メニューの「ウィンドウ」から「アニメーション」でアニメーションウィンドウを開きます。アニメーションウィンドウの右下にある四角が3つ並んだボタンをクリックし、「アニメーション(タイムライン)」から「アニメーション(フレーム)」に切り替えましょう。

目パチアニメーションを設定する

• 1と書かれたフレームをクリックし、アニメーションウィンドウの新規アイコンを3回クリックし、フレームを4つにします。
• 1フレーム目を「開いた状態の目」、2フレーム目を「半目」、3フレーム目を「閉じた状態の目」、4フレーム目を「半目」にします。
• このままだと速度が遅いので、フレームの秒数をクリックし設定します。
  1フレーム目を3秒※、2フレーム目を0.1秒、3フレーム目を0.2秒、4フレーム目を0秒(ディレイ無し)にします。
• アニメーションウィンドウ下部の「一度」と書かれたタブをクリックし、無限を選択します。
• 再生ボタンを押して違和感なく動けば完成です！
• アニメーションを保存する場合は、上部メニューの「ファイル」から「WEBおよびデバイス用に保存」でGIFアニメとして保存しましょう。

※リストに3秒がないので「その他…」から自分で入力しましょう。

人間は3～4秒の間にまばたきをするので、1フレーム目を3秒にしましたが、アニメーションを確認する際は1秒などにして確認しやすいようにしておきましょう！

以上、動いて見える絵の作り方講座「初級編」でした！

簡単な動きでも目が動いているだけで十分生きているように見せれるので、是非トライしてみてください！