Tweet
Tweet

Slide 1

Slide 1 text

Unidux Scene Transition Hands-On Workshop and Hands-on

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ハンズオン資料

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

はじめに

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

そこで Unidux

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Unidux 概念説明

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Unidux Flow Animation

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ハンズオンプロジェクトの登場人物たち 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

Slide 18

Slide 18 text

Unidux 特有

Slide 19

Slide 19 text

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≫

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

本プロジェクト 特有

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

登場人物まとめ (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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ハンズオンタイム

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

おわりに

Slide 55

Slide 55 text

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

Slide 56

Slide 56 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