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

Unidux Scene Transition Hands-on / xrdnk-unidux-scene-transition-hands-on

Denik
July 28, 2021

Unidux Scene Transition Hands-on / xrdnk-unidux-scene-transition-hands-on

Denik

July 28, 2021
Tweet

More Decks by Denik

Other Decks in Programming

Transcript

  1. Unidux Scene Transition
    Hands-On
    Workshop and Hands-on

    View full-size slide

  2. 自己紹介
    【名前 / Twitter】
    Denik / @xrdnk
    【職歴】
    TIS 株式会社 19年度入社
    インキュベーションセンター XR 新規事業開発チーム
    XR(VR/AR/MR) エンジニア
    弊社のXRソリューションサービス
    「XR Campus」シリーズの開発に従事しています.
    本発表は個人の見解です.
    所属組織の意見云々ではありません.

    View full-size slide

  3. アジェンダ
    ➢ハンズオン資料
    ➢はじめに
    ➢Unidux
    ➢Unidux 概念説明
    ➢ハンズオンプロジェクト登場人物
    ➢ Unidux 特有
    ➢ 本ハンズオン 特有
    ➢ハンズオンタイム
    ➢おわりに

    View full-size slide

  4. ハンズオン資料

    View full-size slide

  5. ハンズオン資料
    ハンズオンプロジェクトのリポジトリです
    https://github.com/xrdnk/UniduxSceneTransitionSample
    ハンズオン用の hands-on ブランチがあるので, hands-on ブランチでクローンしてください.
    master ブランチは既に実装済のブランチになります.

    View full-size slide

  6. ハンズオン資料の概要
    ➢ 画面遷移について
    「タイトル画面 ⇄ ゲーム画面 → リザルト画面」に遷移します.
    ➢ タイトル画面について
    サードパーティアセットライセンス表示とゲーム画面に移動する処理があります.
    ➢ ゲーム画面について
    神に攻撃する処理とタイトル画面に戻る処理,リザルト画面に移動する処理があります.
    ➢ リザルト画面について
    神にどれだけダメージを与えたのかを表示する処理とタイトル画面に飛ぶ処理があります.

    View full-size slide

  7. ハンズオンプロジェクトの動画

    View full-size slide

  8. はじめに

    View full-size slide

  9. はじめに
    ゲームには必ず画面遷移・状態制御が伴う.
    各々オレオレ画面遷移制御を作っていると思われる.
    ただ毎回フルスクラッチで作るのも大変だし,
    チーム開発になるとちゃんとした画面制御基盤を作ったほうが良さげである.
    何かよい方法はないものか…

    View full-size slide

  10. そこで Unidux

    View full-size slide

  11. Unidux
    React JS が扱う UI の State(状態)を
    管理する Redux というフレームワークがある.
    Unidux は これを Unity で同じ感じに
    扱えるようにした状態管理用のライブラリである.
    Unidux = Unity 版 Redux というより Redux-Like
    今回は Unidux の Scene Transition を利用して画面遷移制御をいい感じに作ってみます.
    注意 ①
    Unidux では内部で UniRx が利用されているので, UniRx の基礎知識は持っている前提になります.
    注意 ②
    Unidux に様々なデザインパターンを当てはめてアレンジしているため,他解説記事とは少し毛色が異なります.
    注意 ③
    画面遷移機構については各々オレオレ機構があると思います.
    本機構については飽く迄も個人的な一例であり,これが正解という訳ではありません.
    https://github.com/mattak/Unidux

    View full-size slide

  12. 本ハンズオンのレベル感
    ➢ Unity 中級者程度
    ➢ UniRx, UniTask を理解している
    ➢ DiContainer (Zenject or VContainer) を理解している
    ➢ Passive View Pattern を理解している
    上記を満足していることを前提に進めるので,
    上記に関することに関する説明は基本的にしません.

    View full-size slide

  13. Unidux 概念説明

    View full-size slide

  14. Store
    Unidux Pattern 構成
    User
    Input
    Dispatcher
    Dispatch
    Action State
    Reducer Reduce
    Unidux Pattern
    Watcher
    Update
    ActionCreator
    View Event

    View full-size slide

  15. Unidux Flow Animation

    View full-size slide

  16. ハンズオンプロジェクト
    登場人物

    View full-size slide

  17. ハンズオンプロジェクトの登場人物たち
    Unidux 特有
    ➢ Page / Scene
    ➢ PageData
    ➢ State
    ➢ Watcher
    ➢ Reducer
    ➢ Store
    ➢ Dispatcher / Duck Pattern
    ➢ Action Creator
    ➢ Unidux Core
    本プロジェクト 固有
    ➢ Progression
    ➢ Domain
    ➢ Service
    ➢ Application
    ➢ Contex
    ➢ Presentation
    ➢ View
    ➢ Presenter
    ➢ Navigator
    ➢ Transitioner
    ➢ LifeCycle

    View full-size slide

  18. Unidux 特有

    View full-size slide

  19. Page / Scene (1)| Concept
    ◆ Page
    Unidux では画面のことを「Page」と表現
    ◆ Scene
    ここの 「Scene」は Unidux の意義
    1 Page は n Scene (n≧1) を持つ
    ◆ Scene Category
    ここの 「Scene」 は Unity Scene の意義
    Scene に 以下のカテゴリーを定義している
    1. Permanent → 永続な Scene
    2. Page → ページの一部としての Scene
    3. Modal → オーバーレイな Scene
    Permanent は全 Page 共通に参照する
    Base Scene ≪Permanent≫
    Title Page
    Header Scene
    ≪Page≫
    Content Scene
    ≪Page≫
    Footer Scene
    ≪Page≫
    Main Page
    Header Scene
    ≪Page≫
    Content Scene
    ≪Page≫
    Footer Scene
    ≪Page≫
    Result Page
    Header Scene
    ≪Page≫
    Content Scene
    ≪Page≫
    Footer Scene
    ≪Page≫

    View full-size slide

  20. Page / Scene (2)| SceneConfig
    サンプルでは以下のように分類
    Unidux Base Scene (共通参照シーン)
    タイトル画面 ゲーム画面 リザルト画面
    Unidux Base Scene
    (共通参照シーン)
    Page
    (タイトル → ゲーム → リザルト)

    View full-size slide

  21. PageData
    1画面に関する揮発性データ
    基本 Serializable なエンティティクラスになる.

    View full-size slide

  22. State
    状態を持つエンティティクラス群を纏める役
    Unidux Scene Transition では Page と Scene に Stateを持たせる.
    以降, ここでは State とは Page / Scene の State を指す.

    View full-size slide

  23. Watcher
    State の変更を監視する役
    State の変更が発生したら,View 側に反映させる
    UniRx で State が
    変更されたのを監視.
    変更されたら更新処理をする

    View full-size slide

  24. Reducer
    Dispatcher から届いた Action と現在の State を受け取って State を変更する役
    ref: Reduxのreducerはなんでreducerと呼ばれているのか
    https://shgam.hatenadiary.jp/entry/2018/11/10/004819

    View full-size slide

  25. Store
    State と Reducer を格納する役 (だと思ってください)
    (Middlewares も格納していますが,今回は説明しません)
    Store
    State
    Reducer Reduce
    Update

    View full-size slide

  26. Dispatcher
    Action Creator から受け取った Action を Reducer に渡す役
    ここで, Action Creator と Reducer を一纏めにしたものを Duck Pattern という(認識です).
    Duck は以下を持つ.
    ◆ IAction
    ◆ ActionCreator
    ◆ IReducer
    Dispatcher
    Dispatch
    Action
    Reducer
    ActionCreator
    Duck

    View full-size slide

  27. Action Creator
    State を変更するような Action を作る役
    Unidux Scene Transition では 以下の Action がデフォルトで提供されている
    ◆ Push
    State のプッシュ
    ◆ Pop
    State のポップ
    ◆ Replace
    State の置換
    ◆ Reset
    State のリセット
    ◆ SetData
    State を持つエンティティクラスのデータのCreate/Update
    ◆ Adjust
    State の 調整

    View full-size slide

  28. Unidux Core
    Unidux 管理用のシングルトンクラス
    デフォルトで SingletonMonoBehaviour を継承 (これはこのままでいい)
    Unidux Core は以下を持つ.
    ◆ IStoreObject (Store)
    ◆ State
    ◆ Subject
    ◆ IReducer[]
    ◆ TextAsset (InitialStateJson)
    UniduxCore を通じて, Dispatch をしていく

    View full-size slide

  29. 本プロジェクト 特有

    View full-size slide

  30. Progression
    ライフサイクル処理群を定義する役
    本ハンズオンでは以下のみを定義している
    ◆ IOrigination.Originate (初期化処理)
    ◆ ITermination.Terminate (終端処理)
    ◆ IOrigination, ITermination を持つ IPeriod (「区切り」の抽象概念)
    IAbortion.Abort (中止処理), IResumption.Resume(再開処理) 等もあるが今回は入れていない
    MonoBehaviour を継承せずに
    Initialize/Awake/Start や OnDestroy/Dispose を行いたいクラスがある場合,
    IPeriod を実装し, Originate と Terminate がマーカーメソッドになる
    小言:
    Initialize ではなく, Originate にしているのは,
    Zenject.IInitialize.Initialize() や VContainer.IInitialize.Initialize() と被らせないようにするため.

    View full-size slide

  31. Domain / Service
    ドメインサービスクラス
    アプリのコアとなる対象領域のデータ構造,インタフェース, 実装
    ⚫ ビジネスロジックは基本ここで実装する
    ⚫ 本プロジェクトでは MonoBehaviour を継承していないが,
    Unity Engine 側の事情で MonoBehaviour を必要に応じて継承する

    View full-size slide

  32. Context
    アプリケーション固有の複数ドメインを利用する処理の実装で,以下の役割を持つ
    「実行(Execute)時」の状態管理の実装
    「実行(Execute)時」の状態に依存する処理の実装
    今回のサンプルでは実装なし(薄いため)
    ⚫ 複数ドメインが存在し,各ドメイン間で処理順番が発生する場合に作る
    ⚫ 基本的に MonoBehaviour を継承しない

    View full-size slide

  33. View
    画面表示とユーザ入力検知の実装
    ⚫ 表示にアニメーションを利用することもある
    ⚫ UIBehaviour または MonoBehaviour を必ず継承することになる

    View full-size slide

  34. Presenter
    View と Context/Domain の橋渡し役
    ⚫ 基本的に Unity Scene 1つにつき,1つ存在する
    ⚫ 基本的に MonoBehaviour を継承しない

    View full-size slide

  35. Navigator
    Unity Scene 内に存在する View 群との間の行き来等の処理を司る
    ⚫ Unity Scene 内に View が 2つ以上存在する時, Navigator を作る
    ⚫ Originate, Terminate 処理を持つ INavigator を実装する
    ⚫ 基本的に MonoBehaviour を継承しない

    View full-size slide

  36. Transitioner
    Page と Page または同一 Page 下における Scene と Scene との間の行き来等の処理を司る
    ⚫ Project 内に Page が 2つ以上存在する時, Transitioner を作る
    ⚫ 基本的に MonoBehaviour を継承しない

    View full-size slide

  37. 登場人物まとめ (1)
    View
    View
    View
    Presenter
    Navigator Context
    Domain
    Transitioner
    Unidux
    Service
    Entity
    etc.
    Progression LifeCycle
    Presentation Application
    Page Unity Scene
    Repository
    Permanent Unity Scene

    View full-size slide

  38. 登場人物まとめ (2)
    Context
    Domain
    Repository
    Service
    Entity
    etc.
    Progression
    LifeCycle
    Application
    Context
    Domain
    Repository
    Service
    Entity
    etc.
    Progression
    LifeCycle
    Application
    Domain Unity Scene Domain Unity Scene

    View full-size slide

  39. マルチシーン構成
    Entry Point Unity Scene
    Permanent Unity Scene
    Page Unity Scene
    Page Unity Scene
    Page Unity Scene
    Page Unity Scene
    Domain Unity Scene
    Domain Unity Scene
    Shared Unity Scene
    Domain Layer Scenes
    Shared Scenes
    Unidux Scenes
    Domain Scenes
    Shared Scenes
    Unidux Permanent Scene
    の順番を定めたり,
    全体設定の定義を行う
    Unidux Scene Config で
    Unidux Page Scenes の設定
    Shared Unity Scene

    View full-size slide

  40. ハンズオンタイム

    View full-size slide

  41. ハンズオン資料
    ハンズオンプロジェクトのリポジトリです
    https://github.com/xrdnk/UniduxSceneTransitionSample
    ハンズオン用の hands-on ブランチがあるので, hands-on ブランチでクローンしてください.
    master ブランチは既に実装済のブランチになります.
    TODO の部分を基本的に埋めていきながらアウトプットしていきます.

    View full-size slide

  42. ハンズオンプロジェクトのゴール

    View full-size slide

  43. Scene Config (2分)
    まずは SceneConfig.cs でシーンカテゴリマップとページマップを設定します.
    ◆ シーンカテゴリーマップ
    IDictionary
    このシーンは Permanent Scene なのか?
    Page Scene なのか? Modal Scene なのか?
    ◆ ページマップ
    IDictionary
    1Page に対応する Unity Scene 配列を設定

    View full-size slide

  44. Unidux Core (2分)
    UniduxCore.cs に Reducer を設定します.
    【復習】
    Unidux Core は以下を持つ.
    ◆ IStoreObject (Store)
    ◆ State
    ◆ Subject
    ◆ IReducer[]
    ◆ TextAsset (InitialStateJson)
    UniduxCore を通じて, Dispatch をしていく

    View full-size slide

  45. Unidux Base Scene
    Unidux Base Scene の構成は右図のようになっています.
    一旦 Main Camera, Event System, Static Env. 等を集約しています.
    Unidux Core を通じて画面制御・状態制御管理を行っています.
    1 Scene には必ず LifeCycle が存在していて,
    各 Page Scene の LifeCycle は Permanent Scene の LifeCycle と親子関係になるようなイメージです.
    Unidux Base Scene は Page ではありませんが,
    まず最初にタイトル画面を表示したいので,
    エントリーポイントのような扱いで Transitioner を作成します.

    View full-size slide

  46. Base Scene Transitioner (3分)
    今回では Unidux Base Scene の役割を
    Entry Point Scene かつ Unidux Permanent Scene としています.
    BaseSceneTransitioner.EntryTitlePage メソッドに
    タイトル画面に遷移するような処理を記述してください
    ① 最初にステートのクリーンを実施
    クリーンなので,どの Action を使うか?
    ② 次にタイトル画面に遷移するようにステートを変更
    次に遷移なので,どの Action を使うか?
    Action Creator が提供されている Action 一覧は以下.
    Push, Pop, Replace, Reset, SetData, Adjust

    View full-size slide

  47. Title Page Navigator (2分)
    タイトル画面では今回 View が2つ以上存在するので,
    Navigator を作成しています.
    [SHOW LICENCE] ボタンをクリックした時に,
    ライセンス画面が表示され,
    [HIDE LICENCE] ボタンをクリックしたら,
    閉じるようにしてみましょう.

    View full-size slide

  48. Title Page Transitioner (3分)
    タイトル画面からゲーム画面に画面遷移出来るようにします.
    TitlePageTransitioner.EntryMainPage に
    遷移処理を行います.
    ① MainPage は 今回 PageData を持つので,
    PageData のインスタンスを作成します.
    コンストラクタには値の初期設定が行われています.
    ② ActionCreator から次に遷移する Action を
    作り, UniduxCore で Dispatch します.

    View full-size slide

  49. Main Page Service (5分)
    MainPageServiceの中身を見てます.
    初期化・終端処理と神に攻撃する処理があります.
    ① ここで初期化の際, MainPageData から
    データを受け取る必要があります.
    ヒント: PageData を取得している API がないか調査しよう
    ② 神に攻撃する処理を行う際に,
    MainPageData の GodHP と DamageDone の
    更新処理を行う必要があります.
    ヒント: ActionCreator の Action 一覧を眺めてみよう

    View full-size slide

  50. Main Page Transitioner (5分)
    ゲーム画面での画面遷移制御を実装します.
    今回ゲーム画面ではタイトル画面へ戻る遷移と,
    リザルト画面に遷移する,2つの遷移方法があります.
    MainPageTransitioner.cs の EntryResultPage と
    ReturnTitlePage に処理を入れます.
    ① 現状の MainPageData を取得しつつ,
    リザルト画面に遷移するようにディスパッチ
    ② タイトル画面(前の画面)に戻るようにディスパッチ

    View full-size slide

  51. Result Page Service (3分)
    リザルト画面に遷移した時,
    ゲーム画面で発生した神への
    ダメージ数を表示するようにします.
    ① 現状の Result Page Data を取得し,
    ReactiveProperty の初期化に設定します.

    View full-size slide

  52. Result Page Transitioner (3分)
    リザルト画面からタイトル画面に戻ります.
    今回リザルト画面は終端画面です.
    終端画面から初期画面に遷移するなど,
    画面の遷移が隣接していない場合の
    ディスパッチ方法はこれまでとは異なるようにしましょう.
    ① これまでのステート情報を破棄して,
    タイトル画面に戻るようにディスパッチしてください

    View full-size slide

  53. ハンズオンプロジェクトゴール

    View full-size slide

  54. おわりに

    View full-size slide

  55. おわりに
    Unity の開発は多種多様でこれといったフレームワークやアーキテクチャが決まってなく,
    Unity 側も実装がカオスであることを前提に作られています.
    シーン遷移の API も SceneManager.Load/LoadAsync 程度しかなくて,
    状態制御とかアドバンスな遷移方法は Unity 側から与えられていません.
    ゲーム業界でも画面遷移機構というのはオレオレ実装で作られているようで,
    これといった解はなく,そしてその解を公開しているところはあまりありません.
    その解の一つに Unidux を使ってみた感じです.
    シーン制御・状態制御の方法の唯一解ではないです.

    View full-size slide

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

    View full-size slide