はじめに

この記事はLife is Tech！Members Advent Calendar 2020、17日目の記事です。
デビルメイクライ4のゲームオーバー画面や、FFXの戦闘移行演出のような画面割れの演出を作っていきます。

DMC4

FFX

完成品

DMCおもしろいですよね。

必要なもの

当然ながら作業に必須なので、まずはパソコンを用意します。
＊上記リンクに埋め込まれているモノはただのおすすめなので、どのパソコンでも構いません
そして実際に制作するUnity。筆者は2020.1を用いています。
また、割れるオブジェクトの作成用にBlenderというフリーのモデリングソフトも入れておいてください。
一応割れ用のモデルを作るのが面倒だという人のために現在筆者が用いているモデルを配布しておきます。自由にお使いください。

作り方モデリング編

まずはBlenderを起動します。

すると上記のような画面が出てくると思うので、画面中央にあるウィンドウの外の部分をクリックして、このウィンドウを閉じましょう。

続きまして画面上に表示されている３つのオブジェクトも不要なのでクリックして選択し、Deleteキーで削除してしまいましょう。
これで下準備は完了です。

では作っていきます。
Shift＋Aで上記のようなウィンドウが表示されます。
そのウィンドウ内のMeshからPlaneを選択します。

これで画面割れの元となるオブジェクトを作れました。
因みにマウスホイールを回すことで視点のズーム/ルーズが可能なので適宜読者様の見やすい位置に動かしてください。

次にオブジェクトのサイズを画面のサイズに合わせていきます。
今回はPC用ゲームの比率で作るので、16:9ひいては1920*1080なので、xを192、yを108にします。

少し見づらいのでカメラの位置をオブジェクトを正面にしましょう。
テンキーの7を押すか、上記画像内の右上にある赤枠部分上部に位置にするZと書いてある所(上記画像ではすでに押しているためYになっています)をクリックする事で上記のようなカメラ位置になります。

ではオブジェクトをカットしバラバラにしていきます。
まずは上記画像内の左上にある赤枠に位置するObject Modeと書かれた部分をクリックし、Edit Modeに切り替えます。

そしたらKキーを押して下さい。
するとマウスカーソルがナイフに変わりました。
この状態でクリックしながらオブジェクトを切るようにマウスを動かしていくと、上記画像のように切れ込みが入っていくはずです。
当然ながらここで切った通りにオブジェクトが切れますので、一切れを大きくしすぎると演出の派手さに欠けますし、かえって切りすぎ!
ると重くなるのでいい塩梅でやってみてください。

そしていい感じに切れたなと思ったらEnterキーを押してください。するとメッシュが切った通りに分割されます。

次に上記画像の左上辺りにある赤枠に位置する選択モードを三つ目の面選択に切り替えます。

その後、分割したメッシュ一つを選択し、Pキーを押して出てきたウィンドウ内のSelectionをクリックしてください。
するとその選択されたメッシュが一つのオブジェクトとして独立しますので、残りの切断したメッシュ一つ一つも今の手順と同じようにしてオブジェクトを独立させてください。

全て終わったらEdit Modeから再びObject Modeに戻してBキーを押すと、複数選択出来るようになるので普段複数選択する時のようにマウスを動かし全てのオブジェクトを網羅させてください。
全て選択出来たら選択したまままたEdit Modeに変えて、テンキーの1を押すか先ほども使った画面右上の、今度はYと書かれた部分をクリックしてください。

すると今度はオブジェクトが平面なのでわかりにくいですが、カメラの位置がオブジェクトの真上の位置になります。
そうしたらEキーを押し、マウスを引き延ばすように上下に動かすとオブジェクトに厚みが生まれます。

大体これぐらいの厚さになったらクリックして厚みを決定します。

あとはFile→ExportからFBXを選びこのモデルを出力してBlenderでの作業は終了です。お疲れ様でした。

作り方プログラム編

Unityを起動し適当なプロジェクトを開くか作り、Assetsフォルダ内に先ほど出力した割れ用のモデルを入れます。
ついでにHierarchyに割れ用のモデルを置いておきます。

そうしたらProjectタブ内で右クリック→CreateからRender Textureを選択し作ります。名前は適当で。
作ったレンダーテクスチャのSizeを画面と同じ、1920*1080に調整します。
このレンダーテクスチャに画面の映像を投影し、そのテクスチャを割れ用のモデルに貼り付ける事で画面割れを演出します。

