概要

ペルソナ5という激おもろゲームをご存知でしょうか？
何を隠そうこのゲーム激おもろなのですが、とりわけ演出がカッコいいので、その中の1つ「総攻撃+トドメ」演出をUnityで模作してみました。

• 本物

  • https://www.youtube.com/watch?v=sU4f9E57nA4 (youtube)

• 作ったもの

  • https://youtu.be/n_bM-bZkLwQ (youtube)
  • 

使うアセット

手持ちのアセットを利用。もっと本物に似てたり、使いやすいものがあるかも知れません。

• ユニティちゃん (無料)
• 適当な敵モデル（ダメージモーションがあれば何でもOK。今回は「Mobile Citizen Human&Zombie」というフリーアセットを使いましたが、現在Asset Storeで取り扱われていないようです）
• Cartoon FX Pack 3 ($20)
  • 攻撃ヒットエフェクトの素材として利用
  • 特に本物と似てるわけではありませんが、手持ちのカートゥーン調のエフェクトがこれしか無かったので
• Breakable Window ($1.99)
  • ガラス破片のメッシュだけ利用
• iTween (無料)
  • トゥイーンライブラリなら何でも

自前で用意

自キャラの影演出、血しぶき演出用にPhotoshopで適当な筆跡画像を用意

全体構造

単に作りやすさの問題ですが、演出は全部で3つのカット(+Unityちゃんライセンスのスプラッシュ画像)に分かれるので、それぞれ3つのGameObject(phase1〜3)にしてまとめ、順番にSetActiveする方式で作りました。
この記事でもこの3つのPhaseに沿って説明します。

Phase1

• ユニティちゃんのジャンプ
  • ユニティちゃんアセットについてくるモーション、WIN00とJUMP00を使用
  • WIN00の前半（小ジャンプ）だけをさせてからJUMP00に遷移すると、WIN00がジャンプの予備動作っぽくなります
  • シルエット風の描画は、黒単色のMaterialを作って地道に置き換え
• ガラス
  • Breakable Windowのメッシュを利用
    • Breakable Windowというのは「物がぶつかると割れるガラスのアセット」で、仕組みとしては「割れる前のガラス」「割れて粉々になったガラス」の2つのGameObjectを事前に用意し、物がぶつかった瞬間にその2つを入れ替えるタイプです
    • なのでこの「割れて粉々になったガラス」がそのまま利用できます
    • ShaderはToon/Lit Outlineを使い、アウトラインを薄い赤に
  • ふわっとこちらに来る動き、その後こちらに飛んでくる動きに２段階のTweenで制御
    • 1段階目にはランダムな回転Tweenも挿入
    • 本物は1つ1つ一番カッコ良く見える動きをつけてるかと思いますが、適当に設定するだけでもそれらしくなります
    • 物理的に正しい動きをさせるなら破片にMeshColliderとRidigbodyをつけてAddForceする事になるかと思いますが、動きが一瞬で破片も単色なので重なったりしても気になりませんでした
  • ユニティちゃんが写る破片
    • 破片の1つをでっかくしてテクスチャ貼るだけでそれっぽくなります
      • 本当は切り抜いた一枚絵を用意するか、専用のシェーダ書けばキレイなんだろうけど、面倒なのでTextureのoffsetをいじって顔が真ん中に来るように
      • おかげで上端が汚くなってますが一瞬なので気にしない

Phase2

• Phase1からの遷移
  • 破片が飛び散って真っ黒になった状態で、カメラが中央の敵にズームした位置まで瞬間移動する事で、暗転のような遷移になっています。かっこいいですね
• 攻撃する影
  • TrailRendererを使うと楽。最初に用意した筆画像をテクスチャに使用
  • 開始地点、中間地点、終端地点の3つをプロパティに持たせ、屈折する動きをさせるスクリプトを書いてアタッチ。ついでに中間地点でヒットエフェクトとカメラ揺れ(iTween.ShakePosition)
    • ヒットエフェクトはCartoon FXを元にサイズ、色合い等を調整
• 最後にでかいヒットエフェクトを中央に発生させ、ゆっくりサイズを伸ばす

Phase3

• Phase2からの遷移
  • Phase1→2同様、拡大/縮小を使ったホワイトアウトになっています
  • 本物は光が画面を覆ってから散っていく様もスプライトアニメになっていますが、面倒なのでただのフェードアウトにしました
• ユニティちゃん
  • JUMP00→WIN00。たまたまですがPhase1の逆再生のようなモーション遷移
  • 3Dモデルから2Dアートへのキレイな遷移は、地道に位置調整あるのみ
• 敵の血しぶき
  • 最初の筆画像を使ってパーティクルのような仕組みで表現
    • 円錐状に筆パーティクルを飛ばす
    • Lifetimeに応じてパーティクルのscaleをランダムに小さくする（これをやる為にParticleSystemではなく自前実装）
    • 円錐状に飛ばすつもりが、二等辺三角形になってるせいで倒れた時一瞬2Dっぽさが...
    • 本物はどれもフレームごとに同じ形状をしてるように見えるので、スプライトシートかな？
• 背景画像
  • 本物は赤背景からトドメ用背景画像に切り替える時に2フレームほど暗くしていますが、いきなり切り替えてもそれほど違和感はありませんでした

まとめ

何でこんなものを作ったかと言うとただの歪んだ愛情表現なのですが、自分で実装してみる事で、カッコいい演出がどうしてカッコいいのかより理解できる気がします。
カメラのズームインや、エフェクトの拡大などを使ったブラックアウト・ホワイトアウトの表現は、他でも使える機会がありそうです。
本物と比べるとあちらこちらが雑で手抜きですが、プロトタイピングする分にはこれぐらいの雑さでも作れるということですね。