uFrame Document読んでみる #Unity

昔は90ドルしたuFrameがいつのまにか無料になりました。
uFrameはMVVMをNodeベースで設計できるビジュアルスクリプティングツールです。

Webサイトに繋がらなくなていたりオンラインドキュメントが読めなくなっていたりgithubリポジトリのCommitが1年くらいなかったり明らかなバグが放置されていたりと若干不安ではありますが、強力なMVVM制限によって(うまくやれば)堅実な実装ができるツールとなっています。

いまいちMVVMで綺麗に開発ができない僕にとってはMVVMベースでの開発を理解するよい手助けになると思うのでとりあえずドキュメントをやってみます。

読んでみるドキュメント(Get Started)はこちら
いつか
https://github.com/InvertGames/uFrame.Documentation/blob/master/uFrameMVVM/pages/home.md
もやってみようと思います。

uFrame MVVM 1.6 Getting Started I

ver1.6です。
1.5や2.0もあるので注意です。
現在AssetStoreで配布されているuFrameは1.5と1.6が同封されています。

Overview

このチュートリアルではuFrame MVVMのインストールの方法と使い方を紹介します。デフォルトプロジェクトからログイン時にエラーを出すところまでやっていきます。

Steps

uFrame MVVM をインストールする方法
サンプルプロジェクトのセットアップする方法
ElementにPropertyを追加する方法
ViewをBindingする方法
ControllerのLogicを変更する方法
GUIとViewをつなげる方法
Final Testの実行

所用時間

6~8分

Transcript

Introduction(初めに)

1.6 uFrame getting started guideへようこそ！すべてのガイドはuFrame MVVM 1.6サンプルプロジェクトをベースにしています。
すべてのパートはuFrame MVVMの機能をはっきりと説明しています。ほとんどのパートではサンプルを少しだけ変更するシンプルチェンジを提案して進めていきます。
このパートではuFrame MVVMのインストールの方法とサンプルプロジェクトのセットアップの方法を説明します。今回のパートでもシンプルチェンジをやってみましょう。ログイン画面で表示するエラーメッセージを作ってみましょう。

How to install uFrame MVVM(インストールの方法)

Asset Storeを使うことでuFrame MVVMを他のAssetと同様にインストールすることができます。
簡単にインポートしてUnityの手順に従うだけ。
https://www.assetstore.unity3d.com/jp/#!/content/14381

uFrame MVVM 1.6は、Assets直下のuFrameMVVMフォルダ内にあります。中には２つのバージョンのuFrame MVVMがあります(1.5と1.6)。

Version1.5はUnity互換性のために後方に送られました。もしuFrameにまだ慣れていないならぜひVersion1.6をダブルクリックしてインポートしてください。uFrameMVVMフォルダーはこのStep後にデリートすることができます。
このチュートリアルは1.6に基づいています。1.5のチュートリアルはこちら

Learn how to setup default project(デフォルトプロジェクトをセットアップ)

uFrame MVVM1.6がインポートできたらWelcome画面が表示されます。自分でWelcome画面を開くためにはメニューからuFrame -> Welcome Screenを選択してください。

Welcome画面では、サンプル(1)へのナビがあります。"SETUP EXAMPLE PROJECT"ボタンがあるのでクリックしましょう。("SETUP EXAMPLE PROJECT"ボタンの画像とクリック位置がずれています。クリック判定がある位置にマウスが乗るとカーソルが変わるので頑張って探しましょう;;)

*"SETUP EXAMPLE PROJECT"ボタンをクリックした

注意書きに従って、Example PackageをAssets以下にデプロイ(インポート)しましょう。そして全ての必要なシーンをBuild Settingsに追加しましょう。最後にIntroSceneを開きゲームを再生してみましょう。

Learn how to add property to the element(ElementにPropertyを追加する方法)

Windows/uFrame DesignerからuFrame Designerウィンドウを開きましょう。

まず初めにMainMenuSystem Graphを開きます。開くためにタブをチェックしてみてください。

もしタブにMainMenuSystemがあったらそれをクリックしましょう。もしタブにMainMenuSystemがなければ、タブのちょい上にあるGraph選択のところからMainMenuSystemを選択しましょう。

MainMenuSystemのGraphが開き、タブ一覧にMainMenuSystemタブがあることを確認できるかと思います。

他のGraphと同じようにMainMenuSystem GraphもNodeがあります。これらのNodeは様々な情報を表現しています。uFrame MVVMのNodeはNode自身の型を示す特別なSub Header(もしくはTag)を持っています(1)。今回のステップではLoginScreenと呼ばれるこのElement Nodeについて見ていきましょう。

Element Nodeは、あなたのゲームのデータを管理するEntityを定義しています。例えばLoginScreenではUsernameとPasswardの情報を持っており、システムのログインに使います。
これらのノードは広げることでより詳しいデータを見ることができます。ノードについている矢印型のボタンをクリックすることでNodeを広げたり閉じたりすることができます。

LoginScreen Nodeを広げて、新しいプロパティを追加しましょう。これを行うためには、Propertiesと書かれたLabelの右側にある"+"ボタンをクリックする必要があります。

Propertiesセクションに新しいNodeの子要素が作成されました。このような子要素は、左側に型を、右側に名前が書いてあります。

