少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -

スライド概要

2017年4月15日に行われた「Unreal Fest West 2017」にて発表させていただいたスライドです。
UE4 & 少人数開発におけるノウハウについて、弊社で開発中の Airtone を実例に挙げつつお話させて頂きました。

レポート記事
https://www.unrealengine.com/ja/blog/unreal-fest-17

profile-image

株式会社ヒストリア

@historia_Inc

作者について:

株式会社ヒストリアは、Unreal Engine専門のソフトウェア開発会社です。ゲーム事業とエンタープライズ事業、2 つの軸でソフトウェアの企画、開発を行っています。また、Unreal Engine の学習を目的とした作品制作コンテスト『UE4ぷちコン』や、『出張ヒストリア! ゲーム開発勉強会』を主催、技術ブログを毎週更新など、Unreal Engine コミュニティを盛り上げる活動も行っております。

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2017-04-20 04:52:00

各ページのテキスト

1. 少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 historia Inc. 原 龍 © historia Inc. #ue4fest

2. 登壇者紹介 ▪ Airtone(AMG GAMES 様) – Lead Engineer ▪ 過去作 – アーガイルシフト(バンダイナムコエンターテインメント 様) ▪ Lead Engineer – ランページ ランド ランカーズ(スクウェア・エニックス 様) Lead Server Engineer ▪ Client Engineer ▪ ▪ コミュニティ活動 – NekoNekoOnline プラグインの WebApi 機能における設計思想 & 実装Tips ▪ http://hogetatu.hatenablog.com/entry/2016/12/01/000000 – GameplayDebugger をプロジェクト用にカスタマイズして利用する ▪ http://hogetatu.hatenablog.com/entry/2016/12/03/002946 © historia Inc. #ue4fest

3. 今回ご紹介するもの © historia Inc. #ue4fest

4. 弊社で開発中の “Airtone” を実例に挙げ 少人数開発における開発の流れ 効率化のために実装した機能 をご紹介します © historia Inc. #ue4fest

5. アジェンダ ▪ Airtone のご紹介 ▪ 少人数開発で必要なもの ▪ Airtone で実装した機能やツール © historia Inc. #ue4fest

6. まずは “Airtone” のご紹介 © historia Inc. #ue4fest

7. AIRTONE VR Gameplay Movie I promise you Yasushi Asada feat Mary https://youtu.be/jShjM3ivg7Y © historia Inc. #ue4fest

8. ジャンル エアーリズムアクション(VR) ハードウェア / プラットフォーム • Oculus Rift / Oculus Store • Vive / Steam エンジン / ミドルウェア • Unreal Engine 4(UE 4.12 → 4.14) • Wwise 開発期間 約10ヵ月 開発体制(ピーク時) • • • • • • プロデューサー & ディレクター × 1 ゲームデザイナー × 2 エンジニア × 4 アーティスト × 3 UIデザイナー × 1 サウンド & チャートデザイナー × 3 (社外) © historia Inc. #ue4fest

9. 人月 16 14 ▪ 7月 – プロジェクト発足 – プロトタイプ量産 12 10 ▪ 8月 – 1曲通しプロトタイプ完成 8 6 ▪ 11月 – α 版完成 4 ▪ 2 2月 – β 版完成 0 7月 8月 ディレクター 9月 ゲームデザイナー 10月 11月 エンジニア 12月 アーティスト 1月 2月 UIデザイナー © historia Inc. 3月 サウンド #ue4fest

10. Airtone は 10時間以上遊べるボリュームのVRリズムゲーム です それを 4人 から始め、最終的に 14人 で 10ヶ月 という期間で作ってます (控えめに言っても少人数だったなと思います) © historia Inc. #ue4fest

11. 今回はこのような少人数開発を どのように実現したかについてご紹介します © historia Inc. #ue4fest

12. 少人数開発で必要なもの © historia Inc. #ue4fest

13. 常に "最適な完成度" を目指すこと © historia Inc. #ue4fest

14. 一例としてツール制作について掘り下げてみます © historia Inc. #ue4fest

15. ツール制作における工数と効果の関係 効果 工数 © historia Inc. #ue4fest

16. ツール制作における工数と効果の関係 ぼくがつくったさいきょうのツール ツールとして実運用に耐えうる 効果 ツールとして機能し始める 工数 © historia Inc. #ue4fest

