以前にもスライダーを作って記事にしましたが、今回はマウス操作専用です。
前回のトグルスイッチと同じところに並べて使う想定のUIパーツなので、引き続き同じアセットもいじりつつアップデートしていこうと思います。
で、さっそく
テクスチャをひとまとめにしてしまおう
スライダーのパーツもひっくるめて一枚のテクスチャに収めることにします。
どうせ同じタイミングで読み込まれるんだったら、枚数が少ない方がいろいろ効率的です。
256ｘ256のテクスチャにまとめました。左がRGB、右がアルファチャンネルです。
まだ余裕がある状態ですが、追加要素のためにキープ、ということにしておきます。
テクスチャの切り出しが面倒なのが残念ではありますが、ゲームのロードが少しでも早く終わるなら、ユーザーの利益につながります。必要経費として頑張ります。
UVの範囲はレイヤーで管理しています。
パーツごとに、適当なカラーで四角く塗り分けたレイヤーにパーツ名をしっかり付けて、レイヤーグループにまとめておきます。中のレイヤーは透明度100％でもレイヤーグループを半透明にすると上図のような状態にできます。
テクスチャとして書き出す際は、レイヤーグループをまるっと非表示にすればOK。
この方法だと、パーツの用途がはっきりするし、場所を入れ替えるときも重なりを回避できるし、アルファチャンネルの移動も確実に行えます。部分的に塗りつぶしたりするときもこの範囲レイヤーからの選択範囲が重宝するし、光彩なんかのボケ足の確認もしやすいので、私はいつもこの方法で管理しています。
さてさて
このテクスチャをUE4にインポートしたら、マテリアルを用意します。
切り出しサイズを決める『Tiling』はMultiplyで、切り出す場所を決める『Offset』はAddノードで計算します。それぞれ U と V があるので、Scalar（スカラー）Parameter を４つつないだ方が、パラメーターの名前も付けられて分かりやすくなるのですが、Vector Parameterにすると、ブループリントから一気に４つの値が渡せるのでノードが少なくなります。
下のようにしても問題は無いです。
マテリアルはこれで完成です。
マテリアルインスタンスでパーツを切り出そう
次にこのマテリアルを親にして、インスタンスを作成します。
コンテンツブラウザのマテリアルアセットのアイコンの上で右クリックします。
コンテキストメニューってやつですね。選択しているアイテムに合わせてメニュー内容が変わるという。ここからマテリアルインスタンスを作ります。
作ったらパラメータを編集します。
値の計算方法は前回の記事で説明しているので省きます。
とにかくテクスチャサイズで割ると求められます。
UMGで使用する パーツとして切り出したい数ぶんマテリアルインスタンスを用意していきます。
細かいパーツごとのパラメータは、次回の記事で書いていくとして、前の記事のトグルスイッチのマテリアルが修正になります。
セットされているテクスチャを今回のやつに変更したら、
場所と横幅はそのままでテクスチャの高さだけが変更になったので、TexCoord ノードのパラメータを変更するだけです。
トグルスイッチのマテリアルが変更できたら、
スライダー用のマテリアルを作ろう
いよいよスライダーのマテリアル。作り方はテクスチャアセットアイコンの上で右クリックです。Create Material して、マテリアルドメインを UserInterfaceに変更するとこまでは、目を瞑っててもできるくらいじゃないといけませんね。
私はできませんけどね。
で、内容はこんな感じ。
テクスチャを部分的に切り出すので、TexCoordノードのパラメータは、
場所が少しずれてるので Add ノードを入れて、OffsetV に 0.25 を固定値としてつないでいます。各パラメータをテクスチャに重ねるとこんなかんじ。
スライダーは、ハンドル（つまみ）が左右に移動します。
それをトグルスイッチの時と同様にUVを動かして再現します。
テクスチャ的には、細かい小数点で管理された、完全にデザイナー都合のUV配置なので、ここで大活躍するのが Lerp ノードです。
Lerpノードの、ピンAとB にスライダー両端のOffsetU。AlphaピンをScalarParameterにして、ブループリントから値を受け取れるようにしています。
正式名称は Linear Interpolate といって線形補間してくれる便利なやつです。ちょっとわかりにくいかもしれないですが、 UV移動で スライダーの ０ から 満タン まで移動する場合の値の変化を図にしてみました。
プログラマ的には、テクスチャ内のレイアウトに依存したUVアニメーションの調整なんてマッピラゴメンだと思います。Lerp ノードを使うことで、その辺の責任をしっかり取れるUIデザイナーになれるという訳です。
スライダーで扱う値はたいてい 0～100％ のような『割合』が多いので、そのまま 0～1で制御できた方が分かりやすいし扱いやすいです。プログラマからは、0～1で値を受け取って、マテリアルの中で、いい感じに補正してやるのです。あとからテクスチャ内のレイアウトを変更しても、変更するのはマテリアルアセットのみです。UIデザイナーだけで完結できます。
スライダーのマテリアルができたので、Widgetを作っていきます。
スライダーのWidgetをつくろう
まずはTextBlockと共にキャンバスに配置します。
スライダーの部分はトグルスイッチ同様に、マテリアルをセットします。
TextBlockはラベルと数値の２つ。それぞれ Is Variable にチェックを付けておきます。
キャンバスはこれで完成。
Graphに移動してさっそくGet Dynamic Material ノードで、スライダーとしてセットしたImageパーツから、Material Instance Dynamic を作ってお変数化しておきます。
まずはスライダーのハンドルと値を変更するための関数。
Float型の値を、直接Text型にキャストするノードが ToTextノードです。小数部分はいらないので設定を少しいじります。▽をクリックするとこのノードの設定が変更できます。
Rounding Mode の Half to Even は、端数を丸める処理をいくつかある中の一つです。
端数は小数部分で、 0.5 以下は切り捨てで ０ 、0.51 以上は切り上げて 1 にしてくれます。
次に、スライダの初期設定をする関数を用意します。
テキストラベルを書き換えて、先に作っておいた、値を更新する関数を取り出してつなぎます。
これでWidgetは完成です。
前回のトグルスイッチと同じところに並べます。
ストラクチャにも専用のパラメータを追加します。
ストラクチャの更新ができたら、スライダーにも初期値をセットしてやります。
ノードの位置を変えていますが、前回作った wb_main のイベントです。
今回はここまでにします。
表示を確認してみます。問題なければ値が反映されているはず。
レイアウトと見た目の都合で、ミニスライダーになってしまいました。
とうわけで
クリックする部分は次回《解決編》で。
ではでは
ステキなスライダーライフを！
