最初に
ハイスコアとか出したときにキャノンショットっぽい演出したくなりませんか？
私はなりましたｗ
ちなみにキャノンショットって呼んでいるのは↓のようなやつ。
https://www.youtube.com/watch?v=nkUoz0l8GFg
というわけで、それっぽい演出を検討してみました。
ぐぐったけど
まずぐぐりました。
なるほどそれっぽい演出したい人は自分だけじゃないんだとわかりました。
少し安心したところで、後者のをパクってインスパイヤして作ろうかなぁと思ったところ、いささか問題が。
1.３D計算をまじめにやっている
2.その割に重力計算されてない
3.それでいてなんか華やかさがない
うーん、もっといい例ないのかーと思いながら、方向性を決めました。
1.3D計算はめんどうなので負荷が高そうなのでしない
2.重力計算はphina.jsに頼る
3.キラキラした感じを増やそう
しょうがない作るか…
どうもそれっぽいのが見当たらないのとphina.jsを利用して実装したかったので上記方向性に基づいて作りました。
キャノンショット的なやつ
ポイント１．3D計算はしない
でもそれっぽく見せないといけないわけで、それを紙吹雪１つ１つのサイズ（width,height）と傾き（rotation）をランダムにすることで対応してみました。
まぁ完璧とは思いませんが、それっぽくは見えてるかなと。
ポイント２．重力計算はphina.jsに頼る
せっかくgravityなるありがたいメソッドがありますので、それを使わせていただきました。
なお、いろいろ遊んでいると、逆向きとかx方向にも重力設定できたりとかするのがわかったので、最大限に生かすとロケット発射的なこともできたので、応用しました。
ポイント３．キラキラした感じを増やそう
先の例２つを見ててなんか足りないなーと思ったのですが、光の加減で見える色って変わるはずなのにずっと同じ色ってことに気が付きました。
よって、ランダムに補色に変更するようにしました。（これが一定時間で必ず変わるとそれはそれで不自然なんです…）
最後に
つくりは雑ですが、それっぽくなったかなと。
くす玉っぽくするのもちょっと応用すれば簡単にできます。