社員技術ブログ

Unreal Engine 5 (UE5) マテリアルで9スライスの作り方

こんにちは こんばんは ごきげんよう ミデンです。

今回のブログではUE5の最近実作業で使用したマテリアルを使った9スライスの作り方をご紹介します。

 

9スライスとは

9スライスとは上の画像の通り描画領域を9つに分割し、

四隅の縦横比を維持したままそれ以外の領域を伸縮して表示する方法です。

メッセージウィンドウの枠やボタンの背景等で使われます。

四隅を固定することで全体の縦横比を変えても形状を綺麗に保つ事ができます。

 

9スライス・マテリアルの考え方

今回は画像を4分割して使う9スライスマテリアルを作成します。

また、マテリアルを適用する対象はUE5エンジンコンテンツのPlaneスタティックメッシュとします。

 

4分割ではそれぞれの境界線が9分割の際の中間の領域に相当します。

(引き延ばされた中間領域の色は境界線両側の中間色となります)

 

テクスチャのUV座標で示すと下の図のようになります。

 

 

 

こちらが上述の操作を行うために作成したマテリアルです。

 

9スライスのマテリアルの作り方

以下、図を交えながら解説します。

まず上段から、テクスチャUVに2を掛けてから1を引き絶対値にします。

そこにどのくらい中間部分を挿入するかを縦横それぞれScale_U,Scale_Vに設定します。

今回は1を最小として1を超えた分を割合で中間部分として挿入するようにしました。

Scale_U , Scale_V(≧1)で設定した値で先ほどのUVを乗算し、1を引いた値で減算、0~1の範囲にClamp(範囲制限)します。・・・①

 

次に下段、2倍にしたテクスチャUVの端数を切捨て、0~1でClamp、2倍して1を引くことで(-1,-1),(1,-1),(-1,1),(1,1)の4つの領域に分けます。・・・②

 

①と②を掛け合わせ、0.5倍して0.5を足すと、四隅の縦横比を固定したまま中間領域を引き延ばしたUV座標になります。

 

メッシュに適用するとこのようになります。

Widget(ボタン)の9スライス機能で表示した場合と同じになっていることがわかります。

 

おまけ

もし四隅が同じ形状なら一か所だけ参照すれば良いよねということで、四隅を画像のどの領域で表示するか指定できるようにしてみました。

四隅をそれぞれ異なる形状にして一枚の画像で種類を増やしたり、あるいは表示する箇所を順次入れ替えてアニメーションさせるのも面白いかもしれません。

 

以上、マテリアルを使った9スライスの作り方でした。

どすこい。

関連記事

TOP