講演者：下田 淳(株式会社ミクシィ　XFLAG ARTS) 渡辺 揮之(オートデスク株式会社　技術営業本部) こんな人におすすめ ・3Dゲーム開発者 ・プロジェクトマネージャー ・プロデューサー、ディレクター 受講者が得られる知見 ・アセットの効率的な運用方法 ・MayaやPhotoshopで制作したコンテンツの管理方法 ・Unityを用いたハイクオリティ映像制作手法

1. XFLAG スタジオにおける資産の有効活用術
～いかにして数万アセットを管理したか？～
2018/5/7-9
下田 淳
株式会社 ミクシィ
XFLAG スタジオ XFLAG ARTS テクニカルアートグループ

2. 下田 淳
CGアーティストとして映像業界でゲームムービーや
遊技機映像制作など様々なプロジェクトに参加。
その後、コンシューマーゲーム開発会社、ソーシャ
ルゲーム開発会社を経て、2014年より株式会社ミク
シィに所属。
現在はテクニカルアートグループのマネージャーと
して、メンバーの育成・チーム強化を行っている。
株式会社 ミクシィ
XFLAG スタジオ XFLAG ARTS テクニカルアートグループ
atsushi.shimoda@mixi.co.jp

3. 本セッションの内容
 XFLAG スタジオの紹介
 SHOTGUN導入事例
 ライブラリとしての活用事例
 プロダクト開発事例
 Unityを用いたハイエンド映像制作
 リアルタイム映像コンテンツの作り方
 TAのその他の取り組み

4. 本セッションについて
資料は即日公開されます
撮影は禁止致しませんが、シャッター音など鳴らさないよう
にお願い致します。
動画は後日公開されます
動画の撮影は可能です。

5. XFLAG スタジオについて

6. ©XFLAG

7. 友達や家族とワイワイ楽しめる
“アドレナリン全開”の
バトルエンターテインメント
を創出し続ける。

8. ©XFLAG

10. SHOTGUN導入事例 〜当時の課題〜

11. ある3Dのプロダクトにアサインされたとき…

12. 従来の管理方法の問題点
 アセットが複数のスプレッドシートで管理されていた
 最新のデータがどこにあるかわかりにくい
 管理コストが高い
©XFLAG

13. 他に抱えていた問題
• サムネイルの一覧表示ができない
• 情報にたどり着くまで時間がかかる
• 誰がボールを持っているかわからない
• データの先祖返りが発生した
など
©XFLAG

14. ツール選定から検証まで

15. ツール選定
• ツール選定において重要視したこと
・サムネイルの一覧表示ができる
・ガントチャート機能がある
・映像データの管理ができる
・コメント通知機能がある
・日本語でのサポートが受けられる
・さほどコストがかからない
・使いやすい

16. Shotgun ならば解決が出来るのでは？
コミュニケーションの改善
情報の共有、蓄積
プロジェクトの進捗管理
スプレッドシートの上位互換
クラウド上で情報を一元管理出来る！
©XFLAG

17. 主な選定理由
 フィルター機能が強力
 APIによる拡張ができる
 進捗状況が把握しやすい
 レイアウトを自由に組める
 動画の管理に強い
 細かいパーミッションの設定ができる
 セキュリティーが高い
 グラフ機能がある
©XFLAG

18. 欲しい機能がほぼ備わっていた

19. 検証を開始
 SHOTGUNの習得方法
・公式サイト
https://support.shotgunsoftware.com/hc/en-us
・AREA JAPANのサイト
https://area.autodesk.jp/product/shotgun/
・Born Digitalサポートのサイト
https://support.borndigital.co.jp/hc/ja/categories/202636278-Shotgun
・サポートへ問い合わせ
など

20. 検証スケジュール
 検証から運用までの期間（約2ヶ月）
©XFLAG

21. 導入後の活用イメージ
©XFLAG

22. SHOTGUNを使ってみて
スプレッドシートの管理業務が不要になり…
©XFLAG

23. 約150時間/月の削減になった

24. SHOTGUN を使ってみて
©XFLAG

25. SHOTGUN を使ってみて
メリット
● ほぼ全ての情報、データを一元化できた
● 開発メンバーの管理意識が高くなった
● 管理コストを下げられた
デメリット
● 導入コストが高い
→ ガイドを作成し説明会を何度か行った
● データ通信に時間がかかる
→ フィルターを活用して通信量を抑えた
● 設定項目が多く複雑
→ パーミッション項目をリスト化した

26. ライブラリとしての活用事例

27. モンストには、
キャラ、バナー、アイテム類などの
デザイン素材が数万点存在する
課題①：データを探すのに時間がかかる
→ データ検索時間の削減が必要！
課題②：データ取り違えや削除ミスが発生しやすい
→ セキュリティ・資産の保全が必要！
©XFLAG

