ぐーるらいふ

底辺。

【Unity】uGUIで円形のプログレスバーを簡単に作る

Unity

お疲れ様です。ぐーるです。
uGUIでの円形プログレスバーの作り方をメモっておきます。

手順

1.一番下になる背景を作る

Imageを作り、円形の画像を当てはめ、名前を「ProgressBar」としておく
f:id:ghoul_life:20180131181258p:plain

ここに実際に使用した200x200の白い円形のpng画像を貼ってあるのですが
見えませんね。見えません。見えないのでイメージ画像も一緒に貼ってあります。
f:id:ghoul_life:20180131171339p:plain
f:id:ghoul_life:20180131171345p:plain

2.中央のマスク部分を作る

1で作ったProgressBarをコピーして子要素にする。その後大きさをちょっと縮小(100x100)して、
名前を「Center」にしておく

f:id:ghoul_life:20180131181308p:plain

3.ゲージ部分を作る

1で作ったProgressBarをコピーして子要素にする。

f:id:ghoul_life:20180131181315p:plain

大きさはそのままにして、色を好きな色に変更、
Image TypeをFilledにします。
f:id:ghoul_life:20180131181340p:plain
f:id:ghoul_life:20180131181348p:plain

4.完成

Image Typeの下にあるImage Amountの値を変えれば
円形プログレスバーの出来上がりです。
f:id:ghoul_life:20180131181359g:plain

uGUIスゲー

あっという間にできてしまった。
画像ではShadow入れて見やすくしていたり、名前を付けてたりしますが、
その辺はもちろん自由です。空中にゲージだけ浮かせたいって人は1の背景も要らないですね。