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

Transcript

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

2. 自己紹介 【名前 / Twitter】 Denik / @xrdnk 【職歴】 TIS 株式会社

   19年度入社 インキュベーションセンター XR 新規事業開発チーム XR(VR/AR/MR) エンジニア 弊社のXRソリューションサービス 「XR Campus」シリーズの開発に従事しています． 本発表は個人の見解です． 所属組織の意見云々ではありません．

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

   ➢ 本ハンズオン 特有 ➢ハンズオンタイム ➢おわりに

4. ハンズオン資料

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

6. ハンズオン資料の概要 ➢ 画面遷移について 「タイトル画面 ⇄ ゲーム画面 → リザルト画面」に遷移します． ➢ タイトル画面について

   サードパーティアセットライセンス表示とゲーム画面に移動する処理があります． ➢ ゲーム画面について 神に攻撃する処理とタイトル画面に戻る処理，リザルト画面に移動する処理があります． ➢ リザルト画面について 神にどれだけダメージを与えたのかを表示する処理とタイトル画面に飛ぶ処理があります．

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

8. はじめに

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

10. そこで Unidux

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

12. 本ハンズオンのレベル感 ➢ Unity 中級者程度 ➢ UniRx， UniTask を理解している ➢ DiContainer

    (Zenject or VContainer) を理解している ➢ Passive View Pattern を理解している 上記を満足していることを前提に進めるので， 上記に関することに関する説明は基本的にしません．

13. Unidux 概念説明

14. Store Unidux Pattern 構成 User Input Dispatcher Dispatch Action State

    Reducer Reduce Unidux Pattern Watcher Update ActionCreator View Event

15. Unidux Flow Animation

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

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

18. Unidux 特有

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≫

20. Page / Scene (2)｜ SceneConfig サンプルでは以下のように分類 Unidux Base Scene (共通参照シーン)

    タイトル画面 ゲーム画面 リザルト画面 Unidux Base Scene (共通参照シーン) Page (タイトル → ゲーム → リザルト)

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

22. State 状態を持つエンティティクラス群を纏める役 Unidux Scene Transition では Page と Scene に

    Stateを持たせる． 以降， ここでは State とは Page / Scene の State を指す．

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

    変更されたのを監視． 変更されたら更新処理をする

24. Reducer Dispatcher から届いた Action と現在の State を受け取って State を変更する役 ref:

    Reduxのreducerはなんでreducerと呼ばれているのか https://shgam.hatenadiary.jp/entry/2018/11/10/004819

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

    Reducer Reduce Update

26. Dispatcher Action Creator から受け取った Action を Reducer に渡す役 ここで， Action

    Creator と Reducer を一纏めにしたものを Duck Pattern という(認識です)． Duck は以下を持つ． ◆ IAction ◆ ActionCreator ◆ IReducer Dispatcher Dispatch Action Reducer ActionCreator Duck

27. Action Creator State を変更するような Action を作る役 Unidux Scene Transition では

    以下の Action がデフォルトで提供されている ◆ Push State のプッシュ ◆ Pop State のポップ ◆ Replace State の置換 ◆ Reset State のリセット ◆ SetData State を持つエンティティクラスのデータのCreate/Update ◆ Adjust State の 調整

28. Unidux Core Unidux 管理用のシングルトンクラス デフォルトで SingletonMonoBehaviour を継承 (これはこのままでいい) Unidux Core

    は以下を持つ． ◆ IStoreObject (Store) ◆ State ◆ Subject<State> ◆ IReducer[] ◆ TextAsset (InitialStateJson) UniduxCore を通じて， Dispatch をしていく

29. 本プロジェクト 特有

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() と被らせないようにするため．

31. Domain / Service ドメインサービスクラス アプリのコアとなる対象領域のデータ構造，インタフェース， 実装 ⚫ ビジネスロジックは基本ここで実装する ⚫ 本プロジェクトでは

    MonoBehaviour を継承していないが， Unity Engine 側の事情で MonoBehaviour を必要に応じて継承する

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

    を継承しない

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

34. Presenter View と Context/Domain の橋渡し役 ⚫ 基本的に Unity Scene 1つにつき，1つ存在する

    ⚫ 基本的に MonoBehaviour を継承しない

