コードを書かずにImageTypeのFilledとSlicedを共存させて綺麗なプログレスバーを作る【Unity】

ImageTypeをFilledにするとSlicedと共存できず画像の上のような状態になってしまうのを下のように綺麗にします。

画像

今回使ってる素材です。自作ですのでご自由にどうぞ。

ちなみに最初のサムネイルの画像は上記のMask用の白い画像以外の丸い画像は両方とも（TextureTypeをSpriteにして、SpriteEditorから）Borderを中心に集めています。

オブジェクト構成

Canvas以下にこのような構成で作成します。

それぞれのオブジェクトの詳細は以下の通りにします。 プログレスバーの進捗度合いを表すFilledをマスクにしてその下の階層にプログレスバーの進捗最大の時の画像をSlicedで置くことで綺麗なプログレスバーを実装してます。

おわり

きれーーい！！