17. ツール制作における工数と効果の関係 ぼくがつくったさいきょうのツール 今回必要なのはこの辺? ツールとして実運用に耐えうる それともこの辺でも大丈夫? 効果 ツールとして機能し始める 工数 © historia Inc. #ue4fest

18. クオリティはできるだけ上げたい でも工数は無限ではない ↓ 作るものに応じた “最適な完成度” を目指す © historia Inc. #ue4fest

19. "最適な完成度" を導き出すために © historia Inc. #ue4fest

20. 何が必要とされているのかを明確にする © historia Inc. #ue4fest

21. 要件定義は大事 ▪ 何が求められているのか、実際にそれを必要としている人に直接確認する ▪ この相談は十分に時間をとる。考えうる可能性の話もする。想像力は大事 ▪ その上で 「やらなければいけないこと」 と 「できると良いこと」 を決める © historia Inc. #ue4fest

22. 完成形のイメージが固まらない場合は、とりあえず “雑に作ってみる” ▪ 完成形を正確にイメージでき、それを言語化できる人はあまりいない ▪ 何かそれっぽいものを作って出してみると話し合いが短くて済む ▪ 複数人で 「誰もよくわかっていない何か」 を机上で考えている時間は無駄 © historia Inc. #ue4fest

23. “雑に作ってみる” 時にこそ、UE4の真価を発揮できる とにかく速く、それっぽく、プロトタイプが作れる © historia Inc. #ue4fest

24. ただし、これは高確率で地雷を踏みます © historia Inc. #ue4fest

25. 地雷の要因 ▪ 雑に作ったことが忘れ去られる – 「完成している」 と思っていた機能がプロトタイプコードで、 実は見た目だけだったという事がプロジェクト後半に発覚するのは割とよくある話 – プロジェクト後半でバグが出たり、機能拡張時の対応コストが高くなって辛いやつ ▪ “とりあえず” で使いまわしたアセットが残り続けて想定外の依存関係を生む – プロジェクト後半に最適化等を行うためにアセットを整理しようとした時に、 様々なところに依存が発生していて手が付けられない状態になっていたり… © historia Inc. #ue4fest

26. “雑に作ってみる” を 皆が理解する 事が大事 © historia Inc. #ue4fest

27. “雑に作ってみる” ということ(エンジニア / アーティスト編) ▪ 「雑でもいいから見せる事の重要性」 を理解する – 全てを言語化するのは難しいし、言語化してもわかりにくいものは可視化するしかない – 相手が自分の感覚を正確に理解してくれるという考えは幻想。諦めて手を動かそう – だからと言って作り込み過ぎると、ボツになった時に工数的にも精神的にも辛いから雑で良い – 確認が済んだら、相応のコストを払って作り込む期間を作るのは必須 © historia Inc. #ue4fest

28. “雑に作ってみる” ということ(ディレクター / ゲームデザイナー編) ▪ 「雑に作られていること」 を理解する – 目の前にあるものは完成されたものではない。あくまで 「形にしてみた」 だけ – 作り込むことで良くなっていく部分がある。その辺りは想像力で補う必要あり。 – しっかり作るとコストがかかるのは当たり前。作業者が必要と言ったコストはもちろん必要 – ここを無視して 「ガンガンいこうぜ」 をやり過ぎると、プロジェクト後半に身動きが取れなくなる – 確認が済んで問題なければ必ずGOサインを出すこと。 あやふやなままだと作り込みに入れない © historia Inc. #ue4fest

29. Airtone では初期にプロトタイプを量産し 早い段階でゲームデザインを確立させています © historia Inc. #ue4fest

30. Airtone プロトタイプ制作過程 https://youtu.be/WswQn7mT7yc © historia Inc. #ue4fest

31. ここまでのまとめ ▪ 限られた工数の中でクオリティを高めるために、"最適な完成度" を目指す – 最適な完成度を導くために、要件定義を密に行う ▪ 要件が定まらない場合はイメージを共有するために雑に作ってみる – ただし “雑に作ってみる” という事について皆が理解する © historia Inc. #ue4fest

32. 少人数UE4開発における共通の悩み © historia Inc. #ue4fest

