(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]



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


このエントリーをはてなブックマークに追加


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


はじめに

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

[SerializeField]
private Color _privateColor = default;
f:id:kan_kikuchi:20201008135948j:plain


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

[SerializeField]
private Gradient _gradient = default;
f:id:kan_kikuchi:20201008135923j:plain



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


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

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



Gradient

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

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

f:id:kan_kikuchi:20201009103007j:plain


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

f:id:kan_kikuchi:20201009103039j:plain


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

f:id:kan_kikuchi:20201009103046j:plain


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

f:id:kan_kikuchi:20201009103053j:plain


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

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);
}
f:id:kan_kikuchi:20201009105053g:plain