2019-03-09

UnityでSkinnedMeshRenderer残像表現

Unity

UnityでBakeMeshを使った残像表現を紹介します。

注意：とてもボトルネックになりやすいやり方なので注意してください

youtu.be

１、SkinnedMeshRendererコンポーネントを追加したGameObjectを作成します。

f:id:yuukihirai0331:20190309131205p:plain

そして、これをプレハブ化させます。
これが主に残像のオブジェクトになるため、残像っぽいマテリアル（半透明系）をMaterialsに入れてください。

２、スクリプトを作成

BakeMesh.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BakeMesh : MonoBehaviour
{
    [SerializeField]
    SkinnedMeshRenderer BaseMeshObj;    // ベイクする元のオブジェクト

    [SerializeField]
    GameObject BakeMeshObj;            // ベイクしたメッシュを格納するGameObject

    // BakeMeshObjをインスタンスした際のSkinnedMeshRendererリスト
    List<SkinnedMeshRenderer> BakeCloneMeshList;

    const int CloneCount = 4;       // 残像数
    const int FlameCountMax = 4;    // 残像を更新する頻度
    int FlameCount = 0;

    void Start()
    {
        BakeCloneMeshList = new List<SkinnedMeshRenderer>();

        // 残像を複製
        for (int i = 0; i < CloneCount;i++)
        {
            var obj = Instantiate(BakeMeshObj);
            BakeCloneMeshList.Add(obj.GetComponent<SkinnedMeshRenderer>());
        }
    }

    void FixedUpdate()
    {
        // 4フレームに一度更新
        FlameCount++;
        if (FlameCount % FlameCountMax != 0)
        {
            return;
        }

        // BakeしたMeshを１つ前にずらしていく
        for (int i = BakeCloneMeshList.Count-1; i >= 1; i--)
        {
            BakeCloneMeshList[i].sharedMesh = BakeCloneMeshList[i - 1].sharedMesh;

            // 位置と回転をコピー
            BakeCloneMeshList[i].transform.position = BakeCloneMeshList[i - 1].transform.position;
            BakeCloneMeshList[i].transform.rotation = BakeCloneMeshList[i - 1].transform.rotation;
        }

        // 今のスキンメッシュをBakeする
        // ボトルネックになりやすいから注意！
        Mesh mesh = new Mesh();
        BaseMeshObj.BakeMesh(mesh);
        BakeCloneMeshList[0].sharedMesh = mesh;

        // 位置と回転をコピー
        BakeCloneMeshList[0].transform.position = transform.position;
        BakeCloneMeshList[0].transform.rotation = transform.rotation;
    }
}

３、スクリプトをアタッチ

BakeMeshを追加します。
次にBaseMeshObjに複製したいオリジナルのSkinnedMeshRendererを設定します。
その次に１でプレハブ化させたGameObjectをアタッチします。

f:id:yuukihirai0331:20190309133340p:plain

完了です。

f:id:yuukihirai0331:20190309134520p:plain

まとめ
これは更新処理でMeshを動的に生成し続けているので、一部のアクションを行うときに演出としてみせるのはとてもありだと思います。BakeMeshはベイクするメッシュの頂点数等によって処理負荷が変わる可能性があるため使用する際はしっかりと処理負荷を調べたうえで使うことを推奨します。

2019-01-03

Unityでオブジェクトを複製させずに残像表現する

Unityでレンダーターゲットを用いた残像、モーションブラー表現を解説します。

youtu.be

まず、残像させたいオブジェクトだけを描画するカメラを用意します。

f:id:yuukihirai0331:20190103180300p:plain

「Clear Flags」を「Solid Color」に変更して「Background」のカラー情報をRGBA(0,0,0,0)に設定することで基本透明な描画するようにします。

残像させたいオブジェクトのみ映し出すように

f:id:yuukihirai0331:20190103181159p:plain

新しいレイヤーを作成し、オブジェクトに設定します。

