Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Apex Legendsにハマっています / I'm addicted to Apex Leg...

Apex Legendsにハマっています / I'm addicted to Apex Legends

2022年3月27日に行われたtraP LT 2022で発表した資料です。
他の発表資料などは https://connpass.com/event/242713/

to-hutohu

March 27, 2022
Tweet

More Decks by to-hutohu

Other Decks in Technology

Transcript

  1. 自己紹介 4 Apex Legendsにハマっています ◼ とーふとふ(@to_hutohu) ◼ ex-traP (16B 2018年代表

    2019年SysAd班リーダー) ◼ 社会人2年目 ◼ Vtuberが好き ⚫ 花譜・神椿が最推し ⚫ 昨日のライブが最高すぎた
  2. Apex Legendsとは 5 Apex Legendsにハマっています ◼ Respawn Entertainmentが開発、Electronic Artsが リリースしている基本プレイ無料のFPSバトル

    ロワイヤルゲーム ◼ PC・Xbox・PS4/PS5・Swtichで遊べる ◼ 2021年1年間でのプレイ人数は1億7500万人 https://www.ea.com/ja-jp/games/apex-legends
  3. Apex Legendsのゲームの流れ 6 Apex Legendsにハマっています 1. レジェンド選択 2. 3人1部隊で 飛行機から降下

    3. 落ちている武器を 拾って装備を整える 4. 他の部隊と戦う 5. 最後の1部隊になったら チャンピオン
  4. ApexとVtuber 16 Apex Legendsにハマっています ◼ ゲーム配信系Vtuberの多くがプレイしている ⚫ コラボ・イベントツールとして活躍 ◼ Vtuber最協決定戦やCRカップ他Vtuberが参加するイベントも

    たくさん開催されている ⚫ 大会だと乾伸一郎推しなので前回の最協決定戦は良かった… ⚫ 似たような役目のゲームとしては前はPUBG, 最近はValorant
  5. 就職してからの話 18 Apex Legendsにハマっています ◼ 自由(だと感じられる)時間が増えた ⚫ 労働の時間とそれ以外がきっちり分かれる ◼ ゲームを遊ぶ時間が増えた

    ⚫ 自分の好みのゲームも遊ぶが、よく見ている配信者が遊んでいるゲームを 遊ぶことも多い ⚫ サクナヒメ・Vampire Survivors・壺・アルセウス・Apex…
  6. とーふとApex Legends 19 Apex Legendsにハマっています ◼ FPS初ゲーム ◼ PC・キーボード/マウス操作 ◼

    形から入る派なのでデバイスは揃えた ⚫ RTX3070/165Hzのモニター/ゲーミングマウス ◼ プラチナ4床ペロ
  7. ロギングの機能(現状) 34 Apex Legendsにハマっています ◼ レジェンド構成記録機能 ◼ 装備切り替え・部隊数・キルアシスト・ヘルスなど 基本情報ロギング機能 ◼

    マップ内移動経路記録機能 ◼ 安置スクリーンショット機能 ◼ リザルト画面記録・スクリーンショット機能 ◼ ダメージ・キル/アシスト・ラスト2部隊などを検知して約5秒前から 録画する自動インスタントリプレイ機能
  8. 技術概要 42 Apex Legendsにハマっています OffscreenCanvas Media Capture and Streams API

    MediaStreamTrack API Wasm(OpenCV) リアルタイム画像認識 Stateに応じて各タスクを実行 画像・動画の保存系 IndexedDB 画面のキャプチャ Streamのクローン フレームの取得・間引き 10フレームに1回 モノクロ化 イベント通知 インスタントリプレイ スクリーンショット 保存 ゲーム管理 ゲーム終了通知 ゲーム結果取得 ゲーム結果記録 画像リアルタイム処理系 MediaStream Recording API
  9. Media Capture and Streams API 44 Apex Legendsにハマっています ◼ WebRTC関連のAPI

    ◼ 画面のキャプチャを取ることができる ⚫ Chromium系なら音声も取れる ◼ ここで取得したStreamを後段の各種APIで利用する https://developer.mozilla.org/ja/docs/Web/API/Media_Streams_API
  10. MediaStreamTrack (Insertable) API 45 Apex Legendsにハマっています ◼ エンコードされる前の生のフレームデータを取得できる ◼ 本来は動画のリアルタイム編集(バーチャル背景とか)に使う

    ◼ ApeLogでは各フレームのデータをWasmにわたすために利用 ◼ 流れてくるデータはYUV_I420 ⚫ 輝度と青色成分の差・赤色成分の差を持っている ◼ Chromium系でしか使えない! https://developer.mozilla.org/ja/docs/Web/API/MediaStreamTrack https://www.w3.org/TR/mediacapture-transform/
  11. MediaStream Recording API 47 Apex Legendsにハマっています ◼ MediaStreamを動画バイナリ化できる ◼ ApeLogではインスタントリプレイのために利用

    ◼ 動画フォーマットやビットレートを指定して記録を開始 ◼ 得られるBlobをファイルとして保存するとwebmファイルとして見る ことができる https://developer.mozilla.org/ja/docs/Web/API/MediaStream_Recording_API
  12. OffscreenCanvas 48 Apex Legendsにハマっています ◼ Canvas APIをメインスレッドでもWebWorkerでも使えるようにしたもの ◼ ApeLogでは動画中からスクリーンショットを取得するために利用 ⚫

    StreamをVideoで再生→フレームをCanvasに描画→APIでPNG Blobを取得→IndexedDBに保存 ◼ 今回はメインスレッドでしか使ってません https://developer.mozilla.org/ja/docs/Web/API/OffscreenCanvas
  13. 技術概要 52 Apex Legendsにハマっています OffscreenCanvas Media Capture and Streams API

    画像・動画の保存系 IndexedDB 画面のキャプチャ Streamのクローン イベント通知 データの蓄積・破棄 録画 スクリーンショット 保存 ゲーム管理 ゲーム終了通知 ゲーム結果取得 ゲーム結果記録 MediaStream Recording API MediaStreamTrack API Wasm(OpenCV) フレームの取得・間引き 10フレームに1回 モノクロ化 画像リアルタイム処理系 リアルタイム画像認識 Stateに応じて各タスクを実行
  14. タスク:画像系 53 Apex Legendsにハマっています ◼ 指定範囲を矩形で取得 ◼ しきい値で二値化(したりしなかったり) ◼ 各画像で以下の処理を行う

    ⚫ ターゲット画像との差分(絶対値)を取る ⚫ しきい値(30くらい)で二値化 ⚫ 0ではないピクセルの数を数える ◼ 指定した値以下かつ最も値が小さいものを 結果とする 取り出して二値化 対象画像 差分
  15. タスク:文字系 55 Apex Legendsにハマっています ◼ 指定範囲を矩形で取得 ◼ しきい値で二値化(白黒化) ◼ 指定サイズ範囲内の矩形を取得

    cv::findContours ◼ 各矩形で以下の処理を行う ⚫ 対象画像サイズに合わせてパディング ⚫ すべての対象画像と差分を取って 一番小さいものを結果とする ◼ すべての結果を合わせたものが結果 ・・・ 取り出して二値化 ターゲット画像
  16. タスク:マップ 58 Apex Legendsにハマっています ◼ OpenCVのSIFT(Scale-Invariant Feature Transform) というアルゴリズムを利用 ⚫

    チュートリアルに沿って書くとできる ⚫ SURFやORB、AKAZEを試して一番精度が出た(感覚) ◼ マップ上での位置推定は↓の記事を参考に https://qiita.com/grouse324/items/74988134a9073568b32d
  17. Stateの遷移 60 Apex Legendsにハマっています 設定画面開いているとスキップする部分もあって難しい ロビー マッチング レジェンド 選択 ゲーム通常

    ダウン中 バナー 全滅 マップ 画面 その他UI (バッグなど) リザルト マッチタイプ判定 マップ判定
  18. 技術概要 61 Apex Legendsにハマっています Media Capture and Streams API MediaStreamTrack

    API Wasm(OpenCV) Stateに応じて各タスクを実行 IndexedDB 画面のキャプチャ Streamのクローン フレームの取得・間引き 10フレームに1回 モノクロ化 イベント通知 保存 ゲーム管理 ゲーム終了通知 ゲーム結果記録 画像リアルタイム処理系 OffscreenCanvas 画像・動画の保存系 インスタントリプレイ スクリーンショット ゲーム結果取得 MediaStream Recording API OffscreenCanvas
  19. WebMのコンテナフォーマット 63 Apex Legendsにハマっています ◼ Matroska(マトリョーシカ)のサブセット ◼ MatroskaはEBMLという形式 ⚫ XMLを元にしたデータ格納方式

    ◼ ↓フォーマットイメージ(すごいてきとう) Header SimpleBlock Timecode SimpleBlock SimpleBlock ︙ SimpleBlock Timecode SimpleBlock SimpleBlock ︙ 動画のヘッダー (いろいろ入っている) Cluster 動画の本体 これがまとめて Blobとして渡される Clusterの開始秒数・ 長さが入っている
  20. インスタントリプレイの実現 65 ◼ データをBlobからEBMLにパースしておく ◼ Timecodeの中身を見て保持しておく秒数を越えていたらClusterを消す SimpleBlock Timecode SimpleBlock SimpleBlock

    ︙ SimpleBlock Timecode SimpleBlock SimpleBlock ︙ SimpleBlock Timecode SimpleBlock SimpleBlock ︙ 変更前 開始秒数 1.7s 開始秒数 3.5s 開始秒数 5.3s SimpleBlock Timecode SimpleBlock SimpleBlock ︙ 開始秒数 0s Header 変更後 開始秒数 0s 開始秒数 1.8s 開始秒数 3.6s 削除 SimpleBlock Timecode SimpleBlock SimpleBlock ︙ SimpleBlock Timecode SimpleBlock SimpleBlock ︙ SimpleBlock Timecode SimpleBlock SimpleBlock ︙ Header
  21. 録画シーケンス 67 Apex Legendsにハマっています 1. Wasmのタスクから録画開始の通知が来る 2. そのタイミングのスクショを 3. 前を捨てていく処理を停止

    4. 20秒後にstopする ⚫ 20秒以内に再度録画開始の通知が来たら延長する 5. EBML形式のデータをBlob化 6. IndexedDBに保存
  22. 開発中のあれこれ 71 Apex Legendsにハマっています ◼ インスタントリプレイ ◼ 色変換が重い ◼ ネイティブ版との比較

    ◼ PythonとC++ ◼ ランクとカジュアルの罠 ◼ Clionでの開発 ◼ プレイ映像ならでは
  23. 色変換が重い 74 Apex Legendsにハマっています ◼ 最初は一部タスクをカラーで処理するために YUV_I420→BGR→GRAYの変換をしていた ◼ YUV→RGBの変換式 ◼

    YUV→GRAYの変換式 ◼ YUV→GRAYのみにして処理はすべて グレースケールで行うように OpenCV(Wasm)で YUV_I420→BGR に変換するだけ
  24. Wasm版の利点 78 Apex Legendsにハマっています ◼ ブラウザのAPIとの連携ができる ⚫ 今回でいうと録画スクショ周りやIndexedDBなど ◼ C++版で映像・音声をキャプチャするのはムズい

    ⚫ C++では音声と動画を同時にキャプチャして動画ファイルに エンコードする方法がわからなかった… ◼ インストールが不要 ⚫ ブラウザ版を体験版にして低負荷にしたい方ははこちら→C++版みたいなことができるかも
  25. Clionでの開発 82 Apex Legendsにハマっています ◼ Windows側にリポジトリを作ってWindowsネイティブのビルドとWSLでの Wasmビルドを設定するとネイティブ版・Wasm版を並行して開発できる ⚫ ただしWasm版のビルドはWSL側にリポジトリを作ってビルドするよりめちゃくちゃ遅くなる ⚫

    WasmのビルドはDockerでやるようにしたら良かったかも? Win側のリポジトリを開く WSL側でEmscripten ビルドする設定を追加 ビルド設定でネイティブと Emscriptenを設定 設定>ツールチェーン ビルドコンフィグ
  26. 社会人として 86 Apex Legendsにハマっています ◼ (ゲームも開発も)ハマると生活が崩壊する ◼ 体力 =仕事+趣味+人間生活 時間

    =仕事+趣味+人間生活 モチベ =仕事+趣味+人間生活を実感する ◼ わからん~してて気づいたら朝4時とかになっていると終わり
  27. これから 87 Apex Legendsにハマっています ◼ フロントUIをもっとちゃんとする ◼ 実はインスタントリプレイもっと簡単に実装できたっぽい ◼ 統計とかデータのとり方とか改善

    ◼ 精度改善 ⚫ アークスターとかのスロウで誤判定をしないようにしたい ⚫ その前にテスト書きたい ◼ 公開する ⚫ 動画バンバン上がるので安く済ませる方法に悩んでいる ⚫ 自作サービス盆栽生活したい