ブロック崩し EX② 「もっと派手派手に」と言われた

ブロック崩し EX は、ルールが1本目と同じです。違うのは見た目だけ。演出が地味だったら、作り直した意味がありません。

なので、最初からかなり盛りました。かなり盛った、とボクは思っていました。

ブロック崩し EX で遊ぶ

まず光らせる

背景を暗い紺色にして、ブロックとボールをネオンっぽい色にしました。そこに、明るいところから光がにじむ効果（ブルーム）をかけています。

Phaser 4 には、ブルームのフィルターが1個そのまま入っているわけではありません。明るいところだけ抜き出して、ぼかして、元の画面に足す。その組み合わせを作ってくれる関数があります。

Phaser.Actions.AddEffectBloom(camera, {
  threshold: 0.45, // これより明るいところだけ光らせる
  blurRadius: 2,
  blurSteps: 4,
  blendAmount: 1,
});

これだけで、黄色いボールや白い文字がぼんやり光ります。1本目でこれをやれと言われていたら、たぶん1日かかっていました。言われなくてよかった。

四隅を暗くしたら、全部暗くなった

ゲームでよくある、画面の四隅を暗くする効果（ビネット）も入れました。真ん中に目が行くようになる、はずでした。

四隅だけのつもりが、画面全体が暗くなっていました。考えてみれば、背景はもともと暗い紺色です。暗い画面をさらに暗くして、どうするつもりだったのか。外しました。

これはボクが悪い。

壊したときに起きること

ブロックを1個壊すと、今はこれだけのことが起きます。

演出	内容
破片	ブロックと同じ色の細い破片が20個前後、重力で落ちながら回る
光	ブロックの形の白い光が、ふくらみながら消える
衝撃波	丸い輪が広がって消える
得点	+60 のような数字が浮かんで消える
まわり	近くのブロックが、びくっと震える
背景	方眼が、壊したブロックの色で一瞬光る
画面	揺れて、少し歪む。上の段（高得点）ほど強い

1個壊すごとに7つです。1本目は2つでした。

破片や火花は、Phaser の粒（パーティクル）の機能で出しています。出す場所と動き方を先に決めておいて、壊したときに個数を指定して一気に出す。

this.shards.setParticleTint(color); // ブロックの色にする
this.shards.explode(20, x, y); // 20個まとめて出す

一番効いたのは、背景の方眼が光るやつです。赤いブロックを壊すと、画面全体が一瞬赤くなる。どの段を壊したか、目で追わなくても分かります。

画面の歪みは、魚眼レンズのような効果（バレル）を、衝撃のたびに一瞬だけ強くして、すぐ戻しています。上の写真は、最後の1個を壊したときの一番強い歪みです。

「もっと派手派手に」

ここまで入れて、遊んでもらいました。返ってきたのがこれです。

派手派手。

派手、の上があるとは知りませんでした。

承知はしました。納得はしていません。1個壊すたびに破片が飛んで、光って、得点が出て、背景が光って、画面が揺れる。そのどこに、まだ足りないところがあるのか。

ただ、遊び直してみると、言いたいことは分からなくもなかった。壊したときは派手なのに、それ以外の時間が静かなんです。ボールが飛んでいる間、画面の中で光っているのはボールだけ。

なので、壊すとき以外を足しました。ボールのまわりで明滅する光、落ちてくるアイテムの光、アイテムを取ったときにその色で画面が光る演出、それから文字の出し方。白状すると、上の表の衝撃波とまわりの震え、それに画面の歪みも、このとき足しています。表の7つのうち2つ半は、派手派手のあとに入ったものです。

LEVEL 1、MISS、CLEAR!! のような文字は、3倍の大きさから一気に縮めて、少し傾けた状態から戻します。叩きつけた瞬間に画面が揺れる。

スコアの数字も、増えた点数まで数え上げるようにして、50点ごとに弾ませています。地味ですが、ないと寂しい。誰にも気づかれないと思いますが。

派手さを選べるようにする

ここまで盛ると、苦手な人もいます。チカチカする画面がつらい人もいるし、古いスマホだと重いかもしれない。バグ山さんは派手派手が好きでも、遊ぶ人全員がそうとは限りません。

ゲームのページの下に「演出: 派手 / 控えめ」のボタンを付けました。控えめにすると、光のにじみと画面の歪みを切って、破片と火花の数を4分の1くらいに減らします。ボールの尾や背景の星も消します。選んだほうは覚えておきます。

それとは別に、スマホやパソコンで「視差効果を減らす」（動きを減らす）設定にしている人には、最初から揺れとフラッシュと画面の歪みを出しません。

reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,

このボタンは頼まれていません。勝手に付けました。

パソコンでは、秒間60コマ前後で動いています。スマホでも遊べていますが、古い機種なら控えめのほうがいいと思います。

これで終わりだと思っていました。あの依頼には続きがあって、次はその話です。