【CEDEC 2014】「ヘキサドライブ流 OPTPiX SpriteStudio の最適化術！」レポート

ヘキサドライブ流　OPTPiX SpriteStudio の最適化術！

http://cedec.cesa.or.jp/2014/session/ENG/11518.html

ある日を境に急に快適になった、と話題の『拡散性ミリオンアーサー』の縁の下には、
ヘキサドライブ（と OPTPiX SpriteStudio）の影が！
クライアント、それにオーサリングツールをまるまる入れ替えるという再始動のエピソード。
Unity・Cocos2d-x など複数のゲームエンジンをまたいで利用するツールとして、
OPTPiX SpriteStudio が採用されたお話をご紹介いたします。

SpriteStudio

http://www.webtech.co.jp/spritestudio/

あらすじ

現状、SpriteStudioと併用しているゲームエンジンは
Unityが5割
Cocos2d-xが4割

拡散性ミリオンアーサー

http://www.square-enix.co.jp/smart/ma/

基本無料、アイテム課金
カードバトルタイプのソーシャルゲーム
iOS,Android量対応
ネイティブアプリ
2Dのみ
Vita版もあるが本件とは直接関係ありません

ヘキサドライブが開発をお手伝いするにあたった経緯

新しい運営・開発会社がローンチの会社から運営・開発を引き継いだ
↓
新しい要素を追加する事が困難
↓
テコ入れしたが、運営維持で手が回らない
↓
ヘキサドライブがお手伝い

ヘキサドライブのミッション

クライアントアプリのバージョンアップ

• サーバーは変更しない（バグが混入するリスクが存在する）
• クライアントは基本的にはベタ移植（もともとのCLでできることはできるようにする）
  • 機能的に同等であることを求められた
• 快適性の向上、クオリティアップ
• アップデートを容易にする
  • できればVita版にある揺れに対応したい

アセットワークフローの改善

• 旧開発会社内製のアニメーションツールからの脱却
  • ツールボックス自体がブラックボックス化していて使い方がわからない
• 新しくシーンを作るとか新しい要素を入れるとかが困難

拡散性ミリオンアーサーのクライアントアプリの構成

オリジナル

• OpenGLES 1.x
• 独自フレームワーク

新クライアント

• Cocos2D-X
• CocosBuilder
• SpriteStudio

CocosBuilderとSpriteStudioの組み込み

サンプル通りやれば両方簡単に組み込めた
Spriteクラスをそれぞれ継承するので共存
出すだけなら簡単

問題になったところ

レイヤー化

• SpriteStudioとCocosBuilderのレイヤーの挟み込みをどうするか
• 二つの環境を総合的に管理する事をあきらめた
• レイヤー指定はプログラマーがハードコーディング
• アーティストが口頭で指示

情報の欠落

• ループなどの設定がコンバート後、データから欠落していた

文字列対応

• ダメージの数字、スキル名などの文字列への対応が無い
• キャラクターのアニメーションに特化しているツールだから

↓

ユーザーデータで対応

• 情報をユーザーデータに格納して対応
• ユーザーデータが文字列しか対応してないとか不備が多い

ランタイム(SSプレイヤー)の処理が重い

• 本セッションのメインディッシュ

SSプレイヤーの最適化(CPU)

毎フレームSpriteが生成されていた！
↓
事前に生成するように変更
↓
軽量化

何か重い

PCだと平気だが実機だと重い
↓
表示物も少ない単純なシーンでも重い
↓
描画面積？

スマホあるある

コンシューマに迫るスペック
↓
フルHD以上の解像度
↓
解像度とスペックのバランスが悪い
スマートフォンでPS3同等の出力が求められる
↓
表示面積がネックになる事が多い

我々のタイトルは？

表示面積がネックになってそう
↓
いやいや、オリジナルと同じモノしか出してないし
↓
そもそもオリジナルは余裕で表示できている
↓
SpriteStudioが最適化されていない！

SSプレイヤーの最適化(GPU)

ピクセル(フラグメント)シェーダーに分岐処理が！

selecter == 3
selecter <= 1
selecter == 1

ポリゴンの色とテクスチャの色を計算して出力するのがピクセルシェーダー
ミックスはポリゴンの色とテクスチャの色を混ぜる
乗算はポリゴンの色とテクスチャの色を掛け合わせる
加算はポリゴンの色とテクスチャの色を足す
減算はポリゴンの色からテクスチャの色を引く
上記の分岐処理はこれをやっている

特化する事で分岐を排除

• アルファブレンドと加算ブレンドしか使わない
• カラーブレンドは乗算のみ
• それ以外を使うと再現できない

フル機能使っている場合は？

• 乗算情報(mul)と加算情報(add)にわける
• データ構造を見直すべき
• データを見直せなくてもCPUで事前計算可能
• 最悪バーテックスシェーダーで処理
  • ピクセルシェーダーの分岐処理をバーテックスシェーダーに移動する

ダイコン王の野望ッッッン!!

http://daikooon.jp/

スマートフォン用のゲームアプリ
ヘキサドライブオリジナルタイトル
多くのキャラクターが動き回るタワーオフェンス型のゲーム
各キャラクターは10〜45のパーツで構成されていて多彩なアニメーションをする
2D表示のみ

構成

• Unity
• NGUI
• SpriteStudio

SSプレイヤーの最適化(CPU)

ガベージコレクションによる強烈なスパイク
↓
ランタイム内のNewが多い
↓
Newの撤廃

初回フレームの処理負荷が高い
↓
2回呼ばれている
↓
ロジックの見直し

アニメーション更新処理が重い
↓
とにかく呼び出し関数が多い
↓
各パラメータのオーバーヘッド見直し
↓
パラメータのキャッシュ化やロジックの最適化

アニメーション参照処理負荷が高い
↓
総当たりで文字列比較してる
↓
初期化時にインデックス化

他にも・・・

• 使用しない機能はバンバンカット！
  • コリジョン判定処理
  • サブアニメーション機能

まとめ

SSプレイヤー最適化まとめ

• 最適化はされていない
• とりあえず動く状態だと思え
• 凝ったゲームを作ろうとすると最適化が必要

要望

Editorで出力したファイルをprefab化する機能が欲しい

• ヘキサドライブは作った

DrawCallが多くなる

• 自動でアトラスかとか欲しい

アーティストが仕様を守ってくれない

• プロジェクトごとにデフォルトや機能のマスクを定義して配布できる仕組みが欲しい
  • 実はできる

GitHub

SpriteStudioはオープンソース
https://github.com/SpriteStudio

質疑応答

• 拡散性ミリオンアーサーの作り直しの期間は？
  • 3ヶ月で移植
• メンバー規模
  • 5人（クライアント改修メンバー数）
• UnityとNGUIとSpriteStudioのレイヤー分け
  • それぞれZ値が統合されていて特に気にする必要がなかった
• Unityは2Dアニメーションデフォルトを使うことは考慮しなかった？
  • 大根はすでに開発が進んでいた状態なのでSpriteStudioのままで

SpriteStudio近況報告

• 2014/1
  • アニメーションのリサイズ機能
    • Retina他、解像度別の作り分けに対応
• 2014/5
  • インスタンス機能
    • 複雑なシーンの構築、アニメーション構成パーツの細分化に対応
  • ラベル機能
    • 外部からのコントロール性向上