Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
『Cygames展 Artworks』におけるShadowverseデジタルサイネージ制作事例
Search
Cygames
December 18, 2024
Technology
0
39
『Cygames展 Artworks』におけるShadowverseデジタルサイネージ制作事例
Cygames
December 18, 2024
Tweet
Share
More Decks by Cygames
See All by Cygames
最高のアートワークを発信する『Cygames展 Artworks』企画制作事例
cygames
0
47
社内にバーチャルスタッフ!?「スイちゃん」のキャラクターデザインと施策の広げ方の秘訣
cygames
1
120
全高3m超のバハムート像がスマホを通して躍動する! ~『Cygames展 Artworks』ARコンテンツの開発プロセスと実装~
cygames
0
36
最高の資料を目指すために!社内フリーイラスト制作チームの取り組みについて
cygames
1
130
「生きているモーション」を作り出すCygamesのモーションキャプチャー
cygames
0
93
『GRANBLUE FANTASY: Relink』 原作の世界観に没入するステージの絵作り
cygames
0
840
『GRANBLUE FANTASY: Relink』イラストを再現する為のキャラクターモデル制作事例
cygames
0
150
『GRANBLUE FANTASY: Relink』キャラクターの魅力を支えるリグ制作事例
cygames
0
90
『GRANBLUE FANTASY: Relink』の長期開発を支え続けたテスト自動化の取り組み紹介
cygames
0
130
Other Decks in Technology
See All in Technology
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
600
分解して理解する Aspire
nenonaninu
2
490
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
9
1.6k
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
67k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.9k
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
230
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
1
520
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
180
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
670
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
130
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
How GitHub (no longer) Works
holman
314
140k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Become a Pro
speakerdeck
PRO
26
5.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
KATA
mclloyd
29
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Transcript
1/31 AIテクノロジー エンジニア / 朝日田 卓哉 『Cygames展 Artworks』における Shadowverseデジタルサイネージ制作事例 エンジニアリング/プロダクション
2/31 この講演について 本講演ではCygames展Shadowverse サイネージコンテンツの開発事例を紹介します。 エンジニアが中心となりフィードバックを繰り返して 方向性を定める制作プロセス、イベントコンテンツ特有の 制約に対する解決手法について解説します。
3/31 朝日田 卓哉 AIテクノロジー 先端コンテンツチーム / エンジニア 広告系の制作会社でネイティブアプリや、XRコンテンツ、インスタレー ションなどの開発を経て、2018年7月に株式会社Cygamesに合流。 合流後もARアプリ開発や、VRコンテンツ開発、デジタルサイネージを活
用したコンテンツ開発など、オフラインイベントに向けたコンテンツ制作 を多く担当。 自己紹介
4/31 アジェンダ ◼ Cygames展で展示したShadowverseのコンテンツについて紹介 ◼ コンテンツの仕様や使用した機材等について コンテンツ紹介 ◼ エンジニア主導とはどういったものか ◼
なぜエンジニアが主導する必要があるのか ◼ 実際にエンジニアが主導することでうまく進められた事例 エンジニア主導による制作プロセス ◼ 機材選定やオペレーションを踏まえたシステム構成の考え方 ◼ 実際に発生した不具合とその対応について イベントコンテンツ開発のTips
5/31 コンテンツ紹介
6/31
7/31 コンテンツ紹介 ◆ 東京上野の森美術館で行ったCygames展のShadowverseコーナー ◆ タッチパネル18枚を敷き詰め歴代のカードを展示(すべてのカードがタッチ可能!) ◆ Shadowverse歴史をたどれるコンテンツ
8/31 歴代のカードで展示コンセプトを体現 ◼ Cygames展のコンセプトは 最高のコンテンツの系譜 ◼ 歴代のカードを大量に展示し 系譜を表現 ◼ タッチ操作でShadowverse
の進化を体験
9/31 展示されたカードの詳細 ◼ 第28弾までが対象 ◼ すべてプレミアムカード ◼ トークンカード含む一部コラボカードも展示 ◼ タッチすることでカードに応じたアニメーションが再生
◆カード総数4122枚を展示
10/31 タッチパネル仕様 ◆75型タッチディスプレイ ◆横13枚縦18枚で構成 ◆10点マルチタッチ ◆10枚まで同時に触ったときに 一番きれいに見える位置にアニメーション ◆11枚以上は範囲内でランダムに移動 ◆全カードがタッチ可能!
11/31 カードタッチによるインタラクション ◼ 10枚まで同時にタッチ可能 ◼ 10枚を敷き詰めたときにカード が一番大きくなるように配置 ◼ 配置パターンはAかB のパターンに限られる
◼ ABをランダムで表示 4つの配置パターン 何度も触りたくなるような演出に
12/31 カードの種類ごとのアニメーション スペル・アミュレット • 移動アニメーションは フォロワーと同じものを利用 • エフェクトはゲーム内のものを 組み合わせて今回のために作成 フォロワー
• 進化モーションやエフェクトは ゲーム内と同じものを使用 • 移動量のみ今回用に調整 すべてのカードを触れる イベントコンテンツとして制作
13/31 展示会場や美術館といった環境で 展示体験するコンテンツ イベントコンテンツとは? ◆ 入力機器と出力が異なる程度の違い ◼ タッチパネルによる入力や、プロジェクターによる投影やHMDなど ◆ コンテンツの作り方はゲームもイベントコンテンツも同じ
◼ ほぼゲーム開発と変わらない=すでに開発しているリソースを そのまま流用して新しいコンテンツを作ることができる ゲーム開発との違いは意外と少ない
14/31 ◆ 決めないといけない項目は 実際に実物を見ないと想像がつかない ◆ 特に通常のゲーム開発とは離れたコンテンツほど イメージがしにくい ◆ ハードウェア的な問題点・注意点は エンジニアしか把握していない場合が多い
イベントコンテンツ特有の問題
15/31 エンジニア主導による制作プロセス
16/31 エンジニア主導の制作プロセスとは 設置時の注意点 • 機械特性を考慮した設置環境 • メンテナンスを見据えた導線や システム構成 • 設置に必要な時間をもとにした
スケジュール コンテンツの動きや仕様 • 本番に近い環境を再現 • どういったコンテンツなのかを 体験できるように • 次に何を決めればよいのか イメージできるように作る エンジニアが主体的に動き、周りを巻き込みながら コンテンツ制作を進めていく
17/31 なぜエンジニア主導で進めるのか ◆ 実装や検証はエンジニアの得意分野! ◼ テキストだとイメージしにくいので実際に体験できることが重要 ◼ 体験できることでその場でイメージを共有できる ◼ 足りない要素も仮実装して議論を進めることが可能に
◆ 逆算して制作を進められる ◼ 開発や設営工数だけでなく、必要な設営環境もエンジニアが把握 ◼ イベント日から逆算してスケジュールを引き、どんなコンテンツ であれば内容を最大化できるのか提案することができる ◼ 機材の動作環境や設営における注意点から会場として 設計できる空間を逆算できる
18/31 実際にエンジニアから出た不明点 コンテンツの動きや仕様 ◆ コンテンツの動きや仕様 ◼ スペル・アミュレットは進化しないがどうするか ◼ すべてプレミアムだと画面がうるさくならないか ◼
画面にカードを敷き詰めたときのサイズ感 ◆ 設置時の注意点 ◼ 廃熱対策のエアフローをどうすか ◼ トラブル発生時のメンテナンスはどこで行うか ◼ 設置やセットアップにかかる時間から逆算したデッドライン
19/31 まずは実装してから確認する理由 実際に作ってみないとわからない! ◆ 文章や画像、キャプチャした動画ですら イメージがつきにくい ◼ 表示内容や動きの確認は必ず実機でチェック ◆ PCで動かしても筐体の大きさが異なるため
体験がまったく違ったものになる ◼ 可能な限り本番環境と同じものを用意するのが望ましい
20/31 指定のない演出を見つけたとき まずは適切なものを見繕って実装して、どのように調整して いくか相談できる環境にする スペル・アミュレットに は進化に似た演出がない ゲーム内で使用されている 演出からコンテンツに あった演出を実装してみる エンジニアはただ作るだけでなく、コンテンツへの深い理解も必要
21/31 実機で確認するときのTips 確認時に複数パターン切り替えられる仕組みを 仕込んでおくことも重要 ◆ いわゆるデバッグコマンドを仕込んでおき、動作中に切り替える ◆ 遅延なく切り替えることで、どのパターンがより良いか判断しやすくなる
22/31 イベントコンテンツ開発のTips
23/31 コンテンツで使用する機材について 会場のみの特定環境に特化した機材構成 ◆ 会場で設置した環境でしか動かさないため、不特定多数 の端末に対応する必要がない ◆ 動作環境を自前で用意することで、コンテンツに応じた 機材の選定により、スペックによる制限がなくなる
24/31 今回のコンテンツに特化した機材 メモリ管理が必要になるとメモリリークの 可能性が含まれてしまう すべてのリソースを起動時に読み込み、 動作中のアセットロード等をなくすことで、 メモリ管理自体を行わないような設計に メモリを潤沢に用意してメモリリークを抑制!
25/31 現地の環境や運用を見越した設計 その1 その2 現地で微調整が行えるようにする オペレーションを踏まえた操作方法にする
26/31 現地で微調整が行えるようにする ◆ 最終調整は必ず発生する ◼ 本番に近い環境は本番環境ではない ◆ 主に外部ファイルで調整できるように設計 ◼ 今回は対応ディスプレイ番号をファイルで管理
不具合発生時に簡単に機材を交換できるように
27/31 オペレーションを踏まえた操作方法 注意点 会期中は運営スタッフが不具合対応含めてすべて対応 可能な限り操作をなくし 自動ですべて動作するのが理想 ◼ 立ち上げとシャットダウンもすべて自動化 ◼ 外部ファイルの内容に従って表示内容が変化
◼ 不具合発生時にPCを変更する場合、設置場所以外で ファイルを書き換えることで簡単に機材更新が可能
28/31 実際に発生した不具合 安価なノーブランド品を 利用したのが原因 信頼性の高いメーカー品に 購入して切り替えて対応 設営時に4K解像度で出力できない! 準備段階でHDMIとDポートの変換アダプタの相性が悪く、 本来出したい4K解像度で表示できなかった
29/31 展示期間中の不具合 展示期間中にシステム的な問題は発生せず、 終了まで問題なく動作し続けた この中に文字を打ち込む エンジニアとしては逆に 何も起きていないのは不安でした
30/31 まとめ ◼ 展示したShadowverseのコンテンツはどのようなものだったのか ◼ カードの詳細や使用したタッチパネルについて解説 展示を行ったコンテンツについて ◼ イベントコンテンツ制作では実際に全員で体験してみることが重要 ◼
体験するためにはエンジニアが主体的に動いて作らなければならない ◼ 足りない要素があってもまずは作ってみて議論できるようにする コンテンツ制作におけるエンジニア主導 ◼ 機材選定の考え方について ◼ 設営やオペレーションを踏まえて調整しやすいようにシステムを考える ◼ 実際に発生した不具合とその対応について イベントコンテンツ開発のTips
31/31