先ほどの画像にあったカメラの「Culling Mask」に新しく追加したレイヤーのみを設定します。

f:id:yuukihirai0331:20190103182528p:plain

これによってこのカメラが映すのは残像させたいオブジェクトのみ映します。

f:id:yuukihirai0331:20190103184719p:plain

↑こんな感じです

この次は上記の残像させたいオブジェクトのみを描画する画像を作成します。
「Project」タブの「Create」から「Render Texture」を作成して、さきほど調整したカメラの「Target Texture」にセットします。

f:id:yuukihirai0331:20190103185232p:plain

のサイズは画面解像度と同じサイズで作成します。
今回は1920x1080で作成しました。

その次は先ほど作成した「Render Texture」をゲーム画面に表示させるため「Canvas」を作成し、「RawImage」を追加した後、その「RawImage」の「Texture」に先ほど作成した「Render Texture」をセットします。

f:id:yuukihirai0331:20190103190145p:plain

これによって残像させたいオブジェクトのみを映すことはできますが、残像はまだしません。

そこで残像させるために作成した「Render Texture」と同じものを残像させたい数作成します。今回は4枚ほど作成しました。それと同じく作成した「RawImage」も残像させたい数作成し、先ほど複製した「Render Texture」を別々に割り当てていきます。

残像させたいオブジェクトのみを描画するカメラに以下のスクリプトを追加します。

>||
using System.Collections;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;using UnityEngine.UI;
public class RenderTarget : MonoBehaviour 
{       
 // 描画したいレンダーテクスチャリスト    
 public RenderTexture[] writeTexList;        
 // 残像を描画するイメージリスト   
 public RawImage[] imageList;
 int count = 0;  // フレームカウント変数   
 Camera camera;     

 void Start ()    
 {       
  camera = GetComponent<Camera>();    
 } 

 void Update ()   
 {        
  count++;        
  // レンダーテクスチャリストの内の一枚を最新の描画にセットする        
  camera.targetTexture = writeTexList[count % writeTexList.Length];
  // 残像を描画するイメージリストを順番に入れ替えていく       
  for (int i = 0; i < imageList.Length; i++)       
  {           
 　 int cal = (count % writeTexList.Length + i) % imageList.Length; 
    imageList[i].texture = writeTexList[cal];
  }   
 }
} 
||<

あとは作成した「Render Texture」と「RawImage」をセットすれば完了です。

この表現方法は縦、横スクロール系のカメラビューなどカメラの角度が変わらないこととカメラと残像させるオブジェクトに遮蔽物がないと演出上おかしくなってしまいます。

結構駆け足になりましたが、参考になれれば幸いです。

2018-08-19

CTAAとビジュアルアセット組み合わせ紹介！

この記事は「Unity アセット真夏のアドベントカレンダー 2018 Summer! – Unity公式 Asset Portal 」

8月20日の記事になります。

5月1日にセールされた「CTAA Cinematic Temporal Anti-Aliasing PC & VR」をご存知でしょうか？

assetstore.unity.com

＄210が＄63に…22,000円するアセットが6,500円になり購入された方も多いと思います…しかし、使い方がよくわからない…上手い運用ができるかわからないという方が多いのではないかと思います。

そこで今回はCTAAを個人的に運用した紹介をします！
紹介する事例はC94で頒布した「King Seeker 体験版」で用いています！

youtu.be

※0:30～プレイ動画になっています

今回は検証用に「Mesh Effects」と

assetstore.unity.com

「ThePhantomKnowledge」に登場したバトルコスユニティちゃんを用いて紹介していきます。

unity-chan.com

ひとまず、「Mesh Effects」のサンプルプロジェクトにバトルコスユニティちゃんを入れ替えました。
一旦、「CTAA_PC」を取り付けずに撮影しました。

youtu.be

そして、カメラに「CTAA_PC」を取り付けてパラメータはデフォルトのまま撮影しました。
※基本的にCTAAのパラメータはデフォルトが良いかと思います、ドキュメントに詳細が記載されていますが私には違いがほとんどわかりませんでした・・・

