1. #ue4fest#ue4fest
はじめてアンリアルエンジンで
海戦をつくってみたときのお話

2. #ue4fest#ue4fest
『アズールレーン クロスウェーブ』制作事例
©2018 IDEA FACTORY / COMPILE HEART / FELISTELLA / Manjuu Co.,Ltd. & Yongshi Co.,Ltd. / Yostar, Inc.
※戦闘シーンがアクション(TPS)となっているRPG

3. #ue4fest#ue4fest
第１章 ゲームエンジン採択までの道のり
第２章 開発の立ち上がり
第３章 開発を進める中で
本講演での話題
第４章 UE4を使って感じたこと

4. #ue4fest#ue4fest
• FELISTELLAという会社は主にRPGを開発 (猫社員がいます）
• 自社でゲームエンジンを整備し、プラグインやスクリプトツール
など、開発をスムーズに行うための資産をもつ
第１章 ゲームエンジン採択までの道のり

5. #ue4fest#ue4fest
• 昨今のマルチプラットフォーム開発やローカライズ業務を
他社にお願いするにあたり、サポートなどが難しいと痛感
• 資産を捨てて、ゲームエンジンを導入すべきか？
現場も悩む、悩む、悩む……経営的にも、悩む
1ヶ月ほど複数のゲームエンジンを調査
• 最終的に、登壇するきっかけとなる Unreal Engine 4を採択
しかし…
第１章 ゲームエンジン採択までの道のり

6. #ue4fest#ue4fest
ソースコードが公開されている（これに尽きる）
カスタムしたり、トラブル時の原因の切り分けがしやすい！
なぜか？
第１章 ゲームエンジン採択までの道のり

7. #ue4fest#ue4fest
• エンジンには、可能な限り、
手を付けないことを目標とする
基本方針

8. #ue4fest#ue4fest
・海戦なので、何はなくとも 海！海！海！
→海の表現から
• いろいろ手探りなので
→サンプルの制作
第２章 開発の立ち上がり

9. #ue4fest#ue4fest
• 広大な海上で戦闘が行われるが、海上には表示物が
敵味方キャラクターと弾しかないので寂しい
• ユーザー入力により海面を隆起させることで
画面に変化をつけたい
・公式ドキュメントで実装方法を調べる
インタラクション
第２章 開発の立ち上がり【海の表現】

10. #ue4fest#ue4fest
• 丁度良い項目が見つかった
https://api.unrealengine.com/JPN/Engine/Rendering/RenderTargets/BlueprintRenderTargets/HowTo/index.html
第２章 開発の立ち上がり【海の表現】

11. #ue4fest#ue4fest
• チュートリアルは、ブループリントもコピペできる
第２章 開発の立ち上がり【海の表現】

12. #ue4fest#ue4fest
• チュートリアルの最終結果
第２章 開発の立ち上がり【海の表現】

13. #ue4fest#ue4fest
• 試作に組み込んでみる
• 期待通りの結果
次は…？
第２章 開発の立ち上がり【海の表現】

14. #ue4fest#ue4fest
一定のポリゴン数で
どこまでも広がる海
を作りたい
無限平面
第２章 開発の立ち上がり【海の表現】

15. #ue4fest#ue4fest
• カメラに追従し、視界内だけをカバーするメッシュを準備
第２章 開発の立ち上がり【海の表現～無限平面】

16. #ue4fest#ue4fest
• 海面マテリアルのテクスチャ座標を
メッシュ頂点のワールド座標から求めるように修正
第２章 開発の立ち上がり【海の表現～無限平面】

17. #ue4fest#ue4fest
• 流体シミュレーションに使用している
ワークテクスチャのプロパティを変更
• 本タイトルでは512x512のテクスチャで
200m四方をカバーしそれより先はリピートする
第２章 開発の立ち上がり【海の表現～無限平面】

18. #ue4fest#ue4fest
• 海面メッシュが常にカメラにあわせて移動回転拡縮を行うため
どこまでも海が広がって見えるように
第２章 開発の立ち上がり【海の表現～無限平面】

19. #ue4fest#ue4fest
• 試作を進めていくが……
第２章 開発の立ち上がり【海の表現～無限平面】
• 「もっときれいにしてほしい」
• 「キャラがのっぺりしている」
• 「島とかキャラは光を反射しないの？」

20. #ue4fest#ue4fest
• 反射に関してはデフォルトでSSRが有効になっているが
効果が殆どわからない
• 海面マテリアルの設定の仕方が悪いのか、
思うような絵作りができない・・・
• 反射について公式ドキュメントを調べる
第２章 開発の立ち上がり【反射】

21. #ue4fest#ue4fest
• 平面反射という機能が見つかる
https://docs.unrealengine.com/ja/Engine/Rendering/LightingAndShadows/PlanarReflections/index.html
第２章 開発の立ち上がり【反射】

22. #ue4fest#ue4fest
• 印象が劇的に良くなる → 関係者に好評
Before After
• 平面反射は正確に反射を表現できる対価として
負荷が高いとあるが、 ひとまず組み込んでみる
第２章 開発の立ち上がり【反射】

23. #ue4fest#ue4fest
• 反射用のレンダリングを行う際の対象を設定できるので、
AAなどの効果の認識が難しい処理はカット
第２章 開発の立ち上がり【反射】

24. #ue4fest#ue4fest
• 諸々の調整を終え、
島や船が正確に反射されるため美麗に
第２章 開発の立ち上がり【反射】
反射無し SSR 平面反射
• 初期方針の通り、エンジンに
手を付けることなく標準機能
で実装できました

25. #ue4fest#ue4fest
• だいたい１カ月ほどで、海を駆け回るキャラクターが
弾を撃つサンプルが出来上がる
サンプルの制作
第２章 開発の立ち上がり

26. #ue4fest#ue4fest
初期
第２章 開発の立ち上がり【サンプルの制作】

27. #ue4fest#ue4fest
少し進む
第２章 開発の立ち上がり【サンプルの制作】

28. #ue4fest#ue4fest
航空機の処理追加
第２章 開発の立ち上がり【サンプルの制作】

29. #ue4fest#ue4fest
もくもくと進む
第２章 開発の立ち上がり【サンプルの制作】

30. #ue4fest#ue4fest
• このような流れでサンプルを制作
同時に下記タスクも動きながら進行
原作は２Dゲーム → モデル制作のためには三面図が必要
• いろいろなイラストレーターさんのテイストを再現する
という重責を担いつつ、モデル制作開始
こうして、開発は立ち上がっていきました。
第２章 開発の立ち上がり【サンプルの制作】

31. #ue4fest#ue4fest
• 開発環境について
• おもしろくするための仕様変更
第３章 開発を進める中で

32. #ue4fest#ue4fest
• エンジンバーション
UE4 4.17(試作) →UE4 4.19(α版) →UE4 4.21
※SpriteStudio5の対応バーションの都合で 4.21となる
• バージョン管理
Subversion
第３章 開発を進める中で【開発環境】

33. #ue4fest#ue4fest
• レベル設計
パーシスタントレベルは１つのみ、
あとは複数のサブレベルで構成
• ブループリント
ゲームフロー（レベルBP) と UI(UMG) で主に利用
• 敵AI
BehaviorTree と EQS を利用
第３章 開発を進める中で【開発環境】