次にマテリアルを作ります。名前は適当でどうぞ。
そのマテリアルのシェーダーをUnlitからTextureを選択します。
Unlitシェーダーにすることで光の影響を受けなくし、レンダーテクスチャの色を変化させることなく出力させられます。

今作成したマテリアルを割れ用のモデルに適用しましょう。割れ用のモデルを選択し、更にMaterialsを選択し、No Nameと書かれた部分に作成したマテリアルを入れます。

ではカメラの視界ぴったりに割れ用のモデルが収まるようにカメラの位置を調整します。Z位置を-2にするとぴったり合うと思います。
ついでに背景色を変えたり、テキストを追加したりしましたが、本機能とは関係ない部分なので実装方法は省かせていただきます。

ではいよいよスクリプトを書いていきます。Projectタブで右クリックしCreateからC# Scriptを選択し作ります。
名前は適当・・・ではなくScreenBreakでお願いします。
そしたら下記のコードをコピペしてください。

ScreenBreak.cs

usingUnityEngine;usingSystem.Collections;publicclassScreenBreak:MonoBehaviour{[SerializeField]privatebooluseGravity=true;// 重力を有効にするかどうか[SerializeField]privateVector3explodeVel=newVector3(0,0,0.1f);// 爆発の中心地[SerializeField]privatefloatexplodeForce=200f;// 爆発の威力[SerializeField]privatefloatexplodeRange=10f;// 爆発の範囲privateRigidbody[]rigidBodies;voidStart(){rigidBodies=GetComponentsInChildren<Rigidbody>();// 子(破片)のRigidbodyを取得しておくStartCoroutine("BreakStart");// 動作にディレイを掛けるためコルーチンを使用}IEnumeratorBreakStart(){foreach(RigidbodyrbinrigidBodies){rb.isKinematic=false;rb.useGravity=useGravity;rb.AddExplosionForce(explodeForce/5,transform.position+explodeVel,explodeRange);}yieldreturnnewWaitForSeconds(0.02f);// 一瞬動かすことでひび割れを演出foreach(RigidbodyrbinrigidBodies){rb.isKinematic=true;}yieldreturnnewWaitForSeconds(0.8f);foreach(RigidbodyrbinrigidBodies){rb.isKinematic=false;rb.AddExplosionForce(explodeForce,transform.position+explodeVel,explodeRange);}}}

スクリプトの解説はコメントを読んでください。
コメントされてない部分も含め難しい事は書いていないので読解は難解ではないと思います。

ScreenBreakスクリプトを割れ用モデルの親にアタッチし、実行してみると確かに割れる演出を確認できました。

しかしこのままではただ真っ黒の物体が爆発してるだけです。
なのでカメラの映像を割れ用のモデルのテクスチャに投影しましょう。~~投影、開始~~

今回は別のシーンを作り、条件を満たしたとき本シーンに遷移し割れるようにしていきます。
なのでまずはシーンを作成します。名前は例によって適当でどうぞ。

そのシーンに床やカプセルを置き、ライトマップを焼きついでに太陽も置いてみました。見栄えは十分でしょう。
では映像を投影するための準備をします。

カメラの映像をレンダーテクスチャに投影している間はカメラが映像を出力できなくなってしまうので、映像を投影するためだけのカメラをメインカメラの子として作っておき、そのカメラのカメラコンポーネントのチェックを外し無効にしておきます。
メインカメラが常に映像を出力し、画面割れの時のみ投影用のカメラを有効にし投影するということです。

ではこちらのシーンにもスクリプトを書いていきます。今度はGameManagerにしましょう。
そして以下のコードをコピペしてください。

GameManager.cs

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.SceneManagement;publicclassGameManager:MonoBehaviour{[SerializeField]privateRenderTexturerenderTexture;privateCamerarenderCamera;// Start is called before the first frame updatevoidStart(){renderCamera=Camera.main.transform.GetChild(0).GetComponent<Camera>();//映像投影用のカメラを取得}// Update is called once per framevoidUpdate(){if(Input.GetKeyDown(KeyCode.F))StartCoroutine("TraceOn");// 画面割れを始めたいタイミングに置く}IEnumeratorTraceOn(){renderCamera.enabled=true;renderCamera.targetTexture=renderTexture;// 投影、開始yieldreturnnull;// 1f待ってもらって映像をレンダーテクスチャに投影するrenderCamera.targetTexture=null;renderCamera.enable=false;// 全行程、完了SceneManager.LoadSceneAsync("ScreenBreak");// シーンを遷移する}}