【GGG＃3】グリー『パズクエ』における「Spine」を使ったアニメーション制作事例

ディー・エヌ・エー（DeNA）<2432>は、7月10日、東京・渋谷にある「渋谷ヒカリエ」でクリエイター向けセミナー「Game Graphics Groove ＃3」を開催した。今回、スクウェア・エニックス、グリー、ポケラボのゲームグラフィック担当者が登壇した。

スマートフォンゲームアプリ開発では、Unity、Unreal Engine、Cocos2d-xなどのツールが活発に利用されているが、こうしたなか、スマートフォンゲームの画質も大幅に上がってきている。今回のセミナーでは、クリエイティブ面でのゲームの進化をさらに加速させるため、現役のクリエイターが最新ヒットタイトルの開発ノウハウを共有するという。


【他のセッションの記事】
・【GGG＃3】グリー細川氏が明かすユーザーテストの意義と重要性…『パズクエ』での事例から
・【GGG＃3】スクエニ窪洋一氏が明かす『ミリオンアーサー』で解消したゲーム開発にまつわる様々な"乖離" 


グリー<3632>の細川 菜々恵氏と、二宮 大輔氏が登壇し、パズル×タワーディフェンスゲーム『パズクエ』の開発過程における取り組みを紹介した。後編となる今回は、『パズクエ』でデザインを担当している細川氏が紹介したアニメーションツール「Spine」の使用事例をレポートしておこう（→前編）。
 
二宮氏は、『パズクエ』で「動いている部分をほとんどを担当」している。『パズクエ』では、Photoshop、Flash、Adobe After Effectsのほかに、「Spine」と呼ばれるボーンアニメーションツールを活用した。

「Spine」は、2Dスケルトンアニメーションを作成するツールで、Cocos2d-xやUnity用のアニメーションデータの作成・書き出しが行える。メッシュアニメーションにも対応しているため、1枚絵を用意すれば、手軽にアニメーションが作れるとのこと。さらに、動作が軽いことも採用を後押しする理由になったそうだ。また、同じような頭身・動きであれば、ボーンの使い回しができるため、1人でも対応できたという。
 
ただし、「Spine」は万能なツールというわけではなく、「Flash」との比較でいくつか弱点もあると指摘した。例えば、『Spine』は、「パーツごとのループができない」「マスクが未対応」「スクリプト制御ができないため、実装時にエンジニアにお願いしなくてはならない」などだが、いずれも工夫することで克服は可能だそうだ。
 
ここで具体的な利用事例が紹介された。例えば、メッシュの変形ができるため、ダメージを受けた時のアニメーションとして、衝撃波のようなエフェクトを3Dのような形で表示することや、水に潜る時のアニメーションとして、パーツをバラバラに分解したうえで、潜っている途中でパーツを非表示にする処理を施すことで実際に潜っているような動作を実現していったという。
 
このほか、ボーンに加えて、メッシュを使うことで、オブジェクトをより柔らかく、スムーズな動きのアニメーションとして表現できるそうだ。このあたりは文章にしづらいので、スライドをご覧いただきたい。
 
また、「Spine」公式Twitterアカウントが紹介する作例から、3Dのような動きが作れることに気づき、真似するといったことも行ったという。ただ、3Dっぽく動くとしたら、「どうなるのか想像しなくてはならず、デッサン力が求められる」ので注意が必要とのこと。
 
最後に、スマホのゲームは、表示する画面が小さいことを考慮し、動きをやや大げさにする必要があること、そして、ボーンやメッシュを使ったやわらかな表現や3D変換のようなことをすることでLive2Dを上回るアニメーション表現も可能になるかもしれない、と述べて講演を締めくくった。