Study Works

YuukiHiraiの勉強したものを上げていきます。

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」をセットすれば完了です。

 

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

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

 

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

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

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

 

f:id:yuukihirai0331:20180817233929j:plain

f:id:yuukihirai0331:20180817233959j:plain

 

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

 

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

 

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

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

 

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

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

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

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

次回、「King Seeker」は70~80%ぐらいの完成度で出したいと考えています。

 

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

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

今回、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 アプリ開発

 

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

 

UE4でヒット演出解説

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

qiita.com

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

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

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

 

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

 

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

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

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

 

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

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

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

f:id:yuukihirai0331:20171205012022g:plain

 

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

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

f:id:yuukihirai0331:20171205010630p:plain

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

unrealbussan.hatenablog.com

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

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

f:id:yuukihirai0331:20171205012432g:plain

 

↓参考までにどうぞ

 

吹き飛ばし演出

 あとは下の画像のノードのように
ヒットしたときにライフカウントを計算して
Simulate Physicsをオンにしてあげれば吹っ飛ぶようになります

f:id:yuukihirai0331:20171205224150p:plain

 こんな感じに

f:id:yuukihirai0331:20171205225030g:plain

あとはこれに当たった時のエフェクトやサウンドを適当に入れれば

f:id:yuukihirai0331:20171205225440g:plain

良い感じのヒット演出ができます。

今回は敵のブループリントクラスだけで完結しています。
敵のブループリントはこのようになっています

f:id:yuukihirai0331:20171205231833p:plain

f:id:yuukihirai0331:20171205232011p:plain

f:id:yuukihirai0331:20171205232046p:plain

f:id:yuukihirai0331:20171205232116p:plain



今回、結構ブログやツイートの紹介に頼っている部分が多くて申し訳ありません
しかし、他の方がとてもよくまとめているのでそのまとめ記事として投稿しました

日々情報発信をしていただいている方には頭が上がりません、本当にありがとうございます

 

最後に今回紹介したことをまとめたプロジェクトファイルを下記で配布しています

もしよければダウンロードして参考にしてください。

SampleHitAction.zip - Google ドライブ

 

Unreal Engine 4 (UE4) Advent Calendar 2017 - Qiita

明日はまめおさん(まめお (@PaperSloth) | Twitter)の

Unreal C++を書くにあたってやっておいた方がいいこと」です。


ありがとうございました。

UE4で残像演出

以前、開催されたUE4GameJamにて作成したTPSアクションゲームで残像演出をどのように実装しているかよく聞かれたのでここに書き記しておきます。

youtu.be



基本的にはヒストリアさんのポーズのスナップショットを使っています。

historia.co.jp


残像演出にはいくつか方法がありますが、
今回は1フレームごとのキャラクターのポーズを保持して、それをキャラクターと同じメッシュに流し込む方法を解説します。

まずは残像に使いたいアクターを作成します。

f:id:yuukihirai0331:20171123002611p:plain

この時に残像させたいメッシュと同じメッシュを作成してください。
名前やマテリアルは自由に決めてもらって大丈夫です。
だいたいで半透明ぐらいにしておくと見栄えが良くなります。

BPの構成はこんな感じです。

f:id:yuukihirai0331:20171123124709p:plain

「Snapshot」というPose Snapshotクラスの変数をスポーン時に入れられるように設定しています。下のTickでは徐々に透明になるという処理を組み込んでいます。

残像のメッシュのマテリアルですが

f:id:yuukihirai0331:20171123140859p:plain

f:id:yuukihirai0331:20171123140947p:plain

こんな感じでマテリアルインスタンスを作成してブループリントから値を調整して徐々に透明になるように作成しています。


この後、残像用のアニメーションブループリントを作成します。

f:id:yuukihirai0331:20171123135808p:plain

ここでは残像のブループリントクラスからSnapshotを受け取ってアニメーションブループリント用のSnapshot変数に格納しています。

 

f:id:yuukihirai0331:20171123140256p:plain

そして、それを最終アニメーションポーズに適応させます。
ここでポーズスナップショットを赤で囲っている設定にしてください。


あとは残像させたいBPクラスでこのように組みます。

f:id:yuukihirai0331:20171123135454p:plain

f:id:yuukihirai0331:20171123135517p:plain

f:id:yuukihirai0331:20171123135529p:plain

こんな感じです。
基本的にはSpawnActorで作成した残像ブループリントクラスを生成していく感じになります。それをどのタイミングで生成していくかどのポーズを適応させていくかどのように残像っぽく見せるかを調整していければ良いと思います。


最後に今回のプロジェクトをこちらに公開しておきます。

SampleAfterImage.zip - Google ドライブ

ご自由にお使いください。

ありがとうございました。

 

※ 注意
今回、紹介したこのやり方は場合によってはボトルネックになってしまう可能性があるので改善するとしたらあらかじめ残像ブループリントクラスをある程度(7~8体)最初に生成しておいてそれにポーズを流し込むやり方を推奨します。

