うにてぃブログ

UnityやUnreal Engineの記事を書いていきます

【Unity】角丸UI を Shader で作成する

github.com

以前 角丸UI を作成した記事を公開しましたが、これだとメッシュが増えてしまうため
Shader 側 で角丸を作成する UI を作りました

頂点データにパラメータをもたせているため Shader 側に 転送するデータ量が少し増えます

hacchi-man.hatenablog.com

コンポーネント紹介

FlatRoundedCorner

角丸UIができる

f:id:hacchi_man:20200822001358p:plain:w300

Color

UI の色を変更する

Raycast Target

タップ判定を有効にする

Flags

角丸の場所を指定する

下図のような角丸 UI が作成できる

Type

アウトラインやゲージのような表現ができる

f:id:hacchi_man:20200822005132p:plain:w200

f:id:hacchi_man:20200822005121p:plain:w200

FlatCircle

丸を表現できる

f:id:hacchi_man:20200822011705p:plain:w300

f:id:hacchi_man:20200822012928p:plain:w300

Color

UI の色を変更する

Raycast Target

タップ判定を有効にする

FlatCircleGauge

丸ゲージを作成できる

f:id:hacchi_man:20200822014631p:plain:w300

f:id:hacchi_man:20200822013348p:plain:w300

Color

UI の色を変更する

Raycast Target

タップ判定を有効にする

Width

太さ

Start Angle

開始時の角度

Fill Amount

ゲージの割合

IsReverse

ゲージのたまり具合を反転

Length

最大の長さ