DoozyUIのセットアップと画面遷移のやりかたの紹介
Unity
Doozy UIは、Unityの有料アセットです。
$65とそこそこの値段のアセットですが、セールされることも多いので、そのときに買うのが良いかもしれません。
この記事では、Doozy UIを使って、以下のようなフッターのボタンで画面を切り替える方法を紹介します。
DoozyUIのセットアップ
Unityプロジェクトを立ち上げたら、はじめに Package Manager からDoozyUIをImportします。
すると、Importのウィンドウが表示されるので、そのままImportボタンを押します。
Importが済むと、以下のようなウィンドウが出ます。DoozyUIを使用するには、DOTweenが必要とのことです。
ということで、DOTWeenをPackage Manager からImportします。
DOTweenのImportが完了すると、DoozyUIのインストール案内ウィンドウが以下のような表示に変わります。
インストールの準備が整ったので、あとは「Install」ボタンを押してインストールを完了させます。
これで、DoozyUIのセットアップが完了しました。
フッターボタンで画面を切り替える
Canvas を用意する
まず、最初にDoozyUIのCanvasをプロジェクトに追加します。UIのCanvasではなく、DoozyUIのCanvasを選びます。
そして、Canvasの「Render Mode」を「Screen Space – Camera」に、「Render Camera」に「Main Camera」を指定します。
フッターにUIButtonを配置する
ホーム画面・詳細画面・設定画面をボタンで切り替えるようにします。
画面を切り替えるためのボタンをフッターに用意します。
DoozyUIのUIButtonを３つ画面内に配置して、それぞれのボタンのテキストを変更しておきます。
それぞれのボタンをDoozyUIのデータベースに登録します。
Tool ＞ Doozy ＞ Control Panel を開きます。
そして、Buttonsタブを選んで、Generalに３つのボタンを定義します。名前は適当でOKです。ボタンの追加が終わったら、Saveボタンを押しておきます。
DoozyUIのデータベースにボタンの定義を追加したので、最後にプロジェクトのUIButtonに対して、上記の定義を割り当てます。
これでプロジェクト内のUIButtonとDoozyUIデータベースの設定を関連付けることができました。
画面(View)を用意する
つぎに、ホーム画面・詳細画面・設定画面を用意します。
画面はDoozyUIのUIViewを使います。３つのUIViewを追加して、わかりやすいようにImage＞Colorを変更しておきます。
また、それぞれのUIViewにTextを追加してテキスト表示もさせています。
UIViewも、UIButtonと同じようにDoozyUIデータベースと関連付けを行います。
DoozyUIのControlPanelを開いて、Viewタブに以下のように設定します。
そして、プロジェクトの各UIViewに対して、上記定義を割り当てます。
最後に、Viewの表示アニメの設定をしておきます。
今回は、表示時に0.01秒でフェードイン、非表示時に0.01秒でフェードアウトでアニメーションさせます。
インスペクターパネルの「Show View」と「Hide View」に以下のように設定します。
Nody画面遷移させる
ここまでで各要素の準備ができたので、ここから実際にDoozyUIを使って画面遷移をつくっていきます。
まずは、DoozyUIのControl Panel からNodyを起動します。
起動したら、「Graph」から新規グラフを作成します。作成すると以下のような表示になります。
まず、起動したらHome画面を表示させたいので、右クリック＞Create Node>UINode でノードを追加して、Startノードとつなぎます。
今回は、Home画面・詳細画面・設定画面の遷移をつくるので、それぞれのUINodeをつくります。また、UINodeの名前をインスペクターパネルで指定しておきます。
次に、遷移をつくっていきます。
Home画面から、Descriptionボタンを押したら、詳細画面へ遷移させます。Home NodeにDescriptionボタンを追加して、そのボタンとDecription Nodeをつなぎます。ボタンの追加は、Home Nodeを選択した状態で、インスペクターパネルの「OUTPUT CONNECTING」で指定します。
同様に、Home画面から設定画面への遷移もつくっておきます。
あとは、同様に詳細画面からの遷移、設定画面からの遷移もつくります。
これで遷移は完成です。
あとは、Home Nodeに入ってきたときに「Home Viewだけを表示させて、他は非表示させる」ようにします。インスペクターパネルの ON ENTER NODE で設定をします。
Description NodeやSettings Nodeも同様に設定します。
これでNodyの設定は完了です。Saveしておきます。
さっそく実行してみます。
まとめ
Doozy UI のセットアップ方法と簡単な画面遷移の方法を紹介しました。
DoozyUIをつかうことで、C#スクリプトを書かなくても、簡単な遷移をつくることができました。
また、今回は紹介しませんでしたが、DoozyUIには多彩なアニメーションが用意されています。アニメ付きの画面遷移を細かくつくり込みたい場合などでは、便利に使えるのではないでしょうか。