28. ライブラリ化することのメリット
• 資産の二次利用ができる
• ナレッジの共有により知識レベルの向上に繋がる
• データ受け渡しの手間と時間を削減できる
• 制作サイクルが上がることでクオリティーアップができる
• セキュリティ、資産の保全ができる
• 企画書などのドキュメント作成素材として使える
などにより…

29. 早く帰れる！
©XFLAG

30. プロジェクトのライブラリ化
©XFLAG

31. ライブラリの種類
サウンドモンスト
新規プロ
ダクト
セミナー
Unity
アセット
エフェク
ト
©XFLAG

32. ライブラリの種類
©XFLAG

33. フィールドのカスタマイズ例
• 選んだ項目ごとにセルの背景色が変わるように条件を設定
©XFLAG

34. ページのレイアウト例 ①
©XFLAG

35. ページのレイアウト例 ②
©XFLAG

36. ページのレイアウト例 ③
©XFLAG

37. 動画をご覧ください
〜アセットライブラリのデモ〜

38. アセットライブラリのデモ

39. ライブラリへの簡易アクセスツール
SHOTGUN Launcher（mac） SHOTGUN Launcher（win）
©XFLAG

40. アセットのアップロードツール
Asset Uploader各種アセット
©XFLAG

41. 動画をご覧ください
〜UnityからSHOTGUNへのアップロードツールのデモ〜

42. UnityからSHOTGUNへのアップロードツール

43. GitHub・SHOTGUN・Slackの連携
©XFLAG

44. 動画をご覧ください
〜GitHub・SHOTGUN・Slackの連携のデモ〜

45. GitHub・SHOTGUN・Slackの連携

46. ライブラリ化をするのではなく
意識せずともライブラリ化
されていることが理想
©XFLAG

47. プロダクト開発事例
〜パイプラインツールについて〜

48. ©XFLAG

49. 動画をご覧ください
〜「ファイトリーグ」のご紹介〜

50. プロダクト紹介

51. アセットパイプライン
©XFLAG

52. APP Launcher
 アプリケーションを、各プロジェクトの
規定された環境で起動するツール
 ドライブのマウント、指定したプラグイ
ンのロード、DCCツールの各環境パスな
どが自動で設定される
 プリセットは専用ツールから登録
©XFLAG

53. File Manager
• ファイルのOpen/Saveを行うツール
• Saveの際にファイルのサムネイル、解
像度、ユーザー名、日時、コメントなど
の情報を保存する
• SubversionのUpdate, Commitが行え
る
• SHOTGUNのコメント機能（Notes）に
も対応
©XFLAG

54. 動画をご覧ください
〜File Managerのデモ〜

55. File Manager

56. File Managerの活用イメージ
PhotoshopMaya
©XFLAG

57. プロダクト開発事例
〜 Mayaツールについて〜

58. MayaビューポートでのUnityシェーダー再現
Unity Maya
©XFLAG

59. MayaビューポートでのUnityシェーダー再現
• ShaderFXでのシェーダ設計
©XFLAG

60. バリデータツールとSHOTGUNの連携
一括チェック
（Batch版）
個別チェック
（GUI版）
©XFLAG

61. バリデータツールとSHOTGUNの連携
• バリデータツール（GUI版）
©XFLAG

62. バリデータツールとSHOTGUNの連携
• バリデータでのチェック結果をSHOTGUNに反映
©XFLAG

63. バリデータツールとSHOTGUNの連携
• エラー統計をグラフ表示
©XFLAG

64. Shotgunにご興味をお持ちの方は、
AREA JAPAN をご覧下さい

65. ゲーム開発における導入企業

66. 展示ブースにお立ち寄りください

67. プロダクト開発事例
〜 Unityツールについて〜

68. AssetChecker
選択したアセットのパスや参照しているテクスチャ等の情報を一覧表示するツール
©XFLAG

69. AssetBundle Selector
• AssetBundleを選択しやすくしたツール
• デフォルトでできる機能（未使用の名前
を削除、Noneを設定、バリアントの設
定等）はカバーしている
• 名前を検索する機能も追加している
©XFLAG

70. Effect Regulation Checker
• ParticleSystemのデータの不正な部分
を検出、修正するツール
• 各種チェックを一括で実行する（個別で
のチェックも可能）
チェック結果チェック項目
©XFLAG

71. Effect Material Inspector
• エフェクト用のマテリアルのインスペク
ターを拡張
• 選択したシェーダーに合わせたマテリア
ル名にリネームする機能がある
• RenderQueueを選択出来るようドロッ
プダウンで選択できるようにしている
©XFLAG

