切り替えに間を作る — フェード
タイトルからプレイ、プレイからリザルトのように、画面まるごとを別の状態へ差し替える。値をいきなり入れ替えると切り替わった瞬間が丸見えになる。黒い膜で一度覆い、覆われている裏で次の状態を仕込み、また膜を引く。つなぎ目が膜の下に隠れる。
シーン遷移のフェードは、覆い（オーバーレイ）の濃さ fade を 0〜1 で動かす小さな状態機械として書ける。fade を上げて画面を覆い、fade = 1 の一瞬で次の状態へ差し替え、fade を下げて戻す。差し替えを「完全に覆われた一瞬」に閉じ込めると、観客に渡る各フレームでは常に「旧シーン＋覆い」か「新シーン＋覆い」のどちらかしか映らない。暗転・差し替え・明転の三段を回す向きを dir のような一変数で持つと、フェード自体が三状態の FSM になる。
scene という変数が 0 なら円、1 なら四角を描く。スペースの押した瞬間にこの値を反転させる。
スペースを叩くと円と四角がパッと入れ替わる。切り替わった瞬間がそのまま映って、目が追いつかない。
間を作るのは、画面を覆う黒い膜。fade という濃さの値を 0 と 1 の間で動かし、1 なら真っ黒、0 なら透明になる。シーンを描いたあと、最後にこの膜をかぶせる。
// シーンを描いたあと、最後に覆う
if (fade > 0) {
c.fillStyle = colors.tintAlpha(8, fade) // 8 は黒に近い
c.fillRect(0, 0, w, h)
}fade を、暗転 → 差し替え → 明転の順に動かす。dir という変数で向きを持つ。1 なら濃くしていく途中、-1 なら薄くしていく途中、0 なら静止。fade が 1 まで濃くなって画面が覆われた瞬間に、裏で scene を差し替える。覆われている間の差し替えなので、切り替わりは映らない。
スペースを押すと覆いが濃くなり、真っ暗になった一瞬で円のシーンと四角のシーンが入れ替わり、覆いが引いていく。差し替えは fade が 1 に達した瞬間にだけ起きるので、切り替わりそのものは映らない。膜を入れない scene の反転と中身は同じで、覆いを一枚はさむぶんだけ間ができる。dir という一変数で、暗転と明転と静止を回している。0.05 を上げ下げすると、暗転と明転の速さが変わる。