Gradientクラスを使って色のグラデーションをプログラムで扱う【Unity】

この記事でのバージョン
Unity 2019.4.9f1

はじめに

Untyには色を扱うためのColorというクラスがありますが、

[SerializeField]
private Color _privateColor = default;

色のグラデーションを扱うためのGradientというクラスもあります。

[SerializeField]
private Gradient _gradient = default;

今回はこのGradientを実際にどう使うのかという感じの記事です！

なお、記事中では以下のアセットを使っています。

Clean & Minimalist GUI Pack | 2D GUI | Unity Asset Store

Gradient

まずGradientはColorと同様にInspector上でクリックすると、

グラデーションの設定ウィンドウ(Gradient Editor)を開くことが出来ます。

下部のマークで色を設定し、

上部のマークで不透明度を設定します。

またModeをFixedにすると色がいきなり変わるようになります。

なお、プログラムで設定する場合は、

GradientColorKeyで色、GradientAlphaKeyで不透明度を設定します。

 //色の設定
var colorKey = new GradientColorKey[2];
colorKey[0].color = Color.red;
colorKey[0].time = 0.0f;
colorKey[1].color = Color.blue;
colorKey[1].time = 1.0f;

//透明度の設定
var alphaKey = new GradientAlphaKey[2];
alphaKey[0].alpha = 1.0f;
alphaKey[0].time = 0.0f;
alphaKey[1].alpha = 0.0f;
alphaKey[1].time = 1.0f;

//Gradientのインスタンスを作成し、値を設定
var gradient = new Gradient();
gradient.SetKeys(colorKey, alphaKey);

色の取得にはEvaluateというメソッドを使います。

//time時点での色を取得 (timeはfloatで0~1)
Color color = gradient.Evaluate(time);

例えば、経過時間に合わせてグラデーションさせたい場合は以下のような感じになります。

//グラデーションの設定
[SerializeField]
private Gradient _gradient = default;

//色を変える対象の画像
[SerializeField]
private Image _image = default;
  
//色を変える時間と現在の時間
private readonly float FADE_COLOR_TIME = 4.0f;
private float _currentTime = 0;
  
//=================================================================================
//初期化
//=================================================================================

private void Awake() {
  //最初の色設定
  _image.color = _gradient.Evaluate(0);
}

//=================================================================================
//更新
//=================================================================================

private void Update() {
  //時間を進める
  _currentTime += Time.deltaTime;
  var timeRate = Mathf.Min(1f, _currentTime / FADE_COLOR_TIME);

  //色を変更
  _image.color = _gradient.Evaluate(timeRate);
}

---