OPTPiX SpriteStudio 採用事例
「初めての挑戦」づくしでアバター・コミュニケーション・サービスを開発「PocoTown」の開発にOPTPiX SpriteStudio が担った役割ビヨンド株式会社「PocoTown」
フィーチャーフォンからスマートフォンへの移行が急速に進む国内市場。産業構造も大きく変化しつつあります。
「マルチプラットフォーム開発に対応したゲームエンジンの普及」と「ゲーム業界以外の企業によるアプリ＆サービス開発の拡大」は、その中でも代表的なものでしょう。
ビヨンド株式会社が2014年4月からAndroid 向けにサービスを開始、8月にはiOS 向けサービスの開始も予定しているアバター・コミュニケーション・サービス「PocoTown(ポコタウン)」も、その一つです。顔やファッション、部屋のインテリアまで、さまざまなパーツをカスタマイズでき、組み合わせ方は100億種類以上。アバターごとに12種類の感情を表現でき、スタンプ感覚で使用することもできます。Facebook などと異なり、匿名性によるサービスなので、利用者の年齢層が幅広く、思いがけない交流が発生する点も特徴です。
本プロジェクトの開発には、ゲームエンジン部分にUnity、サーバインフラにAmazon Web Service (AWS)、アバターのアニメーション作成にOPTPiX SpriteStudio(以下、SpriteStudio) が使用されています。開発はエンジニアチームのうち、クライアント側で4名、サーバ側で2名のチームからスタートし、後にデザイナーチームが合流。ピーク時で15～6名の体制となり、ローンチまでに9ヶ月程度かかりました。
もっとも同社はデコメ絵文字アプリの「エモジバ」をはじめ、コミュニティ向けのサービスを中心に展開しており、いわゆる「ゲーム的な」アプリの開発経験は、ほとんどありませんでした。クライアント側がUnity を使用するのも初めてで、デザイナーチームの中にはFlash すら使用したことがないメンバーもいたほどです。こうした「初めてづくし」の開発で、ツールがどのように貢献したか、お話を伺いました。
直感的に使用できたことと、Unity用のアセットプログラムが公開されていたことが導入の決め手
もともと「プラットフォームになり得るサービスを作る」という目標で企画がスタートした本プロジェクト。スマートフォンにおける競合が少なかったこともあり、最終的にアバター・コミュニケーション・サービスに着地しました。ゲームエンジンの選定ではUnity とCocos2d-x が候補に挙がりましたが、
- 日本語でのドキュメント量
- 開発者コミュニティの厚み
- エンジニアがC#になれていた
――などからUnity が選ばれることに。特にクライアント側に「Unity を使ってみたい」という希望が大きかったと言います。
あわせてキャラクターアニメーション用のツールも選定が進みました。前述の通り、Flash の未経験者もいたことから、選定は文字通りゼロベースから行われ、OPTPiX SpriteStudio に白羽の矢が立つことに。
ビヨンド株式会社 松瀬 弘樹氏 クライアント側エンジニアの松瀬 弘樹氏は「直感的に使用でき、学習コストが低かったこと」と、「SpriteStudio Player for Unity（以下、SSPlayer for Unity）」（SpriteStudio で作成したアニメーションデータをUnity上で再生・制御するアセットプログラム）が、Unity のAssetStore で公開されていたことが、導入の決め手になったと語りました。
もっとも、Unityでアバター・コミュニケーション・サービスを開発すると聞くと、疑問点が浮かぶエンジニアがいるかもしれません。この手のサービスは、大量のパーツの組み合わせで画面が表示されています。一方、Unity で何度もオブジェクトを表示させると、いわゆる「ドローコール問題」が発生し、動作が非常に重たくなってしまうからです。
松瀬氏はこれを「必要なテクスチャをアトラスにパッキングして回避した」と語りました。本作ではアバターは1024×1024ピクセル、インテリアは2048×2048ピクセルのアトラスにパッキングされ、必要最小限度のドローコールで表示しています。これにより10～15フレーム程度でアバターをアニメーションさせられるようになりました。実際に操作してみると、大量のオブジェクトと相まって、フレームレート以上の表現力が感じられます。
オープンソースのSSPlayer for Unityを、仕様にあわせてカスタマイズして活用
ただし、思いがけないトラブルも発生しました。本作のようなアバター・コミュニケーション・サービスの開発では、ユーザーが任意でいわゆる「きせかえ」をすることができるのが魅力。ところが、AssetStore に公開されている「SSPlayer for Unity」のデフォルト状態のコードでは、「きせかえ」のための動的なパーツ差し替えが、機能として実装されていなかったのです。これは、プロジェクト自体の成否にも関係してきます。
しかし、SSPlayer for Unity がオープンソースで提供されていた点が功を奏しました。本作では衣服などのアイテムが複数のパーツで構成され、それぞれにユニークIDがふられて、アセットバンドルとしてサーバーに格納されています。これがアバターの状態にあわせてクライアント側に呼び込まれ、アセットバンドルが展開され、その画像をアトラスにパッキングしています。その上でSSPlayer for Unity のクラス内で、パーツごとにUV 値が設定され、アニメーションデータとして再生される・・・という構造をとっています。
クリックで大きい画像を別ウィンドウで表示そこで「きせかえ」モードではパーツを変更するたびに、変更するパーツ部分のUV値を書き換えるように、SSPlayer for Unity のソースコードが改造されました。その上で「完了」ボタンを押すと、改めて一枚のアトラスにパッキングし直されるという仕組みです。ドローコールが非常に多くなりますが、この場面ではアバターをアニメーションさせる必要がないため、この措置は有効でした。ウェブテクノロジの浅井 維新氏からも「SS Player for Unity をどんどん改造して、自分たちの用途に合うように活用して欲しい」とコメントされました。
もっとも、このやり方ではクライアント上でパーツのグラフィックデータを展開する際に、メモリを消費しがちです。現在は問題ありませんが、将来においてはわかりません。そのため、今後は「きせかえ」の処理をすべてサーバ上で行い、サーバ側でアトラスをパッキングして、クライアント側に転送する仕組みも検討されています。
また、SpriteStudio ではアニメーションデータが収納されるXMLファイルに、ユーザーデータ領域が設定されており、任意の文字列を設定できます。これにより、アバターの動きにあわせてフラグを設定し、プログラム側で読み取って、アニメーションの切り替えなどを行うことが可能です。
本作においても、アバターがベッドに横たわる際に、ベッドに近づいたタイミングで掛け布団を消し、アバターが横たわったところで掛け布団を表示する、などの演出が行われています。こうした演出が簡単にできるのも、SpriteStudio ならではと評されました。
1,300個に及ぶデータを目検！ でも実は・・・
一方でサーバ側では、また違った問題が発生しました。前述の通り、本サービスではアバターが泣いたり、笑ったりと、多彩な感情表現を見せる点が特徴です。この表情はアバターのアニメーションデータにもとづいて作成されています。
もっとも、SpriteStudio におけるアニメーションデータは、パラパラアニメのようにフレーム毎の画像データが存在するわけではなく、パーツごとの動きのデータで指定されています。そのため、標準の状態では個々の画像をフレーム数などで指定することができず、エンジニアが複雑な計算を行ってエクスポートする必要があるのです。
ビヨンド株式会社 皆木 佳氏 サーバエンジニアの皆木 佳氏は「当初は計算で出力しようとしたが、うまくいかず、目視で全データを指定した」と語ります。必要なデータ数は約1300個にもおよび、丸二日かかりました。アニメーションデータの画像サイズが変更になるなど、仕様が二転三転したため、そのたびに目視でデータベースの修正も行ったと言います。
ただし、本サービスの開発中に、これを手軽に実施する機能が加わりました。GitHub に公開されているSpriteStudio 向けの補助ツール類とSDK、SpriteStudio 5 SDK です。この中にはアニメーションデータをベイクした状態で出力できるツールがあります。これを使用すれば、「特定キャラクターの、何フレーム目の画像データ」という指定が簡単にできるのです。
もっともツールはC#ではなく、C++で記述されている点がネック。それでも皆木氏は「C++の学習コストを払ってでも、このツールを活用すれば良かった。目視による力業で作業が完結してしまったため、サポートに問い合わせる発想がなかった」と語りました。
これらのアップデート情報は現在、メールニュースを中心に通知されています。ただし本件のように「開発サイドでの見落とし」が発生しがちなのも事実。浅井氏からも、SNS なども活用し積極的に告知を進めていくので、注目してもらいたいと述べられました。
Flash を触ったことがないのに、数十分のレクチャーでアニメーションを作れるようになった
最後になりましたが、OPTPiX SpriteStudio で実際にアニメーションデータを作成した、デザイナー側の声もご紹介しましょう。中山乃菜さんもその一人。プロデューサーでしたが、スタッフが不足していたため、急遽デザイナーとして活躍することになりました。「それまでFlash すら触ったことがなかった」ほどでしたが、数十分のレクチャーでアニメーションが作れるようになったと語ります。
ビヨンド株式会社 中山 乃菜氏 Illustrator でパーツをデザインし、アトラスにパッケージングしてSpriteStudio に読み込み、アニメーションデータを作成して、クライアント側のエンジニアに渡す・・・これが主なワークフローです。「最初はパラパラアニメを作るものだとばかり思っていたので、フレームの補完機能に感動しました」という中山さん。もっとも、Flash の使用経験者から機能不足を指摘されることもありました。マスク機能がない、などはその一つです。スポットライトなどの表現が可能になりますが、残念ながらSpriteStudio では使用することができません。
浅井氏はマスク機能については将来的な機能追加を検討していると説明しました。もっとも、SpriteStudio 上へのマスク機能追加はそれほど難しくないものの、Unity を始めとした各種プレイヤーへの対応については時間がかかるため、恐らく当初はGitHub に公開している「SpriteStudio 5 SDK」からとのことでした。今後のアップデートに期待したいところです。
またヘルプの機能充実についても要望が上がりました。中山さん自身、基礎的な機能は独学で習得したそうです。学習コストの低さを裏付けるものでもありますが、そんな中山さんでも「もっと良いやり方があるのではないか」と不安に感じることもあるそうです。中でも「軽いアニメーションデータの作り方」のノウハウに興味があると言います。
一般的に動きをつけるうえで、キーフレームの数が増えるほどデータが重くなります。いかに少ないキーフレームで魅力的な動きを見せるかは、デザイナーの腕の見せどころでしょう。しかし、なかなかヘルプ機能に盛り込みにくいのも事実。浅井氏も動画やドキュメントなどで、ノウハウを提示していきたいと語りました。
「開発する側」と「使う側」との情報共有の必要性
このように紆余曲折がありながらも、無事リリースされた「PocoTown」。
繰り返しますが「ゲームらしいゲーム開発は初めて」「Unity を使用したのも初めて」「OPTPiX SpriteStudio はおろか、Flash 未経験者も参加しての開発」という、初めてづくしの挑戦となりました。逆にツールやミドルウェア類の充実によって、こうした企業が新たに参入し、コンテンツやサービスが拡充したことは、エンドユーザーにとって歓迎すべきことでしょう。
一方でツールやミドルウェアの活用法は千差万別です。そのためサポート類の充実もさることながら、企業にとって必要な部分はクロースドにして、必要でない部分はオープンソースで公開したり、開発者コミュニティ間での情報共有が、ますます必要になっています。いわばツールやミドルウェアメーカーにとって、開発者コミュニティの育成やマネジメントが、製品の完成度と同じか、それ以上に重要になりつつあるのです。こうした採用事例レポートの公開も、そうした取り組みの一つだと言えそうです。
Text by 小野憲史(Kenji Ono)