2Dアニメーションツールの背景
今回は、ゲーム中で使う2Dアニメーション作成ツール「Spriter」を紹介したいと思います。昔のゲームや、スマートフォン用のアプリなどに登場するキャラクタのアニメーションは、４枚から８枚位のパラパラ漫画を作って順番に表示することでアニメーションを実現している例が多いようです。
たしかに、このスプライトアニメーションは仕組みが非常に簡単で、実装も簡単なのですが、絵を作るのが大変という致命的な（？）欠点があり、デザイナさんが近くにいない人には敷居が高くなってしまっています。
Spriterとは
そんな問題を解決するため、誰でも簡単に2Dアニメーションを作成することが出来る環境として「Spriter」が存在します。このソフトはどういうものかというと、最初にアニメーションに使うパーツを画面上に配置して、キーポイントとなるフレーム毎に各パーツのポーズを決めてやると、あとはSpriterが勝手に補間してアニメーションしてくれるソフトになります。百聞は一見にしかずということで、動画を見てもらった方が感じがつかみやすいと思います。
How to use Spriter 0 - YouTube
どうですか、なんとなく雰囲気は伝わったでしょうか？このソフト、結構いい感じなのですが、日本語の資料が全くない！！そして、日本語で解説してくれているサイトも全然ない！！ということで日本でのSpriterの普及を目指して簡単な使い方を説明したいと思います。
Spriterの使い方
まずは、本家からダウンロードして下さい。2014年2月末現在、無料版と有料版が存在しています。有料版でも$25という格安の値段で買えちゃう（国産のツールだと10万円弱・・・）ので、もし2Dアニメーションを駆使したゲームを作っていきたい人は、購入するのもありかもしれません。paypalのアカウントさえあれば購入できます。ダウンロードは↓からどうぞ！
さて、アニメーションを作成するにあたって、キャラクタのパーツを先に作っておきます。今回はアザラシのキャラクタの各パーツのファイルを下図のような感じで作ってみました。どこを動かすかを考えつつ、パーツごとにファイルに分解していきます。
次に、Spriterを起動し、File→New Projectをクリックします。どの画像データを使うかを尋ねられますので、先ほど作成したアザラシの画像があるフォルダを指定して下さい。
指定できると、そのフォルダ内にある画像ファイルが、Spriterにロードされます。ロードされた画像は右カラムのPalletウインドウで確認することが出来ます。正しく読み込めたら、次は使うパーツをPalletウインドウから真ん中のウインドウにドラッグしていきます。
画像の大きさなどは、画像の周りに表示される四角形の頂点をドラッグすることで調整できます。シフトボタンを押したままドラッグすると、アスペクトを保ったまま変形できます（このへんはパワーポイントの操作と似てますね）
顔と同じように、左右の手もPalletからドラッグしてきて、正しい位置になるように配置して下さい。ここで、手のほうが顔よりも上側に表示されてしまうので、違和感ありありですねー(> <)
そこで、各パーツの上下関係を調整します。上下関係の調整には左カラムのZ-orderウインドウから行います。今回は顔のパーツを一番上に持ってきたいので、顔画像の表示されている行を一番上の行までドラッグ＆ドロップをします。この操作で正しい表示順序になったでしょうか？
さてここから、いよいよアニメーショをつけていきたいと思います。まずは0〜200フレーム目まででアザラシが左手を上げるようなアニメーションをつけていきます。といっても、200フレームぶん全てのフレームにおいてポーズを指定する必要はなく、200フレーム目のポーズさえ指定すれば（0フレーム目のポーズは現在のウインドウの状態）0〜200フレームの間のフレームは自動的に補間してくれます。
まずは、タイムラインのカーソルを200フレーム目まで移動させます。次に、タイムラインのカーソルが200フレーム目にあることを確認して、アザラシのポージングを行っていきます。まずは顔の回転から・・・パーツを回転するは、パーツ外枠の右上頂点付近にある回転矢印をドラッグして下さい。
タイムラインのカーソルが200フレーム目にあることを確認して、アザラシの左手も回転＆移動させて下さい。ここまでで、アザラシが左手を上げるアニメーションが完成しました。タイムライン上のカーソルを動かすことで、動作が確認できます。
次に、200フレームから300フレームまでは左手を上げたままにしておき、300フレームから500フレームにおいて左手を下ろすアニメーションを付けたいと思います。200フレームから300フレームまでは同じ格好なので、200フレームの位置にあるキーを300フレームの位置にコピーします。
まずはタイムラインのカーソルを300フレームの位置に合わせた上で、200フレームにあるタイムラインのキーを選択し（オレンジ色に変化する）、この状態でctrl-c（Macではcommand-c）を押してキーをコピーし、ctrl-v(command-v)でペーストします。
同様の手順でタイムラインの500フレームにカーソルを合わせた状態で0フレーム目のキーをコピーしてきます。これによって所望のアニメーションが実現できたことになります。
左手を上げる手順と同じ手順で、次は右手を上げるアニメーションもつけてみます。上に書いた操作とほぼ同じことの繰り返しですので説明は割愛しますが、アニメーションとしては700フレームから800フレーム目まで右手を上げた状態になっています。
アニメーションが完成したら、左下の再生ボタンを押して動作を確認してみてください。どうですか？自然なアニメーションが実現できたでしょうか？最後にFile→Save Projectを選択することでアニメーションの動作記述ファイルをxml形式で保存することが出来ます。保存したxmlをOpenGL上で動作させるプログラムはまた次回以降、作っていきたいと思います。
今回使用したアザラシの画像ファイルと、アニメーションを保存したxmlファイルを↓に置いておきます。参考にして下さい。
アザラシ画像
参考図書
「アニメーションスタイル+ 原画・動画で学ぶ リアルカートゥーンの動き」
この本は、自然なアニメーションの付け方のコツをフレーム単位で詳しく解説してくれています。基本的には3Dのポリゴンに対してどのようにアニメーションを付けるかの説明なのですが、2Dでも役に立つ知識がいっぱい詰まった一冊です。アニメーションをつけてみたけど、「いまいち生き生きとしていない！」とか「なぜだか分からないけど、動きがおかしい」と悩んでいる人にとっては物凄く役に立つと思います。普通の人やデフォルメされたキャラクタ、動物など、様々なキャラクタに対してのノウハウが詰まっているため、一読の価値有りです☆
ワークスコーポレーション
売り上げランキング: 98,151
