Top > デザイン > UE4 > 単品 - 9スライスのウィンドウ

最終更新日 2019/06/03

単品 - 9スライスなウィンドウ Edit

一番単純な辺を伸ばすだけのウィンドウは「Inage」を「Box」に設定し、マージンを入れるだけでOK。
辺の模様を繰り返しにしたい場合、アトラス化されたテクスチャをスプライトにして切り出しすと上手くタイリングされない。
今のところ方法が思いつかず、しょうがないのでユニークな画像として切り出している為、少々無駄が多くなってしまっている。

Type1 - 上下左右の辺が同じ画像のウィンドウ Edit

UE4007003.jpg

配列エレメントの設定、辺のテクスチャのタイリングの設定をする。
4辺に関しては「Scale」に-1を入れて反転させる。
下の辺は上の辺の反転だが、左右に関してはテクスチャを回転させるとおかしくなるのでマテリアルで対応。

UE4007004.jpg

「CustomRotator」の「Rotation Angle」は0〜1の間の数値でなくてはならないので割っている。
「Rotation Center」は画像の中心なので「Vector Parameter」のRとGに0.5を入れてある。
これ目的で使っていいのかはわからないけれど、2チャンネルあれば何でも良いのかもしれない。

Type2 - 上下の辺と左右の辺が違う画像のウィンドウ Edit

UE4007002.jpg

配列エレメントの設定、辺のテクスチャのタイリングの設定をする。
下の辺は上の辺の反転、右の辺は左の辺の反転を設定。
ほかはType1と同じ。

Type3 - ガチで並べてみる Edit

UE4007001.jpg

はい。ガチのガチ設定。
「Horizontal Box」で左・中央・右と並べた画像を更に「Vertical Box」でラップし縦に並べる方法。
「Vertical Box」のアンカーは上下左右のストレッチになっているので親の「Canvas Panel」にのサイズにフィットする。
利点はなんだろう・・。ウィンドウとしては「Grid Panel」に軍配が上がるものの、ウィンドウトップに見出しをつける時等の参考にはなる・・かな?

こんな感じに4端と辺が同じ画像で辺が伸びるタイプのウィンドウであれば最初に説明した「Box」機能で十分。


添付ファイル: fileUE4007004.jpg 23件 [詳細] fileUE4007003.jpg 30件 [詳細] fileUE4007002.jpg 26件 [詳細] fileUE4007001.jpg 26件 [詳細]

リロード   新規 編集 凍結 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2019-06-11 (火) 00:29:10 (181d)