こんにちは こんばんは ごきげんよう ミデンです。
今回のブログではUE5の最近実作業で使用したマテリアルを使った９スライスの作り方をご紹介します。
９スライスとは
９スライスとは上の画像の通り描画領域を９つに分割し、
四隅の縦横比を維持したままそれ以外の領域を伸縮して表示する方法です。
メッセージウィンドウの枠やボタンの背景等で使われます。
四隅を固定することで全体の縦横比を変えても形状を綺麗に保つ事ができます。
９スライス・マテリアルの考え方
今回は画像を４分割して使う９スライスマテリアルを作成します。
また、マテリアルを適用する対象はUE5エンジンコンテンツのPlaneスタティックメッシュとします。
４分割ではそれぞれの境界線が９分割の際の中間の領域に相当します。
（引き延ばされた中間領域の色は境界線両側の中間色となります）
テクスチャのUV座標で示すと下の図のようになります。
こちらが上述の操作を行うために作成したマテリアルです。
９スライスのマテリアルの作り方
以下、図を交えながら解説します。
まず上段から、テクスチャUVに２を掛けてから１を引き絶対値にします。
そこにどのくらい中間部分を挿入するかを縦横それぞれScale_U,Scale_Vに設定します。
今回は１を最小として1を超えた分を割合で中間部分として挿入するようにしました。
Scale_U , Scale_V（≧1）で設定した値で先ほどのUVを乗算し、１を引いた値で減算、０～１の範囲にClamp（範囲制限）します。・・・①
次に下段、2倍にしたテクスチャUVの端数を切捨て、０～１でClamp、2倍して１を引くことで(-1,-1),(1,-1),(-1,1),(1,1)の4つの領域に分けます。・・・②
①と②を掛け合わせ、0.5倍して0.5を足すと、四隅の縦横比を固定したまま中間領域を引き延ばしたUV座標になります。
メッシュに適用するとこのようになります。
Widget（ボタン）の９スライス機能で表示した場合と同じになっていることがわかります。
おまけ
もし四隅が同じ形状なら一か所だけ参照すれば良いよねということで、四隅を画像のどの領域で表示するか指定できるようにしてみました。
四隅をそれぞれ異なる形状にして一枚の画像で種類を増やしたり、あるいは表示する箇所を順次入れ替えてアニメーションさせるのも面白いかもしれません。
以上、マテリアルを使った９スライスの作り方でした。
どすこい。
コメント