型(1)は、そのプロパティの型を表しています。プロパティ作成時には自動的にstring型が設定されています。名前(2)は、そのプロパティの名前を表しています。名前の初期値は"Properties"です。さて、ここで名前を変更してみましょう。新しいプロパティを追加するときはフィールドが自動的に編集モードになるのでそのまま名前を編集することができます。プロパティの名前を"ErrorMessage"にしましょう。Nodeの外側をクリックすることで編集を完了できます。もし後で同じPropertyをリネームしたくなったら再度編集モードにするために今の名前の部分をダブルクリックしてください。
さて、ここまでステップが終わればこんな感じのNodeになったでしょうか。

このプロパティはstring型なので、特に変える必要はありません。しかし、プロパティの型を変えたいなら、型をクリックしてポップアップしたWindowから欲しい型を選択してください。

さて、ここまでで新しいプロパティをLoginScreenにElementとして追加することができました。

Learn how to add binding to the view(Viewとバインディングする方法)

さて、MainMenuSystem Graphを開いていると思います。ではLoginScreen Element Nodeのヘッダーをダブルクリックしましょう。

これでこのNodeの詳細が見れるようになりました。MVVMは、Model,View,ViewModelの3つから成り立ちます。Element NodeはModelとViewModelを定義します。Viewに関しては別で管理するので注意してください。このサンプルでは、ViewはLoginScreenViewと書かれたView Nodeによって表現しています。

覚えておいてください。Element NodeはいくつでもView Nodeを持てます。

さて、LoginScreen Element Node(A)をLoginScreenView Nodeにつなげましょう。こうすることでLoginScreenView NodeがLoginScreenのdataを表現していることになります。また、LoginScreenView NodeがSubScreenView Nodeから繋がれているのもわかりますね(C)。より詳しいNode接続に関する説明についてはDocumentを読んでください。

このステップでは、ErrorMessagePropertyをText GUIに接続してみましょう。そのためには、LoginScreenView NodeのBindingsセクションの近くにあるプラスボタン(1)をクリックする必要があります。

Windowがポップアップされたでしょうか。このWindowにはバインディング可能なリストが表示されます。"ErrorMessage To Text"(1)を選択しましょう。

選択できたらBindingsセクションのリストに表示されるはずです。

これでLoginScreenView Nodeに新しいバインディングを追加することができました。

Learn how to change logic in controllers and services(コントローラーとサービスを使ってロジックを変更する方法)

このステップでは少しだけコーディングします。Nodeに対する変更は全て終わったので、グラフをセーブとコンパイルしましょう。Window右上の"Save & Compile"ボタン(1)をクリックしてください。

グラフをセーブとコンパイルすることでグラフにセットしたアイテムをC#コードに変換できます。

コンパイルが終わったらコードを変更していきましょう。前回のステップでLoginScreenのErrorMessageプロパティをUIにバインディングしました。今回はもっと具体的にどうやってプロパティをセットするか教えたいと思います。

LoginScreen Element Nodeのヘッダーを右クリックしてください。コンテキストメニューが出てくるので"Open" ->"Designer Files" -> "MainMenuSystem"->"Controllers" ->"LoginScreenController.cs"を選択してください。
(ここは記事通りにはいかなかったのでちょいとメニューパスを変更しています。)

これでIDEと関連ファイルが開かれると思います。それではコードを編集していきましょう。もし開かなかった場合はLoginScreenController.csスクリプトを検索して自分で開いてください。
Login関数に注目してください。この関数はログイン時に呼ばれます。中ではUserManagementServiceにUserNameとPasswordを渡してログイン処理を任せています。

LoginScreenControllerのLogin関数(編集前)

public override void Login(LoginScreenViewModel viewModel)
{
    base.Login(viewModel);
    /* Direct call to the service. */
    UserManagementService.AuthorizeLocalUser(viewModel.Username, viewModel.Password);
}

Login関数をこのように修正しましょう。

LoginScreenControllerのLogin関数(編集後)

public override void Login(LoginScreenViewModel viewModel)
{
    base.Login(viewModel);
    /* Direct call to the service. */
    UserManagementService.AuthorizeLocalUser(viewModel.Username, viewModel.Password);
    if(UserManagementService.LocalUser.AuthorizationState != AuthorizationState.Authorized){
        viewModel.ErrorMessage = "Failed to login! Incorrect username or password!";
    } else {
        viewModel.ErrorMessage = string.Empty;
    }
}

新しく追加したコードでは、ログイン申請後のステートを見てエラーがあれば関連したエラーメッセージを入力しています。

これでエラーメッセージをセットする修正が完了しました。

Learn how to connect view with GUI(ViewをGUIとつなげる方法)

最後のステップでは、エラーメッセージを表示するためのMainMenuSceneにTextを作りましょう。
Assets/ExampleProject/Scenes/MainMenuScene.unity(1)を開いてください。
そしてHierarchyの_MainMenuSceneRoot/MainMenuCanvas/LoginUI/LoginScreenPanel(2)をみてください。

LoginScreenPanel GameObjectの子要素としてuGUIのTextを作成してください(1)。Textの名前やデザインは好きなように変更して問題ありません(2)。

さて、次は、Hierarchyの_MainMenuSceneRoot/MainMenuRoot/LoginScreenを開き、LoginScreen GameObjectを選択してください。インスペクターに表示されているBindingセクションを開いてください(2)。ErrorMessageプロパティを設定しているところを見つけてください(3)。先ほど作成したText GameObjectをこのインプットフィールドにDrag & Dropしてください。

Perform final test

シーンを再生してみてください。不正なデータを入力してSign inボタンをクリックすると、エラーメッセージが見れるかと思います。

思いの外長かった・・・
引き続きuFrame勉強していきたい。