Study Works

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

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 Delation」を使い、ヒットストップを実装していきます。
まずヒットストップというのは、ヒットしたときに何フレーム描画を停止するまたは遅くすることを言います。

ヒットストップを入れるとこんな感じに結構いい感じになります。
(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

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

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

 

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

www.youtube.com

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

注意

こちらの記事は前回の「武器の作成」の続きとして紹介していきます。

 

キャラ作成と同じようにInvector→Melee Combat→Create NPCよりCharactorウィンドウを表示し、モデルデータとAnimator Controllerの「Invector_MeleeCombatv2」 をもとに敵用のAnimator Controllerをセットします。

f:id:yuukihirai0331:20170823003838p:plain

 作成すると敵オブジェクトができますが、AIは働かずプレイヤーを認識しません。

f:id:yuukihirai0331:20170823235521p:plain

NavMeshを作成します。

Window→NavigationよりBakeを行います。
※ステージはStaticでなければいけません。
NavMeshの詳しい資料はこちらまで

docs.unity3d.com

 

f:id:yuukihirai0331:20170824000713p:plain

これで敵はプレイヤーを認識してくれるようになりますが攻撃をしてきません。
敵キャラに「vMeleeManager」を追加します。

f:id:yuukihirai0331:20170824001705p:plain

これで素手のみですが敵キャラらしく、プレイヤーを発見したら戦闘状態になって適度に攻撃してくる感じになります。

f:id:yuukihirai0331:20170824215002p:plain

申し訳ありませんが、AIの調整に関しては現段階では自分拡張するのが一番早いです。
敵も自キャラと同じように武器を持たせたり、パラメーターを変更することができるので「基本的な使い方」より参考にしていただければと思います。

以上で敵の作成を終わらせていただきます。

 

f:id:yuukihirai0331:20170819151212p:plain

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

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

 

目次

1、プレイヤーキャラを作成する 

2、Charactorウィンドウの設定

 1,キャラモデルデータ

 2,アニメーションコントローラー

 3,カメラデータ

 4,UIデータ

3、各詳細設定

 

最初はアセットをインポートした後、
Assets\Invector-3rdPersonController\Melee Combat\DemoScenesの中にある「vMeleeCombat_DemoScene」を開いてみましょう。
開くとゲーム感覚で一通り機能を体験できるのでぜひやってみましょう

www.youtube.com

個人的にこの段階でゲームとしてよく出来ていると感じました・・・

 

今回、紹介する基本的な使い方はこちらの動画で

www.youtube.com

解説されていますが、動画の手順や解説していない部分を記載していきます。

 

解説する内容はUnityちゃんを使って解説していきます。
1、プレイヤーキャラを作成する

f:id:yuukihirai0331:20170819153356p:plain

Invector→Melee Combat→Create Melee Controllerを選択するとCharactorウィンドウが表示されます。

2、Charactorウィンドウの設定

f:id:yuukihirai0331:20170819154845p:plain

1,キャラモデルデータ

 動かしたいキャラのモデルデータを入れる
2,アニメーションコントローラー

 動かすアニメーションコントローラーを選択
 注意事項

 基本的に「Invector_MeleeCombatv2」というあらかじめ用意されているアニメーションコントローラーを使用するのですが、このアニメーションコントローラーはキャラごとに拡張していくのでコピーを取っておくこと推奨します。

3,カメラデータ

 こちらもあらかじめ用意されているカメラデータを使用します。今回作成するのはTPSアクションゲームを想定しているので「vMeleeCombat@CameraState」を選択しましょう。他にもトップダウン型やサイドスクロール型もあるので興味があれば触ってみるのもアリです。

4,UIデータ

 こちらもあらかじめ用意されているUIを使用します。

 

これでキャラクターの作成が終わりました。
Gif


3、各詳細設定
それでは今回作成した内容をもとに各解説を行います。

f:id:yuukihirai0331:20170819163326p:plain

1,「vThirdPersonCamera」

 今回作成したキャラクターを追尾するカメラになります。

f:id:yuukihirai0331:20170819163829p:plain

 基本的に現時点でそこまで違和感のあるカメラの挙動はしていないのでデフォルトで大丈夫だと思いますが、調整するとしたらカメラとキャラの距離は「Distance」、カメラの高さは「Height」を調整すれば良いと思います。

 

2,「vThirdPersonMelee」

 実際に動かすプレイヤーになります。
 構成はこのようになっています。

f:id:yuukihirai0331:20170819191116p:plain

 「vThirdPersonController
  デフォルトの設定クラス

f:id:yuukihirai0331:20170819171345p:plain

 「Default」「Stamina」「Layers」「Locomotion」「Jump」「Grounded」の6つのパラメーターを調整できますが基本的に「Default」が一番使うと思うのでそちらのみの解説を行います。
 重要なパラメーターを赤で引きました。

 「Max Health」・・・キャラの最大HP
 「Max Stamina」・・・キャラの最大スタミナ
 「Stamina Recovery」・・・キャラのスタミナ回復速度
 「Current Health」・・・キャラの現在の体力
 キャラを成長させたい場合はこちらの値を調整すればいけると思います。

 

 「vMeleeCombatInput
  プレイヤー入力の設定クラス

f:id:yuukihirai0331:20170819184432p:plain

 

 「vGenericAction
  新規のアクションクラス

f:id:yuukihirai0331:20170819184954p:plain

 既存以外で新しくアクションシステムを作成する場合、こちらのクラスを設定して使います。(基本的にあまり使う機会は少ないです。)

 

 「vMeleeManager
  バトルアクションクラス

f:id:yuukihirai0331:20170819185909p:plain

 戦闘するうえでとても重要なクラスになります。
 「On Damage Hit」に関数をセットすれば、このキャラにダメージがヒットした際にその処理が走ります。

 「Wepons」では右手、左手の武器を設定することが出来ます。武器の説明はこの後の記事でご紹介します。

 

 「vLockOn
  ロックオンクラス

f:id:yuukihirai0331:20170819191555p:plain

 「Aim Image Prefab」・・・ロックオン時に表示される画像

 「Aim Image Size」・・・ロックオン時に表示される画像サイズ
 現在、デフォルトの画像が入っていますがオリジナルに切り替える場合こちらを切り替えていただければ

 

3,「vGameController」
 主にゲームオーバーの時の処理になります。
 このオブジェクトはゲームマネージャーとしての役割を担っているの拡張する際はこちらを参考にすると良いと思います。

f:id:yuukihirai0331:20170819180209p:plain


4,「vUI」
 このオブジェクトの子オブジェクトに「HUD」があります。

f:id:yuukihirai0331:20170819181756p:plain

 「Health Slider」・・・HPゲージ
 「Stamina Slider」・・・スタミナゲージ
 「Damage Image」・・・ダメージ時の画面エフェクト画像
 「Flash Speed」・・・ダメージ時の画面エフェクト速度
 「Flash Colour」・・・ダメージ時の画面エフェクトの色
 重要な項目としてこんなところです。

 

今回はここまで次回に続きます

 

f:id:yuukihirai0331:20170819151212p:plain

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

みなさん、お疲れ様です。

個人でよくゲーム開発を行っているYuuki Hiraiです。

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

https://www.assetstore.unity3d.com/jp/#!/content/44227

f:id:yuukihirai0331:20170819134718p:plain


PV

www.youtube.com

こんな感じのアクションRPGを手軽に作成することができる拡張エディタになっております。

使用例PV

www.youtube.com



あまりにも機能が多すぎるため、一つの記事でまとめず複数の記事で解説していきたいと思います。

基本的な使い方

studyworks.hatenablog.com

武器の作成

studyworks.hatenablog.com

敵の作成

studyworks.hatenablog.com


この3項目で解説していきます。

 

よろしくお願いします。


おまけ

YuukiHiraiの薦めるファンタジーアセットです。

http://u3d.as/W5q

YuukiHiraiの薦めるアクションゲーム用のアニメーションアセットです。
これよりクオリティの高いアニメーションアセットないと思います。

http://u3d.as/W5u

Unite報告レポート 後半

前回の続きでUnite後半のレポートです。

studyworks.hatenablog.com

 

Unite2日目は全体的を通してとても参考になるセッションが多かったです。

その中でも3つ紹介したいと思います。

1つ目は安原さんの「スマートフォンでどこまでできる?3Dゲームをぐりぐり動かすテクニック口座」です。

www.slideshare.net


これが2日目最初のセッションだったのですが、内容がコアな部分が多く、私にとってとても参考になりました。一つ一つの実装がとても最適化されていてその理由や新しい表現方法について詳しく解説されていました。

今回のUniteの資料(デモを含め)の中でトップクラスでだと思います。
Uniteにかける意気込みが十分に伝わってきました。


2つ目は小林さんの「Unityで楽しむノンフォトリアルな絵づくり講座:トゥーンシェーダー・マニアクス」です。

www.slideshare.net


去年に引き続き小林さんによるトゥーンシェーダーのセッションですが、毎年この方のシェーダー研究はUnityにおける絵作りの先頭を走っているような気がします。
今回のUniteにてプリキュアあんさんぶるスターズ!のUnity採用事例を見ると、きっかけは小林さんじゃないかと思いました。
このセッションでは去年のトゥーンシェーダーとは変わり、イラストチックな表現を解説されていました。

f:id:yuukihirai0331:20170510005016p:plain

こんな感じにライティングの影響を受けるトゥーンシェーダーです。
Unity Technologies Japanの方によるセッションは全体を通して、質の高い内容が多いですが、その中でも実際にプリキュアあんさんぶるスターズ!のように採用された実績に一番貢献したのは小林さんだと思います。


最後に大道さんと島村さんによる「「Shadowverse開発事例」~美麗カードが動く!制作テクニックのすべて~」です。

【Unite 2017 Tokyo フォローアップ】『Shadowverse開発事例』 ~美麗カードが動く!制作テクニックのすべて~ | Cygames Engineers' Blog

 このセッションは初心的な部分が多く学生やゲーム業界1年目の方に向けた内容でとてもよかったです。平面シェーダによるイラスト表現でこれを行った理由やカード構成の生産性の効率化など私にとってはとても参考になりました。
そして、Cygamesさんは去年のUniteからCEDECなど大型の勉強会でスポンサーになったり、多くのセッションを開かれていてすごい勢いのある会社だと思います。こういった大型のイベントで告知することで多くの有能な開発者が集まっていると思います。私も意識しないといけませんね。

今回のレポートはこんな感じです。
Unite講演者の皆さん、受講者の皆さん、二日間お疲れ様でした。