はじめまして。 ガールフレンド(仮)でアニメーションを担当しています。峯岸と申します。
本日はガールフレンド(仮)のぷちガールアニメーションの制作に関してご紹介したいと思います。
ぷちガールちゃんとは？
ガールフレンド(仮)ではぷちガールちゃんという機能があり、ゲーム内でバトルをしたりイベントに参加したりするときに応援してくれる小さなガールがいます。
"会いに行く"機能では、ぷちガールちゃんにアニメーションをつけて可愛く動くよう実装されています。
ボーンアニメーションとは？
体にボーンを階層的に設置してゆき、その骨格のつなぎ目を基準にキーフレームで動きをつけてアニメーションをつけていく技法のことです。 スケルタルアニメーションや、スキンドメッシュアニメーションとも呼ばれています。ガールフレンドでは、アニメーション制作にFlashを使用しているため、ガールの各パーツを関節ごとにムービークリップ分けをし、ボーンアニメーションを実現しています。
制作上の工夫
・ガール素材のスプライトデータ化
ゲームのパフォーマンス向上のため画像はスプライト化し、画像データ2枚(正面向き・横向き)で管理しています。スプライト化することで１つアニメーションを作れば、他のガール画像に置き換えるだけでどのガールにも対応できます。スプライト化には、自前でスプライト生成ツールを作り自動化をしています。
ガールフレンドでは、Toolkit For CreateJSでFlashをパブリッシュしているので 下に添付したスプライト画像をFlash内でマスクをして制作しています。
※createJSでのスプライトマスクに関しては、佐藤圭明さんの記事をご覧下さい。
・Flashで扱いやすいように、ガールを１つのムービークリップに集約
１つのガールのムービークリップに正面向き・横向きの2種類を持たせ。各表情(目と口)、動きをjavascript側から制御できるよう実装しています。
実際にアニメーションをつけてみる(歩くモーション)
モーション制作は、TFC(Toolkit For CreateJS)の制約上クラシックトゥイーンのみで実装します。歩くモーションは7つのキーフレームで構成し、最後のキーフレームでは最初のキーフレームと噛み合うように足を戻しきらないところで止めています。(スクリプトでループ制御する際はキーフレームをつくらなくていいです。)
各キーフレームをクラシックトゥイーンでつなぎます。 この時に同時にイージングもつけます。
※イージングとは、加速度の変化です。徐々に早くする事をイーズイン、徐々に遅くする事をイーズアウトと言います。
今回のモーションだと上の画像の1~2,4~5にはイーズアウトを、2~3,5~6にはイーズインを入れる事でより重力感のあるリアルな動きになります。
↓クラシックトゥイーン適応後のぷちガールちゃん
かわいいといいのですが。。( ＾ω＾ ；)
その他ぷちガールちゃんモーション
・手を振るモーション
・恥ずかしいモーション
・寝るモーション
スケルタルアニメーションのメリット・デメリット
メリット・人間の骨格毎にアニメーションを独立できる(クオリティ面)
・Flashで制作した場合、フレームをコピーできるためモーションを再利用できる(再利用性)
・アニメーションを直感的につけることができる(オーサリング面)
デメリット
・最初の設計は先を見越して柔軟に制作しなければならない(工数面)
・Flashでのオーサリングは慣れが必要(オーサリング面)
最後に
ぷちガールちゃんでは、弊社のスマートフォンゲームにおいて採用実績が多いcreateJSと連携させることでiPhone/Androidともにクオリティを担保しつつ、運用性の高いアニメーション制作が出来ています。 メリット・デメリットを理解し、ボーンアニメーションを効果的に使う事でゲームのクオリティを上げる事が出来ると感じました。これからも、アニメーションのクオリティアップを追求してゆきたいと思います。
ガールフレンド(仮)をよろしくお願いします！
10月にはTVアニメーションも始まりますので、ぜひご覧下さい！！
http://girlfriend-kari-anime.jp/