バーチャル3Dクリエイター神部まゆみです(*^-^*)
この記事はunityアセットのPlayMakerのチュートリアル動画でUIを作ってみた記事です。
前回の記事はこちら。
使用したunityバージョンは2022.3.6です。
前回の続きからやっていく
こちらの公式チュートリアル動画を見ながらやってみます。
スライダーで浮動小数点を表示するやつ
キャンバスの上で右クリック、 UI ⇒ スライダー を追加します。
追加したスライダーにFSMを追加、状態を追加する(ここでは名前はUpdate Slider)。
グローバルトランジションの UI FLOAT VALUE CHANGED をUpdate Sliderに設定すると、スライダーの数値が変わった時にUpdate Sliderのアクションが実行される。
スライダーは浮動小数点なのでFLOATのやつを使うっポイです。
Update SliderにGet Event Float Dataアクションを追加する。
データを受け取りたい時はこのGet Event～アクションは必ず必要っぽい。
前回BoolのGet Event も使ったけど、それのFloat版みたい。
画面向かって右下のValueに注目。
ちゃんと変数のデータが変わっていますね。
とりあえずここまでできたから書かないけど、動画の通りにやればこうやって数値を表示したりできます。
Floatの数値によって色が変わる動作を組んでみる
このままだとチュートリアル通りやったら動いた！というだけでつまらないので応用してみます。
シンプルにスライダーの数値が0.5以上ならマテリアルを青、それ以下なら赤にする動作を組んでみます。
PlayMakerの公式マニュアルによると、条件分岐はConditional Expressionというアクションでできるみたいです。
或いはFloat Compareアクションでもいけるかもしれない。
こんな感じでConditional Expressionで条件分岐させたら行けた。
Expressionのところに条件文を書き、結果がtrueならIs True Eventを、falseならIs False Eventに分岐させ、結果のbool値を格納したければStore Resultにbool変数を指定する、って感じっぽい。
動作させるイベントというか選択肢？はNew Eventで作れる。名前はなんでもいい。
選択肢の名前に過ぎないっぽいから通常はtrueとfalseでいいけど、名前が被りそうだからMatTrueにした。
これで動いた！
三つ以上分岐させる時はFloat Switchアクションを使う？
三つ以上分岐させたい場合はFloat Switchアクションで行けるかな？
…と思ったらなんかうまく動作しなかった。
別のチュートリアル動画で条件分岐やるっぽいので後でやってみます(;^_^A
ドロップダウンメニューで選択を切り替えるやつ
次はドロップダウンメニューで項目を選択できるやつをやります。
またキャンバスの上で右クリック、 UI ⇒ 古い機能 ⇒ ドロップダウンを作成 で。
unity 2022.3.6でやってるから古い機能に分類されているけど、もう少し前のunityバージョンだと古い機能には分類されてないと思う。
とりあえずこれだけでも選択はできます。変数を受け取る設定すらしてないので一応動くだけだけど。
ドロップダウンメニューにFSMを追加して、
- UI Drop Down Clear Options
- UI Drop Down Add Options
を追加する。
これは項目の初期設定みたいなもの？UI Drop Down Add Optionsには項目の選択肢を設定します。
これで項目の名前を変えられたみたいです。
グローバルトランジションで UI INT VALUE CHANGEDを使うとドロップダウンメニューの項目を変化させた時のint値を受け取れるので、
状態(ここではSelectedOption)を追加し、Get Event Int Dataアクションで受け取って、int値を受け取るint変数(ここではSelectedInt)を新規作成して設定。
デバッグ用にDebugにチェックを入れておくと、実行した時に数値が表示されるのでintをちゃんと受け取れているかが分かります。
これで数値が書き変わっているのでちゃんと動作してるみたい。最初の項目は1ではなく0ですね。
配列を作って色を設定、ArrayGetで数値に応じた色に変えられる
Arrayで配列変数を作って、種類をColorに変えると色の変数が作れるっぽい。
デフォルトのArray TypeはFloatになってるので、Colorに変えると色の配列が作れた。サイズを変えれば配列の要素数をいじれる。
あとはGet Arrayを使って設定し、UIのImageを追加して色を切り替えるようにできます。
設定はこんな感じだけど詳しくは動画を参照(;^_^A
色を変えると消えてしまう時は
これで項目を切り替えたら設置したImageの色を変えられるようになったけど、なんか消えてしまった。
インスペクターを見ると色は切り替わっているようだけど…。
youtubeのコメント欄で解決策を提示してくれている人がいました。
誰でも見れるので特にモザイクとかはかけませんがスクショで引用します。
配列に色を設定するときにこの問題を抱えている人は、R G Bの下に「A」とラベル付けされたラベルが右端にあることを確認してください。これは色の不透明度であり、私のような色であれば、デフォルトで非表示に設定されています。
しかしunityってホント海外勢多いですね…まぁ日本人が英語で書き込んでたりもするかな？
UI Graphic Set Colorのアルファ値が0になってるからかな？255にしてみたらいけました。
これで上手く動作した！
まさかこんな罠があるとは…。
何とか解決して良かったです。
テキストボックスにテキストを入力できるようにするやつ
テキストボックスに入力されたテキストを他のテキストフィールドに表示したりもできます。
キャンバス上で右クリック、 UI ⇒ 古い機能 ⇒ 入力フィールド で。
長くなったから省略するけど、こんな感じで設定するとテキストボックスに入力を受け付けて、入力された文字データを格納して表示を書き換えられる。
これで動いた！
アクションは上から順に実行されるっぽいので注意
今さら気付いたけど、設定したアクションは上から順に実行されるみたいなので、順番が間違ってると上手く動作しないみたい。
↓Get Event String Dataで最初にデータを受け取るべきところを、一番下にしたら名前が表示されなくなった。
右クリックで出てくるMove to～ってやつで順番を入れ替えられるので、上手く動かない場合は順序をちゃんと考えて配置すると上手くいくと思う。
つづく？
ちょっとずつPlayMakerのいじり方が分かってきて良かった。
ここまでやったやつだけでも、リファレンス見ながらやれば色々作れるかな？
3Dモデルを配置して、ドロップダウンで項目を選択したらアニメーションを切り替える…とかは作れるかもしれない。
BOOTHとかでアニメーションファイルを配布したい場合はそういうのがあるとイメージを伝えやすいかもしれない。
PlayMakerはSTYLYでも使えるから、せっかくだから久々にSTYLYシーンでも作ってみるかな…。
まぁもう少しいじってみます(*^-^*)