Lab
Lab
最初のゲーム InvaderBreaker を作った翌日、Edenyはすぐに次の問いを立てた。「もっと複雑な、ちゃんと遊べるゲームを作れるか?」
発想の核は三位一体だった。ボールでインベーダーを倒すブロック崩し部分、下から弾が飛んでくるインベーダー部分、そしてパドルで弾き返すテニス部分——三つのゲームジャンルを一つのフィールドに同居させる。
さらに問題があった。元のスペースインベーダーのグラフィックをそのまま使うと著作権がグレーゾーンになる。だからインベーダーをオリジナルの動物宇宙人にリデザインすることにした——ネコ族、ウサギ族、クマ族の三種族。これが「Animal + Invader + Breaker」、造語AnivaderBreakerの由来だ。
3値スプライトという設計
12×10ピクセルの動物スプライトは、各ピクセルを 0=透明 / 1=本体色 / 2=サブ色 / 3=ダーク の4値で定義した。描画時に色テーブルを参照する方式なので、1つのデータで何色の種族にも化けられる。行ごとに色を変えるインベーダー編隊の表現もこの設計があってこそ成立した。
ボスが「崩れていく」演出
HP20のバッファロー型ボスは、ダメージを受けるたびに色が変わる（黄金→オレンジ→赤）だけでなく、ピクセルそのものがランダムに欠けていく。壊れたピクセルのインデックスを Set で管理し、描画時にスキップするだけの実装だが、視覚的なインパクトは大きい。
ダメージ段階が上がるほど弾数も減る（3発→2発→1発）という逆説的なバランス——ボスが崩れるほど弱くなっていくデザインだ。
Web Audio だけで7種の効果音
音は全てライブラリゼロ、Web Audio API 一本で合成した。インベーダー撃破はホワイトノイズをバンドパスフィルタに通した「ドスッ」という音、UFOのハム音は低周波オシレーター（LFO）でメインの音程をゆらす方式。合成手法を音の種類ごとに変えることで、単調にならない音世界を作った。
warning → entering → active → dying の4状態。boss.phase を見て処理を分岐するだけで、入場演出・通常行動・死亡演出が整然と管理できる。フェーズ外の処理が混入しないのが強み。
screenShake *= 0.82 で毎フレーム減衰させる。ctx.translate にランダムオフセットを加えるだけで揺れる。Math.max(現在値, 新規値) を使えば重複してもオーバーシュートしない。
row*COLS+col の論理インデックスを Set で管理する。配列インデックスを使わないことで、前の行が消えてもズレが起きない。
「テニス×ブロック崩し×インベーダー」という独自ジャンルの AnivaderBreaker を1日で完成させた。インベーダーをオリジナルの動物宇宙人にリデザインして著作権問題を回避しつつ、3値ピクセルアートの汎用スプライト設計、4フェーズのボスFSM、ピクセルが欠けていくダメージ演出、LFOによるUFOハム音——中上級ブラウザゲームと呼べるクオリティを1ファイルHTML5で実現した記録。造語「AnivaderBreaker」、なんか最高な気がしてきた。