cedec2014 spritestudio
DESCRIPTION
ヘキサドライブ流 OPTPiX SpriteStudio の最適化術! CEDEC2014での講演資料TRANSCRIPT
![Page 1: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/1.jpg)
ヘキサドライブ流 OPTPiX SpriteStudio の最適化術!
![Page 2: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/2.jpg)
自己紹介
![Page 3: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/3.jpg)
ヘキサドライブ
株式会社ヘキサドライブ 2007年2月設立
本社 大阪開発、東京開発
社員数 約60名
![Page 4: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/4.jpg)
ヘキサドライブ 開発実績 The 3rd Birthday (PSP)
株式会社スクウェア・エニックス
METAL GEAR SOLID SNAKE EATER 3D (3DS)株式会社コナミデジタルエンタテインメント
大神 絶景版 (PS3)株式会社カプコン
ZONE OF THE ENDERS HD EDITION (PS3)株式会社コナミデジタルエンタテインメント
MONSTER HUNTER PORTABLE 2nd G for iOS (iOS)株式会社カプコン
etc...
![Page 5: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/5.jpg)
ヘキサドライブ
移植屋じゃないです!
![Page 6: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/6.jpg)
講演者紹介
奥田仁一郎 Jin-ichiro Okuda
SEGA
Crazy Taxi (physics)
WCCF (chief programmer)
etc...
HEXADRIVE
The 3rd Birthday (lead programmer)
会社行くよ~
帰るよ~
ウォーキング中
呑むよ~
![Page 7: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/7.jpg)
拡散性ミリオンアーサー
![Page 8: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/8.jpg)
拡散性ミリオンアーサー
スマートフォン用のゲームアプリ
100万人のアーサー王と100万本のエクスカリバーが存在する世界でプレイヤーがアーサー王の一人となって戦うファンタジーRPG
販売:スクウェア・エニックス
©2012,2013 SQUARE ENIX CO., LTD. All Rights Reserved.
![Page 9: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/9.jpg)
タイトル概要
基本無料、アイテム課金
カードバトルタイプのソーシャルゲーム
iOS・Android両対応
ネイティブアプリ
2D表示のみ
Vita版もあるが本件とは直接関係ありません©2012,2013 SQUARE ENIX CO., LTD. All Rights Reserved.
![Page 10: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/10.jpg)
経緯
新しい運営・開発会社がローンチの会社から運営・開発を引き継いだ
新しい要素を追加する事が困難
テコ入れしたいが、運営維持で手が回らない
ヘキサドライブがお手伝い
![Page 11: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/11.jpg)
ミッション
クライアントアプリのバージョンアップ サーバーは変更しない
基本的にはベタ移植
アップデートを容易にする
出来ればVita版にある揺れに対応したい
アセットワークフローの改善 旧開発会社内製のアニメーションツールからの脱却
![Page 12: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/12.jpg)
構成
オリジナル OpenGLES 1.x
独自フレームワーク
新クライアント Cocos2D-X
CocosBuilder
SpriteStudio
![Page 13: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/13.jpg)
CocosBuilder と SpriteStudio の組み込み
サンプル通りやれば両方簡単に組み込めた
Spriteクラスをそれぞれ継承するので共存できる
出すだけなら簡単!
![Page 14: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/14.jpg)
問題になったところ
レイヤー化 二つの環境を総合的に管理することをあきらめた
レイヤー指定はプログラマーがハードコーディング
アーティストが口頭で指示w
SpriteStudioCocosBuilder
![Page 15: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/15.jpg)
問題になったところ
情報の欠落 ループ等の設定がコンバート後、データから欠落していた
文字列対応 ダメージの数字、スキル名などの文字列への対応が無い
ユーザーデータで対応 情報をユーザーデータに格納して対応
ユーザーデータが文字列しか対応してないとか不備が多い
![Page 16: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/16.jpg)
問題になったところ
ランタイム(SSプレイヤー)の処理が重い 本セッションのメインディッシュ
![Page 17: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/17.jpg)
SSプレイヤーの最適化(CPU)
毎フレームSpriteが生成されていた
事前に生成するよう変更
軽量化!!
![Page 18: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/18.jpg)
何か重い
PCだと平気だが実機だと重い
表示物も少ない単純なシーンでも重い
描画面積じゃね?
![Page 19: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/19.jpg)
スマホあるある
コンシューマに迫るスペック
解像度とスペックのバランスが悪い
フルHD以上の解像度!?
表示面積がネックになる事が多い
![Page 20: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/20.jpg)
じゃぁ、我々のタイトルは?
表示面積がネックになってそう
いやいや、オリジナルと同じモノしか出してないし
SpriteStudioが最適化されていないΣΣ(゚д゚lll)
そもそもオリジナルは余裕で表示できてるよ!?
![Page 21: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/21.jpg)
SSプレイヤーの最適化(GPU)
ピクセル(フラグメント)シェーダーに分岐処理がorz
vec4 pixel = texture2D(u_texture, v_texCoord);
float rate = v_fragmentColor.a;
vec4 blend = v_fragmentColor * rate;
int selecter = u_selector;
vec4 _blend = (selecter == 3) ? -blend : blend;
vec4 _color = (selecter <= 1) ? pixel * (1.0 -rate) : pixel;
_color+=(selecter==1) ? (pixel * blend) : _blend;
pixel.rgb = _color.rgb ;
pixel *= u_alpha;
gl_FragColor = pixel;
![Page 22: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/22.jpg)
SSプレイヤーの最適化(GPU)
ミックス
乗算
加算
減算
ポリゴン
テクスチャ
![Page 23: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/23.jpg)
SSプレイヤーの最適化(GPU)
特化する事で分岐を排除 アルファブレンドと加算ブレンドしか使わない
カラーブレンドは乗算のみ
それ以外の表現を使うと再現されない
![Page 24: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/24.jpg)
SSプレイヤーの最適化(GPU)
ミックス
乗算
加算
減算
ポリゴン
テクスチャ
![Page 25: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/25.jpg)
SSプレイヤーの最適化(GPU)
フル機能使っている場合は?
![Page 26: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/26.jpg)
SSプレイヤーの最適化(GPU)
ミックス
乗算
加算
減算
カラー
テクスチャ
mul add
![Page 27: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/27.jpg)
SSプレイヤーの最適化(GPU)
フル機能使っている場合は? データ構造を見直すべき
データを見直せなくてもCPUで事前計算可能
最悪バーテックスシェーダーで処理
![Page 28: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/28.jpg)
ダイコン王の野望ッッッン!!
![Page 29: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/29.jpg)
ダイコン王の野望ッッッン!!
ダイコンの!ダイコンによる!
ダイコンのためのダイコンゲーム!
スマートフォン用のゲームアプリ
ヘキサドライブオリジナルタイトル
Copyright © 2014 HEXADRIVE Inc.
![Page 30: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/30.jpg)
タイトル概要
画面は開発中のものです
多くのキャラクターが動き回るタワーオフェンス型のゲーム
各キャラクターは10~45のパーツで構成されていて多彩なアニメーションをする
2D表示のみCopyright © 2014 HEXADRIVE Inc.
![Page 31: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/31.jpg)
構成
Unity
NGUI
SpriteStudio
![Page 32: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/32.jpg)
SSプレイヤーの最適化(CPU)
GCによる強烈なスパイク
Newの撤廃
とにかくランタイム内のNewが多いorz
![Page 33: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/33.jpg)
SSプレイヤーの最適化(CPU)
初回フレームの処理負荷が高い
ロジックの見直し
(゚д゚)Σ 2回呼ばれている!!
![Page 34: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/34.jpg)
SSプレイヤーの最適化(CPU)
とにかく呼び出し関数が多い
各パラメータ参照のオーバーヘッド見直し
アニメーション更新処理が重い
パラメータのキャッシュ化やロジックの最適化
![Page 35: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/35.jpg)
SSプレイヤーの最適化(CPU)
アニメーション参照処理負荷が高い
初期化時にインデックス化
(゚д゚)Σ 総当りで文字列比較してる!!
![Page 36: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/36.jpg)
SSプレイヤーの最適化
他にも… 使用しない機能はバンバンカット
コリジョン判定処理
サブアニメーション機能
etc...
![Page 37: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/37.jpg)
まとめ
![Page 38: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/38.jpg)
SSプレイヤーの最適化まとめ
最適化はされていない!
とりあえず動く状態だと思え
凝ったゲームを作ろうとすると最適化が必要
![Page 39: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/39.jpg)
要望
Editorで出力したファイルをprefab化する機能が欲しい 作っちゃったYO
Drawcallが多くなる 自動でアトラス化とか欲しいなぁ~
![Page 40: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/40.jpg)
要望
アーティストが仕様を守ってくれない (^^; プロジェクト毎にデフォルトや機能のマスクを定義して配布
できる仕組みが欲しい!
実はできるらしい…orz
![Page 41: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/41.jpg)
GitHub
オープンソース
https://github.com/SpriteStudio
って事らしいです
みんなで最適化してアップしてよ
![Page 42: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/42.jpg)
質疑応答
![Page 43: CEDEC2014 SpriteStudio](https://reader034.vdocuments.mx/reader034/viewer/2022042816/55895849d8b42ad0638b4686/html5/thumbnails/43.jpg)
ご清聴ありがとうございました