CEDEC2014 内で9月2日(火)に行われたレギュラーセッション「ヘキサドライブ流　OPTPiX SpriteStudio の最適化術！」で使用したスライド資料です。 株式会社ヘキサドライブ http://hexadrive.jp/ OPTPiX SpriteStudio http://www.webtech.co.jp/spritestudio/ 株式会社ウェブテクノロジ http://www.webtech.co.jp/

1. ヘキサドライブ流
OPTPiX SpriteStudio 最適化術！
with

2. 自己紹介（脇役）
浅井 維新（Asai Yukiyoshi）
株式会社ウェブテクノロジ・コム
セールス＆コミュニケーション部
『OPTPiXシリーズ』のマーケティングとセールスを担当。
最近、自宅にアーケード筐体（ブラストシティ）を導入、これを機会に
カプコンさんの『19XX（待てど暮らせど移植されない）』の基板を
購入したい所存。

3. セッションの中身
❏ あらすじ
❏ 本編
❏ ヘキサドライブ流
OPTPiX SpriteStudio 最適化術
❏ OPTPiX SpriteStudio 近況報告＋
❏ Ver.5.4
❏ SS5 SDK + CaseStudies
❏ OPTPiX SpriteStudio Friendship

4. 時は2013年の初秋。ユーザーからの要望に応える為、
SpriteStudio開発チしあかし、ら増え続すけるじ
ームは、日夜開発に取り組んでいた。
Unity、急拡大したCocos2d-xユーザーからの
問合せに開発チームのサポートコストも増大。
SpriteStudio本体の開発進捗に影響が出るレベルにまで達していた。
そんな時、ヘキサドライブからUnity併用に関しての問合せが。
『すわ、ヘキサドライブもUnityを？』
Unity併用時の問題は切り分けが難しい。しかしヘキサドライブは
たった１通の返信だけで問題を解決した模様。
『流石、ヘキサドライブ・・・！』
それから数週間後、またヘキサドライブから今度はCocos2d-x併用に
関しての問合せが。
『え、両方使ってるの？』
今度もやはり、１通の返信だけで無事に問題を解決した模様。
『流石、ヘキサドライブ・・・ッ！』

5. 本編

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

7. ヘキサドライブとは
 株式会社ヘキサドライブ
 ２００７年２月設立
 本社大阪開発、東京開発
 社員数約６０名

8. ヘキサドライブとは
 開発実績
 The 3rd Birthday (PSP:株式会社スクウェア・エニックス)
 METAL GEAR SOLID SNAKE EATER 3D
(3DS:株式会社コナミデジタルエンタテインメント)
 大神絶景版(PS3:株式会社カプコン)
 ZONE OF THE ENDERS HD EDITION
(PS3:株式会社コナミデジタルエンタテインメント)
 etc...

9. ヘキサドライブとは
移植屋じゃないです！

10. 講演者紹介
 奥田仁一郎Jin-ichiro Okuda
 SEGA
 Crazy Taxi (physics)
 WCCF (chief programmer)
 HEXADRIVE
会社行くよ～
帰るよ～
ウォーキング中
 The 3rd Birthday (lead programmer)
呑むよ～

11. 拡散性ミリオンアーサー
 スマートフォン用のゲームアプリ
 100万人のアーサー王と100万本の
エクスカリバーが存在する世界で
プレイヤーがアーサー王の一人と
なって戦うファンタジーRPG
 販売：スクウェア・エニックス
©2012,2013 SQUARE ENIX CO., LTD. All Rights Reserved.

12. タイトル概要
 基本無料、アイテム課金
 カードバトルタイプのソーシャルゲーム
 ｉＯＳ・Ａｎｄｒｏｉｄ両対応
 ネイティブアプリ
 ２Ｄ表示のみ
 Ｖｉｔａ版もあるが本件とは直接関係ありません
©2012,2013 SQUARE ENIX CO., LTD. All Rights Reserved.

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

14. ミッション
 クライアントアプリのバージョンアップ
 サーバーは変更しない
 基本的にはベタ移植
 アップデートを容易にする
 出来ればＶｉｔａ版にある揺れに対応したい
 アセットワークフローの改善
 旧開発会社内製のアニメーションツールからの脱却

15. 構成
 オリジナル
 OpenGLES 1.x
 独自フレームワーク
 新クライアント
 Cocos2D-X
 CocosBuilder
 SpriteStudio

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

17. 問題になったところ
 レイヤー化
 二つの環境を総合的に管理することをあきらめた
 レイヤー指定はプログラマーがハードコーディング
 アーティストが口頭で指示ｗ
SpriteStudio
CocosBuilder

