はじめに

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

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

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

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

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

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

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

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

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

これは、

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

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

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

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

という設計にしている。

gradProgress = (scrollX - gradStartScrollX) / gradLength;

ここで

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

const blendWidth = 300;

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

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

ctx.globalAlpha = fadeT;

となっている。

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

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

このように、

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

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

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

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