72. Effect Previewer
• 既存のエフェクトデータを読み込んで再
生するツール
• 関連するデータをシーン上に配置して確
認できる
• エフェクト用マテリアルデータを板ポリ
ゴンに適用しシーン上に一覧で見れるよ
うに配置できる
• ３Dキャラクターのプレハブを読み込ん
でシーン上に配置できる
©XFLAG

73. SpritePacker Window
• SpritePackerのアトラステクスチャを
確認できるツール
• 名前を検索する機能もある
©XFLAG

74. Chara Prefab Maker
• キャラクターのプレハブを１ボタンで設
定してプレハブを保存するツール
©XFLAG

75. Unityを用いたハイエンド映像制作

76. アニメ制作コストを抑えつつ
ハイクオリティーな映像を作る
目的

77. 達成条件
• 魅力的なキャラクターであるか
• 躍動感のあるアニメーションであるか
• 映像品質が担保されているか
©XFLAG

78. 手法
• ゲームエンジンによるリアルタイムシーケンスの構築
• マーザ・アニメーションプラネット様と共同研究
©XFLAG

79. ツール環境
• Unity5.5a6
• Maya2016SP5
• Substance Painter
など

80. ワークフロー比較
©XFLAG

81. 動画をご覧ください
〜Unity映像技研のご紹介〜

82. Unity映像技研

83. モデル
• ハイモデルをベースに改修
• rig用のLowモデルとUnity用のHighモデルの2種類
©XFLAG

84. テクスチャー
• Photoshop：肌、髪、眼球を作成
• Substance Painter：上記以外の体など
©XFLAG

85. アニメーション
• AlembicではなくFBXを使用
• Smooth Skinning Decomposition with Rigid Bones(SSDR)の技術を利用
BaseRig With SSDR
©XFLAG

86. リギング
• mGear1.1を使用
©XFLAG

87. シェーダー
• マーザ様が“THE GIFT”制作時に開発していたものを拡張
Standard Shader Skin Shader（SSS強め）
©XFLAG

88. シェーダー
• Marza Standard Shader
• Skin Shader
• Eye Shader
• Hair Shader
• Gem Shader
©XFLAG

89. ライティング
• Directional Lightを4灯使用
• Ambient Sourceは『Gradient』を使用
• Light ProbeによるBakeは不使用
• Reflection Probeも『Realtime』
©XFLAG

90. カットシーン
• 『Storyteller（現Timeline）』を使用し実装
• Animation Trackだけでカットシーンを構築
• 各項目をStorytellerで生成したアニメーションで制御
©XFLAG

91. フレームレート計測値
• キャラクター単体のショットでは120fps～155fpsを計測
©XFLAG

92. フレームレート計測値
• カットシーンのショットでは24fps～90fpsを計測
©XFLAG

93. 映像の方向け注意事項（技術的制約）
• 1オブジェクト65000vertex制限がある
• インフルエンスの最大が４本まで
• メッシュに対しての制限ジョイント数が256本まで

94. 制作コスト
• 4クール（52話）のCG映像制作費の概算
第01話 第13話 第26話 第39話 第52話
↑
制
作
費
©XFLAG

95. ゲームエンジンを使いリアルタイム
で映像制作することで、映像品質を
担保し中長期的にコストを抑えて
いけることが試算できた。
結果

96. リアルタイム映像コンテンツの作り方
〜人気のライブイベント！ モンストークライブ〜

97. モンストークライブとは？
• XFLAGがプロデュースするLIVEエンターテインメントショー 「XFLAG PARK
2017」のコンテンツで、スマホアプリ「モンスターストライク」で大人気の3
キャラクター（アーサー、ガブリエル、ルシファー）と観客が直接トーク出来る
ステージショー
©XFLAG

98. モンストークライブとは？
• ゲーム中の声優本人がキャラクターの声を担当し、大勢のファンとトークに
セリフ合唱にと大盛況のステージとなった
©XFLAG

99. 動画をご覧ください
〜「モンストークライブ」のご紹介〜

100. モンストークライブ

101. システム構成
©XFLAG

102. ©XFLAG

103. ©XFLAG

104. ©XFLAG

105. TAのその他の取り組み

106. 動画をご覧ください
〜リアルタイムモーションキャプチャ検証のご紹介〜

107. リアルタイムモーションキャプチャ検証

108. リアルタイムモーションキャプチャ検証
©XFLAG

109. 動画をご覧ください
〜Hololens検証のご紹介〜

110. Hololens検証

111. 動画をご覧ください
〜ARKit検証のご紹介〜

112. ARKit検証

113. 以上となります

114. お知らせ

115. 積極採用中！
XFLAG スタジオは、
様々なエンターテインメント領域で採用を強化中です。
詳細はWEBで！
（スポーツ領域にも新たに参入しています！）
https://career.xflag.com/career
※選考に関する問い合わせ先※
career@mixi.co.jp
©XFLAG

116. Thank you!