Slide 1

Slide 1 text

Unidux を用いた マルチシーン構成の画面遷移 2021/12/12 【年末だよ】Unity お・と・なのLT大会 2021 Denik (@xrdnk) Unity / XR Developer

Slide 2

Slide 2 text

自己紹介 Denik ◼ @xrdnk ◼ Unity / XR? エンジニア ◼ 技術ブログ書いてたりしてる

Slide 3

Slide 3 text

アジェンダ ◼ はじめに ◼ Unidux 概念説明 ◼ Unidux 登場人物 ◼ Unidux の使い方 ◼ おわりに

Slide 4

Slide 4 text

本発表のレベル感 ◼ UniRx を理解している ◼ DiContainer (ここでは Zenject) を理解している ◼ Passive View Pattern (ここでは MVRP) を理解している 上記を満足していることを前提に進めるので 上記に関する説明は基本的にしません.

Slide 5

Slide 5 text

サンプルプロジェクト https://github.com/xrdnk/UniduxSTSample

Slide 6

Slide 6 text

はじめに

Slide 7

Slide 7 text

はじめに ゲームにはほぼ画面遷移があり 各々オレオレ画面遷移制御を実装していると思われる チーム開発になると単一シーン構成だとコンフリクトが発生しやすい マルチシーンでシーンごとに役割や担当を分けることもある 諸々の事情でスタック履歴があるとよかったり シーン遷移時に何らかのデータの受け渡しの仕組みがあると嬉しい 上記の要件を満たすマルチシーン × 画面遷移機構の 仕組みをフルスクラッチで作るのは大変

Slide 8

Slide 8 text

Unidux Unidux の Scene Transition を利用して マルチシーン × 画面遷移制御をいい感じに作ってみたという話 Unidux ≒ Flux Architecture for Unity Flux は Meta (旧 Facebook) が開発したアーキテクチャ React の Redux を知っているとピンとくるかもしれません https://github.com/mattak/Unidux

Slide 9

Slide 9 text

関連事例|ポケラボ様のシノアリス 引用: 【CEDEC 2018】 SINoALICE -シノアリス-におけるUnity活用術 https://cedil.cesa.or.jp/cedil_sessions/view/1870

Slide 10

Slide 10 text

Unidux 概念説明

Slide 11

Slide 11 text

Flux Architecture 引用: 「Flux」アーキテクチャとは? MVCやMVPとの違いとテスタビリティー https://kn.itmedia.co.jp/kn/articles/1911/07/news019.html

Slide 12

Slide 12 text

Store Unidux Data-Flow Input Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator View Action Action

Slide 13

Slide 13 text

Unidux 登場人物

Slide 14

Slide 14 text

Unidux 登場人物 ◼ Page ◼ PageData ◼ Action Creator ◼ Dispatcher ◼ Store ◼ Reducer ◼ State ◼ Watcher

Slide 15

Slide 15 text

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 ゲームロジックシーン

Slide 16

Slide 16 text

Scene Category Unidux では Unity の Scene ファイル に対して 3種類の Scene Category で分類されています ◼ Permanent 永続的に存在する Scene. どのシーンにも共通として使われるシステム部分など ◼ Page 加減算処理される Scene. 画面として使われる Scene. ◼ Modal Page とほぼ同じ.モーダルとして使われる Scene. (分類分けされているが実際ほとんど使ってないので説明割愛)

Slide 17

Slide 17 text

マルチシーン構成例 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

Slide 18

Slide 18 text

PageData 画面(ページ)に関するデータ 必ずしも作成する必要はないが, 画面遷移時のデータ受け渡しに活用できる (例) ◼メインゲーム画面 → リザルト画面 スコアデータや倒した数のデータを渡してリーダボードに結果を表示

Slide 19

Slide 19 text

Action Creator ステートを変更させる Action を作る役 Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action

Slide 20

Slide 20 text

Actions Unidux では 以下の Action が デフォルトで提供されている ◼ Push 新しい画面に遷移する ◼ Pop 前の画面に遷移する ◼ Replace 今の画面を別の画面に置換して遷移する ◼ Reset これまでのスタック履歴をクリアする ◼ SetData ページデータの更新をする ◼ Adjust 現状のステートを調整する

Slide 21

Slide 21 text

Dispatcher Action Creator から受け取った Action を Reducer に渡す役 MVP や MVC では Presenter / Controller の役割に近い Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action

Slide 22

Slide 22 text

Store State と Reducer を格納.状態管理とデータ処理を担っている MVP や MVC では Model の役割に近い Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action

Slide 23

Slide 23 text

Reducer Dispatcher から届いた Action を受け取り ステートを更新する役 Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action

Slide 24

Slide 24 text

State 状態(ステート)を持つクラス群を 纏めるドメインオブジェクト Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action

Slide 25

Slide 25 text

Watcher ステートの変更を監視する役 State に変更が発生を感知 → 更新ステートを View 側に通知 Store Dispatcher State ↓ State’ Reducer Reduce Unidux Service Watcher Update ActionCreator Action Action

Slide 26

Slide 26 text

PageWatcher

Slide 27

Slide 27 text

Unidux 主な使い方

Slide 28

Slide 28 text

新しい画面に遷移したい 初回にタイトル画面を表示する処理の例

Slide 29

Slide 29 text

新しい画面にデータを渡しながら遷移したい メインゲーム画面からリザルト画面への遷移例

Slide 30

Slide 30 text

前の画面に遷移したい メインゲーム画面からタイトル画面への遷移例

Slide 31

Slide 31 text

これまでの遷移履歴をリセットして最初の画面に遷移したい リザルト画面からタイトル画面への遷移例

Slide 32

Slide 32 text

ページデータの取得をしたい メインゲーム画面初期化処理の際にページデータを取得している例

Slide 33

Slide 33 text

ページデータの更新をしたい メインゲーム画面でページデータを更新している例

Slide 34

Slide 34 text

異なるシーンに存在するオブジェクトを参照したい マルチシーンの問題点として異なるシーンに存在する オブジェクトをどのように参照するか考える必要があります Zenject を利用して依存関係の解決を行います Zenject は Scene Context の親子関係の設定と Multi-Parenting の設定が Inspector で比較的容易に出来ます ここで注意なのは シーンの読込順番と Scene Context 親子関係は連動します

Slide 35

Slide 35 text

シーンの読込順番と 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

Slide 36

Slide 36 text

おわりに

Slide 37

Slide 37 text

単一シーンの画面遷移|Unity Screen Navigator Haruma-K さんの Unity Screen Navigator を推します こちらはビューのプレハブをページとしています Unity Screen Navigator で単一シーン画面遷移を試してみた - デニッキ! https://xrdnk.hateblo.jp/entry/2021/11/28/185547

Slide 38

Slide 38 text

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 でプレハブ遷移制御

Slide 39

Slide 39 text

参考資料 ➢ 【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