タイトル通り両端から減っていく(もしくは増えていく)ゲージを作成していきます。
完成形
作成方法
両端から減っていくゲージはImageコンポーネントだけでは作成不可能なので自作していきます。
※SliceタイプのSpriteを使えばwidthを変更するだけでそれっぽくは見える
やり方としてシェーダーでも作成可能なのですが、今回はRectMask2Dコンポーネントを使ってさくっと作っていきます。
ヒエラルキービューの状態
BarBackgroundImage(背景)、BarFrontImage(増減ゲージ)はただのImageコンポーネントが付いたものです。
間にRectMaskがあり、ここにRectMask 2Dコンポーネントと後述するコード(BothSidesFill.cs)がアタッチされています。
width,heightは全て同じ
Sliderは動作確認用なのであってもなくても大丈夫です。
コード
public class BothSidesFill : MonoBehaviour
{
private RectTransform _maskRectTransform;
private float _defaultWidth;
private float _fillAmount;
public float fillAmount {
get { return _fillAmount; }
set {
_fillAmount = Mathf.Clamp01(value);
_maskRectTransform.sizeDelta = new Vector2(Mathf.Lerp(0, _defaultWidth, _fillAmount), _maskRectTransform.sizeDelta.y);
}
}
public void Init()
{
_maskRectTransform = transform as RectTransform;
_defaultWidth = _maskRectTransform.sizeDelta.x;
}
void Start()
{
Init();
}
public Slider fillSlider;
public void OnChangeFillAmount()
{
fillAmount = fillSlider.value;
}
}
ImageタイプがSlice対応画像ならwidth変更するだけでいいと思うけど、これなら非Slice画像でもいけます!
[blog:g:12921228815717619800:banner]