シューティングゲーム作成中です。爆発シーンの描画を今まではパーティクルでやっていましたが、スマホだと処理が追いつかなそうなのでやり方を変える、といった話を書きました。
爆発アニメーション用の画像を用意します。ぼくは『発色弾』で作りました。
画像の黒（真っ黒）の部分を透過させ（GIMPを使った）、これをUnityで読み込み、Texture Typeを「Sprite(2D and UI)」に設定しておきます。そしてRawImageにセットします。RawImageは新しく作ったCanvasの子にします。このCanvasはRender Modeを「world space」にします。CanvasのRect Transformのｘ、ｙ、ｚは全て0にしておくと、RawImageのRect Transformのｘ、ｙ、ｚがそのまま空間内の座標になるそうです。素晴らしい！！！
結局爆発シーンはこの方法で描画することにしました。うまくいっています。
（↑ 試しに犬の絵でやっているだけです。実際には敵機が相手です！）
なお、爆発は多少の時間のずれはあるにしても複数箇所で起こることは多いです。ぼくは一応10ヶ所まで対応することにし、Canvas＋RawImageの組を10個用意しました。実験すると、こうした場合、Canvasのscaleとサイズは共通にしておかないと描画位置が想定通りにならないことがありました。
下の記事ですでに書いたように、Canvasを爆発させたい敵キャラの子にしてもよいのです。
それだけで何の計算もせずにキャラの位置で爆発シーンを描画できます。しかし爆発させて親のキャラクタを削除するとCanvasが何だかヘンな位置に動いてしまい、その対応をしなければならなくなりました。うう、面倒くさい……。そこで今回の方法に切り替えました。
RawImageの一部を表示するのは
rawImage.uvRect = new Rect(0f, 0.25f, 0.125f, 0.5f);
などでできます。
RawImageが上のようであるとき、それぞれの区画を表示させたい場合、以下のようにします。Rect(X, Y, W, H)のX,Yは区画の位置、W,Hは区画の幅と高さです。0以上1以下の割合で表すのです。
A……Rect(0f, 0f, 0.125f, 0.5f)
B……Rect(0.125f, 0f, 0.125f, 0.5f)
C……Rect(0.125f, 0.5f, 0.125f, 0.5f)
D……Rect(0.375f, 0.5f, 0.125f, 0.5f)
E……Rect(0.625f, 0f, 0.125f, 0.5f)
もちろんアニメーションさせたければ、スクリプトで50ミリ秒ごとくらいに順番に表示する区画を変えることになります。
これでマシンにさほど負担をかけない爆発シーンも描画できるようになりました！ この方法はもちろん爆発シーンだけでなく、空間内に好きな画像、あるいはその一部を表示するのに使えます。
