[Unity] FF10エンカウントエフェクトを再現する [画面バラバラ]

Pocket

ゲーム画面を、ガラスが割れた時のようにバラバラになりながら下に落ちるエフェクトを作成してみました。

要はFF10でエンカウント時のエフェクト(のようなもの)です。

こんなのを作っていきます。
shattereddisplaygif

この記事を作ってからFF10のエンカウント エフェクトを見ましたが全然違いました。まっ、破片の動き方を考えれば同じことができるさ・・・。

 

 

 

環境

Unity 4.6.3f1 Free版

 

前提

モデリングするソフトが使えないのですべてリアルタイム生成(要は遅いです)

 

制限

Free版はUGUIのボタンがキャプチャーされません。(Pro版は出来るはず…)

UGUIのボタンが一番上に表示されたままになっています。(Canvasの設定を変えれば良いのかな?)

 

参考サイト

Unity で ドロネー Delaunay 分割 (3D編)

Unity で ドロネー Delaunay 分割 (平面編)

ゲーム画面がガラスみたいに割れる

[Unity]レイヤーで当たり判定を制御する

 

処理フロー

  1. 事前設定
  2. 画面をキャプチャーしテクスチャーを準備
  3. 画面全体を覆うバラバラになった板ポリを準備(少し厚みがある)
  4. 板ポリに力を加えて落下させる
  5. 画面から外れたら消す(多分戻ってくることはないはず。バウンドしたりすればカメラの視野内に戻るのだろうけど…)

 

事前設定

エフェクト用のレイヤーを準備します。名前はPostEffectとしました。画面バラバラエフェクトはすべてこのレイヤーで処理するようにします。

動かないカメラが必要なのでエフェクト専用カメラを作成します。

描画レイヤーを先ほど作成したPostEffectレイヤーのみにします。メインのカメラは逆に描画レイヤーからPostEffectレイヤーを除外します。

maincamera_layer effectcamera_layer

他のレイヤーとの当たり判定が行われないようにしておきます。(最終的にこの設定は必要なかった気がする・・・。当たり判定系の処理を使わなかったので。)

physics_layer

カメラの向きは水平にしておきます。(Rigidbody.useGravityをtrueにして、落下部分はUnityエンジンでやってもらいたいので)

カメラのプロジェクション種類は好きな方で。Audio Listenerコンポーネントは2つあると警告が出るので削除しておきます。

使用するマテリアルを準備します。テクスチャーはキャプチャーした画像なので設定無しでOK。ライティングを無くしたマテリアルにしたいので「Unlit/Texture」を選択しました。

 

画面キャプチャー

Free版はRenderTextureを使用できないので「[Unity] 画面をキャプチャーしてPNGファイルへ出力する [Not RenderTexture] 」で行った方法でTexture2Dを作成します。

Free版の方はUGUIのキャプチャーが出来ません。Pro版の方はUGUIもキャプチャーできるみたい(持ってないので動くかわからず)

ただRenderTexture+UGUIの部分にバグがあったようです。

公式フォーラム → Capture screenshots which include the UI?

Ver.4.6.2p1で修正されたようです。

 

3角形の点群を生成

画面をバラバラにしたいので画面を覆う3角形群を生成しなくてはいけません。

必須点としてスクリーンの隅4点、外周を通るある程度の点を準備します。

3角形の頂点となりうる位置をすべてランダムにしてしまうと偏りが出てしまう可能性があるので、まずスクリーンをグリッドで分割します。

この分割したグリッド内で適当な頂点をランダムで決めていきます。こうすればグリッド内に必ず点が存在するようになり、綺麗にバラバラになってくれるはずです。

ここは各自調整してください。

 

ドロネー分割

生成した点群からMeshを生成します。参考サイトにあるソースコードをそのまま使用させていただきました。(GameObjectではなくMeshを返すようにしたバージョン)

アルゴリズム的な部分は何も考えずにMeshが出来た!と喜びます。

必須点として外周を通る点を入れてあるので「ほぼ」画面を覆うメッシュが生成されたはずです。

 

Meshから複数の3角形Meshを生成

ドロネー分割で取得できたMeshは分割された全ポリゴンが1つにまとまっているので、3角形1つのポリゴンMeshに変換します。

この時スクリーン座標からワールド座標へ変換します。

板ポリの厚みはこの中で付けます。

 

3角形MeshのGameObjectを生成

MeshFilter、MeshRenderer、Rigidbodyなど必要なコンポーネントを追加していきます。

画面外に出たら消したいので、そのスクリプトも追加します。(OnBecameInvisibleイベントで消すだけのスクリプト)

 

力を加える

板ポリ全てにランダムに力を加えます。

 

ソースコード

ほぼ1つのファイルだけで処理を行っています。

 

サンプル実行

3Dモデル : Animated Knight and Slime Monster

 

まとめ

PCならばリアルタイムで生成しても一瞬FPSが落ちる程度でエンカウント時、ゲームオーバー時などの処理に限定すれば問題なく使えそう。

Android(MemoPad7 ME176)で動かすと0.5~1.0秒くらい固まります。画面キャプチャするのに0.1~0.3秒くらいかな?テクスチャーサイズを2のn乗にした方が高速かもしれませんが試していません。調整すればいけなくもないかも・・・。

 

あとはこのエフェクトだと自由落下感が強いので、ゲームに使うにはもう少しゲームらしさを考える必要がありそうですね。

Pocket

希木小鳥

Diablo1でハクスラの世界に。今はPath of Exileをプレイ中。長くやっていてもNoob属性は常に付いている。そのくらい行き当たりばったり。オタクになれないゲーマー。

You may also like...