35. Navigator Unity Scene 内に存在する View 群との間の行き来等の処理を司る ⚫ Unity Scene 内に

    View が 2つ以上存在する時， Navigator を作る ⚫ Originate， Terminate 処理を持つ INavigator を実装する ⚫ 基本的に MonoBehaviour を継承しない

36. Transitioner Page と Page または同一 Page 下における Scene と Scene

    との間の行き来等の処理を司る ⚫ Project 内に Page が 2つ以上存在する時， Transitioner を作る ⚫ 基本的に MonoBehaviour を継承しない

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

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

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

40. ハンズオンタイム

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

    TODO の部分を基本的に埋めていきながらアウトプットしていきます．

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

43. Scene Config (2分) まずは SceneConfig.cs でシーンカテゴリマップとページマップを設定します． ◆ シーンカテゴリーマップ IDictionary<SceneName, int>

    このシーンは Permanent Scene なのか? Page Scene なのか？ Modal Scene なのか？ ◆ ページマップ IDictionary<PageName, SceneName[]> 1Page に対応する Unity Scene 配列を設定

44. Unidux Core (2分) UniduxCore.cs に Reducer を設定します． 【復習】 Unidux Core

    は以下を持つ． ◆ IStoreObject (Store) ◆ State ◆ Subject<State> ◆ IReducer[] ◆ TextAsset (InitialStateJson) UniduxCore を通じて， Dispatch をしていく

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 を作成します．

46. Base Scene Transitioner (３分) 今回では Unidux Base Scene の役割を Entry

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

47. Title Page Navigator (2分) タイトル画面では今回 View が2つ以上存在するので， Navigator を作成しています． [SHOW

    LICENCE] ボタンをクリックした時に， ライセンス画面が表示され， [HIDE LICENCE] ボタンをクリックしたら， 閉じるようにしてみましょう．

48. Title Page Transitioner (3分) タイトル画面からゲーム画面に画面遷移出来るようにします． TitlePageTransitioner.EntryMainPage に 遷移処理を行います． ① MainPage

    は 今回 PageData を持つので， PageData のインスタンスを作成します． コンストラクタには値の初期設定が行われています． ② ActionCreator から次に遷移する Action を 作り， UniduxCore で Dispatch します．

49. Main Page Service (5分) MainPageServiceの中身を見てます． 初期化・終端処理と神に攻撃する処理があります． ① ここで初期化の際， MainPageData から

    データを受け取る必要があります． ヒント： PageData を取得している API がないか調査しよう ② 神に攻撃する処理を行う際に， MainPageData の GodHP と DamageDone の 更新処理を行う必要があります． ヒント： ActionCreator の Action 一覧を眺めてみよう

50. Main Page Transitioner (5分) ゲーム画面での画面遷移制御を実装します． 今回ゲーム画面ではタイトル画面へ戻る遷移と， リザルト画面に遷移する，2つの遷移方法があります． MainPageTransitioner.cs の EntryResultPage

    と ReturnTitlePage に処理を入れます． ① 現状の MainPageData を取得しつつ， リザルト画面に遷移するようにディスパッチ ② タイトル画面(前の画面)に戻るようにディスパッチ

51. Result Page Service (3分) リザルト画面に遷移した時， ゲーム画面で発生した神への ダメージ数を表示するようにします． ① 現状の Result

    Page Data を取得し， ReactiveProperty の初期化に設定します．

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

    これまでのステート情報を破棄して， タイトル画面に戻るようにディスパッチしてください

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

54. おわりに

55. おわりに Unity の開発は多種多様でこれといったフレームワークやアーキテクチャが決まってなく， Unity 側も実装がカオスであることを前提に作られています． シーン遷移の API も SceneManager.Load/LoadAsync 程度しかなくて，

    状態制御とかアドバンスな遷移方法は Unity 側から与えられていません． ゲーム業界でも画面遷移機構というのはオレオレ実装で作られているようで， これといった解はなく，そしてその解を公開しているところはあまりありません． その解の一つに Unidux を使ってみた感じです． シーン制御・状態制御の方法の唯一解ではないです．

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