人生にゲームをプラスするメディア

【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた

「インサイドちゃんを動かしたい!」 そんな編集長の密かな夢が叶いました。

その他 全般
【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた
  • 【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた
  • 【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた
  • 【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた
  • 【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた
  • 【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた
  • 【特集】アニメーション制作ソフト「Spine」を使って、動くインサイドちゃんを作ってみた
「インサイドちゃんを動かしたい!」

そんな編集長の密かな夢が叶いました。

ここ数年、一枚絵を切り出してアニメーションさせる技術が確立し、家庭用、スマートフォンを問わず多数のゲームで採用が進んでいます。そんな技術の一つ「Spine」を使い、大阪でスマートフォン向けゲームを手掛けるエボルブさんに動くインサイドちゃんを作っていただきました!

エボルブでは2Dアニメーション制作の専門工房「キャラモーションスタジオ」を1月に立ち上げ、Spineを使ったアニメーション制作をどんどん手掛けていくことを狙っているそうです。同社の担当者さんにお話を伺いました。

まずは出来上がったインサイドちゃんをご覧ください。



今まで静止画だったインサイドちゃんに命が宿ったように動き、表情を変え、こちらを意識したような仕草をします。

Spineでは、一枚絵から体のパーツ毎に分解したデータにボーン(骨)とメッシュ(表面)を与えて、まるで3Dモデルのような体や表情の動きを与える事を可能にします。Spineと同様のソフトウェアは幾つかあるものの、ボーンとメッシュの双方を設定できるのはSpineのみで、高い質で実現できるとのこと。


(左)元絵 (右)パーツ毎に切り出したもの


この切り出しの部分は一般的にはPhotoshopで行うようです。慣れたデザイナーであればそう大きな労力ではありませんが、ボーンとメッシュを与えて動かす事を意識した切り出し方はあり、そこはエボルブとして提供できるノウハウだとのこと。人間のキャラクターに限らず、動物やモンスター、ロボットなども同様に動かす事ができ、やり方によってはエフェクトなども実現可能だとか(実際に採用された例があるそう)。

パーツ毎に分解された絵をSpineにインポートしていき、ボーンやメッシュを設定していきます。ボーンを設定すれば関節を曲げられるようになり、メッシュを設定すれば一点から引っ張って変形することで表情などを作れます。


ボーンの設定をしている様子



ボーンの設定を行ったインサイドちゃん。骨格を作る



メッシュの設定をしている様子


最後はSpineのインターフェイスを使ってアニメーション付けです。


画面下部のタイムラインにポーズをプロットしていくようなイメージ


アニメーションの設定画面では、ドラッグ&ドロップでボーンやメッシュを引っ張ったり変形させたりして、そのポーズを画面下部にあるタイムライン上にプロットしていきます。ポーズとポーズの間はキーフレームアニメーションとして自動補完されます。グラフエディターを用いれば、フレーム間の動きのペースも設定可能です。腕、足、髪などのボーンや、顔のメッシュなどを動かしてタイムラインに沿って設定していくことで、画面上のキャラクターに動きが与えられていきます。

作成したアニメーションは、Spine上で動かして動画データのような形でインポートするだけでなく、Unity、Cocos2d-x、Flashを始めとして多様なゲームエンジンや言語に対応したランタイムも用意されていて、ゲーム中に配置してプログラムで動かす事も当然可能です。

エボルブではこれまでも同種のソフトウェアを複数試し、最終的にはSpineに辿り着いたとのこと。ボーンとメッシュの双方を設定できることから自由度が高い事や、英語版も用意されていて(こちらがオリジナル)世界中で活用されているソフトウェアである事も、習得する上や、ビジネスを展開する上では優位に働くのではないかとのこと。

これまでに複数のゲームタイトルでSpineを活用したアニメーションを提供してきたというエボルブ。アニメーションで動きを与える事で、眠っていた過去のイラストにも命を吹き込む事が出来ると提案を行っているそうです。過去のカードゲームで大量に制作したイラスト等もSpineで動かす事で新鮮な表現が出来そうです。ウェブサイトでは、簡易的な見積もりも可能となっています。


Spineのトレイラー


引き続き、動くインサイドちゃんには取り組んでいきたいと思います!
《土本学》

編集部おすすめの記事

特集

その他 アクセスランキング

  1. 実写映画版『モンハン』遂にハンターの姿が公開!トニー・ジャーが見覚えある衣装に身を包む

    実写映画版『モンハン』遂にハンターの姿が公開!トニー・ジャーが見覚えある衣装に身を包む

  2. 「モンスターボールPlus使ってみてどうだった?」結果発表─雰囲気は最高!でも改善点も…?【読者アンケート】

    「モンスターボールPlus使ってみてどうだった?」結果発表─雰囲気は最高!でも改善点も…?【読者アンケート】

  3. 12年に及ぶプロジェクト『FF15』で田畑氏が残したレガシーとは?ーそして『FF16』に求めること【特集】

  4. 『SAO アーケード ディープ・エクスプローラー』世界観やシステム等のゲーム詳細情報が公開―キリト達と共に果てなき冒険へ挑もう!

  5. ミスド、「ピカチュウドーナツ」を販売開始―人気沸騰で一部店舗では品切れ状態

  6. 実写映画版『名探偵ピカチュウ』予告編第一弾が海外向けに公開!

  7. 【特集】飽きたなんて言わせない!「ウエハース」を美味しく食べるアレンジレシピ

  8. 【特集】『良作フリーゲーム』10選―無料でこんなに遊べるのか!

  9. ポケモンカード「タッグボルト」12月7日発売!史上最強のピカチュウとイーブイが登場

アクセスランキングをもっと見る