2016年10月2日（日）Game Gatling LT Vol.2での登壇資料です。

1. スマホ版ログレスに
ポストエフェクトを
組み込んだ話
株式会社Aiming
藤井 章暢

2. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

3. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

4. 自己紹介
• 名前：藤井 章暢（ふじい あきのぶ）
• 2016年1月、株式会社Aimingに入社
• 役職：エンジニア
– 主にクライアントエンジニア
– 時々CIエンジニア
• 所属タイトル：スマホ版ログレス

5. 株式会社Aimingとは？
オンラインゲーム開発会社です
開発～運営まで一通り行っています

6. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

7. スマホ版ログレスとは？
©Marvelous Inc. Aiming Inc.

8. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

9. なぜ組み込むことになったのか
• エンジニア、デザイナーから
「演出をリッチにしたい」という
要望が前々から挙がっていた

10. ポストエフェクトを
組み込むことになった経緯
• 入社2週間目の月曜日
前職でポストエフェクトの
シェーダー書いてたよね？
システムから全部作って！！ マジっすか(；・∀・)
上司 藤井（私）

11. 開発環境＋当時のスキル
• 当時の開発環境
– Cocos2d-x 3.2+α（独自カスタマイズあり）
シェーダーは
ある程度触ってるけど・・・
Cocos2d-x触るの
初めて・・・
システムを1から
作るの初めて・・・

12. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

13. そもそもポストエフェクトとは？
• すごく平たく言うと
「描画結果に任意の画像処理を行う」
こと

14. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

15. Cocos2d-xで具体的に使ったもの
• GLProgramクラス
– シェーダプログラムラッパークラス
• RenderTextureクラス
– いわゆるレンダーターゲットラッパークラス

16. 作ったシステム
• 基礎となるシステムを作ったものは
少ない
– PostEffectRendererクラス
– PostEffectShaderBaseクラス
• はい、これだけです

17. 各システムの概要
• PostEffectRendererクラス
– Nodeを継承している
• PostEffectRendererにaddChildされたものが
ポストエフェクトレンダリング対象にする
• PostEffectShaderBaseクラス
– ポストエフェクトシェーダの基底クラス
– このクラスを継承してシェーダパラメータの
反映や値チェックなどの処理を行う
– 1派生クラス＝1ポストエフェクトシェーダ

18. いろいろありました
• 絶賛作成中だったある日
前任者がいなくなったから
戦闘とフィールドのシステム
引き継いでくれる？ マジっすか(；・∀・)
上司 藤井（私）

19. いろいろありました
• システムが概ね完成して組み込み途中のある日
これ、使いにくい・・・
もっとCocos2d-xに
合わせた作りにして
すみません・・・(´・ω・｀)
（レビュー前々から出してたのに・・・）
上司 藤井（私）

20. 初版を作ってリリースするまで
• 諸々含めて5ヶ月（6月7日にリリース）
– Cocos2d-xの勉強、検証、
各シェーダの作成に約1ヶ月
– システム作ってOKもらうまでに約1ヶ月
– その間に戦闘とフィールド周りを
引き継いだのでその対応や拡張で
約1ヶ月と2週間
– 戦闘に組み込んでデータ連携させるのに
約1ヶ月
– 運用やテストに約2週間

21. 適応結果

22. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

23. 問題点(改善済み)
• 電池消耗のことを考えられていなかった
– シェーダが使用していないときの描画フロー
描画命令発行 画面に描画
描画命令発行 テクスチャに描画
テクスチャを画面
に描画
Before
After

24. 問題点(改善済み)
• 電池消耗のことを考えられていなかった
– シェーダが使用していないときの描画フロー
描画命令発行 画面に描画
描画命令発行 テクスチャに描画
テクスチャを画面
に描画
Before
After
GPU処理負荷
約1.5倍！！

25. 問題点(改善済み)
• 電池消耗のことを考えられていなかった
– シェーダが使用していないときの描画フロー
描画命令発行 画面に描画
描画命令発行 テクスチャに描画
テクスチャを画面
に描画
Before
After
GPU処理負荷
約1.5倍！！
何も適応していない時は
こっちのフローへ変更

26. 問題点(引き続き対応中)
• ポストエフェクトシェーダ追加に
クライアントのアップデートが
必要になる
– この辺はデータや、スクリプトで対処したい
• まだバトルにしか組み込めていない
• ポストエフェクトの種類が少ない
– 頑張る！！！

27. アジェンダ
• 自己紹介
• スマホ版ログレスとは？
• なぜ組み込むことになったのか
• そもそもポストエフェクトとは？
• 組み込み方法
• 問題点
• まとめ

28. まとめ
• 著名なフレームワークということだけ
あって欲しいものは揃っていた
– ネイティブで書くよりも
うまくラッピングされてて使いやすい
• フレームワークに沿った設計は大事
– 手戻りの発生を抑止
– 使いやすさに直結する

29. まだまだ話し足りないですが
続きは懇親会で！
ご静聴ありがとうございました！