33. カスタムビルドエンジンにする? (エンジン改造する?) © historia Inc. #ue4fest

34. カスタムビルドエンジンにおけるメリットとデメリット ▪ メリット – プロジェクト固有の改造ができる(どうしてもやりたい場面は出てくる) – バグがあったら自分たちで修正できる(報告してからの修正対応を待てない) – 必要なログを入れたり、深い部分のデバッグがやりやすくなる ▪ デメリット – プロジェクト全体の動きが遅くなる(エンジンがバージョン管理され、手軽さが無くなってくる) – エンジン更新に対するマージコストが大きい – 自分たちが入れた改造によるエンバグの可能性 © historia Inc. #ue4fest

35. Airtone に求められる品質をクリアするためには カスタムビルドエンジンにしないという選択肢は難しい © historia Inc. #ue4fest

36. ただし Airtone のエンジニアは 4人 のみ © historia Inc. #ue4fest

37. Airtone におけるエンジニアの大まかな分担 原 スケジュール管理 / ツール全般 / システム プラットフォーム対応 / 最適化 N さん システム / 演出 / シェーダー K くん UI全般 / SE組み込み / Jenkins管理 E くん ヘルプ対応 / チャートデザイン兼任 少人数だからこそ、それぞれにかかる負担は大きい… © historia Inc. #ue4fest

38. 開発期間全体を通して、エンジンの保守に 工数を割ける程の余裕はない ↓ できるだけ移行時期を後ろに持っていきたい © historia Inc. #ue4fest

39. カスタムビルドエンジンへの移行を遅らせるために ▪ カスタムビルドエンジンへの移行予定日を決める – Airtone の場合は規模感を考慮し、オールインの2ヶ月前を目安に予定を立てた ▪ マージコストを極力減らせるように進める – カスタムビルドエンジンに移行した後は、基本的にエンジンのバージョンアップは行わない – どうしても必要なパッチは随時当てる ▪ プレビュー版で公開された新機能の検証は捨てブランチで – 捨てブランチで効果を確認し、結果次第で移行予定日を調整する © historia Inc. #ue4fest

40. カスタムビルドエンジンへの移行を遅らせるために 諦めなければいけない部分もある (絵作りにおける抜本的な改修はできないとか…) ↓ これもチームで検討して "最適な完成度" を目指す © historia Inc. #ue4fest

41. ここまでのまとめ ▪ カスタムビルドエンジンを使うメリット / デメリットを理解する ▪ 少人数開発で保守コストを払えないなら、できるだけ移行時期を遅らせる – マージコストを極力減らす運用を心掛ける ▪ それによってできない部分は諦める – 諦めて良い部分かどうかはチームと相談 © historia Inc. #ue4fest

42. ここからは、もう少し具体的な事例として Airtoneで実装した機能やツールをご紹介します © historia Inc. #ue4fest

43. ここでも重要なのは "最適な完成度" を目指す ということ © historia Inc. #ue4fest

44. なるべく工数を減らしつつ 作品としてのクオリティを出したい ↓ ツール整備 プロシージャル生成 © historia Inc. #ue4fest

45. チャートエディタ © historia Inc. #ue4fest

46. Airtone におけるチャートデザイン作業 © historia Inc. #ue4fest

47. 1.複数種類のノーツを配置(ここだけは普通のリズムゲームと同じ) © historia Inc. #ue4fest

48. 2.ジェットコースターのように、コース自体が3D空間上で曲がる © historia Inc. #ue4fest

49. 3.コース上には5本のレーンが存在し、それぞれが円周上で移動する © historia Inc. #ue4fest

50. 4.トンネルに入ると、レーンが円周上ではなく自由に動く © historia Inc. #ue4fest

51. 5.コース周辺に曲のリズムに合わせたエフェクトを発生させる © historia Inc. #ue4fest

52. 普通のリズムゲームよりも明らかに作業量が多い © historia Inc. #ue4fest

53. 専用のチャートエディタを作って 開発効率を上げよう © historia Inc. #ue4fest

