【Unity】カスタムダイアログを簡単に生成するプレファブを作ってみた（CustomDialogController）

2018/02/04 Sun [edit]

　どちらかと言うとこのプラグインはプログラマ向けという感じだったが、Unity は GUIツールでもあるので、プログラムに詳しくない人でも扱えるように、今回のアップデートではなるべくコードを書かずに、ダイアログなどを簡単に生成できるプレファブを作ってみた。しかし、大抵のものは楽に使えると思うが、カスタムダイアログだけは与えるパラメータが最も多く、扱いが難しく感じるので、ここでは各アイテムの設定などを含めて解説しておくことにした。方法だけわかってしまえば、わりと簡単に扱えるようになると思う。

＞＞プラグイン＆サンプルをダウンロード
(Google Drive を利用。画面右上にあるダウンロードアイコンを押す)

　プラグインのインポートからはじめる場合は以前の記事を参照して欲しい。実際にセットアップしてあるサンプルシーンは「Assets/_Test/Scenes/DialogExTest」となる。プレファブをコピペして使うのも良いだろう。

■カスタムダイアログの概要と使い方
■分割線の設定（DialogItemDivisor）
■テキストの設定（DialogItemText）
■スイッチの設定（DialogItemSwitch）
■スライダーの設定（DialogItemSlider）
■トグルボタン(グループ)の設定（DialogItemToggles）
■更新履歴

(※) Unity 5.6.3p1, 2017.3.0f3 / Windows10(x64) / Galaxy S7 Edge (Android 7.0) で確認

■カスタムダイアログの概要と使い方

　簡単に言うと、カスタムダイアログとは「分割線」「テキスト」「スイッチ」「スライダー」「トグルボタン(グループ)」を自由に追加できるダイアログである。「分割線」「テキスト」は戻り値を持たないが、「スイッチ」「スライダー」「トグルボタン(グループ)」はキーを設定することによって、そのキーに関連づけられた値を辞書形式（Dictionary<string, string>： key, value）で受け取ることができる（※キーの重複はできない）。ただし、値は全て文字列型になので、適宜キーで判別するなどして変換して使うことになる。プラグイン内にはスイッチ（SwitchDialog）やスライダー（SliderDialog）を並べたダイアログなどもあるが、それらの各アイテムを自分でカスタマイズできるダイアログと考えれば良い。

　使い方は「AndroidPlugin.ShowCustomDialog()」に各アイテムのパラメータ（DialogItem）の配列を渡せば良いが、ここではそれらを少し簡単にまとめた「CustomDialogController」のプレファブを中心に扱うことをやってみよう。プレファブは「Assets/FantomLib/Prefabs/Dialogs/CustomDialogController.prefab」にある。これをヒエラルキーに置き、そのオブジェクトの子要素として（「Find Items In Child」がオンのとき）、各アイテムのプレファブ「DialogItemDivisor」「DialogItemText」「DialogItemSwitch」「DialogItemSlider」「DialogItemToggles」（「DialogItems」フォルダにまとめてある）を配置することで生成することができる（上から順にダイアログ内に配置される）。なお、孫要素までは探さない。また「Find Items In Child」がオフのときは自分で「Items」の「Size」を設定し、そこに各アイテムのプレファブなどを登録すれば良い。

　結果の受け取り方は、インスペクタのコールバックにメソッドを登録することにより受信できる。コールバックには２種類あって「On Result」はダイアログで「OK」ボタンを押したときの最終的な結果を辞書（Dictionary<strring, string>）でキーと値のペア（文字列型）で受け取ることができる。もう１つのコールバック「On Value Changed」はダイアログ表示中に「スイッチ」「スライダー」「トグルボタン(グループ)」が押されたときにリアルタイムで値を受け取ることができるものだ（こちらはキーと値がそれぞれ文字列型で返される）。プレビューなどに使うと良い。

(※) インスペクタでのコールバックの登録方法がわからない場合は以下の記事を参考にして欲しい。
・【Unity】【C#】UnityEvent, Action, delegate, interface でのコールバック実装方法とインスペクタでの登録

　また「Save Value」はそれら結果を PlayerPrefs に自動保存しておく機能だ。「Save Key」で保存名（PlayerPrefs のキー）を指定することもできる。空の場合、その GameObject 名＋"_values" のような名前で保存される（PlayerPrefsキー名はプロパティの「SaveKey」で取得できる）。またプロパティの「CurrentValue」でいつでも値を取得・変更することもできる（Dictionary<string, string> 形式）。ただし、保存タイミングは「OK」ボタンで決定したときなので注意しよう（OnValueChanged では保存されない。保存したいときは手動で CurrentValue で値をセットし、SavePrefs() メソッドで保存する必要がある）。

　各アイテムの設定は「DialogItemParameter」というクラス（便宜上すべてのアイテムのパラメータをまとめたクラス。実行時には DialogItem の派生クラスに変換される）に代入することになるが、各アイテムによって必要なパラメータは異なるので、以下に順に解説しておこう。

■分割線の設定（DialogItemDivisor）

　「分割線」とはただの区切り線である。キーを持たず、特に機能はない。使用するにはまず「Item Type」を「Divisor」にする。あとは以下にパラメータの説明をまとめて置いたので、任意に設定して欲しい。

