おもちゃラボ

Unityで遊びを作っていきます

Spriterを使ってスプライトアニメーションを作る 

2Dアニメーションツールの背景

今回は、ゲーム中で使う2Dアニメーション作成ツール「Spriter」を紹介したいと思います。昔のゲームや、スマートフォン用のアプリなどに登場するキャラクタのアニメーションは、4枚から8枚位のパラパラ漫画を作って順番に表示することでアニメーションを実現している例が多いようです。

f:id:nn_hokuson:20140227221922j:plain

たしかに、このスプライトアニメーションは仕組みが非常に簡単で、実装も簡単なのですが、絵を作るのが大変という致命的な(?)欠点があり、デザイナさんが近くにいない人には敷居が高くなってしまっています。

Spriterとは

そんな問題を解決するため、誰でも簡単に2Dアニメーションを作成することが出来る環境として「Spriter」が存在します。このソフトはどういうものかというと、最初にアニメーションに使うパーツを画面上に配置して、キーポイントとなるフレーム毎に各パーツのポーズを決めてやると、あとはSpriterが勝手に補間してアニメーションしてくれるソフトになります。百聞は一見にしかずということで、動画を見てもらった方が感じがつかみやすいと思います。



How to use Spriter 0 - YouTube


どうですか、なんとなく雰囲気は伝わったでしょうか?このソフト、結構いい感じなのですが、日本語の資料が全くない!!そして、日本語で解説してくれているサイトも全然ない!!ということで日本でのSpriterの普及を目指して簡単な使い方を説明したいと思います。

Spriterの使い方

まずは、本家からダウンロードして下さい。2014年2月末現在、無料版と有料版が存在しています。有料版でも$25という格安の値段で買えちゃう(国産のツールだと10万円弱・・・)ので、もし2Dアニメーションを駆使したゲームを作っていきたい人は、購入するのもありかもしれません。paypalのアカウントさえあれば購入できます。ダウンロードは↓からどうぞ!

http://brashmonkey.com


さて、アニメーションを作成するにあたって、キャラクタのパーツを先に作っておきます。今回はアザラシのキャラクタの各パーツのファイルを下図のような感じで作ってみました。どこを動かすかを考えつつ、パーツごとにファイルに分解していきます。


f:id:nn_hokuson:20140227224137j:plain


次に、Spriterを起動し、File→New Projectをクリックします。どの画像データを使うかを尋ねられますので、先ほど作成したアザラシの画像があるフォルダを指定して下さい。

f:id:nn_hokuson:20140227224205j:plain


指定できると、そのフォルダ内にある画像ファイルが、Spriterにロードされます。ロードされた画像は右カラムのPalletウインドウで確認することが出来ます。正しく読み込めたら、次は使うパーツをPalletウインドウから真ん中のウインドウにドラッグしていきます。

画像の大きさなどは、画像の周りに表示される四角形の頂点をドラッグすることで調整できます。シフトボタンを押したままドラッグすると、アスペクトを保ったまま変形できます(このへんはパワーポイントの操作と似てますね)

f:id:nn_hokuson:20140227224444j:plain

顔と同じように、左右の手もPalletからドラッグしてきて、正しい位置になるように配置して下さい。ここで、手のほうが顔よりも上側に表示されてしまうので、違和感ありありですねー(> <)

f:id:nn_hokuson:20140227224625j:plain

そこで、各パーツの上下関係を調整します。上下関係の調整には左カラムのZ-orderウインドウから行います。今回は顔のパーツを一番上に持ってきたいので、顔画像の表示されている行を一番上の行までドラッグ&ドロップをします。この操作で正しい表示順序になったでしょうか?

f:id:nn_hokuson:20140227224913j:plain

さてここから、いよいよアニメーショをつけていきたいと思います。まずは0〜200フレーム目まででアザラシが左手を上げるようなアニメーションをつけていきます。といっても、200フレームぶん全てのフレームにおいてポーズを指定する必要はなく、200フレーム目のポーズさえ指定すれば(0フレーム目のポーズは現在のウインドウの状態)0〜200フレームの間のフレームは自動的に補間してくれます。

まずは、タイムラインのカーソルを200フレーム目まで移動させます。次に、タイムラインのカーソルが200フレーム目にあることを確認して、アザラシのポージングを行っていきます。まずは顔の回転から・・・パーツを回転するは、パーツ外枠の右上頂点付近にある回転矢印をドラッグして下さい。

f:id:nn_hokuson:20140227230204j:plain

タイムラインのカーソルが200フレーム目にあることを確認して、アザラシの左手も回転&移動させて下さい。ここまでで、アザラシが左手を上げるアニメーションが完成しました。タイムライン上のカーソルを動かすことで、動作が確認できます。

f:id:nn_hokuson:20140227230657j:plain

次に、200フレームから300フレームまでは左手を上げたままにしておき、300フレームから500フレームにおいて左手を下ろすアニメーションを付けたいと思います。200フレームから300フレームまでは同じ格好なので、200フレームの位置にあるキーを300フレームの位置にコピーします。

まずはタイムラインのカーソルを300フレームの位置に合わせた上で、200フレームにあるタイムラインのキーを選択し(オレンジ色に変化する)、この状態でctrl-c(Macではcommand-c)を押してキーをコピーし、ctrl-v(command-v)でペーストします。

f:id:nn_hokuson:20140227231427j:plain

同様の手順でタイムラインの500フレームにカーソルを合わせた状態で0フレーム目のキーをコピーしてきます。これによって所望のアニメーションが実現できたことになります。

f:id:nn_hokuson:20140227231643j:plain

左手を上げる手順と同じ手順で、次は右手を上げるアニメーションもつけてみます。上に書いた操作とほぼ同じことの繰り返しですので説明は割愛しますが、アニメーションとしては700フレームから800フレーム目まで右手を上げた状態になっています。

アニメーションが完成したら、左下の再生ボタンを押して動作を確認してみてください。どうですか?自然なアニメーションが実現できたでしょうか?最後にFile→Save Projectを選択することでアニメーションの動作記述ファイルをxml形式で保存することが出来ます。保存したxmlOpenGL上で動作させるプログラムはまた次回以降、作っていきたいと思います。

f:id:nn_hokuson:20140227232426j:plain


今回使用したアザラシの画像ファイルと、アニメーションを保存したxmlファイルを↓に置いておきます。参考にして下さい。
アザラシ画像

参考図書

「アニメーションスタイル+ 原画・動画で学ぶ リアルカートゥーンの動き」

この本は、自然なアニメーションの付け方のコツをフレーム単位で詳しく解説してくれています。基本的には3Dのポリゴンに対してどのようにアニメーションを付けるかの説明なのですが、2Dでも役に立つ知識がいっぱい詰まった一冊です。アニメーションをつけてみたけど、「いまいち生き生きとしていない!」とか「なぜだか分からないけど、動きがおかしい」と悩んでいる人にとっては物凄く役に立つと思います。普通の人やデフォルメされたキャラクタ、動物など、様々なキャラクタに対してのノウハウが詰まっているため、一読の価値有りです☆