34. #ue4fest#ue4fest
• UI
基本的にUMGを利用するが、戦闘UIのみHUDで作成。
※UMGは習熟に時間を要したので、
シンプルで扱いやすいHUDを戦闘UIで採用
• フォント
フォントファイルをそのまま利用
第３章 開発を進める中で【開発環境】

35. #ue4fest#ue4fest
• 3Dツール
Maya2016
• 2Dツール
SpriteStudio5（UMGに加算機能を拡張）
Spine (SDキャラクターのデータのため）
Paper 2D
スプライト表示で利用。簡単な動きはプログラマサイド
UMGのアニメーション機能で作成
第３章 開発を進める中で【開発環境】

36. #ue4fest#ue4fest
• ミドルウェア
CRI ADX2,Sofdec (サウンドとムービーで利用)
※使い慣れた環境であること、低負荷(SE用)、
高音質(音声用)の圧縮コーデックが使える。
ボイスの多いゲームではほぼ必須ではないかと
第３章 開発を進める中で【開発環境】

37. #ue4fest#ue4fest
• 独自アセット
1:ゲームレベルデータベース
Excel(VBAマクロ出力) →json形式 →インポート
以前の開発では、Excelからのバイナリを直接読み込み
2:FSスクリプト
スクリプトソース(コンパイル）→スクリプトバイナリ
→インポート
※C++の自社のスクリプトエンジンをそのまま利用
第３章 開発を進める中で【開発環境】

38. #ue4fest#ue4fest
開発は黙々と進んでいたところ、業界あるあるの・・・
より面白くするための、
大 き な 工 夫（シヨウヘンコウ）が発生
第３章 開発を進める中で

39. #ue4fest#ue4fest
α版のプレイアブルキャラクターは画面内に１体のみ
（戦闘中に交代は可能）
しかし、原作アプリでは画面内に３人一組で同時に戦える！
第３章 開発を進める中で【仕様変更】

40. #ue4fest#ue4fest
本作でも味方を3体同時表示へ変更する
第３章 開発を進める中で【仕様変更】

41. #ue4fest#ue4fest
• なにはともあれ、処理の最適化、負荷の計測
• リッチすぎた処理の軽減
（もちろん見栄えはできるだけ損なわずに）
あれ？結構負荷がぎりぎりだったような？
いろいろ海の表現でやりすぎたかも？
第３章 開発を進める中で【仕様変更】

42. #ue4fest#ue4fest
高速化、負荷の低減に寄与したもの
少しずつ負荷低減へ
・デカールのカット
・平面反射の反射対象の制限
・キャラクターや構造物をライトの影響を受けないように変更
第３章 開発を進める中で【仕様変更】

43. #ue4fest#ue4fest
高速化、負荷の低減に寄与したもの
・パーティクル
半透明
→ParticleCutout が非常に有効
メッシュパーティクル
→エディタのLOD自動生成が少ないコストで、
品質を維持しながらの最適化に有効
カスケードのLODも同様に非常に有効
第３章 開発を進める中で【仕様変更】

44. #ue4fest#ue4fest
見栄えとフレームレートを保ちつつ
ゲーム性を上げることに成功
第３章 開発を進める中で【仕様変更】

45. #ue4fest#ue4fest
公式ドキュメントや事例が多く特に困ることはなかった。
試行錯誤は多いが、これはどのエンジンを採用しても同じ。
まだまだ勉強をしていかなければならない
逆に多機能が故に、どの機能を使うのがベストなのかの判断が
難しいと感じることもあった。
第４章 UE4を使って感じたこと

46. #ue4fest#ue4fest
• プロトタイプまでの制作時間の短さ！
• PCでサンプルを見せることができる！
（コンシューマーの開発では、実機で動かして
動画でキャプチャすることが多かった）
• 素材が豊富にある！
• マルチプラットフォーム対応も前向きに検討できる！
• BehaviorTreeでのAI開発は心強かった！
第４章 UE4を使って感じたこと

47. #ue4fest#ue4fest
まだ初めての開発なので感じることかもしれませんが、
・レベル間のやりとりに制限あり少々手間がかかる
・C++とBPの役割分担をしっかり考えて設計する必要があり
従来の開発より仕様変更などの対応に時間がかかった
・キーボード主体からBP(ノード編集）作業が増え、
マウスの利用頻度があがり、右手の疲労度が高い
第４章 UE4を使って感じたこと

48. #ue4fest#ue4fest
今後もUE4で開発を続けていくので、情報の拡充や
開発できる会社さんが増えるといいな・・・
と思った開発でした。
第４章 UE4を使って感じたこと

49. #ue4fest#ue4fest
ご清聴ありがとうございました