*

spineでキャラに命を吹き込め!アニメーションで個性を出す!その2「2Dにアニメーションを付ける」

公開日: : 最終更新日:2015/10/21 , ,

フーモアピクチャーズ技術部の遠藤です。引き続きEsotericSoftwareのSpineについて解説していきたいと思います。
前回はSpineにイラストを組み込んでみました。今回はアニメーションについて書いていきたいと思います。

animeという英語の動詞には、「命を与える」「行動させる」といった意味があります。アニメーションを付けるといっても機械的に動かすのではなく、モデルに命を与えなければなりません。キャラクターの性格・年齢・職業などの特徴を掴み、
どこからどこへ行こうとして、どんな感情を持ってそうしているのか
など具体的なイメージを固める必要があります。

ことspineの場合は2Dイラストをアニメーションさせるツールですので、ここが一番のポイントになります。

その前にまず、知っておきたい用語をまとめました。

fpsって?

FramePerScondの略で、フレームレートと言った類語もあります。簡単に説明すると、1秒間を何枚の絵で表現するか です。日本のテレビは30fpsで1秒間に30枚分の動画になっています。テレビアニメは24fpsで、映画なども24fpsの場合が多いです。ゲームも30fps程度で製作されている事が多いですが、格闘ゲームなど、動きが細かいアクションゲームなどは60fpsで製作されています。
左足を軸足にして、右足を前にだして、、、右足を軸足にして左足を前に出して、、、

自分が1歩分歩くのって何フレームくらいでしょうか?

サイクルモーション

歩きモーションや走りモーションなどはサイクルモーションと呼ばれます。一往復分のモーションを作れば、リピートするだけで好きなだけ歩かせる事ができるわけですから、サイクルモーションと呼ばれます。サイクルモーションを作るときの注意点は、最初と最後のポーズはまったく一緒でなければなりません。

、、、当然ですね。

ポーズtoポーズ

アニメーションの基本はポーズトゥポーズ。腰や腕や足や頭や、、、ボーンの数だけ動かす事はできますが、全てをバラバラに捉えてしまうとアニメーションキーが煩雑になってしまったり、腕や足でタイミングがバラバラになってしまったり、、
3DCGソフトでアニメーションのどツボにはまった経験がある人はたくさんいるハズ。難しく考えずに、ポーズとポーズの連続でって事ですね。

歩かせてみよう!

アニメーションサイクルを何フレームにするか、考えてみましょう。もしあとで修正したくなってもアニメーションキーをちょちょっと動かせば直せますからね。

1.アニメーショントラックの作成

whomorPicturesBlog_140523G

TreeのAnimationsをダブルクリック、もしくはAnimationsを選択して一番下にあるNewAnimation+をクリックしてアニメーショントラックを作成しましょう。名前はモーションに合わせて

morChang_walk
morChang_run
morChang_idle
morChang_attack    などなど。

2.AutoKeyをオンに

ボーンを動かして、フレームに紐付ける。そうすることによってタイムスライダーを動かした時にアニメーションします。俗に言うKeyFrameAnimationですね。キーを打つときはボーンを選択して鍵マークをクリック(ショートカットキー Lでキーを打つこともできます。)もしくはAutoKeyをオンにしましょう。ボーンを回転や移動させただけで自動的にキーを打ってくれます。うっかりキーの押し忘れしちゃいますからね。

whomorPicturesBlog_140523F

1,ポーズをつける
これがデフォルトポーズのモアちゃん
whomorPicturesBlog_140523A

0フレームでポーズをつけましょう
whomorPicturesBlog_140523B
左手と右足を前に、右手と左足を後に
whomorPicturesBlog_140523C
30フレームに飛んでキーをコピーしましょう。これでループします。
whomorPicturesBlog_140523D

真ん中15フレームに戻って逆ポーズ。ここで1回再生してみましょう。また手足をジタバタさせてるだけにしか見えませんね。
0フレームと15フレームの間、7フレームか8フレームにポーズをつけましょう。

whomorPicturesBlog_140523E
ちょうど間のポーズですね。右足が接地して、左足が前に出ようとしています。右足がぐっと踏み込んで前に進むわけですから重心も上に上げましょう。同じように、23fにも間のポーズをつけましょう。

