新しくなったDoozyUI Managerを試してみた

Unity 作成日：2021.10.19

先日リリースされたDoozyUI Managerを試してみました。かなり機能が強化されていて、DoozyUIの使い方も大きく変わった印象です。今回は、DoozyUI Managerを試してみて、簡単な使用方法を紹介します。

新しい DoozyUI Manager

2021年10月5日に Unity Asset Store に DoozyUI Manager がリリースされました。

これは DoozyUI の第4世代目にあたります。

「DoozyUI Manager」でGoogle検索したところ、公式サイトには行けるのですが、肝心のマニュアルページがみつかりませんでした。「まだマニュアルもないのか」と思っていたところ、Unity内からマニュアルサイトへのリンクが貼られていました。これは分かりにくい。

マニュアルページは Confluence上にあります。なので、Google検索でもヒットしなかったようですね。ちなみに、リンクは以下になります。

まず、シーンにボタンを配置してみます。
Toolsから「UI Menu」を起動します。

UI Menuの中には、さまざまなUIが含まれています。今回は、Simple Buttonを配置します。

配置すると自動でEventSystemが生成されます。ですが、自動で配置されるEventSystemはDoozyUI向けには使えません。EventSytemのインスペクターで以下のような表示がされている場合は、Replaceボタンを押して置き換える必要があります。

これで、設定は完了です。Unityを実行すると、ボタンを押してアニメーションさせることができました。

ボタンを実行

簡単な画面遷移の処理を組んでみます。Doozyアセット内の「E06 – Basic – Example」シーンと同じ処理を組んでいきます。

先ほど作成したCanvasの下に、UI Viewを配置します。UI Viewは UI Menu から選んで配置します。

UI Viewのインスペクターで以下のようにViewの名前を指定します。

次に、UI Viewの中にTextMeshProとSimpleButtonを配置します。TextMeshProは画面の名前を表示するために配置します。

SimpleButtonは、画面切り替えるために配置します。以下の手順で配置して、設定していきます。

次に、このUI Viewをコピーして複製します。複製したら、UI Viewコンポーネントを以下のように変更します。

複製したUI View内のSimpleButtonの名前を「Back」に変更します。

最後に、画面遷移の処理を組んでいきます。Assetsの中で右クリックして「Create > Doozy > Flow Graph」を選んで追加します。

追加したFlowGraphをダブルクリックして、Nodyを開きます。以下の手順で設定していきます。

UI ノードを２つ追加して、ノードを繋ぐ
1つ目のUIノードを編集する
1. 「Clear Graph History」をONにする
2. 「UI Button」を選んで、CategoryをExample、NameをNextに指定する
3. On Enter NodeのShow Viewsの、CategoryをExample、NameをOneに指定する
4. On Exit NodeのHide Viewの、CategoryをExample、NameをOneに指定する

2つ目のUIノードも同様に編集していきます。

2つ目のUIノードの接続部のBackを有効にする
2つ目のUIノードの設定を変更する
1. 「UI Button」を選んで、CategoryをExample、NameをBackに指定する
1. On Enter NodeのShow Viewsの、CategoryをExample、NameをTwoに指定する
2. On Exit NodeのHide Viewの、CategoryをExample、NameをTwoに指定する

これで Flow Graph の設定が完了しました。最後に Flow Controllerを追加して、先ほど作成したFlowGraphを指定しておきます。

Unityを実行すると、ボタン押下で画面が切り替わるようになります。

新しくリリースされた DoozyUI Manager を使って、簡単な画面遷移を試してみました。今回使用した機能は、DoozyUI Managerのほんの一部分です。今後、他の機能も紹介していこうと思います。