54. 要件定義 ▪ チャートデザイナーからの要望 – タイムライン上にキーを打ち、ノーツのタイミング調整や演出を入れていきたい – できれば MIDI エディタのようなインターフェースでコピペ等は使えるようにしたい – 作業内容は即時画面上に反映され、簡単にビジュアル面のプレビューをしたい – プレビューで確認した後、実際にプレイ確認するまでのフローを確立したい – 演出は同じIDで指定するが、ステージを変えた時にステージに合った演出が出てほしい © historia Inc. #ue4fest

55. 要件定義 ▪ アーティストからの要望 – コースの周りやステージ全体に発生する演出はアーティストが実装するが、 タイミングはチャートによって変わるのでチャートデザイナーに任せたい – チャートが調整された後に、アーティストが調整をかけなければいけないフローだと辛い © historia Inc. #ue4fest

56. Airtone チャートエディタ https://youtu.be/3kZvOnLJfi8 © historia Inc. #ue4fest

57. 実装内容 ▪ シーケンサーを専用チャートエディタとして改造 – キーのコピペやスナップ等、シーケンサーの標準機能はほぼ使える – MIDIエディタのように、目盛のハイライトやキーボードでの打ち込みに対応 – シーケンサーの関連モジュールをそのままプロジェクト側にコピーすることで、 エンジン改造を回避(シーケンサーとしてのバージョンアップは必要無いと判断) © historia Inc. #ue4fest

58. 実装内容 ▪ タイムライン上に構築された内容はViewport上にリアルタイム反映 – スプラインとノーツのメッシュを用いた最低限のプレビュー機能を提供 – Viewportで使っているカメラを乗っ取り、実際の見た目に近付ける ▪ 演出トリガー用にアセット指定のイベントトラックを新規に実装 – トリガーの配置はチャートデザイナー、トリガーの内容はアーティストが担当 © historia Inc. #ue4fest

59. これを使って Airtone では 約100チャート を実装 (チャートデザイナーの皆さん、お疲れ様でした) © historia Inc. #ue4fest

60. チャートエディタ完成までの道のりを もう少し掘り下げてみます © historia Inc. #ue4fest

61. チャートエディタ完成までの流れ 7月 • プロジェクト発足 • プロトタイプを量産しつつ、ゲームデザインを模索 8月 • 1曲通して遊べるプロトタイプの完成 • Excel / MIDI からチャートを作る簡易的な仕組みの構築 9月 • ノーツ全種実装 • チャートツール仕様策定 10月 • チャートツール制作開始 11月 • チャートツールを使ったチャート制作開始 12月 • チャートツールを使ったチャート制作に完全移行 © historia Inc. #ue4fest

62. 8月にはもうプロトタイプが動作している必要がある ↓ そこまでにチャートエディタが完成するはずもないので “とりあえず打ち込むことはできる” レベルの簡易ツールを用意 © historia Inc. #ue4fest

63. ゲームデザインが定まらないまま 豪華なツールを作るのはリスクが高い 簡易的なツールでお茶を濁すのは大事 © historia Inc. #ue4fest

64. 工数と効果が見合わなかったため、諦めた部分 ▪ エディット時の完璧な安定性 – UE4.13時点でのシーケンサーに潜在するバグらしき挙動には目をつむった – ランタイムでの安定性が高ければ問題無し ▪ 演出(エフェクト)のリアルタイムプレビュー – そもそもスプライン自体が簡易的な表示だったため、 エフェクトを含めた演出の完全なプレビューは意味が無いと判断 ▪ 各レーンの曲線が歪なところが散見される – 計算でやる以上、思い描く完璧な曲がり方にはならない(ある程度でOK) © historia Inc. #ue4fest

65. 作品の根幹部分であるため 色々あったけど概ね良かった © historia Inc. #ue4fest

66. 今だから思う、「もっと良く出来たのでは?」 ▪ サブトラック機能(パターンのプリセット化) – 同じ曲ではチャートレベルが変わってもノーツ配置、演出が共通なことが多い – サブトラックを作れるようにしてプリセット化できたらもっと効率化できたかも ▪ 評価基準の可視化 – 複数人で作業する上で、クオリティの統一が大きなコストとなった – 出来上がったチャートの良し悪し確認コストを減らすために、 評価の手助けとなる評価基準を収集できる仕組みを検討した方が良かったかも (ノーツ密度、コースの曲げ具合、エフェクトとノーツの重なり、etc…) © historia Inc. #ue4fest

