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

Unidux Scene Transition Hands-on / xrdnk-unidux...

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. 自己紹介 【名前 / Twitter】 Denik / @xrdnk 【職歴】 TIS 株式会社

    19年度入社 インキュベーションセンター XR 新規事業開発チーム XR(VR/AR/MR) エンジニア 弊社のXRソリューションサービス 「XR Campus」シリーズの開発に従事しています. 本発表は個人の見解です. 所属組織の意見云々ではありません.
  2. ハンズオン資料の概要 ➢ 画面遷移について 「タイトル画面 ⇄ ゲーム画面 → リザルト画面」に遷移します. ➢ タイトル画面について

    サードパーティアセットライセンス表示とゲーム画面に移動する処理があります. ➢ ゲーム画面について 神に攻撃する処理とタイトル画面に戻る処理,リザルト画面に移動する処理があります. ➢ リザルト画面について 神にどれだけダメージを与えたのかを表示する処理とタイトル画面に飛ぶ処理があります.
  3. 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
  4. 本ハンズオンのレベル感 ➢ Unity 中級者程度 ➢ UniRx, UniTask を理解している ➢ DiContainer

    (Zenject or VContainer) を理解している ➢ Passive View Pattern を理解している 上記を満足していることを前提に進めるので, 上記に関することに関する説明は基本的にしません.
  5. Store Unidux Pattern 構成 User Input Dispatcher Dispatch Action State

    Reducer Reduce Unidux Pattern Watcher Update ActionCreator View Event
  6. ハンズオンプロジェクトの登場人物たち 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
  7. 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≫
  8. Page / Scene (2)| SceneConfig サンプルでは以下のように分類 Unidux Base Scene (共通参照シーン)

    タイトル画面 ゲーム画面 リザルト画面 Unidux Base Scene (共通参照シーン) Page (タイトル → ゲーム → リザルト)
  9. State 状態を持つエンティティクラス群を纏める役 Unidux Scene Transition では Page と Scene に

    Stateを持たせる. 以降, ここでは State とは Page / Scene の State を指す.
  10. Reducer Dispatcher から届いた Action と現在の State を受け取って State を変更する役 ref:

    Reduxのreducerはなんでreducerと呼ばれているのか https://shgam.hatenadiary.jp/entry/2018/11/10/004819
  11. Dispatcher Action Creator から受け取った Action を Reducer に渡す役 ここで, Action

    Creator と Reducer を一纏めにしたものを Duck Pattern という(認識です). Duck は以下を持つ. ◆ IAction ◆ ActionCreator ◆ IReducer Dispatcher Dispatch Action Reducer ActionCreator Duck
  12. Action Creator State を変更するような Action を作る役 Unidux Scene Transition では

    以下の Action がデフォルトで提供されている ◆ Push State のプッシュ ◆ Pop State のポップ ◆ Replace State の置換 ◆ Reset State のリセット ◆ SetData State を持つエンティティクラスのデータのCreate/Update ◆ Adjust State の 調整
  13. Unidux Core Unidux 管理用のシングルトンクラス デフォルトで SingletonMonoBehaviour を継承 (これはこのままでいい) Unidux Core

    は以下を持つ. ◆ IStoreObject (Store) ◆ State ◆ Subject<State> ◆ IReducer[] ◆ TextAsset (InitialStateJson) UniduxCore を通じて, Dispatch をしていく
  14. 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() と被らせないようにするため.
  15. Navigator Unity Scene 内に存在する View 群との間の行き来等の処理を司る ⚫ Unity Scene 内に

    View が 2つ以上存在する時, Navigator を作る ⚫ Originate, Terminate 処理を持つ INavigator を実装する ⚫ 基本的に MonoBehaviour を継承しない
  16. Transitioner Page と Page または同一 Page 下における Scene と Scene

    との間の行き来等の処理を司る ⚫ Project 内に Page が 2つ以上存在する時, Transitioner を作る ⚫ 基本的に MonoBehaviour を継承しない
  17. 登場人物まとめ (1) View View View Presenter Navigator Context Domain Transitioner

    Unidux Service Entity etc. Progression LifeCycle Presentation Application Page Unity Scene Repository Permanent Unity Scene
  18. 登場人物まとめ (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
  19. マルチシーン構成 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
  20. Scene Config (2分) まずは SceneConfig.cs でシーンカテゴリマップとページマップを設定します. ◆ シーンカテゴリーマップ IDictionary<SceneName, int>

    このシーンは Permanent Scene なのか? Page Scene なのか? Modal Scene なのか? ◆ ページマップ IDictionary<PageName, SceneName[]> 1Page に対応する Unity Scene 配列を設定
  21. Unidux Core (2分) UniduxCore.cs に Reducer を設定します. 【復習】 Unidux Core

    は以下を持つ. ◆ IStoreObject (Store) ◆ State ◆ Subject<State> ◆ IReducer[] ◆ TextAsset (InitialStateJson) UniduxCore を通じて, Dispatch をしていく
  22. 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 を作成します.
  23. 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
  24. Title Page Navigator (2分) タイトル画面では今回 View が2つ以上存在するので, Navigator を作成しています. [SHOW

    LICENCE] ボタンをクリックした時に, ライセンス画面が表示され, [HIDE LICENCE] ボタンをクリックしたら, 閉じるようにしてみましょう.
  25. Title Page Transitioner (3分) タイトル画面からゲーム画面に画面遷移出来るようにします. TitlePageTransitioner.EntryMainPage に 遷移処理を行います. ① MainPage

    は 今回 PageData を持つので, PageData のインスタンスを作成します. コンストラクタには値の初期設定が行われています. ② ActionCreator から次に遷移する Action を 作り, UniduxCore で Dispatch します.
  26. Main Page Service (5分) MainPageServiceの中身を見てます. 初期化・終端処理と神に攻撃する処理があります. ① ここで初期化の際, MainPageData から

    データを受け取る必要があります. ヒント: PageData を取得している API がないか調査しよう ② 神に攻撃する処理を行う際に, MainPageData の GodHP と DamageDone の 更新処理を行う必要があります. ヒント: ActionCreator の Action 一覧を眺めてみよう
  27. Main Page Transitioner (5分) ゲーム画面での画面遷移制御を実装します. 今回ゲーム画面ではタイトル画面へ戻る遷移と, リザルト画面に遷移する,2つの遷移方法があります. MainPageTransitioner.cs の EntryResultPage

    と ReturnTitlePage に処理を入れます. ① 現状の MainPageData を取得しつつ, リザルト画面に遷移するようにディスパッチ ② タイトル画面(前の画面)に戻るようにディスパッチ
  28. おわりに Unity の開発は多種多様でこれといったフレームワークやアーキテクチャが決まってなく, Unity 側も実装がカオスであることを前提に作られています. シーン遷移の API も SceneManager.Load/LoadAsync 程度しかなくて,

    状態制御とかアドバンスな遷移方法は Unity 側から与えられていません. ゲーム業界でも画面遷移機構というのはオレオレ実装で作られているようで, これといった解はなく,そしてその解を公開しているところはあまりありません. その解の一つに Unidux を使ってみた感じです. シーン制御・状態制御の方法の唯一解ではないです.
  29. 参考資料 ➢ 【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