DoozyUIをちゃんと使ってみたメモ
DoozyUI、便利そうだったので2020年の独身の日セールで購入してみたのですが、
いろんなサイトを見て見よう見真似で練習するも、いまいちよく分からず...。
なんで分からないんだろうなと思ったんですけど、
どこで何をしているのか分かりづらいんですよね...。
なので、めちゃくちゃ時間を割いてどこで何をしているのか分析しながらやってみたので、
それについて半ば自分用の覚書のように残しておきます。
(※この記事では、Doozy UIの導入方法などについての記載は省略します。)
ブログ投稿時、記事を折り畳もうとしてDoozyUI上の操作以降
全て吹っ飛ばしたことを知らずに投稿していました...orz
せっかく読んでくださった方はさぞがっかりされたと思います...
すみません(スライディング土下座)
※ご注意※
この記事では正確さというよりは分かりやすさを重視しているため、
項目の定義の解釈に誤りがある可能性があります。
わたしの理解が更新された場合は改訂する可能性がありますが、
厳密に理解したい方にはちょっとオススメできないかもしれません...。
今回作るもの
今回は下のサンプル画像のものを作ってみます。
必要なものは大体こんな感じ↓
この例ではボタンの背景素材にオリジナルで作成したボタン素材と、フリーフォント(にくまるフォント)を使用しています。
これらはなくても作ることができます。
一応、どちらの手順も記載しておきます。
フォントの導入方法はこちらをご参照ください→MRTKのTextMeshProで日本語を利用する
Doozy UI上の操作
Viewを作成する
まずはViewから作成していきます。
Viewってなんだかわかりづらいですが、
「ボタンなどのUIを配置するためのフィールド」と思っていただくとイメージしやすいかも知れません。
先ほどの画像を例に説明すると、ユーザーネーム変更や言語設定ボタンなどが配置されている
茶色の四角いフィールドがViewです。
オプションボタンが配置されているグリーンの四角いフィールドもViewです。
(厳密にはTitleViewがグリーンのフィールドで、
オプションボタンは背景色が透明なTitleButtonViewに配置されています。)
ヒエラルキーで確認すると、このようになっています。
画像の通り、今回はオプションボタンが配置してあるTitleButtonView、
オプション画面のOptionView、ユーザーネーム変更画面のNicnameChangeView、
そして言語設定画面のLunguageSettingViewが必要なので、
4つのViewを作ります。
さて、実際にViewを作っていきましょう。
ツールバーのツール > Doozy >Control Panelを開きます。
開いたら、ViewsからNew Categoryボタンをクリックし、新しいカテゴリを作成します。
今回はViewと名前をつけましたが、分かりやすければ何でも構いません。
赤丸の+をクリックするとViewを作成できます。
今回は、TitleButtonView、OptionView、NickNameChangeView、
LunguageSettingViewの4つが必要なのでこれらを作成します。
Unity上の操作
オブジェクトを作成して、DoozyUIのViewと関連づける
次に、ヒエラルキーでUIオブジェクトを作成していきます。
ヒエラルキーのMaster-Canvasで右クリック、Doozy > UI > UIViewをクリックして、
新しいViewを作成します。
すると、このように青いViewが作成されます。
作成されたViewを選択した状態でインスペクターのUIViewから、
ViewCategoryとViewNameを設定します。
ViewCategoryは先ほど作成したカテゴリを選択し、
ViewNameも同様に選択します。
その下にあるRename GameObject to~をクリックしてオブジェクト名を変更しておくと、
オブジェクト名を自動的に変更することができます。
デフォルトのUIViewから、View - TitleButtonViewに変更してくれる。
Behavior at Startについて
Behavior at Startは、最初の時点でのViewの挙動を設定できます。
デフォルトのDo Nothingだと常時表示しっぱなしで、
HideだとViewが呼び出されない限り非表示にすることができます。
3つ目は今回使用しないのと、わたしも使用したことがないので説明を省略します。
TitleButtonViewは常に表示しておきたいので、Do Nothingを設定しましょう。
アニメーションの設定
Viewの表示/非表示時の遷移アニメーションを設定することができます。
この辺は好みやゲームの雰囲気などに応じて変えると良いでしょう。
今回は表示時はScale Inを、非表示時はScale Outを設定しています。
それぞれにPreview Animationがあるので、
ここから再生してどんな風に表示されるか確認することができます。
Viewの見た目を変えたい場合
青いビューなんてなんだかダサい！四角いのしかないのかー！とお嘆きの方、
もちろんちゃんと変えられます。
unityにある程度慣れていらっしゃる方はすぐ見つけられると思いますが、
触りたてで分からないよ〜〜〜と言う方も変えられるように手順を載せておきます。
インスペクターのImageからソース画像や、色を変えることができます。
DoozyUIにある程度素材が入っているので、雰囲気を変えることができますよ。
Viewの背景の形を変えたい場合はソース画像の◉からアセット一覧を出して、
好きなものを選びます。
この記事ではOptionView、NickNameChangeView、LunguageViewでは
RoundedSquareを使用しています。
自分の素材を使いたいよ〜と言う方も、同様にこの一覧からご自身で用意した素材を選ぶことができます。
色を変えたい場合は、色のところをクリックしてカラーパレットを表示し、
任意の色を選びます。16進数のカラーコードで指定することも可能です。
Viewにテキストを追加したい場合
ヒエラルキーからViewオブジェクトで右クリックし、UI > TextMeshProを選択すると、
Text(TMP)というオブジェクトが作成されます
このオブジェクトのインスペクターの TextMeshPro-Text(UI)で、
テキストや色、文字の大きさなどを設定できます。
テキストを設定した例。
「オプション」の文字がViewに追加される。
残り3つのViewを作成する
他のViewもここまでと同じような手順で作成、設定していきます。
一つだけ注意しなければならないのは、
OptionView、NickNameChangeView、LunguageViewについては
Behavior at StartをHideにしておきましょう。
作成できると、View - TitleButtonView以下の4つのオブジェクトが並んでいるはずです。
Buttonを作成する
ViewができたらButtonを作成します。
今回必要なボタンは赤丸で囲ったものです。
オプション画面のBGMとSE、ユーザーネーム変更の変更ボタンは作らなくてOKです。
(元は開発中のゲーム用に作成したものなので...)
DoozyUIでの設定
まずはViewと同様にControl PanelのButtonsから、カテゴリと項目を作成しましょう。
カテゴリ名と項目名は任意のものでOKですが、わかりやすいものが良いでしょう。
×(戻る)ボタン用の項目は作らなくて大丈夫です。
こちらは後述しますが、DoozyUIで用意してくれているGeneralにBackという項目があるため、
わざわざ作成する必要がないのです。便利ですね。
Unityでの設定
オブジェクトを作成する
次に、ヒエラルキーでViewと同じ要領で必要なオブジェクトを作成します。
ここで注意しなければならないのが、各ボタンは対応したViewの中に作成することです。
当たり前と言えば当たり前ですが、対応するViewの中に作らないと正常に使えません。
OptionならView-TileButtonView、
NickNameChangeとLunguageSettingは、View - OptionViewに作成します。
DoozyUIのViewと関連づける
こちらもViewと同じくDoozyUIで作成した項目とオブジェクトを関連づける必要があります。
やり方はViewと同じです。簡単ですね。
オブジェクト名を変えるのもお忘れなく。
ただし、BackボタンだけButton CategoryとButton Nameが違うので、
注意しましょう。
Buttonsでカテゴリとボタンを作成した際にも説明した通り、
DoozyUI側で用意してくれているものを設定します。
ButtonCategoryをGeneralにすると、Button Name内にBackという項目があるので、
これを設定します。
オブジェクト名をリネームしておくところは他のボタンと同じです。
ボタンの見た目を変更する
uGUIでデフォルトで作られるボタンって、はっきり言ってダサいですよね。
操作も簡単ですし、見た目を変えちゃいましょう。
デフォルトで作られたボタン。とてもださい。
ボタンの背景を変更したい場合は、
Button-から始まるオブジェクトのインスペクターで変更します。
インスペクターのImageのソース画像の◉ボタンをクリックし、任意の画像を選びます。
Viewと同じ手順です。
この例では事前に作成した素材を選択しています。
設定すると、木の看板のような素材に変わる。
フォントやボタン名を変更したい場合は、
作成したオブジェクトに格納されているLabelから変更します。
これはButtonオブジェクト作成時に自動的に生成されているので、
オブジェクトの左側にある▶︎(三角)をクリックしてみましょう。
LabelのインスペクターにViewのテキスト追加同様、
TextMeshPro-Text(UI)から変更できます。
Backボタンはテキストの設定をせず、画像設定のみをするとサンプルのようにできます。
ソース画像をあらかじめ作ったボタン素材に設定し、
LabelのTextMeshPro-Text(UI)を空欄にしておく。
サンプルのようなテキストなしの画像のみのボタンを作ることができる。
Nodyの設定
個人的には一番わかりづらくて苦戦したNodyの設定です。
一気に設定するとややこしいので、
まずは上の画像のようにTitleButtonView - OptionView間の設定からします。
新規Graphを作成する
ツール > Nodyを開きます。
Graphをクリックして、新規Graphを作成します。
名前は任意で大丈夫です。例によってわかりやすいものにしましょう。
保存場所はAssetsで大丈夫です。
Graph Controllerの作成〜設定
ヒエラルキーで右クリック→Doozy > Nody Graph Controllerをクリックし、
Graph Controllerを作成します。
インスペクターのGraph Controllerから、Graph Modelを変更します。
右側にある◉をクリックし、先ほど作成したGraphを選択しましょう。
ViewやButtonよろしくリネームできるので、ついでにリネームしておきましょう。
必要なノード、項目を追加する
OpenGraphをクリックしてNodyを開きます。
Start以外何もない状態なので、ノードを追加していきます。
何もない場所で右クリック→Create Node > UINodeをクリックすると、
新しくノードが追加されます↓
デフォルトでは「UI Node」となっていますが、名前を変えることができます。
ただ、慣れないうちはViewと同じ名前にしておき、
どのViewとNodeが対応しているのかわかりやすくしておくことをオススメします。
インスペクターのNode Nameから変更できる。
この記事の例だとノードを2つ作成し、
それぞれにTitleButton、Oputionと名前をつけておきます。
ノード名を変更できたら、各ノードに必要な項目を追加していきます。
青い+をクリックすると、Unnamedという項目が追加されます。
TitleButtonノードには、項目を一つ追加します。
TitleButtonViewには「オプション」というボタン一つのみなので、一つでOKです。
Optionノードには、項目が2つ必要です。
OptionViewには「ユーザーネーム変更」と「言語設定」の2つのボタンがあるためです。
ノードはView、各ノードの項目はButtonに対応していると考えると、わかりやすいです。
ここまで終わると、ノードは画像のようになっていると思います。
(複数形になっているのは、同じ名前のノードを作れないから...)
この時点でノード内の項目がBack以外、Unnamedになっていても問題ありません。
次の手順で設定します。
OUTPUT CONNECTIONSの設定
先ほど各ノードに作成したUnnamedな項目たちの設定をしていきます。
が、その前にOUTPUT CONNECTIONSはなんなのか、簡単に説明しておきます。
OUTPUT CONNECTIONSは先ほど作成した項目の動きを制御するものです。
何回クリックしたらViewが呼び出されるのか、
どのボタンに対応しているのかなどを設定できます。
Viewに配置したボタンの細かな設定をする、と思っておくとわかりやすいでしょう。
では、実際に設定してみましょう。
まずはTitlebuttonノードから。
TitleButtonノードを選択した状態でインスペクターのOUTPUT CONNECTIONSを見ると、
2つ項目が並んでいます。
一つははじめから作られていたBackで、もう一つは先ほど追加したUnnamedです。
Backはこのまま何も変える必要はありません。
TitleButtonでは使用しない項目だからです。
Unnamedの方は、真ん中のButton CategoryとButton Nameを設定します。
TitleButtonノードのUnnamedはオプションボタンに対応していて、
オプション画面を呼び出したいのでOptionUIのOptionを設定します。
同様にOptionノードも設定します。
Optionノードには最初からあるBuckと、Unnnamedな項目が二つありますが、
UnnamedをそれぞれNickNameとLunguageSettingに変えましょう。
ここまで一番左の項目を触っていませんが、
今回はクリックで反応するようにしたいので特に変更しません。
しかし、ダブルクリックや長押しなどにも変更可能なので、
必要に応じて設定を変えるとよいでしょう。
ON ENTER NODE/ON EXIT NODEの設定
各ノード(View)の切り替え時の挙動を制御しているところです。
実際の設定をする前に、ここでもう一度切り替え時の画像を確認してみましょう。
オプションボタンをクリックすると、オプション画面がオーバーレイで表示され、
オプション画面の×(Back)ボタンをクリックするとオプション画面を閉じていますね。
この制御をしているのが、ON ENTER NODE/ON EXIT NODEです。
実際に設定していきますが、TitleButtonノードとOptionノードで設定が若干異なるので、
それぞれの設定画像を載せます。
まずはTitleButtonノードから。
TitleButtonノードでは、
ON ENTER NODEつまり、ノードが呼び出された時にTitleButtonViewを表示し、
ON EXIT NODEつまり、ノードを出る際にはなにもしません。表示しっぱなしです。
そのため、ON EXIT NODEでは何も設定していません。
ちなみに、ON EXIT NODEを設定して再生しても、
View側でアニメーション設定をしていないため、エラーメッセージが表示されます。
続いてOptionノードの設定です。
ON ENTER NODEつまり、ノードが呼び出された時にOptionViewを表示し、
ON EXIT NODEつまり、ノードを出る際にOptionViewを閉じるので、
画像のような設定になっています。
各ノードの項目を繋ぐ
いよいよ最後の手順です。
画像のように各ノードの項目を繋いでいきます。
TitleButtonノードのOptionは、Optionノードの一番上の項目を、
OptionノードのBackはTitleButtonノードの一番上の項目をそれぞれ繋ぎます。
ノードをView、ノード内の項目をボタンとして見ると分かりやすいですね。
こんな感じで項目の右側にある◉をドラッグすると、繋ぐことができます。
全ての項目を繋ぐと、この画像のような動きになっているはずです。
正常に切り替えができない場合は、
各オブジェクトの設定やノードの設定になんらかの見落としがある可能性が高いです。
この手順通りにやっても意図通りに動かない場合、
一番可能性が高いのはノードのON ENTER NODE/ON EXIT NODEの
設定に誤りがある場合です。
Viewの指定ミスとかはありがちです。
OptionノードはON ENTER NODE/ON EXIT NODE両方の設定が必要ですが、
どちらかの設定が抜けていたり、Viewの指定が誤っていることで
切り替わっていないように見えることが多いです。
また、ViewやButton名は途中で分かりやすくしようとしてDoozyのControl Panelから変えたけど、
オブジェクトの変更を忘れていた...とかもよくあります。
このあたりを一度重点的に見直してみたり、もう一度手順を追ってみると良いでしょう。
設定箇所も多く、慣れるまでは詰まりがちです...orz
NickNameChangeやLunguageSettingも同じ手順の繰り返しなのですが...
ちょっと力尽きたのでまた今度追記するかも...。