18. 問題になったところ
 情報の欠落
 ループ等の設定がコンバート後、データから欠落していた
 文字列対応
 ダメージの数字、スキル名などの文字列への対応が無い
 ユーザーデータで対応
 情報をユーザーデータに格納して対応
 ユーザーデータが文字列しか対応してないとか不備が多い

19. 問題になったところ
 ランタイムの処理が重い
 本セッションのメインディッシュ

20. ＳＳプレイヤーの最適化（ＣＰＵ）
毎フレームSpriteが生成されていた
事前に生成するよう変更
軽量化！！

21. 何か重い
ＰＣだと平気だが実機だと重い
表示物も少ない単純なシーンでも重い
描画面積じゃね？

22. スマホあるある
コンシューマに迫るＧＰＵスペック
フルＨＤ以上の解像度！？
解像度とスペックのバランスが悪い
表示面積がネックになる事が多い

23. じゃぁ、我々のタイトルは？
表示面積がネックになってそう
いやいや、オリジナルと同じモノしか出してないし
そもそもオリジナルは余裕で表示できてるよ！？
SpriteStudioが最適化されていないΣΣ(ﾟдﾟlll)

24. ＳＳプレイヤーの最適化（ＧＰＵ）
 ピクセル（フラグメント）シェーダーに分岐処理が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;

25. ＳＳプレイヤーの最適化（ＧＰＵ）
 アルファブレンドと加算ブレンドしか使っていない
 特化する事で分岐を排除
 それ以外の表現を使うと再現されない

26. ＳＳプレイヤーの最適化（ＧＰＵ）
 フル機能使っている場合は？
 データ構造を見直すべき
 データを見直せなくてもＣＰＵで事前計算可能
 最悪バーテックスシェーダーで処理

27. ダイコン王の野望ッッッン!!
 ダイコンの！ダイコンによる！
ダイコンのためのダイコンゲーム！
 スマートフォン用のゲームアプリ
 ヘキサドライブオリジナルタイトル
Copyright © 2014 HEXADRIVE Inc.

28. タイトル概要
 画面は開発中のものです
 多くのキャラクターが動き回る
タワーオフェンス型のゲーム
 各キャラクターは１０～４５の
パーツで構成されていて多彩
なアニメーションをする
 ２Ｄ表示のみ
Copyright © 2014 HEXADRIVE Inc.

29. 構成
 Unity
 NGUI
 SpriteStudio

30. ＳＳプレイヤーの最適化（ＣＰＵ）
ＧＣによる強烈なスパイク
とにかくランタイム内のNewが多いorz
Newの撤廃

31. ＳＳプレイヤーの最適化（ＣＰＵ）
初回フレームの処理負荷が高い
(ﾟдﾟ)Σ ２回呼ばれている！！
ロジックの見直し

32. ＳＳプレイヤーの最適化（ＣＰＵ）
アニメーション更新処理が重い
とにかく呼び出し関数が多い
各パラメータ参照のオーバーヘッド見直し
パラメータのキャッシュ化やロジックの最適化

33. ＳＳプレイヤーの最適化（ＣＰＵ）
アニメーション参照処理負荷が高い
(ﾟдﾟ)Σ 総当りで文字列比較してる！！
初期化時にインデックス化

34. ＳＳプレイヤーの最適化
 他にも…
 使用しない機能はバンバンカット
 コリジョン判定処理
 サブアニメーション機能
 etc...

35. 要望
 Editorで出力したファイルをprefab化する機能が欲しい
 作っちゃったYO
 Drawcallが多くなる
 自動でアトラス化とか欲しいなぁ～

