haraです。

今回は、タンクバトルに弾丸のエフェクトを作ってみたので、紹介いたします。

thunder.jpg

 

雷撃エフェクト


発射した弾丸にむかって一定間隔で雷が落ちます。
ただの演出なので攻撃力はいつもと同じです。
使用する場合は、taroのエントリにある通り、戦車のコード内で以下のように指定します。

_bulletRenderer = WonderflSWFUrl.getURLFromPageURL( "http://wonderfl.net/code/befc6be85cc12b2bb8e0834bc7f1a7c55d7e9b23/edit");

bullets登録済みです。

プロセス

Muraiの炎上戦車を見て、この炎の感じは戦車というより剣と魔法の世界だなと思う→
てことは雷/氷/水/風もほしい→取り急ぎ雷だ。超電磁砲とかかっこいいしね。
→実装

 

制作して気づいたこと1 広範囲のビットマップエフェクトは工夫が必要

弾丸の複製については、BulletRendererBaseの拡張クラスを作成し、表示されている弾丸全てにアクセスしてエフェクトをくっつける、という作業になります。
ここで、例えば弾丸の半径100px以内のビットマップエフェクトなのだとしたら、描画負荷的には対してかかりません。
しかし、今回は天辺から弾丸に向かって雷を落とす、という演出になるため、できれば画面全体にビットマップ処理をかけたいところ。
しかし、それを弾丸の数分やるとなると負荷が相当上がってしまいます。
今回は雷が落ちるだけなので、横幅50pxのビットマップデータとすることで事なきをえましたが・・

制作して気づいたこと2 テストに時間がかかる

僕はいつもはFlexのActionScriptプロジェクトで作成→ソースをwonderflにコピペ、という横着な方法で作っていて、今回も雷だったらこんなコードを書いてTankのBulletにくっつければ大丈夫じゃん、と適当に高をくくっていました。

しかし、簡単に終わると思ったらやってもやってもぜーんぜん終わらない。
みょーーにへんだなー、こんなこともあるんだなあ、と思って進めていたら途中で気づいちゃった。
不特定に発射されるBullettに何か細工しようと思ったら、
プレビューで見れるBulletと実際にTankで使われている状態の両方をチェックする必要があります。
特に今回は雷を落とす場所に合わせてBitmapDataのdraw位置を調整する作業と、タンクバトルで映える雷の演出の調整がありました。
すぐに決まればよいですが、
なかなか決まらないのを毎回バトルさせながらチェックしていると、けっこうな時間がたってしまいます。

次に作る時は、Tank用の簡易テスト環境を作るなどして臨みたいなー、と思った次第です。
さあ、とりあえずサンダ○の魔法はできました。次は魔法使い戦車を作るぞー

HTML5飯