67. ※画像貼る プロシージャルメッシュの活用 プロシージャルメッシュの活用 © historia Inc. #ue4fest

68. Airtone では、いくつかの演出を プロシージャルメッシュ で作っています © historia Inc. #ue4fest

69. © historia Inc. #ue4fest

70. 各種レーンに関してはもちろんですが その他にもあるので一例をご紹介 © historia Inc. #ue4fest

71. アーティスト要望 正三角形だけで作られた球が、特定の位置から 徐々に三角形が縮んで壊れていく演出を入れたい © historia Inc. #ue4fest

72. Airtone プロシージャルメッシュ活用事例 https://youtu.be/icNy8c9FcKU © historia Inc. #ue4fest

73. 分割 プロシージャルメッシュで 正20面体(Geodesic Dome)を生成 更に、任意の数で三角形を分割できるように対応 (ConstructionScript でプレビュー可能) © historia Inc. #ue4fest

74. 三角形が縮む演出は 頂点アニメーション で対応 基準位置や移動方向、移動量は Normal や VertexColor をバッファとして使用 © historia Inc. #ue4fest

75. プロシージャルメッシュを活用することの利点 ▪ アーティストが用意するには手間暇がかかる演出の工数を削減できる ▪ ConstructionScript と連携することで柔軟に形状を変化させることが可能 ▪ VertexColor 等をバッファ代わりにして任意のパラメータをマテリアルで使用できる © historia Inc. #ue4fest

76. 音と演出の同期 音と演出の同期 © historia Inc. #ue4fest

77. リズムゲームの醍醐味 音に合わせた背景演出 © historia Inc. #ue4fest

78. Airtone 音と演出の同期 https://youtu.be/Wtjdd5LmF6A

79. 音と同期して背景が動いているだけでも それっぽく見える © historia Inc. #ue4fest

80. Airtone で使われている、音と同期した演出 1. 1拍 / 2拍 / 4拍 毎に背景がリズム良く上下に動く – ほとんどの背景がこれで頂点アニメーションしている 2. 各種アニメーションやモーショングラフィックスの速度がBPMに合わせて変動する – リズムに合わせて動くと気持ち良い 3. 音の周波数からアニメーションを生成する – スペクトラムアナライザを Wwise プラグインとして用意 – 音のアタックを取ってエフェクトを出したり © historia Inc. #ue4fest

81. 音に関するパラメータを受け取りたい ↓ Wwise からコールバックで受け取る Wwise プラグインを作る © historia Inc. #ue4fest

82. 音のパラメータに合わせて世界全体を動かしたい ↓ マテリアルパラメータコレクションが大活躍 (プロパティを設定する場所が集約される) © historia Inc. #ue4fest

83. Wwise 音のパラメータをコールバック通知 マテリアルパラメータコレクション 各種マテリアル 背景マテリアルA 背景マテリアルB 背景マテリアルC 背景マテリアルD 背景マテリアルE 背景マテリアルF © historia Inc. #ue4fest

84. リップシンク © historia Inc. #ue4fest

85. Airtone のヒロイン “ネオン” は フルボイス & リップアニメーション 対応 © historia Inc. #ue4fest

86. リップアニメーションは手付け? © historia Inc. #ue4fest

87. アーティストが死んじゃう (ヾノ・∀・`)ムリムリ © historia Inc. #ue4fest

88. フェイシャルキャプチャー? © historia Inc. #ue4fest

89. 機材を持ってません (ヾノ・∀・`)ムリムリ © historia Inc. #ue4fest

90. 母音推定? © historia Inc. #ue4fest

91. 音声ファイルを解析したら母音を推定できそう © historia Inc. #ue4fest

92. http://tips.hecomi.com/entry/20131110/1384096497 みんな大好き “凹みTips” © historia Inc. #ue4fest

93. 記事より引用 1. 微小時間音声データ取り込み(WAV ファイル or Mic) 2. ハミング窓を掛けて周期波形にする(周波数高域ノイズ低減) 3. レビンソン・ダービン法で LPC(線形予測分析)係数を得る 4. 得られた係数を元にしたデジタルフィルタの周波数応答を得る 5. これが LPC スペクトル包絡線 6. 包絡線の山から1番目と2番目のフォルマント( F1、F2 )を特定 7. F1、F2 の分布から母音特定 © historia Inc. #ue4fest

