Unidux を用いたマルチシーン構成の画面遷移 / xrdnk-unity-otonanolt-2021

以下のイベントでLT登壇した際に利用した発表資料です．

【年末だよ】Unity お・と・なのLT大会 2021
https://meetup.unity3d.jp/jp/events/1337

Transcript

1. Unidux を用いた マルチシーン構成の画面遷移 2021/１2/12 【年末だよ】Unity お・と・なのLT大会 2021 Denik (@xrdnk) Unity / XR Developer
2. 自己紹介 Denik ◼ @xrdnk ◼ Unity / XR? エンジニア ◼ 技術ブログ書いてたりしてる
3. アジェンダ ◼ はじめに ◼ Unidux 概念説明 ◼ Unidux 登場人物 ◼ Unidux の使い方 ◼ おわりに
4. 本発表のレベル感 ◼ UniRx を理解している ◼ DiContainer (ここでは Zenject) を理解している ◼ Passive View Pattern （ここでは MVRP) を理解している 上記を満足していることを前提に進めるので 上記に関する説明は基本的にしません．
5. サンプルプロジェクト https://github.com/xrdnk/UniduxSTSample
6. はじめに
7. はじめに ゲームにはほぼ画面遷移があり 各々オレオレ画面遷移制御を実装していると思われる チーム開発になると単一シーン構成だとコンフリクトが発生しやすい マルチシーンでシーンごとに役割や担当を分けることもある 諸々の事情でスタック履歴があるとよかったり シーン遷移時に何らかのデータの受け渡しの仕組みがあると嬉しい 上記の要件を満たすマルチシーン × 画面遷移機構の 仕組みをフルスクラッチで作るのは大変
8. Unidux Unidux の Scene Transition を利用して マルチシーン × 画面遷移制御をいい感じに作ってみたという話 Unidux ≒ Flux Architecture for Unity Flux は Meta (旧 Facebook) が開発したアーキテクチャ React の Redux を知っているとピンとくるかもしれません https://github.com/mattak/Unidux
9. 関連事例｜ポケラボ様のシノアリス 引用： 【CEDEC 2018】 SINoALICE -シノアリス-におけるUnity活用術 https://cedil.cesa.or.jp/cedil_sessions/view/1870
10. Unidux 概念説明
11. Flux Architecture 引用: 「Flux」アーキテクチャとは？ MVCやMVPとの違いとテスタビリティー https://kn.itmedia.co.jp/kn/articles/1911/07/news019.html
12. Store Unidux Data-Flow Input Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator View Action Action
13. Unidux 登場人物
14. Unidux 登場人物 ◼ Page ◼ PageData ◼ Action Creator ◼ Dispatcher ◼ Store ◼ Reducer ◼ State ◼ Watcher
15. Unidux では1画面のことを「Page」と表現します Page は1個以上の Scene ファイルを持ちます Page Main Page (メイン画面) UI Scene UIシーン Logic Scene ゲームロジックシーン Level Scene レベルデザインシーン Title Page (タイトル画面) UI Scene UIシーン Logic Scene ゲームロジックシーン Result Page (リザルト画面) UI Scene UIシーン Logic Scene ゲームロジックシーン
16. Scene Category Unidux では Unity の Scene ファイル に対して 3種類の Scene Category で分類されています ◼ Permanent 永続的に存在する Scene． どのシーンにも共通として使われるシステム部分など ◼ Page 加減算処理される Scene． 画面として使われる Scene． ◼ Modal Page とほぼ同じ．モーダルとして使われる Scene． （分類分けされているが実際ほとんど使ってないので説明割愛）
17. マルチシーン構成例 Entry Point Scene Unidux Service Scene Domain Layer Scenes 永続的に残るシーン群 (主にゲームシステムや ドメインロジックの塊のシーン) 右図は例です Page Scenes 画面としてのシーン群 (加減算処理が行われる) Entry Point Scene Permanent Domain Scenes の 順番やプロジェクト全体設定を行う Unidux Service Scene で Page Scenes の順番・設定 Title Page Logic Page Scene UI Page Scene Main Game Page Logic Page Scene UI Page Scene Result Page Logic Page Scene UI Page Scene Level Page Scene DontDestroyOnLoad Scene VoiceChat Service Scene Multiplayer Service Scene Resource Service Scene
18. PageData 画面(ページ)に関するデータ 必ずしも作成する必要はないが， 画面遷移時のデータ受け渡しに活用できる (例) ◼メインゲーム画面 → リザルト画面 スコアデータや倒した数のデータを渡してリーダボードに結果を表示
19. Action Creator ステートを変更させる Action を作る役 Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action
20. Actions Unidux では 以下の Action が デフォルトで提供されている ◼ Push 新しい画面に遷移する ◼ Pop 前の画面に遷移する ◼ Replace 今の画面を別の画面に置換して遷移する ◼ Reset これまでのスタック履歴をクリアする ◼ SetData ページデータの更新をする ◼ Adjust 現状のステートを調整する
21. Dispatcher Action Creator から受け取った Action を Reducer に渡す役 MVP や MVC では Presenter / Controller の役割に近い Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action
22. Store State と Reducer を格納．状態管理とデータ処理を担っている MVP や MVC では Model の役割に近い Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action
23. Reducer Dispatcher から届いた Action を受け取り ステートを更新する役 Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action
24. State 状態（ステート)を持つクラス群を 纏めるドメインオブジェクト Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action
25. Watcher ステートの変更を監視する役 State に変更が発生を感知 → 更新ステートを View 側に通知 Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action
26. PageWatcher
27. Unidux 主な使い方
28. 新しい画面に遷移したい 初回にタイトル画面を表示する処理の例
29. 新しい画面にデータを渡しながら遷移したい メインゲーム画面からリザルト画面への遷移例
30. 前の画面に遷移したい メインゲーム画面からタイトル画面への遷移例
31. これまでの遷移履歴をリセットして最初の画面に遷移したい リザルト画面からタイトル画面への遷移例
32. ページデータの取得をしたい メインゲーム画面初期化処理の際にページデータを取得している例
33. ページデータの更新をしたい メインゲーム画面でページデータを更新している例
34. 異なるシーンに存在するオブジェクトを参照したい マルチシーンの問題点として異なるシーンに存在する オブジェクトをどのように参照するか考える必要があります Zenject を利用して依存関係の解決を行います Zenject は Scene Context の親子関係の設定と Multi-Parenting の設定が Inspector で比較的容易に出来ます ここで注意なのは シーンの読込順番と Scene Context 親子関係は連動します
35. シーンの読込順番と Scene Context 親子関係例 Entry Point Scene Unidux Service Scene Domain Layer Scenes Page Scenes Title Page Logic Page Scene UI Page Scene Main Game Page Logic Page Scene UI Page Scene Result Page Logic Page Scene UI Page Scene Level Page Scene VoiceChat Service Scene Multiplayer Service Scene Resource Service Scene Parent Child
36. おわりに
37. 単一シーンの画面遷移｜Unity Screen Navigator Haruma-K さんの Unity Screen Navigator を推します こちらはビューのプレハブをページとしています Unity Screen Navigator で単一シーン画面遷移を試してみた - デニッキ！ https://xrdnk.hateblo.jp/entry/2021/11/28/185547
38. Unidux × Unity Screen Navigator (USN) の親和性 Unidux を「シーンファイル」をスコープとした遷移制御とするならば USN は「プレハブファイル」をスコープとした遷移制御 → UI Page Scene 内でのビューナビゲーションに活用できる Main Game Page Logic Page Scene UI Page Scene Level Page Scene Main Game View Prefab Settings View Prefab Modal View Prefab Sheet View Prefab Unidux でマルチシーン遷移制御 USN でプレハブ遷移制御
39. 参考資料 ➢ 【Unity】Redux のように状態管理できる「Unidux」紹介 https://baba-s.hatenablog.com/entry/2018/02/20/085900 ➢ 【Unity】単一シーン/マルチシーンで良い感じに状態管理がしたい https://qiita.com/genkitoyama/items/0ef2cc8927b84c10e947 ➢ Uniduxでゲームサイクルを実装する https://tech.mobilefactory.jp/entry/2018/12/10/163322 ➢ Unidux Repo Unidux Repo 内に Examples があるのでそちらも参考にしてもいいかも． https://github.com/mattak/Unidux