●引数

Line Height	線の太さ。単位は Android の dp となる。
Line Color	線の色。ただし、無色透明（#00000000）を与えると指定なし（デフォルト＝灰色）となる。

■テキストの設定（DialogItemText）

　「テキスト」とはただの文字列表示である。キーを持たず、特に機能はない。使用するにはまず「Item Type」を「Text」にする。あとは以下にパラメータの説明をまとめて置いたので、任意に設定して欲しい。

●引数

Text	表示するテキスト文字列。
Text Color	テキストの色。ただし、無色透明（#00000000）を与えると指定なし（デフォルト＝薄い黒）となる。
Background Color	テキストの背景色。ただし、無色透明（#00000000）を与えると指定なし（デフォルト＝なし[システムによる]）となる。
Align	文字揃え。「Left」で左寄せ、「Center」で中央寄せ、「Right」で右寄せ、「None」で指定なし（デフォルト＝左寄せ[システムによる]）。

■スイッチの設定（DialogItemSwitch）

　「スイッチ」とはオン・オフを切り替えることによって「true」または「false」の値（ただし文字列型）を返すウィジェットである。キーを持ち、その値はキーに紐付けられて返される。使用するにはまず「Item Type」を「Switch」にする。あとは以下にパラメータの説明をまとめて置いたので、任意に設定して欲しい。

●引数

Key	値に紐付けするキー。コールバックで返される値（辞書：Dictionary<string, string>）では result["key"]="true" または result["key"]="false"（※値は文字列型なので注意）の形式で返される。キーは重複できない。
Text	表示するテキスト文字列。
isOn	スイッチの初期値。オン = true, オフ = false
Text Color	テキストの色。ただし、無色透明（#00000000）を与えると指定なし（デフォルト＝薄い黒）となる。

■スライダーの設定（DialogItemSlider）

　「スライダー」（Android ではシークバーと呼ばれる）とはスライダーを動かすことによって値を変化させるウィジェットである（ただし文字列型）。キーを持ち、その値はキーに紐付けられて返される。使用するにはまず「Item Type」を「Slider」にする。あとは以下にパラメータの説明をまとめて置いたので、任意に設定して欲しい。

●引数

Key	値に紐付けするキー。コールバックで返される値（辞書：Dictionary<string, string>）では result["key"]="value"（※値は文字列型なので注意）の形式で返される。キーは重複できない。
Text	表示するテキスト文字列。
Value	初期値（整数部分6桁＋小数点以下3桁まで）。
Min Value	取り得る最小値（整数部分6桁＋小数点以下3桁まで）。
Max Value	取り得る最大値（整数部分6桁＋小数点以下3桁まで）。
Digit	小数点以下桁数（0:整数, 1～3:小数点以下桁数）。
Text Color	テキストの色。ただし、無色透明（#00000000）を与えると指定なし（デフォルト＝薄い黒）となる。

■トグルボタン(グループ)の設定（DialogItemToggles）

　「トグルボタン(グループ)」（Android ではラジオボタンと呼ばれる）とはグループ内のアイテムを唯一選択するウィジェットである。キーを持ち、その値はキーに紐付けられて返される。その選択肢は「Toggle Items」にまとめられ、それぞれのアイテムの値（Value）が設定されたキーに紐付けられる（key=value1 または key=value2, … のように）。使用するにはまず「Item Type」を「Toggle」にする。あとは以下にパラメータの説明をまとめて置いたので、任意に設定して欲しい。

●引数

Key	値に紐付けするキー。コールバックで返される値（辞書：Dictionary<string, string>）では result["key"]="value" の形式で返される。キーは重複できない。
Toggle Items[]	選択肢の文字列と値の配列。「Text」は表示文字列で、「Value」が選択された場合の戻り値となる。
Selected Index	初期値（選択）のインデクス（0～）。
Text Color	テキストの色。ただし、無色透明（#00000000）を与えると指定なし（デフォルト＝薄い黒）となる。

　これらは以前に書いたコードでの機能と同じものなので（というより、コードをなるべく書かないで済むようにプレファブを作っただけのもの）、コードで書きたい場合は以前の記事を参考にして欲しい。

■更新履歴

　今回のアップデートを簡単に説明しておくと以下のようになる。[⇒全体の更新履歴はこちら]

・おおよそ全ての機能のプレファブ＆「～Controller」スクリプトを追加。
・単一選択（SingleChoiceDialog）、複数選択（MultiChoiceDialog）、スイッチダイアログ（SwitchDialog）、カスタムダイアログのアイテムに値変化のコールバックを追加。
・XDebug の自動改行フラグ(newline)が無視されていた不具合を修正。また、行数制限を使用しているときに、OnDestory() でテキストのバッファ（Queue）をクリアするようにした。

※以前のバージョン上書きでも問題なく動作すると思います。

※この記事のUnityアセットはプラグインとして配布されています。

※とりあえず試してみたい方は、最新版をビルドした apk デモをダウンロードできます。動作確認にもどうぞ。

プラグインデモをダウンロード

(Google Drive を利用)