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

8.4K Views

April 20, 17

ue4 ue4fest historia unreal engine unreal engine 4 エンジニア

スライド概要

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

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

株式会社ヒストリア

@historia_Inc

スライド一覧

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

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 5.47MB)

関連スライド

各ページのテキスト

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

登壇者紹介 ▪ 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

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

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

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

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

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

https://youtu.be/jShjM3ivg7Y

ジャンルエアーリズムアクション（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

人月 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

https://youtu.be/WswQn7mT7yc

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.

１．複数種類のノーツを配置（ここだけは普通のリズムゲームと同じ） © historia Inc. #ue4fest

48.

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

49.

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

50.

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

51.

５．コース周辺に曲のリズムに合わせたエフェクトを発生させる © 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

https://youtu.be/3kZvOnLJfi8

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.

70.

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

71.

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

72.

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

https://youtu.be/icNy8c9FcKU

73.

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

74.

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

75.

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

76.

77.

78.

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

https://youtu.be/Wtjdd5LmF6A

79.

80.

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

81.

82.

83.

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

84.

85.

86.

87.

88.

89.

90.

91.

92.

http://tips.hecomi.com/entry/20131110/1384096497

93.

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

94.

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.

98.

https://youtu.be/5fcxb2x5cVk

99.

100.

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.

104.

105.

106.

107.

108.

109.

110.

111.

112.

113.

114.

115.

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

116.

117.

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

株式会社ヒストリア

関連スライド

目指せ脱UE4初心者！？知ってると開発が楽になる便利機能を紹介 - DataAsset, Subsystem, GameplayAbility編 -

この夏、Unreal Engine 5を覚えよう！夏までにUE5を習得するための第一歩を教えます！

UE5制作事例 “The Market of Light” ～Nanite／Lumenへの挑戦～

紛らわしい！何が違うの？Unreal Engine のあれこれ

コンテンツサンプルを楽しむ"超"初心者の為のNiagara

声だけでプレイする3D脱出ゲーム制作事例～ChatGPTでセリフと行動を制御～

各ページのテキスト