Zenn
🦁

Unity初心者向け：Color.Lerp関数をより詳しく理解しよう

2024/12/20に公開
C#
Unity
lerp
線形補完
tech

Unity初心者向け：Color.Lerp関数をより詳しく理解しよう

Unityでは、ゲーム内で色を動的に変化させる機会が多くあります。たとえば、徐々に空が明るくなったり、画面が夜色に染まったり、UIボタンがホバー時にふわっと色を変えたりするなどです。

こうした「色をなめらかに変化させる」処理を手軽に実現するために役立つのが、Color.Lerpという関数です。

この記事では、Color.Lerpの基本的な使い方と仕組みを、改めて分かりやすく解説します。画像や動画は使わず、あくまでテキストで完結しますので、実際にUnityを触りながら確かめてみてください。

Color.Lerpの基本

Color.Lerpは、2つのカラー(colorAとcolorB)を指定し、その間を0～1の割合(t)で補間した色を返す関数です。

Color.Lerp(Color colorA, Color colorB, float t)
- colorA：開始側の色
- colorB：終了側の色
- t：0～1の範囲の値。0なら完全にcolorA、1なら完全にcolorB、0.5ならちょうど中間の色

たとえば…

- Color.Lerp(Color.red, Color.blue, 0) → Color.redを返す
- Color.Lerp(Color.red, Color.blue, 1) → Color.blueを返す
- Color.Lerp(Color.red, Color.blue, 0.5f) → 赤と青の中間色（紫系）が返ってくる

t値の範囲と挙動

tが0～1の範囲内であれば、Color.Lerpは素直に2色の間を行ったり来たりします。

  • t=0 → 完全なcolorA
  • t=1 → 完全なcolorB
  • tが0.25なら、colorA25% + colorB75%の割合で混ざった色になります。
    （厳密には各R,G,B,Aチャンネルについて線形補間します）

0未満や1より大きい値を渡したらどうなるか？

0より小さいtを渡した場合、理論上はcolorAからさらにcolorAの方向へ外挿され、1を超える場合はcolorBから遠ざかる方向へ外挿されますが、実際にはほとんどの用途で0～1の範囲内でtを使うため、通常はその範囲外は考えないほうが良いでしょう。

線形補間とは？

Color.Lerpの”Lerp”は「Linear Interpolation（線形補間）」の略で、単純に2色の各成分(R,G,B,A)をtの割合で足し合わせているにすぎません。

R,G,B,Aそれぞれの値は0～1の浮動小数で表され、
resultChannel = (1 - t) * colorA_Channel + t * colorB_Channel
という計算で中間値が求められます。

これをR,G,B,A全てのチャンネルで行い、合計したのが最終的な色です。

実用例

1.背景色の変化

朝～昼～夜と背景色が変わる場合、時間経過tに応じてColor.Lerpで色を切り替える。
たとえば、朝色(morningColor)と昼色(noonColor)を用意し、t=0.5までの間は徐々に朝→昼へ遷移させる、といった使い方ができる。

2.UIエフェクト

ホバー時にボタンが白→薄い青へ変わるような演出をUpdate()でtを増やしながらColor.Lerp(Color.white, Color.cyan, t)とすることで、なめらかな色変化が可能。

3.HPバーのグラデーション演出

プレイヤーのHPが100%なら緑、0%なら赤というようにしたいとき、HP割合をtとしてColor.Lerp(Color.red, Color.green, t)を適用すると、HPが減るにつれ緑→黄→赤へと変化するバーが実現できる。

Performance考慮

Color.Lerp自体は軽量な演算（単純な加算と乗算）なので、通常の範囲で使う分にはパフォーマンス問題は気になりません。

ただし、毎フレーム大量のLerpを行う必要があるシーン（例えば何百ものオブジェクトで色変化が走る）であれば、必要最小限のタイミングで更新すると良いでしょう。

他のLerp系メソッドとの違い

UnityにはMathf.LerpやVector3.Lerpなど、様々な型に対してLerpメソッドが用意されています。
Color.LerpはColor用の線形補間であり、考え方は同様です。

R,G,B,Aをそれぞれ浮動小数として捉える点ではVector4.Lerpに近いですが、Colorはそれ専用の構造体であり、色に特化している点が異なります。

デバッグのヒント

tの値が期待通り変化しているか分からない場合、Debug.Logでtと結果色を出力して確認すると良いでしょう。

本番前にコンソールにメッセージを表示することで、tが0から1に増えていく過程や、そのとき色がどう変化しているかの感覚をつかめます。

発展的な利用法

  • 線形ではなく、時間経過に応じたイージング（緩急のついた補間）を行いたい場合、tをそのまま使わず、tにイージング関数を適用した値をColor.Lerpに渡すと、より自然な色変化が可能。
  • 複数の色の中から選び、連続的なグラデーションを作りたいときは、Color.Lerpを段階的につなげるか、中間色を増やして組み合わせることで、滑らかなカラーパレットを実現できる。

まとめ

Color.Lerpは、Unityで色を動的に変化させるための基本関数です。0～1の範囲でtを指定するだけで、指定した2色の間をなめらかに移行できます。これを活用すれば、日没や夜明けといった演出から、UIのふんわりとした色変更、HPバーのグラデーション表現など、あらゆる色変化がスムーズかつ簡単に実現できます。

初心者はまず簡単な場面（たとえば、1つのオブジェクトの色をUpdateで少しずつ変える）からColor.Lerpを試してみましょう。その感覚をつかめば、より複雑な時間変化やイージングを加えた高度な演出にも挑戦しやすくなります。

Discussion