見出し画像

【Unity】斜めゲージ(端が直線にならないゲージ)を作る

kt.

Unityでゲージを実装しようと思うとUIのImage TypeのFilledを使うのが一般的だと思うのですが、これを使用すると斜めなどのゲージの端っこが直線じゃない時に変な感じになっちゃうんですよね。

端っこと角度を合わせる事が出来ない

これを解消するためにはShaderを使ったりすると上手く出来るようなのですが、解説されているのを見るとまぁまぁややこしそう。
もっと簡単に出来ないかと思ってスプライトマスクを使った方法で実装してみました。

まずはゲージ画像を用意します。

①ゲージ背景
②ゲージ本体
③ゲージマスク用画像(黒い部分は透明な部分です。判りやすいように黒くしてます)

まずは①ゲージ背景をHierarchyに表示します。
Sorting Layerで表示したいレイヤーにしておきます。

次に②ゲージ本体を①ゲージ背景の子として設置します。
Mask InteractionをVisible Outside Maskに変更

①ゲージ背景を右クリック→2D Object→Sprite Maskを子として設置
③ゲージマスク用画像をSpriteの所で指定して良い感じの位置にマスク座標を合わせます。

あとは③ゲージマスク用画像のX軸の数値をスクリプトで変更出来るようにすればゲージのように動いてくれます。

動かすとこんな感じです↓


いいなと思ったら応援しよう！