- Web
- Game
- Graphics
ドパ花火
タップするたびに花火が打ち上がり、連打するほど大きく派手になるブラウザゲーム。連打が続くと花火の種類が増え、30連打でFEVER、節目には「ド」「パ」の文字花火が上がる。WebGL2で描いた。
画面のどこをタップしても、その場所めがけて花火が打ち上がるブラウザゲームです。0.6秒以内に次をタップすると連打がつながり、連打数が増えるほど花火は大きく、開くまでが速くなります。5連打で菊、10連打で輪とヤシ、20連打で柳とクロセット（空中で4つに割れる花火）、50連打でハートと、連打を続けるほど打ち上がる花火の種類が増えていきます。30連打からはFEVERになり、1回のタップで2発、80連打からは3発が上がって、夜空の色も変わります。10・30・50連打の節目には「ド」「パ」「ドパ!」の文字の花火が上がります。文字は画面の外のキャンバスに書いた字の輪郭を点に分け、火花がその点へ向かって広がるように速さを計算して形を作っています。20秒でどれだけ点を稼げるかを競うチャレンジと、時間制限のないフリー打ち上げの2つのモードがあり、チャレンジの最後にはフィナーレが上がって、点数に応じて「線香花火」から「ドパミン大爆発」までの称号がつきます。描画は3Dライブラリを使わずWebGL2とGLSLで直接書きました。最大6万個の火花を点として描き、前のフレームを少しずつ暗くして重ねることで光の尾を作っています。明るさの上限がないHDRの画像に描いてから、1/4と1/8の解像度でぼかして足すブルームで光をにじませ、トーンマップで仕上げています。夜空の星と、水面に揺れて映る花火も同じ仕上げのシェーダーで描いています。打ち上げのヒューという音、ドンという爆発、パチパチという音はすべてWebAudioでその場で合成していて、音声ファイルは使っていません。
連打を気持ちよくする
タップしてから花火が開くまでは0.42秒、30連打からは0.32秒にしています。長すぎると連打と花火がずれて手応えがなくなり、短すぎると打ち上がる様子が見えません。打ち上げの速さは、開く位置と時間から逆算しているので、どこをタップしても狙った場所でぴったり開きます。
連打が続くほど花火の大きさと火花の数が増え、使える花火の種類も増えていきます。タップのたびに画面を少し揺らし、光で空を一瞬明るくして、対応しているスマートフォンでは短く振動させています。
- 0.6秒以内にタップすると連打がつながり、10連打ごとに点数の倍率が上がる
- 30連打でFEVER。1回のタップで2発、80連打からは3発
- 火花が増えすぎたときは、1発あたりの火花を自動で減らして重くならないようにする
光の尾とにじみ
火花の1つ1つは、位置・速さ・寿命・空気抵抗・重力の効き方を持った点で、CPUで動かしてWebGL2の点として描いています。光の尾は、火花ごとに過去の位置を覚えるかわりに、前のフレームの画面を少し暗くしてから新しい火花を重ねることで作っています。
画面は明るさの上限がないHDRの画像に描き、1/4と1/8の解像度に縮めてぼかしたものを足し合わせて光をにじませてから、トーンマップで仕上げています。下の水面には、ぼかした花火を上下反転して、波で揺らして映しています。