cedec2014 セッション資料「ヘキサドライブ流 optpix spritestudio 最適化術！」

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

with

自己紹介（脇役）

浅井 維新（Asai Yukiyoshi） 株式会社ウェブテクノロジ・コム

セールス＆コミュニケーション部

『OPTPiXシリーズ』のマーケティングとセールスを担当。

最近、自宅にアーケード筐体（ブラストシティ）を導入、これを機会に

カプコンさんの『19XX（待てど暮らせど移植されない）』の基板を

購入したい所存。

セッションの中身 ❏あらすじ ❏本編 ❏ヘキサドライブ流

OPTPiX SpriteStudio 最適化術 ❏OPTPiX SpriteStudio 近況報告＋ ❏ Ver.5.4 ❏ SS5 SDK + CaseStudies ❏OPTPiX SpriteStudio Friendship

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

本編

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

ヘキサドライブとは

株式会社ヘキサドライブ ２００７年２月設立

本社 大阪開発、東京開発

社員数 約６０名

ヘキサドライブとは

開発実績 The 3rd Birthday (PSP:株式会社スクウェア・エニックス)

METAL GEAR SOLID SNAKE EATER 3D(3DS:株式会社コナミデジタルエンタテインメント)

大神 絶景版 (PS3:株式会社カプコン)

ZONE OF THE ENDERS HD EDITION(PS3:株式会社コナミデジタルエンタテインメント)

etc...

ヘキサドライブとは

移植屋じゃないです！

講演者紹介

奥田仁一郎 Jin-ichiro Okuda

SEGA

Crazy Taxi (physics)

WCCF (chief programmer)

HEXADRIVE

The 3rd Birthday (lead programmer)

会社行くよ～

帰るよ～

ウォーキング中

呑むよ～

拡散性ミリオンアーサー

スマートフォン用のゲームアプリ

100万人のアーサー王と100万本のエクスカリバーが存在する世界でプレイヤーがアーサー王の一人となって戦うファンタジーRPG

販売：スクウェア・エニックス

©2012,2013 SQUARE ENIX CO., LTD. All Rights Reserved.

タイトル概要

基本無料、アイテム課金

カードバトルタイプのソーシャルゲーム

ｉＯＳ・Ａｎｄｒｏｉｄ両対応

ネイティブアプリ

２Ｄ表示のみ

Ｖｉｔａ版もあるが本件とは直接関係ありません©2012,2013 SQUARE ENIX CO., LTD. All Rights Reserved.

経緯

新しい運営・開発会社がローンチの会社から運営・開発を引き継いだ

新しい要素を追加する事が困難

テコ入れしたいが、運営維持で手が回らない

ヘキサドライブがお手伝い

ミッション

クライアントアプリのバージョンアップ サーバーは変更しない

基本的にはベタ移植

アップデートを容易にする

出来ればＶｉｔａ版にある揺れに対応したい

アセットワークフローの改善 旧開発会社内製のアニメーションツールからの脱却

構成

オリジナル OpenGLES 1.x

独自フレームワーク

新クライアント Cocos2D-X

CocosBuilder

SpriteStudio

CocosBuilder と SpriteStudio の組み込み

サンプル通りやれば両方簡単に組み込めた

Spriteクラスをそれぞれ継承するので共存できる

出すだけなら簡単！

問題になったところ

レイヤー化 二つの環境を総合的に管理することをあきらめた

レイヤー指定はプログラマーがハードコーディング

アーティストが口頭で指示ｗ

SpriteStudioCocosBuilder

問題になったところ

情報の欠落 ループ等の設定がコンバート後、データから欠落していた

文字列対応 ダメージの数字、スキル名などの文字列への対応が無い

ユーザーデータで対応 情報をユーザーデータに格納して対応

ユーザーデータが文字列しか対応してないとか不備が多い

問題になったところ

ランタイムの処理が重い 本セッションのメインディッシュ

ＳＳプレイヤーの最適化（ＣＰＵ）

毎フレームSpriteが生成されていた

事前に生成するよう変更

軽量化！！

何か重い

ＰＣだと平気だが実機だと重い

表示物も少ない単純なシーンでも重い

描画面積じゃね？

スマホあるある

コンシューマに迫るＧＰＵスペック

解像度とスペックのバランスが悪い

フルＨＤ以上の解像度！？

表示面積がネックになる事が多い

じゃぁ、我々のタイトルは？

表示面積がネックになってそう

いやいや、オリジナルと同じモノしか出してないし

SpriteStudioが最適化されていないΣΣ(ﾟдﾟlll)

そもそもオリジナルは余裕で表示できてるよ！？

ＳＳプレイヤーの最適化（ＧＰＵ）

ピクセル（フラグメント）シェーダーに分岐処理が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;

ＳＳプレイヤーの最適化（ＧＰＵ）

アルファブレンドと加算ブレンドしか使っていない 特化する事で分岐を排除

それ以外の表現を使うと再現されない

ＳＳプレイヤーの最適化（ＧＰＵ）

フル機能使っている場合は？ データ構造を見直すべき

データを見直せなくてもＣＰＵで事前計算可能

最悪バーテックスシェーダーで処理

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

ダイコンの！ダイコンによる！

ダイコンのためのダイコンゲーム！

スマートフォン用のゲームアプリ

ヘキサドライブオリジナルタイトル

Copyright © 2014 HEXADRIVE Inc.