P05
whomorPicturesBlog_140523E2
ここでもう1度再生すると、、重心が上下する事によってリズム感と躍動感がでてきました。

ここでモーションがカクつく場合はキーの補間カーブがsteppedCurveになっている場合があるので、LinearCurveに設定しましょう。アニメーションが滑らかになります。修正したいキーを選択した状態で、Graphを表示して、LinearityCurveボタンをクリックします。

whomorPicturesBlog_140523H

これだけでもだいぶ歩きモーションらしくなったと思います。細かい部分はかなり端折ってしまいましたが足の接地や、足の送り、頭や髪を少し揺らしてあげればモーションの完成です。
完成したムービーがこちら

かなり滑らかに歩いてますね。イラスト1枚でこんなに動かせるなんて。

でもよく見ると、、、

whomorPicturesBlog_140523I
モアちゃん、手とか膝とか足首がぶつ切りになっちゃってますね。せっかくスケルトンリグを組んで、アニメーションもつけたのに、、

こうなった時、どうすればいいか、

こうならない為にはどうすればいいか。

次回はエラー回避とリテイク作業について書いて行こうと思います。

株式会社フーモア 遠藤 有
HP:https://whomor.com/
Blog:ソシャマノートブログ
書籍:MAYA LT 3D‐CG キャラクター講座 (I・O BOOKS) [単行本]

Comments

comments

  • このエントリーをはてなブックマークに追加
  • LINEで送る

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

3DCG、Spine制作ならフーモア!

プロの漫画制作ならフーモア!

関連記事

3_Synfig Studio1.0

今、注目のスプライトアニメーションツールSpineとSynfig Studioを比較してみた。

はじめまして、フーモアでスプライト系ツールを担当している吉村と申します。 趣味でMMDを触っていた

記事を読む

MA_002

モーションコミックは流行るのか?「MotionArtist」紹介

CG開発室の遠藤です。   弊社では代表の芝辻をはじめ「マンガを世界に届ける」

記事を読む

1

Live2D体験版をさわってみた その2

ども...牛丸です...   前回はViewerのレビューまで。 今回はAn

記事を読む

whomorPicturesBlog_140517B

これからはspine!?操作性のあるソーシャルゲーム向けキャラ制作のニーズに答えて使ってみた。その1「イラスト制作~スケルトン組み立て」

読了時間3分 初めまして、フーモアピクチャーズ技術部の遠藤です。ビジネス的側面から切り込んで行

記事を読む

160516_03

[Spine研究]Spineでクォータービューアクションはできるのか?

CG開発室の遠藤です。 久しぶりのSpine研究記事になります。 横スクロールなどに比べ

記事を読む

icatch2

Spineアニメーションを、JavaScriptでWEB上に表示してみよう!

こんにちは、CG開発室アニメーターの吉村です。 SpineがWEB上で動いたら、もしかしてゲー

記事を読む

puppet2d

期待のツール!?Puppet2Dは使える?その他諸々

フーモアCG開発室の遠藤です。 ■なかなか忙しくさせていただいており、スタッフ一同、毎

記事を読む

勉強会

【資料公開】マスタッシュ ✕ フーモア共同開催Spine勉強会資料

平成27年1月20日にミクシィcollaboスペースで、スマートフォン向けゲームなどで需要拡

記事を読む

10

グリー主催:中級者向け!2Dアニメーションツール勉強会レポート

 CG開発室の遠藤です。1月29日に、グリー様主催、WebTechnology様、Live

記事を読む

icatch

「Spine」の使い方をおさらいしよう!IKボーン入れ方講座

こんにちは、フーモアCG開発室のCGアニメーターです。 フーモアでは2Dアニメーションツール「Sp

記事を読む


  • 「おもしろいMANGAを創る」をビジョンに今までになかった新しい価値観を創造する会社。イラストや漫画制作のディレクター集団。
    お問合せはこちらからお気軽にどうぞ
  • ブログ最新記事とクリエイティブに役立つ情報を日々配信しています。

PAGE TOP ↑