拡張エディタ Third Person Controller - Melee Combat Template 使い方まとめ アセット真夏のアドカレ8/27 ~武器の作成~

はじめに
この記事は「Unity アセット真夏のアドベントカレンダー 2017」8月27日の記事になります。
今回は拡張エディタ「Third Person Controller - Melee Combat Template」の使い方のまとめの「武器の作成」の記事ととなります。

今回、紹介する武器の作成はこちらの動画で

www.youtube.com

紹介されていますが、さらに掘り下げて紹介していきます。

注意

こちらの記事は前回の「基本的な使い方」の続きとして紹介していきます。

 

目次

1、現在の状態を確認

2、武器の作成

 

1、現在の状態を確認

武器を作成する前にまず現在の状態を確認しましょう。

現在クリックまたはXboxコントローラーでRBを押すとこんな感じにパンチコンボ攻撃をします。

f:id:yuukihirai0331:20170821224410p:plain

これはデフォルトで設定されている攻撃になります。
まずはこの仕組みについて解説していきます。
現在、このオブジェクトにコンポーネントである「vMeleeManager」の「Wepons」には何も入っていない状態です。

f:id:yuukihirai0331:20170821224706p:plain

この状態だと素手であると認識するため先ほどのパンチの攻撃を繰り出すようになります。それをどこで認識しているかというとキャラのAnimationControllerの

f:id:yuukihirai0331:20170821225310p:plain

Layersの「FullBody」の「Attacks」の

f:id:yuukihirai0331:20170821225858p:plain

「WeakAttacks」「StrongAttacks」とありますが構造はどちらも同じなので今回は「WeakAttacks」を軸に紹介します。

f:id:yuukihirai0331:20170821225547p:plain

「Unarmed」がパンチコンボ攻撃のStateになります。

他にもStateがありますが後に説明をします。

「Unarmed」を開くと

f:id:yuukihirai0331:20170821230301p:plain

「A」→「B」→「C」と並んでいます。
これがコンボ攻撃の流れになっています。

「A」のInspectorを開くと

f:id:yuukihirai0331:20170821230929p:plain

赤字で引いた部分が重要な項目になります。
「Start Dmage」「End Damage」というのはモーションで攻撃の当たり判定が発生する時間帯を指しています。当たり判定はこの黄色いボックスになります。

f:id:yuukihirai0331:20170821231714p:plain


この「PunchLeft」というモーションの場合だと

f:id:yuukihirai0331:20170821231348p:plain

25%=0.25
としてカウントされ、ここから右腕の当たり判定が機能します。

f:id:yuukihirai0331:20170821232836p:plain

そしてこちら
60%=0.6
ここまでのモーション期間が攻撃判定になります。

f:id:yuukihirai0331:20170821230929p:plain

「Damage Multiplier」はキャラの攻撃力の加算値です。
このパラメーターはモーションごとに攻撃力を変化させたいときに使用します。

「Melee Attack Type」は「Unarmed」と「Melee Weapon」の二つのタイプがありますが武器を持っていないので「Unarmed」になっています。武器を設定したモーションの際は「Melee Weapon」にします。

最後に重要なのが

「Reset Attack Trigger」です。
これはコンボ攻撃の最後のモーションの場合チェックを入れてください。
この場合だと「C」が最後になるのでこちらにチェックが入っています。

これで現在の状態の解説は以上となります。

 

2、武器の作成

 Invector→Melee Combat→Create Melee Weaponを選択し、右のウィンドウを開きます。

f:id:yuukihirai0331:20170822001446p:plain

こちらキャラクター作成と同じように武器にしたいモデルデータを入れます。

f:id:yuukihirai0331:20170822002044p:plain

するとこのように生成されるので、まず黄色いコリジョンを整えます。

f:id:yuukihirai0331:20170822002205p:plain

オブジェクト構造はこのようになっていて「hitBox」を拡大縮小するなどで整えます。

f:id:yuukihirai0331:20170822002419p:plain

 こんな感じにモデルより大きめに取ると良い感じに判定がしやすくなります。

こちらの武器のコンポーネントで「vMeleeWeapon」があります。

f:id:yuukihirai0331:20170822002755p:plain

これは武器の詳細になっており、重要なのは

「Hit Box」当たり判定コリジョン

「Attack ID」攻撃モーションタイプ

「Stamina Cost」使用時のスタミナコスト

の3つになります。

「Attack ID」攻撃モーションタイプというのはアニメーションコントローラーのこの部分です。これで武器ごとにモーションを設定することが出来ます。
この場合、剣を振るモーションにするため「Attack ID」を1にします。

f:id:yuukihirai0331:20170822003252p:plain

 作成した武器をキャラの手につくように調整します。

f:id:yuukihirai0331:20170822230908p:plain

これで攻撃が剣を振るモーションになりますが、一応キャラの「vMeleeManager」の「RightWeapon」に作成した武器を入れます。

f:id:yuukihirai0331:20170823001206p:plain

これにて武器の作成は以上となります。

次回に続きます。

 

f:id:yuukihirai0331:20170819151212p:plain