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
32
『Cygames展 Artworks』におけるShadowverseデジタルサイネージ制作事例
Cygames
December 18, 2024
Tweet
Share
More Decks by Cygames
See All by Cygames
最高のアートワークを発信する『Cygames展 Artworks』企画制作事例
cygames
0
33
社内にバーチャルスタッフ!?「スイちゃん」のキャラクターデザインと施策の広げ方の秘訣
cygames
0
95
全高3m超のバハムート像がスマホを通して躍動する! ~『Cygames展 Artworks』ARコンテンツの開発プロセスと実装~
cygames
0
21
最高の資料を目指すために!社内フリーイラスト制作チームの取り組みについて
cygames
0
100
「生きているモーション」を作り出すCygamesのモーションキャプチャー
cygames
0
71
『GRANBLUE FANTASY: Relink』 原作の世界観に没入するステージの絵作り
cygames
0
370
『GRANBLUE FANTASY: Relink』イラストを再現する為のキャラクターモデル制作事例
cygames
0
110
『GRANBLUE FANTASY: Relink』キャラクターの魅力を支えるリグ制作事例
cygames
0
60
『GRANBLUE FANTASY: Relink』の長期開発を支え続けたテスト自動化の取り組み紹介
cygames
0
100
Other Decks in Technology
See All in Technology
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
610
PaaSの歴史と、 アプリケーションプラットフォームのこれから
jacopen
7
1.4k
生成AI × 旅行 LLMを活用した旅行プラン生成・チャットボット
kominet_ava
0
150
ABWGのRe:Cap!
hm5ug
1
120
月間60万ユーザーを抱える 個人開発サービス「Walica」の 技術スタック変遷
miyachin
1
130
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
いま現場PMのあなたが、 経営と向き合うPMになるために 必要なこと、腹をくくること
hiro93n
9
7.4k
2025年に挑戦したいこと
molmolken
0
150
自社 200 記事を元に整理した読みやすいテックブログを書くための Tips 集
masakihirose
2
320
チームが毎日小さな変化と適応を続けたら1年間でスケール可能なアジャイルチームができた話 / Building a Scalable Agile Team
kakehashi
2
230
AWSの生成AIサービス Amazon Bedrock入門!(2025年1月版)
minorun365
PRO
7
460
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
140
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Side Projects
sachag
452
42k
Designing Experiences People Love
moore
139
23k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Automating Front-end Workflow
addyosmani
1366
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Why Our Code Smells
bkeepers
PRO
335
57k
Optimizing for Happiness
mojombo
376
70k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
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