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

【特集】アニメーション制作ソフト「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. 劇場版「Fate/stay night [HF]」×「ピザハット」キャンペーン1月21日から開催!直筆サイン入りのプレミアムグッズを手にいれよう

    劇場版「Fate/stay night [HF]」×「ピザハット」キャンペーン1月21日から開催!直筆サイン入りのプレミアムグッズを手にいれよう

  3. もしも『ペルソナ5』がゲームボーイアドバンス用ソフトだったら…海外ファンがピクセルアート公開

    もしも『ペルソナ5』がゲームボーイアドバンス用ソフトだったら…海外ファンがピクセルアート公開

  4. 「ゲーマーライフスタイル調査」を実施─10代の約4割がゲーマーを自称

  5. 「BanG Dream!」発ボーイズバンド“Argonavis”の1stシングルMV公開!

  6. マサカド公実装&『ベヨネッタ』コラボも発表!『D2メガテン』ファンミーティングレポート

  7. 「ひなビタ♪」歴1ヶ月のファンは初めてのライブを楽しめたのかー「Sweet Smile Pajamas Party」夜公演レポート

  8. 中国からコスプレイヤーの魔王がやって来た!フォロワー数300万以上の存在感を放つ【インタビュー】

  9. 『FGO』ディライトワークスの“切り込み隊長”第1スタジオ「DSS」!「神は細部に宿る」ゆえに求める挑戦・結果・成長

  10. 【特集】今さら聞けない“アーサー王と円卓の騎士”―『FGO』『FF』などに影響を与えた物語

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