いぬおさんのおもしろ数学実験室

おいしい紅茶でも飲みながら数学、物理、工学、プログラミング、そして読書を楽しみましょう

UnityでRawImageを使って爆発シーンを表示する

 前回、Unityのパーティクルを使わずに爆発シーンを描画、という話を書きました。
www.omoshiro-suugaku.com
うーん、まあ一応できたんですが、絵が汚い……。パーティクルを使った爆発シーンを録画して必要な部分を切り取って背景が透過するようにして、Quadに貼り付けてアニメーションする……とやりました。透過させるため描画ツール(GIMP)で処理したんですが、でき上がったpngファイル、見るともうキレイではないのです……。↓こんなのができあがった…。
 

f:id:Inuosann:20210517073420p:plain:w200
何、これ?

 そもそもこの手順ではきれいな画像は手に入らないのかも。その他、画質の設定とかいろいろあると思うんですが、早々に諦めました。時間を使ってしまいましたが、マテリアルの切り替えの方法はハッキリしたので今後使えるでしょう。無駄にはならないからよし。
 結局、爆発シーンを並べた画像を使うことにしました。

f:id:Inuosann:20210514201115p:plain:w300
爆発シーン

変化をつけるためこういう感じの絵を何種類か用意して、場面によって使い分けます。この画像は『発色弾』というツールで作ったものです(MIA氏)。昔から使わせていただいている優れものです。パラメータを変化させると様々の爆発シーンが得られます。きれいに並んだ絵なので扱いも楽です。
 さて、爆発シーンの具体的な表示方法ですが……この絵をRawImageとしてUnityに取り込みます。画像のどの辺を表示、という操作ができるようになります。これはUIオブジェクトですから、Canvasを新たに作り、その下に配置。このCanvasはRender ModeをWorld Spaceとします。これで空間内の好きなところにCanvasを置くことができるようになります。爆発シーンを表示させたいところに移動させることができるのです。ところが、これが難しい。具体的にどこに移動させたいときにはどのパラメータをどうセットしたらよいのか、分かりません。Canvasや、その子のRawImageにはパラメータがたくさんあるんですが、単純に空間内の座標を入れればよいようにはなっていません。多分。サイトでは解説されていて、可能みたいです。しかし疲れて結局「Canvasを、爆発させたいオブジェクトの子オブジェクトにセットする」という方法を取ることに。これも調べていて出会った情報です。

GameObject  ui = GameObject.Find("Canvas2");
GameObject go = GameObject.Find("Enemy");
ui.transform.parent = go.transform;

これで爆発させたい敵キャラの位置にCanvas(ここではCanvas2)がセットされます。何の計算も要りません。こうしておき、タイマで定期的に爆発画像のどこを表示させるかを変化させるだけです。なお、Canvasはカメラの方を向けるのがよいです。次のようなコードです。

ui.transform.LookAt(Camera.main.transform.position);

 なお、親から少し離れた位置に表示したいこともあります。そういうときは次のコードを。

RectTransform rectTr = ui.GetComponent<RectTransform>();
rectTr.localPosition = new Vector3(0f, 0f, 1f);

CanvasのRectTransformを取得し、そのメンバのlocalPositionを上のようにセットします。これは親の位置を基準とした、Canvasの相対的な位置(ローカル座標)です。

 昔は全部自分の責任で何をどこに表示するか決めて計算していたのに、状況は変わっています。その方がトータルでは楽なんでしょう。まあいいです。これでUIを好きな位置に表示する方法がはっきりしました。疲れたー!!