Color.Lerpを使いこなそう！Unity初心者向けの“色変化”実践ガイド
Color.Lerpを使いこなそう！Unity初心者向けの“色変化”実践ガイド
Unity初心者の方で「オブジェクトの色をなめらかに変化させたい」というシーンに遭遇したことはありませんか？たとえば「HPゲージを赤から緑へじわじわ変えたい」「ボタンをクリックしたら明るい色にフェードさせたい」など、ゲーム開発では“色の変化”を演出する場面が意外と多いものです。本記事では、Color.Lerpという便利なメソッドを活用し、実践的に色を変化させる方法を解説します。初心者向けにポイントを押さえながら、ちょっとした応用テクも含めてご紹介します。
なぜColor.Lerpが役立つのか
Color.Lerpとは？
Color.Lerpは「2つの色の間を補完（Lerp）する」Unityのメソッドです。数値tを0〜1の間で変化させると、from色とto色の間を割合に応じて混ぜた色を返してくれます。たとえばt=0.0なら完全にfrom色、t=1.0なら完全にto色、t=0.5なら両者が半分ずつ混ざった色になります。
Color.Lerp(fromColor, toColor, t);
シンプルな構文ながら、ゲーム内での色変化演出には非常に便利。進捗バーやUIボタンのフェードなど、多くのシチュエーションで活用できます。
色変化の“なめらかさ”を演出できる
たとえばフレームごとにtを少しずつ増やすと、最初は赤色→じわじわ緑色へ…のように自然なカラーグラデーションを作れます。これはゲームの世界観演出やUI/UXの向上に直結する要素です。
Unity初心者が陥りやすい課題
Unityを始めたばかりだと、「色を変えるには直接Colorを設定すればいいのでは？」と思いがちです。しかし、一瞬でピッと切り替わるだけでは味気なく、ユーザーにとって急な変化が目に負担をかける場合もあります。また、複雑な計算式を自作するのは手間がかかりがちです。
Color.Lerpを使えば、数行のコードで実装可能。スクリプト初心者でも理解しやすく、"なめらかさ"を演出するハードルがぐっと下がります。
Color.Lerpの基本的な使い方
1. 時間経過に合わせてtを変化させる
もっとも定番のパターンとして、Time.deltaTimeなどを用いてtを徐々に増やすアプローチがあります。疑似コードは以下のとおりです。
public class ColorLerpExample : MonoBehaviour
{
[SerializeField] private Renderer targetRenderer;
[SerializeField] private Color fromColor;
[SerializeField] private Color toColor;
private float duration = 2f; // 色変化にかかる時間（秒）
private float time = 0f;
void Update()
{
time += Time.deltaTime;
float t = time / duration; // 0〜1に正規化
targetRenderer.material.color = Color.Lerp(fromColor, toColor, t);
}
}
-
durationで何秒かけて色を変えるかを設定 -
timeがdurationに達したらtが1.0になり、完全にtoColorへ移行
2. イベントごとに色変化させる
「ボタンが押されたときに色を変化」や「敵キャラのHPが減ると徐々に色が変わる」など、イベントトリガーが明確な場合はtを段階的に変える仕組みを作るのがおすすめです。コルーチンで書くと、より制御しやすくなります。
// ボタンが押されたときに色を変化させる例
public void OnButtonPressed()
{
StartCoroutine(LerpColor());
}
private IEnumerator LerpColor()
{
float time = 0f;
while (time < duration)
{
time += Time.deltaTime;
float t = time / duration;
targetRenderer.material.color = Color.Lerp(fromColor, toColor, t);
yield return null;
}
}
コルーチンを使うと、他の処理と並行して色の変化を行えるため、シーン全体の演出を組み合わせやすくなります。
実践的なTIPS
Color.LerpUnclampedでオーバーシュート表現
Color.LerpUnclampedを使えば、tの範囲を0〜1外にすることで"オーバーシュート"な演出も可能です。たとえばt=1.2にすると、ふだんのLerpよりもtoColorを飛び越えた先の色味を作れたりします。やや上級テクニックですが、「一瞬強い色になってから戻る」みたいな演出をしたい場合には面白い方法です。
複数回の色変化を連続させる
もし「赤→黄→緑」のようにステップを刻んで変えたいなら、Color.Lerpを段階的に使う方法が有効です。たとえば「最初の1秒は赤→黄」「次の1秒は黄→緑」というように、時間制御で2回のLerpを行うイメージです。
float time = 0f;
void Update()
{
time += Time.deltaTime;
if (time < 1f)
{
float t = time / 1f;
targetRenderer.material.color = Color.Lerp(Color.red, Color.yellow, t);
}
else if (time < 2f)
{
float t = (time - 1f) / 1f;
targetRenderer.material.color = Color.Lerp(Color.yellow, Color.green, t);
}
}
こんなふうに区切って書くと"途中カラー"を挟むことが可能です。
よくある疑問とトラブルシュート
Q1. マテリアルの色が変わらない
-
マテリアルがインスタンス化されていない: UnityではRenderer.sharedMaterialを変更しても本体のマテリアルが書き換えられない場合があるので、
renderer.materialを使って動的に変更するなど注意が必要 -
目に見えない場所を変えている: UIの場合、
Graphic.colorを変えるのかImageコンポーネントを変えるのかで手順が違う
Q2. 色の変化が急すぎて自然に見えない
- durationが短すぎる: シーン演出の中で色が一瞬で切り替わると、チカチカする印象を与えがち
- Time.deltaTime計算のミス: 時間計測ロジックを誤ると、フレームに依存した予期しない速度になる
Q3. 色が意図した色にならない
- 色空間やGamma/Linear設定が原因で微妙に見え方が変わる場合もある。エディタの「Project Settings > Player」のColor Spaceを確認し、自分の環境に合った色空間に設定するとよいです。
まとめ：色を“なめらか”に変えるだけでゲームが映える
単に赤から緑にバッと切り替えるだけと、徐々に移り変わる"フェード演出"では、プレイヤーが受ける印象に大きな差が出ます。Color.LerpはUnity初心者でも扱いやすく、ほんの数行のコードで美しいカラーグラデーションを実装できるのが大きな魅力です。
これまで「色の変化は難しそう」と敬遠していた方も、ぜひ試してみてください。短時間で視覚的な変化を体感できるので、開発の楽しさが倍増するはずです。もしさらに高度な演出やスムーズなUXを目指すなら、コルーチンやアニメーションと組み合わせてアプローチしてみましょう。
この記事を読んで「もっと実践したい！」と感じたあなたへ
Unity開発を効率よく進めるためには、実践的スキルと仲間の交流が大切。
おすすめステップは下記3つ:
1. 有料教材「どこでもUnity教室」でゲーム制作を短期マスター
- 5日でシンプルFPS完成: 初心者でも要点を網羅
- 最新InputSystem, FPS実装まで: つまずきやすいポイント先回り解説
- 購入特典: Discord招待＋サンプルプロジェクト
2. 無料コミュニティで疑問即解消＆モチベUP
- 初心者～中級OK: 学習ペースに合わせた質問や情報共有
- 質問サポートが充実: 講師や仲間に即相談
- 切磋琢磨できるから挫折しにくい
3. ゲーム開発所RYURYUがトータルサポート
- コナラ総販売200件超: 多様なUnity案件対応
- VR/AR/AIなど先端技術にも精通
- ゲームクリエイター甲子園/TGS出展実績多数
Discussion