タイトル概要

画面は開発中のものです

多くのキャラクターが動き回るタワーオフェンス型のゲーム

各キャラクターは１０～４５のパーツで構成されていて多彩なアニメーションをする

２Ｄ表示のみCopyright © 2014 HEXADRIVE Inc.

構成

Unity

NGUI

SpriteStudio

ＳＳプレイヤーの最適化（ＣＰＵ）

ＧＣによる強烈なスパイク

Newの撤廃

とにかくランタイム内のNewが多いorz

ＳＳプレイヤーの最適化（ＣＰＵ）

初回フレームの処理負荷が高い

ロジックの見直し

(ﾟдﾟ)Σ ２回呼ばれている！！

ＳＳプレイヤーの最適化（ＣＰＵ）

とにかく呼び出し関数が多い

各パラメータ参照のオーバーヘッド見直し

アニメーション更新処理が重い

パラメータのキャッシュ化やロジックの最適化

ＳＳプレイヤーの最適化（ＣＰＵ）

アニメーション参照処理負荷が高い

初期化時にインデックス化

(ﾟдﾟ)Σ 総当りで文字列比較してる！！

ＳＳプレイヤーの最適化

他にも… 使用しない機能はバンバンカット

コリジョン判定処理

サブアニメーション機能

etc...

要望

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

Drawcallが多くなる 自動でアトラス化とか欲しいなぁ～

要望

アーティストが仕様を守ってくれない (^^; プロジェクト毎にデフォルトや機能のマスクを定義して配布

できる仕組みが欲しい！

実はできるらしい…orz

ＳＳプレイヤーの最適化まとめ

最適化はされていない！

とりあえず動く状態だと思え

凝ったゲームを作ろうとすると最適化が必要

GitHub

オープンソース

https://github.com/SpriteStudio

みんなで最適化してアップしてよ

って事らしいです

質疑応答

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

ウェブテクノロジから補足 ❏ 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で！

SpriteStudio 近況報告＋

2014/1：Ver.5.2 ・アニメーションのリサイズ機能 >Retina他、解像度別の「つくりわけ」に対応

2014/5：Ver.5.3 ・インスタンス機能 >複雑なシーンの構築、アニメーション構成パーツの細分化に対応 ・ラベル機能 >外部からのコントロール性向上

2014/x：Ver.5.4

SpriteStudio Ver.5.4 ～動画出力～

❏ 出力形式：".avi"（無圧縮、αチャンネル保持） ❏ フレームレート（30 / 60 / 59.94） ❏ 作成したアニメーションリソースの「手軽な共有」

社内外でのデータ確認をかんたんに

プロモーション素材の作成に

『CRI Sofdec2』に

SpriteStudio Ver.5.4 ～2Dパーティクル～

❏ キーフレームアニメーションとパーティクルの同時編集 ❏ インスタンス機能と併用で、キーフレームアニメーションと融合 ❏ Cocos2d-x / Shuriken との互換を意識

ランダム性のあるエフェクトに

手付けの難しい自然表現をフォロー

コマアニメーション化も可能

SpriteStudio 近況報告＋

2014/1：Ver.5.2 ・アニメーションのリサイズ機能 >Retina他、解像度別の「つくりわけ」に対応

2014/5：Ver.5.3 ・インスタンス機能 >複雑なシーンの構築、アニメーション構成パーツの細分化に対応 ・ラベル機能 >外部からのコントロール性向上

2014/秋：Ver.5.4 ・動画出力機能 >社内外のデータ共有、プロモーション素材の作成に対応 ・2Dパーティクル機能 >ランダムエフェクト、自然表現作成時のフォロー

SS5 SDK

SS5 SDK ❏ SDKの構成：

❏ Loader：SpriteStudio5 形式 (sspj、ssae、ssce）の 読み込みモジュール

❏ Animator：座標変換、補間計算用 アニメーションモジュール

❏ Drawer：OpenGL を利用した描画モジュール ❏ DirectX対応進行中

❏ Viewer：Win / Mac用サンプル（実行形式） ❏ Converter：他の形式への変換用ライブラリ

SS5 SDK Case 1：Cocos2d-x

❏ SS5Player for Cocos2d-x ❏ 旧SSPlayer for Cocos2d-xの後継・改良版

❏ SS5世代から追加された新機能に追従 ❏ Cocos2d-x Ver.2.x系 ～ Ver.3.x系両対応

SS5 SDK Case 2：UnrealEngine4 ❏ SS5Player for UnrealEngine4

❏ インポート→アセット形式自動変換 ❏ プラグイン型Player ❏ 開発は株式会社ヒストリア

SS5 SDK Case 3：ParadoxEngine

❏ ParadoxEngine ❏ オープンソース（C#） ❏ GUIベース ❏ http://paradox3d.net/

❏ SS5Player for ParadoxEngine ❏ 開発はシリコンスタジオ株式会社

SS5 SDK Case 4：Unity2D

❏ SS5Converter for Unity2d ❏ 某ゲームの開発中に作ったUnityスクリプト ❏ 某ゲームの事前登録

http://goo.gl/ZB1Xqm ❏ ".sspj"をUnity2Dの形式に変換 ❏ GitHubで配布を予定

SS5 SDK Case 5：DSP Anime ❏ DSP Anime for SpriteStudio

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

ここまでのまとめ ❏ 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

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

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

ご静聴ありがとうございました。

with