94. 要約すると、音声ファイルを解析する事で 微小区間毎に以下の情報が得られます 時間, 第1フォルマント, 第2フォルマント, ボリューム © historia Inc. #ue4fest

95. 解析された情報の使い方 ▪ 第1フォルマント、第2フォルマントの値から母音の推定が可能 – 第1フォルマントが 600 ~ 1400 かつ、 第2フォルマントが 900 ~ 2000 ならば 「あ」 と推定など – これらの値は人によって変わってしまうので、論文等に載っている サンプリング情報を参考にしつつ、ネオンの声優さんに合わせて細かく調整 ▪ ボリュームカーブを元に、リップアニメーションのブレンドタイミングを調整 – ある程度のボリュームが無ければ口を開けない © historia Inc. #ue4fest

96. Wavファイル Lipファイル Voice2Lip コンバータ インポート UE4 LipCurveアセット ネオンBP LipCurve指定で再生 LipPlayerコンポーネント コールバックでフォルマント、ボリュームを通知して加算するリップアニメを指定 ネオンアニメーションBP © historia Inc. #ue4fest

97. これにより、ほとんどのケースで上手くアニメーションされた 更なるクオリティ向上のためには閾値の調整が必要 ↓ 解析された情報を可視化する仕組みを作る © historia Inc. #ue4fest

98. Airtone リップシンク調整ツール https://youtu.be/5fcxb2x5cVk © historia Inc. #ue4fest

99. 調整 アーティストが閾値やアニメーションのブレンドタイミングを調整 © historia Inc. #ue4fest

100. 可視化はとても大事 © historia Inc. #ue4fest

101. 工数と効果が見合わなかったため、諦めた部分 ▪ 完璧なリップシンク – あくまで “推定” なので、完璧なリップシンクを目指すと調整にコストがかかる – アニメ調なのが幸いして、完璧じゃなくても割と良く見える ▪ Voice2LipコンバータをUE4に組み込む(全てをUE4内で完結させる) – 解析に使っている外部ライブラリが64bit対応されていなかった – そもそもwavファイル用のインポーターは既にUE4にあり、 一つの拡張子に対して複数のインポーターを作るのは現状だと不可能 © historia Inc. #ue4fest

102. フォルマント解析に関する詳細はこちらから ▪ フォルマントから母音推定してリップシンクを目指してみる - 凹みTips – http://tips.hecomi.com/entry/20131110/1384096497 ▪ 線形予測分析(LPC)-人工知能に関する断創録 – http://aidiary.hatenablog.com/entry/20120415/1334458954 © historia Inc. #ue4fest

103. デバッグツール © historia Inc. #ue4fest

104. RHI のメモリダンプをグラフ表示 © historia Inc. #ue4fest

105. © historia Inc. #ue4fest

106. 1フレーム内での SpawnActor 回数を可視化 © historia Inc. #ue4fest

107. © historia Inc. #ue4fest

108. Mip バイアス調整用テクスチャジェネレータ © historia Inc. #ue4fest

109. 解像度を指定しつつ、 Mip レベルによって色が違う 単色テクスチャを生成 © historia Inc. #ue4fest

110. © historia Inc. #ue4fest

111. 特に VR コンテンツでは、エディタ上のプレビューと 実機で表示される Mip レベルに違いが出るので注意 © historia Inc. #ue4fest

112. 手にアタッチされたデバッグメニュー © historia Inc. #ue4fest

113. 目線追従メニューだと邪魔 Vive のメニューを参考にした © historia Inc. #ue4fest

114. まとめ © historia Inc. #ue4fest

115. まとめ ▪ 限られた工数の中でクオリティを高めるために、"最適な完成度" を目指す ▪ 要件が定まらない場合はイメージを共有するために “雑に作ってみる” ▪ カスタムビルドエンジンを使うメリット / デメリットを理解する ▪ 少人数開発で保守コストを払えないなら、できるだけ移行時期を遅らせる ▪ ツール整備、プロシージャル生成で全体のコストを削減する © historia Inc. #ue4fest

116. Airtone は 2017年春 発売予定! © historia Inc. #ue4fest

117. ご清聴ありがとうございました © historia Inc. #ue4fest