キーリピート処理の説明用にスライダーUIを作ってみたら、なんとなくいい感じになってきたので調子に乗って”初期設定に戻す”機能を追加してブループリント インターフェイスまで扱うとこまできたのですが、もうひとつ「ミュート」の切り替えができるようにして完了にしようと思います。
前回の記事はこちら
スライダーUIを並べて操作してみる 《続き》 - みつまめ杏仁
アイコン
まずはアイコンの仕込みから
テクスチャは簡単な２パターンを用意します。２つの画像に分けてもよかったりしますが、今回はマテリアルで切り替えます。
Size： 96x96
画像をテクスチャとしてインポートしたら、そこから Create Material します。
UVスクロールさせるだけのシンプルなマテリアルです。
Interface
インターフェイスにあとひとつ関数名を追加します。
これは A とか 〇 とかの「決定」ボタンを押したときに呼び出すイベント用です。
コンパイルして閉じます。
ここでちょっと注意が必要なのが、インターフェイスを編集して保存すると、そのインターフェイスをセットしているブループリント全てが、再コンパイル対象になってしまうということです。
なので、UE4を閉じるときに、普段触っていなかったブループリントが「save する？」
って訊いてきて慌てることがあります。インターフェイスを触るときは、心の準備をしてから触るようにしましょう。エラーが出てるとマズいので、アスタリスクのついたアセットは、面倒ですが一度開いてコンパイルしてから閉じるようにします。
今回のスライダーのWidgetはそのまま編集をします。
UMG
まずはスライダーWidgetのキャンバスにアイコンを配置します。
Imageパーツを表示したいサイズに調整して、作っておいたマテリアルをセットしてやります。
Widgetブループリント
つぎにGraphの編集です。
まず、 ブーリアン型の変数 "isMute" を一つ追加します。
この変数を使って見た目を切り替える関数 "switchMuteDisp" を用意します。
今回 ミュートのON / OFF で変更するのは３パーツ。
扱う値が違うので結果的に３種類のSelectノードを使うことになりました。
Selectノードは ブーリアン型の値、 True か False を判定して、あらかじめ決めておいた対応する値を取り出してくれる大変便利なノードです。Brunch ノードで組むこともできますが、白いラインが分岐することを考えると、Selectノードを使う方がスッキリして見えます。
つないでみて気づくのですが、テキストのカラーについては SlateColor と呼ばれる特殊なカラー値なので、LinearColor が使えません。さらに面倒なことにSelectノードの上下にならんだピンの扱いがなぜか逆という・・・
さてさて 見た目をチェンジする関数ができたところで、初期設定用の関数に追加した変数を加えます。
新しく引数（Inputs）ピンも追加。最後に、できたての見た目チェンジ関数をつなぎます。
あとはボタンを押したときに呼ばれるイベント。
ブーリアン型の変数 isMute の内容をスイッチングします。スイッチングしたあとは見た目に反映するためにつくった関数をつないでいます。
これでスライダー用のWidgetは完成です。
制御用Widget
スライダーWidgetの 初期設定用の関数に引数を追加したので、ノードが変化しているのが確認できます。
前回の記事でリセットするイベントを作りましたが、そこにノードを追加します。
単純にIndexFocus の値が３ 以外なら、onDecide のイベントを呼ぶようにします。
これで、できあがりです。
再生して確認してみましょう。
うまくいきました。
ただこの操作はユーザーが気づきにくいので、画面の隅にでも操作ガイド的なナビ表示があった方いいでしょうね。マウスクリックを受け付けるなら、おそらく直接スピーカーのアイコンを触るので心配なさそうですが、そうなるとアイコンのデザインも、もう少しボタン感のある見た目にしないといけないですね。
ひとまずスライダーUIに関してはここまでにします。
ではでは
ステキなスライダーUIライフを！
