【Unite Tokyo 2018】XFLAG スタジオにおける資産の有効活用術 ～いかにして数万アセットを管理したか？～

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

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

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

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

XFLAG スタジオについて

©XFLAG

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

©XFLAG

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

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

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

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

ツール選定から検証まで

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

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

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

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

検証を開始  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 ・サポートへ問い合わせ など

• https://support.shotgunsoftware.com/hc/en-us
• https://area.autodesk.jp/product/shotgun/
• https://support.borndigital.co.jp/hc/ja/categories/202636278-Shotgun

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

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

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

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

SHOTGUN を使ってみて ©XFLAG

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

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

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

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

早く帰れる！ ©XFLAG

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

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

ライブラリの種類 ©XFLAG

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

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

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

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

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

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

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

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

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

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

GitHub・SHOTGUN・Slackの連携 ©XFLAG

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

GitHub・SHOTGUN・Slackの連携

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

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

©XFLAG

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

プロダクト紹介

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

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

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

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

File Manager

File Managerの活用イメージ Maya Photoshop ©XFLAG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ワークフロー比較 ©XFLAG

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

Unity映像技研

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

モンストークライブ

システム構成 ©XFLAG

©XFLAG

©XFLAG

©XFLAG

TAのその他の取り組み

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

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

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

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

Hololens検証

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

ARKit検証

以上となります

お知らせ

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

• https://career.xflag.com/career

Thank you!