36. 要望
 アーティストが仕様を守ってくれない(^^;
 プロジェクト毎にデフォルトや機能のマスクを定義して配布
できる仕組みが欲しい！
実はできるらしい…orz

37. ＳＳプレイヤーの最適化まとめ
 最適化はされていない！
 とりあえず動く状態だと思え
 凝ったゲームを作ろうとすると最適化が必要

38. GitHub
 オープンソース
 https://github.com/SpriteStudio
みんなで最適化してアップしてよ
って事らしいです

39. 質疑応答

40. ご清聴ありがとうございました

41. ウェブテクノロジから補足
❏ SSPlayer for Unity / Cocos2d-x
❏ SpriteStudio Ver.4 世代の機能・表現・ファイル形式に準拠
❏ SS5Player for xxx
❏ OPTPiX SpriteStudio(Ver.5) の機能・表現・ファイル形式に準拠
❏ 現在開発中の以下の SS5Player は SS5 SDK 由来
❏ SS5Player for Cocos2d-x
❏ SS5Player for UnrealEngine4
❏ SS5Player for ParadoxEngine
❏ SS5Player については公式Updateを継続
❏ ・・・しますが、最適化はDIYで！

42. SpriteStudio 近況報告＋
2014/1：Ver.5.2
・アニメーションのリサイズ機能
>Retina他、解像度別の「つくりわけ」に対応
2014/5：Ver.5.3
・インスタンス機能
>複雑なシーンの構築、アニメーション構成パーツの細分化に対応
・ラベル機能
>外部からのコントロール性向上
2014/x：Ver.5.4

43. SpriteStudio Ver.5.4
～動画出力～
社内外でのデータ確認をかんたんに
プロモーション素材の作成に
『CRI Sofdec2』に
❏ 出力形式：".avi"（無圧縮、αチャンネル保持）
❏ フレームレート（30 / 60 / 59.94）
❏ 作成したアニメーションリソースの「手軽な共有」

44. SpriteStudio Ver.5.4
～2Dパーティクル～
ランダム性のあるエフェクトに
手付けの難しい自然表現をフォロー
コマアニメーション化も可能
❏ キーフレームアニメーションとパーティクルの同時編集
❏ インスタンス機能と併用で、キーフレームアニメーションと融合
❏ Cocos2d-x / Shuriken との互換を意識

45. SpriteStudio 近況報告＋
2014/1：Ver.5.2
・アニメーションのリサイズ機能
>Retina他、解像度別の「つくりわけ」に対応
2014/5：Ver.5.3
・インスタンス機能
>複雑なシーンの構築、アニメーション構成パーツの細分化に対応
・ラベル機能
>外部からのコントロール性向上
2014/秋：Ver.5.4
・動画出力機能
>社内外のデータ共有、プロモーション素材の作成に対応
・2Dパーティクル機能
>ランダムエフェクト、自然表現作成時のフォロー

46. SS5 SDK

47. SS5 SDK
❏ SDKの構成：
❏ Loader：SpriteStudio5 形式 (sspj、ssae、ssce）の
読み込みモジュール
❏ Animator：座標変換、補間計算用
アニメーションモジュール
❏ Drawer：OpenGL を利用した描画モジュール
❏ DirectX対応進行中
❏ Viewer：Win / Mac用サンプル（実行形式）
❏ Converter：他の形式への変換用ライブラリ

49. SS5 SDK
Case 1：Cocos2d-x
❏ SS5Player for Cocos2d-x
❏ 旧SSPlayer for Cocos2d-xの後継・改良版
❏ SS5世代から追加された新機能に追従
❏ Cocos2d-x Ver.2.x系 ～ Ver.3.x系両対応

51. SS5 SDK
Case 2：UnrealEngine4
❏ SS5Player for UnrealEngine4
❏ インポート→アセット形式自動変換
❏ プラグイン型Player
❏ 開発は株式会社ヒストリア

53. SS5 SDK
Case 3：ParadoxEngine
❏ ParadoxEngine
❏ オープンソース（C#）
❏ GUIベース
❏ http://paradox3d.net/
❏ SS5Player for ParadoxEngine
❏ 開発はシリコンスタジオ株式会社

55. SS5 SDK
Case 4：Unity2D
❏ SS5Converter for Unity2d
❏ 某ゲームの開発中に作ったUnityスクリプト
❏ 某ゲームの事前登録
http://goo.gl/ZB1Xqm
❏ ".sspj"をUnity2Dの形式に変換
❏ GitHubで配布を予定

57. SS5 SDK
Case 5：DSP Anime
❏ DSP Anime for SpriteStudio
❏ SpriteStudio の出力データからサウンドエフェクトを自動生成
❏ 出力形式：".wav" / ".mp3" / ".aiff" / ".ogg" 等
❏ ゲームオーディオミドルウェアとも連携
❏ 開発はtsugi合同会社

58. ここまでのまとめ
❏ OPTPiX SpriteStudio Ver.5.4
❏ 2014/秋：β版～正式版リリース予定
❏ SS5 SDK CaseStudies
❏ SS5Player for Cocos2d-x
❏ https://github.com/SpriteStudio
❏ SS5Player for UnrealEngine4
❏ SS5Converter for Unity2D
❏ 公開方法検討中（乞うご期待！）
❏ SS5Player for ParadoxEngine
❏ http://paradox3d.net/
❏ DSP Anime for SpriteStudio
❏ http://www.tsugi-studio.com/?lang=ja

59. クリエイターとクライアントを結ぶ

60. ヘキサドライブ流
OPTPiX SpriteStudio 最適化術！
with
ご静聴ありがとうございました。