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

【特集】アニメーション制作ソフト「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. 夏アニメ期待値の高い作品は? 3位「銀魂」2位「はたらく細胞」1位は…

    夏アニメ期待値の高い作品は? 3位「銀魂」2位「はたらく細胞」1位は…

  2. 「NEOGEO mini」7月24日に発売決定! 価格は11,500円(税別)に

    「NEOGEO mini」7月24日に発売決定! 価格は11,500円(税別)に

  3. 【週刊インサイド】『バンドリ!』×『ペルソナ』シリーズコラボに関心集まる! 『スプラトゥーン2 オクト・エキスパンション』の小ネタにも注目

    【週刊インサイド】『バンドリ!』×『ペルソナ』シリーズコラボに関心集まる! 『スプラトゥーン2 オクト・エキスパンション』の小ネタにも注目

  4. 「NEOGEO mini」周辺機器をチェック! 専用コントローラーや本体に貼るステッカーなどが同日発売─早くも売り切れ続出

  5. 『デレマス』城ヶ崎美嘉が60cm大の“スマートドール”で初お披露目!

  6. 「ゾイドワイルド」ついに発売!リアルムービングキットの第1弾をさっそく「復元」してみた【特集】

  7. 【昨日のまとめ】『ポケモン』カントー地方で好きだったジムリーダーは?、登録者数1000人突破のインサイドちゃんチャンネル、PS4『絶体絶命都市4』10月25日に発売…など(6/23)

  8. 会場で「NEOGEO mini」を発見!気になるサイズや操作性をチェック【E3 2018】

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

  10. 収録タイトルも判明!「NEOGEO mini」は今夏発売予定―100メガショックを手のひらに

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