youtu.be

このままでもジャギーとかなくなって綺麗にはなったのですが

個人的に、物足りない・・・

そこで、「PostProcessingStack」を組み合わせてみました。

assetstore.unity.com

設定したPostProcessingStack（パラメータは仮でデフォルトにしています）

f:id:yuukihirai0331:20180819005526p:plain

youtu.be

※「Mesh Effects」が用意した「ME_Bloom」は取り外しています。

結構、個人的に良い感じになったかと思います！

f:id:yuukihirai0331:20180819012834p:plain

今回、CTAAを使ってみてPostProcessingStackと組み合わせて使うと良い感じに出来ると思いました！
気づいた方もいらっしゃるかと思いますが、動画で小さい粒子系のエフェクトが滲んでしまっています・・・これはカメラのレイヤーを分けて描画してあげればいいかと思います。
検証用にユニティちゃんトゥーンシェーダー2.0を使用して、ジャギー感がなくなってアウトラインが目立たなくなったりして背景に溶けやすくなっています。
しかし、こういった表現も良いかと思っています！

ここまで読んでいただきありがとうございます！

f:id:yuukihirai0331:20170819151212p:plain

2018-08-18

C94、同人ゲーム即売会を終えて振り返りと今後の予定

今回、C94と同人ゲーム即売会を終えて・・・
いやぁ、疲れますが充実感がありますね！

f:id:yuukihirai0331:20180817233929j:plain

f:id:yuukihirai0331:20180817233959j:plain

孤高の職人を気取りたくて１人でスペースの運営を行っていましたが・・・
１人でやるもんじゃないですね！！！

そんなこんなですが、周りの方に助けていただき(本当にありがとうございます！)
なんとか乗り切ることができました・・・

C94 １日目は平日なのに買いに来てくださった方がたくさん来てとても嬉しかったです！

そのなかでも今回の新作「King Seeker 体験版」の主人公シンディ役の方が来てくださったのはとても嬉しかったです！
はじめて声優さんに依頼したのですが、仕様通りに再現してくれて
納品されたボイスを聴いたときはモチベが高まりました！

今後の活動ですが、結論を言うと今年のデジゲー博と冬コミは参加しません。
来年の夏コミかデジゲー博以降から出展していこうかと考えています。
理由としましては

・本職が忙しくなってきた（重要）
　転職して開発に携わっているプロジェクトで成果を出したいと強く願っています。
　楽しみにしていただいているユーザーがたくさんいるので私も誠心誠意開発に取り組んでいます。
　きっとみなさんにも気に入っていただけるゲームを開発しているのでリリースした際はぜひ手に取ってもらえると嬉しいです！（すいません、タイトルはネットで言いませんが察してくれるとありがたいです）

・インプットが少なくなった
　実は今年に入ってからゲームやアニメ、漫画をほとんど見ていないんです・・・
　今年に入ってプレイしたゲームは「Assault Spy」と「DARK SOULS REMASTERED」だけなんです・・・アニメも「ゆるキャン」しか見てなくて漫画は「ブルーピリオド」ぐらいでしょうか・・・
　もうちょっといろんなコンテンツに触れたいと考えていまして、そのためにも開発期間を延ばそうかと考えました。

以上、２点の理由から今回のデジゲー博と冬コミは見送りました。
別に新作を絶対作らなくても参加したらいいじゃないかという意見もあると思いますが、開発期間が短い中、中途半端なアップデートにはしたくないという思いがあります。

次回、「King Seeker」は７０～８０％ぐらいの完成度で出したいと考えています。

よろしくお願いいたします！

2018-02-12

UE4インストールからパッケージングまで

UnrealEngine4

今回、UE4でパッケージングを行う際に必要なソフトをまとめました。

まず、最初に必要なのは「Visual Studio 2015」

www.visualstudio.com

そして、「Visual Studio 2015」を起動した後
「Install Visual C++ 2015 Tools for Windows Desktop」

