初めまして。グラフィックデザイナーのにしやまです!
今日はSpineというアニメーションツールを使って、2Dキャラクターを3Dっぽく動かす工程とポイントを簡単にご紹介します。

Spineとは

Spineとは2Dアニメーションを作成するためのツールです。
ボーンを入れて動かしたり、画像を複雑に変形できたりするので、比較的少ない枚数のイラストから高度なアニメーションを制作することができます。

公式サイト : Spine: ゲーム用 2D アニメーション ソフトウェア

【1】絵を準備する

まずは何といっても動かす元の絵が必要ですね。
この段階で、そのキャラクターがどのような動きになるのかほぼ決まってしまうのでしっかり考えてアイデアを絞り出します。
そして今回出来上がったのがこちら。
(Photoshopで描いています)

魔法が苦手すぎて科学も駆使しちゃう魔女っ娘です。
相棒の猫型ハコロボットと花嫁修業の旅に出ています。
モンキレンチを魔法の杖に見立ててみたんですが。。。うーむ。微妙。。
(あくまで参考用なのでこれ以上掘り下げるのはやめます!)

一応、腕を手前に突き出し、奥行き感を出してみました。
アニメーションさせることを考えて部位ごとにパーツ分けして描いています。
エフェクトなどの「他のパーツとは独立して動きそうなもの」や膝などの「大きく屈折するもの」を中心にパーツ分けしています。
中でも重なりあうパーツ、「突き出している方の腕と頭」「身体と奥側の腕」などの部分には注意が必要です。
静止した状態では見えない箇所も動きをつけるとチラチラ見えてしまうことがあるので、予めどう動かすかを想像し見えそうな箇所は描いておくとその後の作業がスムーズです。
今回はこんな感じでパーツ毎にレイヤー分けしました。

分かりやすいようにパーツ毎にバラバラにしてみたのがこちら。

静止画では見えていなかった奥の足の太ももまで描いてますし、ハコロボットの口の中も描いています。また、パーツ分けについては膝や首など関節部を中心に分けられているのが分かるかと思います。

この工程でのポイント

キャラクターのポーズや構図を考える段階から、アニメーションについても考えておく

【2】Spine上でのセッティング

【1】で描いた魔女っ娘をSpineへ取り込みます。
取り込みについてはスクリプトでちゃちゃっとできちゃいます。
(スクリプトについての説明は本題からそれちゃうので割愛します)

取り込めたら、ボーンやメッシュを各部位の画像に設定していきます。
このメッシュというのがSpineの特徴です。
3Dモデルのポリゴンのようなものを2Dの画像にも設定することができるため、一枚の画像の中でも細かく変形が可能になります。これを利用して立体的な動きを作っていきます。

これがそのメッシュを設定した様子。
ちょっと見えづらいかもしれませんが、2Dの画像の上に点とそれらを結ぶ黄色い線が引かれています。
この点や線に沿って画像が変形されるようになります。物体の頂点には点、物体のエッジには線を引いていくとよいです。ここの作業は3Dモデリングと似ています。
メッシュの設定次第でアニメーションさせる際に立体的な動きができるかどうか左右されるので、しっかり立体を意識して進める必要があります。

この工程でのポイント

3Dモデリングのように立体を意識してメッシュを分割する

【3】アニメーションさせる

設定がすべて完了したら、いよいよアニメーションを作っていきます。
細かく言えば色々とテクニックはありますが、手っ取り早く3Dっぽく見せるためには手前のものを大きく、奥のものを小さく表現することです。

以下を比較するとわかりやすいかと思います。
手元に注目です。

後の方のアニメーションの方が立体的に見えるんじゃないでしょうか。
ちょっとやりすぎた気もしますが、手前に出てきたときに拡大させています。
ここでは画像の拡大縮小を主に使用していますが、他にもメッシュ変形、回転や移動など様々な変形を組み合わせアニメーションさせることで、より高度な3Dっぽい表現が可能になってきます。

この工程でのポイント

手前にあるものは大きく!奥にあるものは小さく!

【4】まとめ

以上、Spineを使って2Dキャラクターを3Dっぽく動かす工程のご紹介でした。
もちろん3D表現だけがアニメーションの魅力ではありまん。
でも、せっかくメッシュ変形ができるなら立体的な動きをさせてみたいじゃない!

ってことでこのような記事にしてみました。

今回は触りだけということで簡易的に作ったものでの説明となりましたが、実際にはもっと時間をかけ細かく作りこんだキャラクターをゲームに実装していきます。
そうすることで、より魅力的でより臨場感のあるキャラクターが生まれていきます。

Spineの機能についても全然説明しきれていないのでもっとお話したいところですが、それはまた別の機会に。。

それではまた!

Spineで制作したキャラクターが盛りだくさんのゲーム「ぼくのモンスター」がAppStoreにて配信中です。気になった方は、ぜひ遊んでみてくださいね!
iOS版ダウンロードはこちら!
ぼくのモンスター

さいごに

Nagisaでは一緒に働ける仲間を募集しています。
「Nagisa、ちょっと気になるかも…」なんて思ってくださったあなた!
オフィスに遊びに来てみませんか!?
一同歓迎いたします!!

エンタメ事業のクリエイティブ制作責任者 数多くのゲームイラスト、UIデザイン制作に関わりNagisaにJoin。 現在サービス中のぼくのモンスターでは立ち上げから関わり イラスト,UIデザイン,エフェクトデザイン全てを担当