【Unity】Spritesでゲージを作る、成功ゾーンを添えて②【サンプル有】

本記事は、前回作った通常ゲージの続きです。

サンプルコード：https://github.com/konbraphat51/GaugePrototype
ブラウザ上で動くデモ：https://konbraphat51.github.io/GaugePrototypeWEBGL/

本記事で、成功ゾーン（下図の黄色部分）を実装します。
このゾーンを動的に、すなわち数値を渡したらそれに応じて着色するゾーンが変動するようにします。

用意するスプライト

着色スプライトです。

土台スプライトと同じ画像サイズの、白長方形です。これはマスクとして利用します。

作戦

緑の着色スプライトと同じように土台の上にバサッと上乗せして...

先ほど用意した長方形のスプライトでマスクを作り、うまい感じに横方向に圧縮すると...

なんと、ゾーンっぽくなったじゃないですか。
しかも長方形マスクと土台スプライトの画像サイズを同じにしているので、マスクのScaleのX値を0.1にすると、全体の1割を着色していることになります。

これを動的に設定できるように行いましょう。

実装

スクリプト

前回の記事のGauge.csを継承します。
必ずInitialize()を読んで、変数に初期値を渡す必要があります。

GaugeWithExcellentArea.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
/// <summary>
/// Must to call Initialize() first
/// </summary>
public class GaugeWithExcellentArea : Gauge
{
    private float excellentWidthRatio = 0.1f;
    private float excellentCenterRatio = 0.5f;

    [SerializeField] private GameObject excellentRectMask;

    /// <summary>
    /// this must be called
    /// </summary>
    /// <param name="showingRatio"></param>
    /// <param name="excellentWidthRatio"></param>
    /// <param name="excellentCenterRatio"></param>
    public void Initialize(float showingRatio,
        float excellentWidthRatio,
        float excellentCenterRatio)
    {
        base.Initialize(showingRatio);

        //edit excellent zone rect
        SetExcellentAreaRect(excellentWidthRatio, excellentCenterRatio);
    }

    private void SetExcellentAreaRect(float widthRatio, float centerRatio)
    {
        float centerPosX = GetHorizontalPosition(centerRatio);

        excellentRectMask.transform.localScale = new Vector2(widthRatio, excellentRectMask.transform.localScale.y);
        excellentRectMask.transform.position = new Vector2(centerPosX, excellentRectMask.transform.position.y);
    }
}

オブジェクト

構成は下図のように。
前回からExcellentZoneとRectMaskが増えています。

土台スプライト

土台にGaugeWithExcellentZone.csをアタッチ。（Gauge.csは取り外してください）
そしてこのコンポーネントに対応する子オブジェクトを付与していってください。
それ以外は前回のままです。

ExcellentZone

黄色の着色スプライトです。
これは緑色と同じく、positionは(0,0,-0.05)、そしてSorting Groupをアタッチ。

RectMask

これは用意した長方形画像で作ったマスクです。
これはExcellentZoneの子オブジェクトにしましょう。

これで、完成！！