ARサイコロをつくろう! AR Dice Part.4

スクリーンショット 2017-05-22 22.58.40

みなさん、こんにちは。見ていただきありがとうございます。

シリーズ「ARサイコロをつくろう!」Part.4です。

今回は、Unityの設定画面のDropdownについて開発をしていきます。

ARサイコロのきっかけなどは、「ARサイコロをつくろう! AR Dice まとめ」に詳しく書いてありますので見てください。

 

設定画面のDropdown

 

 Dropdownとは?

スクリーンショット 2017-05-22 22.56.57

Dropdownは、項目の設定を決められた選択肢の中で行う時に便利なUIです。

AR Diceでは、Diceの各面にあたりとはずれを用意し、今後あたりの種類も増やす予定のため設定のUIは、ドロップダウンを使用しました。右の矢印をクリックすると画像のように選択肢が現れます。

 

 

完成のイメージ

スクリーンショット 2017-05-22 22.58.40

こちらが、作成する設定画面のゴールです。各面に対応したあたりやはずれのDropdownを設置します。

 

あたりやはずれに対してDiceの面のDropdownがあった方が良いように見えますが、今後あたりが複数の面になることも考えているため、Diceの面に対してあたりやはずれのDropdownを設置します。

 

 

UnityのDropdown UI

Unityで利用するUIには、「Canvas」という特殊なオブジェクトの下に構築していきます。

名前の由来は定かではありませんが、UnityのGUIなのか「uGUI」と呼ばれています。

uGUIの基本的な説明は、「uGUIチュートリアル – Metal Brage」で詳しく説明されています。とてもわかりやすいです。

 

 

Dropdown uGUIの構成

スクリーンショット 2017-05-22 23.13.19

Dropdownの中には、いくつかの要素が入っています。

基本的な編集は、下の項目だけで良いと思います。

  • Dropdown・・・選択肢の追加・削除
  • Label・・・選択肢の文字のスタイルと選択前に表示されている文字の設定
  • Arrow・・・選択肢の横にある矢印の設定

 

今回は、Dropdownをそのまま使い、選択肢として「はずれ」「あたり」「あたり2」の3つを設定することにしました。

 

 

Dropdownの選択肢

Dropdownの「Inspector」→「Dropdown(Script)」を編集します。

スクリーンショット 2017-05-22 23.20.29

Optionsの部分にある「+」や「-」を使うことで選択肢の増減を行います。

 

スクリプトとして以下のような動きを想定しました。

  1. 設定画面に移動した時に、現在の各面を評価する値「dicesurface」を読み取る
  2. 読み取った「dicesurface」の値と同じDropdownのリスト表示にする
  3. 設定画面で各面を評価する値「dicesurface」をDropdownが選択された時に更新する

 

 

スクリプト

作成したスクリプトはこちらです。

 

 

Dropdownにスクリプトを紐づける

uGUIであるDropdownと動かすためのプログラムを作成したので、次にそれぞれを紐付けます。

まず、作成したプログラムをDropdownの中入れます。

Dropdownの「Inspector」→「Add Compooent」ボタンを押して、作成したプログラムの名前(今回はdiceSurfaceChange)を検索すると出てくるはずです。

スクリーンショット 2017-05-23 0.05.34

 

 

その後、Dropdownの「Inspector」→「On Value Changed(Int32)」の部分にある「+」を押すとDropdownの値が変わった時などに、どのプログラムを使うかを設定することができます。

スクリーンショット 2017-05-23 0.01.22

 

 

Dropdownの「Inspector」→「On Value Changed(Int32)」→「None (Object)」の部分にuGUI自身ををドラッグ&ドロップします。

スクリーンショット 2017-05-23 0.11.54

 

 

すると、Dropdownの「Inspector」→「On Value Changed(Int32)」→「No Function」の部分を入れたプログラムの関数に変更できるので行います。

スクリーンショット 2017-05-23 0.14.03

 

 

最後に、新しく現れたDropdownの「Inspector」→「On Value Changed(Int32)」→「None (Dropdown)」に、再度自分自身を入れて終了です。

スクリーンショット 2017-05-23 0.16.31

 

 

詰まったところ

プログラムとしては、そんなに難しくないです。

コツとしては、すべてのDropdownに同じプログラムをいれるためtransform.nameでプログラムが入っているDropdownの名前取得した後、それに対応した配列番号に値を更新しています。

この時にDropdownをコピペして量産していたので量産された名前が「Dropdown (数字)」と全角のスペースが間に入ってしまい名前取得ができず、詰まりました。

名前の付け方大事ですね…あとで修正します。

 

 

 

まとめ

 

最後までみていただきありがとうございます。

今回は、uGUIのDropdownの使い方について説明しました。

ARの部分も書きたかったのですが、一番ボリュームがありそうだったため、分けることにします。

次回もみていただけると嬉しいです。

 


Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です