をインストールします。
↓インストール手順参考

C++/Visual Studio 2015 プログラミング

そして、何も入ってなければ「WnidowsSDK」がないとエラーが出るのでこちらのサイトからダウンロード

Windows SDK アーカイブ - Windows アプリ開発

これで最低限パッケージングに必要なソフトのインストールは完了です。

2017-12-08

UE4でヒット演出解説

UnrealEngine4

Unreal Engine 4 (UE4) Advent Calendar 2017 の8日目です。

qiita.com

今回はアクションゲームで重要となるヒット演出について

・物理アニメーション
・カメラシェイク
・ヒットストップ
・ヒットエフェクト
・吹き飛ばし演出

この５つで紹介していきます

最後にサンプルプロジェクトを配布しているので
参考にどうぞ！

今回、紹介するのはこんな感じ

f:id:yuukihirai0331:20171205000854g:plain

物理アニメーション

まずキャラクターにダメージモーションをセットしたいところですが
今回はダメージモーションがなしのため物理アニメーションを採用したいと思います

alweiさんのブログや公式が紹介していますが改めて紹介します

unrealengine.hatenablog.com

www.youtube.com

モーションが物理的なオブジェクトの影響を受けてそれにそった動きをします。

f:id:yuukihirai0331:20171205001434g:plain

～alweiさんのブログより～

ここに関してはalweiさんのブログや動画を参考にしてもらえれば大丈夫です
付け加えて言うとpelvisではなくspine_2などを選ぶとその子ボーンのみ
アニメーションさせることができます

f:id:yuukihirai0331:20171205003332p:plain

f:id:yuukihirai0331:20171205003628p:plain

この実装でこんな感じ
f:id:yuukihirai0331:20171205011722g:plain

カメラシェイク

UE4にカメラシェイク用のクラスが用意されており
こちらのブログで紹介されていますが改めて紹介します

historia.co.jp

UE4 カメラを振動させる（Camera Shake BP、Client Play Camera Shake）凛(kagring)のUE4とUnityとQt勉強中ブログ

おなじみのブループリントクラスから

f:id:yuukihirai0331:20171205004233p:plain

「CameraShake」クラスを選択し

f:id:yuukihirai0331:20171205004115p:plain

こちらの詳細で設定したものを

f:id:yuukihirai0331:20171205004504p:plain

ブループリントから呼び出します

おまけですが、なるさんがアクションゲームを参考に例をあげたものが
とても参考になるのでここに添付しておきます

ヒットストップとカメラ揺れを色々試してた pic.twitter.com/TmGrCFtt1w
— なる (@nal_ew) 2017年10月26日

カメラシェイクを入れると微妙ですがこんな感じに

（すいません、GIFだとわかりにくいですね）

f:id:yuukihirai0331:20171205012022g:plain

ヒットストップ
これに関しては２つ方法があってベヨネッタのウィッチタイムのような敵だけがスローモーションになって自分は自由に動かせたい場合、こちらの
「Custom Time Dilation」を0~1の間で設定することで

遅くしたり一時停止させることができます

f:id:yuukihirai0331:20171205010630p:plain

しかし、今回は全体的に遅くしたいのでこちらのブログの最初で紹介された

unrealbussan.hatenablog.com

「Set Global Time Dilation」を使い、ヒットストップを実装していきます。
まずヒットストップというのは、ヒットしたときに何フレーム描画を停止するまたは遅くすることを言います。

ヒットストップを入れるとこんな感じに結構いい感じになります。
(Gif画像が分かりにくくてすいません)

f:id:yuukihirai0331:20171205012432g:plain

↓参考までにどうぞ

ヒットストップについて
Hit stopは両アクターのCustom Time Dilationを一時的に0にすることで実装できます😋👍 ※動画は効果の有無を比較したもの。参考に。 #UE4 #UE4Study pic.twitter.com/ruwLMvY51S
— Wazen (@Assault_Spy) 2016年4月8日