背景でひと工夫！グラデーションとクロスフェード演出【MM2025 開発記 # 12】

はじめに

この記事は 「MM2025 開発記」 シリーズ第12回です。

前回の記事では、歌詞とコインの連動について紹介しました。

今回は、背景グラデーションとクロスフェード演出について紹介します。

曲時間に応じた演出切り替え

本ゲームでは、曲の世界観を表現するために曲の進行に合わせて背景が変化するように設定している。

背景演出の切り替えは、TextAlive の再生時間を基準に行っている。

if (now >= gradChangeTimes[i]) {
  nextGradIndex = i;
}

ここでのnowは、曲の現在の再生位置（ms）になっている。

gradChangeTimesの役割

const gradChangeTimes = [
  5000, 20000, 37000, 53000, 90000, 102000, 144000
];

これは、

• Aメロ開始
• サビ
• 間奏
• 曲後半

など、曲構成を意識して決めたタイミングである。

このように再生時間を「条件分岐のキー」にすることで、音楽の構造そのものを演出の条件にしている。

グラデーション段階管理

背景色は、違和感が無いように滑らかに変化するようにしている。

色リスト

const gradColorsList = [
  ["#aee1f9", "#aee1f9"],
  ["#aee1f9", "#6a5acd"],
  ["#6a5acd", "#2f2f4f"],
  ...
];

• 1つのインデックス ： 1つの背景段階
• 配列の中身 ： グラデーションの始点と終点

という設計にしている。

gradProgress = (scrollX - gradStartScrollX) / gradLength;

ここで

• 0 → 演出開始
• 1 → 演出完了

という 進行度の計算を行っている。

const blendWidth = 300;

また、blendWidthで背景がぼやけるよう効果を付けている。

背景画像クロスフェード

α値でフェードさせる

背景画像の切り替えでは、CanvasのglobalAlphaを使っている。

ctx.globalAlpha = fadeT;

• fadeT = 0 → 完全に透明
• fadeT = 1 → 完全に表示

となっている。

2枚を同時に描画

// 前の背景
ctx.globalAlpha = 1 - fadeT;
ctx.drawImage(prevBgImg, ...);

// 次の背景
ctx.globalAlpha = fadeT;
ctx.drawImage(nextBgImg, ...);

このように、

古い背景を薄くする＆新しい背景を濃くする

ことで、クロスフェードを実現している。

さいごに

今回は、背景グラデーションとクロスフェード演出について解説しました。

次回は、ゴール判定とエンディングの演出について紹介します。