Study Works

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

UMotion Pro – Animation Editor で男性モーションを女性モーションに調整してみた!

この記事は「Unityアセット冬のアドベントカレンダー 2020 Summer!」の 8/5 の記事です!

assetstore.info

 

AssetStoreのモーションを見ていて、こんな経験はないでしょうか?
・このモーションの女性Verがほしい!
・モーション内で何かを持たせたい!
こういった「既存のモーションを少し調整したい!」という要望を解説します!

 

今回はUMotion Proで既存のモーション加工を紹介します!
※ブログではUnity 2019.4.5f1で解説しますが、Unity2018でも問題なく動作すると思います。 

 

 

1、UMotion Proとは

assetstore.unity.com

公式より引用です。

 Powerful Animation Editor for animating any type of 3D model right inside Unity.
Reduce development time by fine tuning animations even while being in play mode.

No CPU overhead: UMotion produces Unity animation clips that require no run-time components.

日本語翻訳 

Unity内であらゆるタイプの3Dモデルをアニメーション化する強力なアニメーションエディター。
再生モードでもアニメーションを微調整して、開発時間を短縮します。

No CPU overhead:UMotionは、ランタイムコンポーネントを必要としないUnityアニメーションクリップを生成します。

使用した感じだとUnityエディタ上でモーションを作成できるエディタ拡張な感じです! 

2、UMotion Proセットアップ

最初に適当な「Scene」を作成して「Plane」を配置しましょう

f:id:yuukihirai0331:20200801000223p:plain

このPlaneを初期位置(0,0,0)に配置することで
モーションを調整、作成するうえでの地面とします!

 

「Windou」から「UMotion Editor」から「Pose Editor」と「Clip Editor」を開きます!

f:id:yuukihirai0331:20200801001523p:plain

私は画像のようなレイアウトで構成していますが、
みなさんの好みに応じて調整して大丈夫です!

  • 「Clip Editor」

    アニメーションのキーを管理するタイムラインをイメージしています

  •  「Pose Editor」
    モデルやボーン情報の詳細やキー登録の管理を行っています。

次に「New Project」から「Humanoid」を選択して、適当な名前でプロジェクトファイルを作成します。

f:id:yuukihirai0331:20200801123235p:plain

今回はHumanoidのモーションとHumanoidに適したモデルを使用していきます。

 

基本的にUMotion Proは

  • 「Scene」   モデルのアニメーション結果を確認
  • 「Clip Editor」 アニメーションのキーフレーム調整
  • 「Pose Editor」  モデルやボーンの調整

 で運用していきます! 

 

3、キャラモデルをセットアップ

 今回、使用する女性モデルはUnityちゃんです!

unity-chan.com

 

 

実際に作成したSceneに配置しましょう

f:id:yuukihirai0331:20200801235805p:plain

Scene上に「unitychan」プレハブを配置して配置したオブジェクトを
「Pose Editor」の「Select a GameObject to animate:」にドラッグ
「UMotion - New Rig Detected」で「Create Configuration」を選択

f:id:yuukihirai0331:20200802002231p:plain

 「UMotion - Blend Shapes Found」で「Add to Head」を選択
これでプロジェクトデータにモデルのインポートが完了しました!

f:id:yuukihirai0331:20200802011254p:plain

 

4、モーションをインポート、モデルにIKを設定しよう!

モーションは「Third Person Controller - Melee Combat Template」の待機モーションを拝借します!

assetstore.unity.com

 

今後の作業を行うため、IKを設定しましょう!

f:id:yuukihirai0331:20200802010752p:plain

 「Config Mode」の「IK Setup Wizard」を選択、「UMotion - Calibrate Character Front」で表示される矢印とデフォルト設定で問題ないので「OK」を選択

f:id:yuukihirai0331:20200802010911p:plain

 「UMotion - IK Setup Wizard」で「Create」を選択

f:id:yuukihirai0331:20200802201715p:plain

これでIKの設定は完了しました。
赤字で囲っているボックスや球体を動かすとボーンが動くようになります!

次にモーションをインポートしましょう!

f:id:yuukihirai0331:20200802202306p:plain

「Clip Editor」の「Import Clips」を選択

f:id:yuukihirai0331:20200803004802p:plain

「UMotion - Import Clips」で調整するモーションを「Animation Clips:」にドラッグします。
モーションデータが複数含まれていますが、今回は1つしか調整しないのでidleのモーションだけチェックします。
そして、インポートする際にIKを適応させるため「FK To IK Conversion」を「On」にして「Import」します。

f:id:yuukihirai0331:20200803005358p:plain

今後の作業をわかりやすくするため
・「Pose Editor」の「Rig Layers」を「IK」を選択
 これによりIKのボーンのみを表示します。
・「Pose Editor」の「Bone Style」で「Stick」を選択
 これによりIKのボーンがモデルとなるべく被らないように表示します。
・「Clip Editor」のリピートアイコンを有効化してリピート再生。
・「PM」でRootモーションのように移動値が蓄積されるのをリセットします。

再生させるとこんな感じになるかと思います!

youtu.be

5、女性モーションに加工

ここで女性モーションについて解説します。
私は専門家ではないのですが
みなさんの受けが良い姿勢、モーションを列挙すると
・内股気味
・脇締める
この3つになるかと思います!

男性モーションに多いポイントとしては
・ガニ股
・脇が広がっている
2点のポイントにより女性モデルに置き換えた時、違和感が出てしまうと思います。

 

今回、調整するモーションなのですが

f:id:yuukihirai0331:20200803023856p:plain
すごくガタイのいい男性モーションですね、強そうです…


レイヤーを作成しましょう!

f:id:yuukihirai0331:20200803030152p:plain

「Clip Editor」の「Layers」のレイヤー作成ボタンよりレイヤーを2つ作成します。
1つめは「Blending」を「Additive」にして

f:id:yuukihirai0331:20200803030410p:plain

2つめは「Blending」を「Override」にします。
・「Additive」はキーフレームに対して加算
・「Override」はキーフレームに対して固定
上記、2つの加算と固定を用いて調整を行っていきます!

 

男らしく足を開いているので、内股気味に足の位置を調整しましょう!

f:id:yuukihirai0331:20200803182605p:plain

右側の「Additive」のレイヤー、「A」のマークが付いているレイヤーを選択して
0フレーム目を選択した状態で
左足のボックス、「IK_Foot_L」を選択します。


良い感じの位置と角度に調整したらキーを打ちましょう!

f:id:yuukihirai0331:20200803190752p:plain

「Pose Editor」の「Key Dialog」で表示されるウィンドウの「Add Keys」 で編集したキーを打ち込みます。
これがキーフレームアニメーション作成の基本動作として作業していきます!

f:id:yuukihirai0331:20200803234749p:plain

次に左足のひざの向きを変えましょう。

f:id:yuukihirai0331:20200804003019p:plain

球体の「IK_Pole_Knee_L」を内側に移動させて左足を内股気味にしましょう!

「Additive」のレイヤーに作成したことにより
既存のモーション(一番下のレイヤー)に対して加算という形で
モーションを構成することができます!

 

この手順で左右手足調整しました!

youtu.be

不自然なところはありますが、Unityちゃんらしい動きになったかと思います!

ここからさらに調整をかけます!
次は「Override」のレイヤーを使います!

f:id:yuukihirai0331:20200804010830p:plain

「Override」のレイヤーを選択した状態で

f:id:yuukihirai0331:20200804011306p:plain

左足の「IK_Foot_L」の「Pose Mode」の「IK Pinned」にチェックを入れます。
これによりIKの位置は変わらず固定されます!
この際に足の位置が少し変わってしまいますが、これを再度調整をかけます…

f:id:yuukihirai0331:20200804012008p:plain

レイヤーの「M」を押すことでそのレイヤーを無視(ミュート)することが出来るので、これを切り替えて使用して位置を調整します!

youtu.be

右足も同様に固定化させた結果
両足を地面についたまま、モーションを調整することができました!

  • 「Additive」レイヤー
    ボーンの位置を加算調整したい時に使用
  • 「Override」レイヤー
    ボーンの位置を上書きしたい時に使用

 

で使い分けると良いと思います!!

6、モーションデータをエクスポート

最後に作成したモーションを書き出します

f:id:yuukihirai0331:20200804021752p:plain

「Clip Editor」の「File」から「Export」で「Current Clip」を選択

f:id:yuukihirai0331:20200804022015p:plain

プロジェクトデータで最初に書き出す場合、書き出し場所を聞かれます。
Destination Folder」にて適当なフォルダを設定しましょう!

f:id:yuukihirai0331:20200804022749p:plain

ちゃんと書き出し出来れば大丈夫です!

7、まとめ

 UMotion Pro を使う上で
「Additive」レイヤー
「Override」レイヤー
 を上手く使い分けてより良いモーションにしていきましょう!

閲覧いただきありがとうございました!

明日は ニア(ニアルカちゃんねる)  さんのPuppet3D使ってみた」です!

 

f:id:yuukihirai0331:20170819151212p:plain

このブログはユニティちゃんライセンス条項の元に提供されています

ステートマシンを使わないアニメーションシステム Motion Matching for Unity 導入、解説!

はじめに

この記事は「Unityアセット冬のアドベントカレンダー 2019 Winter」の 12/10 の記事です!

 

今回、ご紹介するアセットは「Motion Matching for Unity」です。

assetstore.unity.com

このアセットは、ステートマシンの複雑なロジックと剛性を使用せずに、ゲームで流動的なキャラクターアニメーションを使用したい人向けです。ただし、結果は、使用可能なリソースのアニメーションデータとコーディング能力によって異なる場合があります。

 ~ドキュメントより引用~

f:id:yuukihirai0331:20191209220854g:plain

 

注意
Unity 2018.4 以降対応
この記事ではUnity 2018.4.6f1で紹介しています。
今回紹介するアセットを運用するには、モーションとプログラミングをある程度知っておく必要があります。

 

Motion Matching という言葉をご存じでしょうか?

game.watch.impress.co.jp

定義はされていないと思いますが、私なりに解釈すると
複数のアニメーションからその場で適切な組み合わせにブレンドするという感じかと思います。。。
よく海外の3Dアクションゲームを見ていてキャラがとても自然なモーションをしていて良いなぁと思っていた際に見つけたアセットを紹介したいと思い記事を作成しました。

導入の仕方

導入手順はドキュメントや動画でもご紹介されていますが 

docs.google.com

www.youtube.com

特殊な操作が多く、詰まるポイントがあるため今回軽くご紹介します。


1、パッケージインストール

Motion Matching for Unity を動作させるには下記のパッケージをインストールする必要があります。
注意:「Show preview packages」を有効にしないと出てこないものがあります。

f:id:yuukihirai0331:20191209000023p:plain



Motion Matching for Unityに必要なパッケージリスト

・Mathematicsf:id:yuukihirai0331:20191207142022p:plain・Collectionsf:id:yuukihirai0331:20191207142055p:plain・Burstf:id:yuukihirai0331:20191207142253p:plain・Jobs (Preview)
f:id:yuukihirai0331:20191207142155p:plain

Motion Matching for Unity で必須ではありませんが、
サンプルシーンで使用しているのでインストールしましょう。

・Cinemachine

f:id:yuukihirai0331:20191207142654p:plain

・PlayableGraph Visualizer
f:id:yuukihirai0331:20191207142657p:plain

 

動画では1:04~で解説されています。
https://youtu.be/Y-mCNsDEt6c?t=64

 

2、サンプルシーン実行

これでもう実行できるのでサンプルシーンを開きましょう!Assets\Plugins\MotionMatching\Demo\Scenes\MxMDemo.scene を実行しましょう。

 

実際にモーションを使って実践しましょう

ここからは実際に Motion Matching for Unity の機能を使ってみましょう
今回、作成するのは MxMDemo.scene で使用されている移動系の動作です。
紹介する内容はこちらの動画をもとに紹介します。

www.youtube.com

1、ベースシステムを作成

 Assetフォルダ内から「Create」で「MxMPreProcessData」を作成しましょう

f:id:yuukihirai0331:20191208122834p:plain

「MxMPreProcessData」はキャラクター1人に対してベース部分となります。
ここに様々な設定や機能が入っています。

2、MxMPreProcessData設定

f:id:yuukihirai0331:20191208205551p:plain

次はこちらのパラメータに設定していきます。
※紹介しない箇所は設定しなくても今回は大丈夫です

~ General ~

f:id:yuukihirai0331:20191208214843p:plain
・「Target Model」 には動かしたいキャラのベースファイル(fbxモデル等)を設定しましょう。
今回は Assets/Plugins/MotionMatching/Demo/Model/Robot Kyle.fbx を設定しますが、お好みで別のキャラでも構いません。

・「Pose Interval」は各ポーズごとのインターバル時間を入れます。今回は「0.05」を入れます。個人的な目安で言うと動かしたいフレームレートの1フレームあたりの時間を入れると良いかと思います。(30FPSなら0.033等)

 

~ Trajectory Configuration ~

f:id:yuukihirai0331:20191208220059p:plain

右下の「Add Trajectory Point」で「Trajectory」を5つ追加します。
ポイントは4~5つ追加して等間隔で時間を指定するのが良いらしいです。

 

~ Pose Configuration ~

f:id:yuukihirai0331:20191208225132p:plain

右下の「Add Pose Property」で「Pose Property」を3つ追加します。
それぞれ「Left Foot」「Right Foot」「Hips」を選択します。
ここではモーションで重視したい箇所を選択します、例えば右手に剣を持っている場合は右手を追加すると良いと思います。しかし、追加しすぎるとパフォーマンスに影響がでるため8つまでしか選択できません。

 

~ Animation Data ~

f:id:yuukihirai0331:20191208225854p:plain

 

次は実際に使用するアニメーションデータを入れます。

f:id:yuukihirai0331:20191208230405p:plain
待機モーションを入れます、ドラッグして入れます。
「Assets/Plugins/MotionMatching/Demo/Animations/Idle/Idle_Neutral_1.anim」

 

f:id:yuukihirai0331:20191208231627p:plain

次に「Composites」の「Add New Category」で「Walk」「Run」の2つのカテゴリを作成します。

f:id:yuukihirai0331:20191208232104p:plain

f:id:yuukihirai0331:20191208232208p:plain

f:id:yuukihirai0331:20191208232647p:plain

f:id:yuukihirai0331:20191208232803p:plain

上記は画像でカテゴリに入れるモーションデータを紹介しましたが
下記に文面で記載しておきます。

「Walk」
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/WalkArkLeft.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/WalkArkLeft_Narrow.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/WalkArkRight.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/WalkArkRight_Narrow.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/WalkFWD.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2walk_AllAngles.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2walk_AllAngles_Right.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2walk_AllAngles_Right.anim

「Run」
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/RunArcLeft_Narrow.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/RunArcLeft_Wide.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/RunArcRight_Narrow.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/RunArcRight_Wide.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/BlendSpace_Anims/RunForward_NtrlFaceFwd.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/HalfSteps2Idle_PasingLongStepTOIdle.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/HalfSteps2Idle_PasingLongStepTOIdle_Right.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run45L.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run45R.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run90L.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run90R.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run135L.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run135R.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run180L.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Idle2Run180R.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/JogForwardTurnLeft_NtrlMedium.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/JogForwardTurnRight_NtrlMedium.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/PlantNTurn90_Run_L.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/PlantNTurn90_Run_R.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/PlantNTurn135_Run_L.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/PlantNTurn135_Run_R.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/PlantNTurn180_Run_L_2.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/PlantNTurn180_Run_R_2.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Run_LedgeStop2_Idle.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/Run_LedgeStop_Idle.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/RunForwardStart.anim
Assets/Plugins/MotionMatching/Demo/Animations/Locomotion/RunFwdStop.anim

今回、カテゴリ分けする必要性は薄いですが、今後の運用でこのようにカテゴリをわけしておくととても運用がしやすいです。

 

f:id:yuukihirai0331:20191208234610p:plain

MxMPreProcessData設定の最後に「Pre-Process Animation Data」で統合されたアニメーションデータを書き出します。
保存する場所やファイル名はとくに指定はありません。
もし、今後モーションを追加したり削除する場合は MxMPreProcessData を調整して書き出す感じになります。

3、Scene にキャラを作成

f:id:yuukihirai0331:20191209000747p:plain

MxMPreProcessData設定の General で設定した「Target Model」をScene上に配置します。

f:id:yuukihirai0331:20191209001051p:plain

Scene上に配置したキャラに Add Component で「MxMTrajectoryGenerator」を追加します。
追加した際に「MxM Animator」も一緒に付くので、「MxM Animator」の「AnimationData」に「Pre-Process Animation Data」で書き出したアニメーションデータを入れます。

 

これで完了です!

f:id:yuukihirai0331:20191209223149g:plain
※障害物を貫通していますが、更に手順が必要なためこれで正解です 

もっと活用するには

今回、機能の最初の部分しか紹介しきれませんでしたが、具体的な活用方法等はYouTubeのチャンネルにて公開していただいています!

www.youtube.com

最後に

Motion Matching for Unity の紹介動画が早いペースで上がってきていて
Discordで積極的に意見交換しているようなので今後のアップデートに期待できます!

明日は 汗人柱 さんの「【冬のアドカレ2019】unityでオープンワールド型ゲーム開発!GTAっぽい世界作りが捗るアセットまとめ(CyberWeekセールは12月14日 17時まで) - Unity AssetStoreまとめ」です!
 

KingSeeker 体験版 C96 振り返り

夏コミ、megabitconvention 02 お疲れ様でした!

 

~夏コミの展示様子~

f:id:yuukihirai0331:20190827000508j:plain

 

~megabitconvention 02の展示様子~

f:id:yuukihirai0331:20190827000802j:plain

 
Twitterでプレイした意見や感想等を上げていただきとても嬉しいです!

意見や感想をもとに今後の方針としては
・プレイヤーアクション部分の多様化
・敵の量産
・フィールドマップ拡張
上記、3点を行っていこうと思います。。。

「King Seeker」を完成(最低ライン)を目標にしたとして現在の進捗率ですが
ざっくり言うと8~10%ぐらいです。。。

シンディやレティシアの他に最低4人のキャラクターを入れようとしています。
物語は今回の体験版でお話しした帝国への旅路が2章の一部で最大7か6章まで予定しています。
物語の大筋は決まっていてカットシーン作成やセリフ収録はそこまで時間がかかりません。
しかし、3Dキャラクターを1体作成するのに約2ヶ月かかるのが現状で、完成まで少なくとも10ヶ月はかかる見込みです。
上手く事が進めば来年の2020年の冬コミで完成版が出せれば良いなと思います。。。
基本、開発(企画、プログラム、モデリング等)は私1人で行っています。

完成までかなり時間がかかってしまいますが、待っていただけると嬉しいです!

ブルジョア向けビジュアルアセット組み合わせ紹介(CTAA、Beautify、Aura 2)

http://assetstore.info/wp-content/uploads/2019/07/summer_Advent_banner_3_Tw-1024x536.png

こちらはUnity アセット真夏のアドベントカレンダー 2019 Summer!の21日目の記事になります。

 

 

はじめに

みなさま、ゲームを買う基準、プレイする基準は何でしょうか?
私は圧倒的にビジュアルアクション性で決めます!
3Dを活用したゲームだとビジュアルが重視されることが多いと思います!
今回は手軽に3Dゲームのビジュアルを改善するアセットたちを紹介します!

 

ちなみに今回紹介するアセットを組み合わせて作成しました。

t.co

 

使用するバージョン 
Unity 2018.4.6f1
CTAA ver. 1.9
Beautify ver. 7.1
Aura 2 ver. 2.0.7

 

CTAA

t.co

これは3Dモデルの先端部分のギザギザしているジャギーを半透明などにしてくれるアンチエイリアスのアセットです。

f:id:yuukihirai0331:20190814195200p:plain

一例で分かりやすいのは、柵にある木と木の間がジャギっているのがぼかされています。
このようにドット単位のギザギザ感をなくすことができるので、3D画面の全体を滑らかに出来ると思います!

CTAAは前回のアドカレでもご紹介させていただいたので参考までにどうぞ

t.co

 

Beautify

t.co

Beautifyは、画像を改善するフルスクリーンの画像処理効果です。信じられないほど鮮明で鮮やかなシーンをリアルタイムで生成します。~AssetStore紹介より

入れるだけで画面の色のメリハリがつくようになり、とてもおすすめです! 

 

このCTAAとBeautifyを組み合わせればきっと良い画面ができるはず!!!
今回、検証用に「Mesh Effects」使用して解説します!

t.co

 

CTAAとBeautifyを組み合わせてみました!

f:id:yuukihirai0331:20190815001803g:plain

youtu.be

Beautifyの機能でBloomを入れています。
組み合わせて見た感想としてはCTAAを使用した際に細かいオブジェクトは半透明になってしまうため、Beautifyで色鮮やかになった小さいオブジェクトが消えているように見えます。。。(動画の0:38~より)
CTAA_PC(CTAAのコンポーネント)にある「Temporal Jitter Scale」の値を0に近づけるとジャギー感を調整できるのでそこで調整することになるかと思います。

f:id:yuukihirai0331:20190815220210p:plain

Aura 2

そして、更にフィールドをより良く見せるアセット「Aura 2」も組み合わせました!

t.co

今は夏でとても暑いので涼しくなるように作りました。 

f:id:yuukihirai0331:20190815214022g:plain

youtu.be

Aura 2に標準で搭載されている「Aura Ambience」から「Snowy Day」を選択して

f:id:yuukihirai0331:20190815220105p:plain

後はAura Layer Volumeを追加して地面のフォグを作っています。

f:id:yuukihirai0331:20190815220708p:plain

 

この組み合わせをゲームでも使用しましたが、1つ問題が発生しました。
実は黒いモーションブラーのようなものがカメラを回した際に出ました。

f:id:yuukihirai0331:20190815225637g:plain

その際はAuraCameraコンポーネントにある「Enable Occlusion Culling」のチェックがデフォルトだとONになっているのでここをOFFにすることで回避出来ました。

f:id:yuukihirai0331:20190815230627p:plain

個人的にかなりハマったポイントなので紹介させていただきました。

 

まとめ

今回、CTAA($195)とBeautify($35)、Aura 2($47)を事例紹介がないと購入する敷居が高いと思い記事を書きました!
※2019年8月通常価格より

以上となります、閲覧ありがとうございました!

 

8月22日は「ラズ」さんの

「Weather Makerで天候操作」です。

よろしくお願いします。

UnityでSkinnedMeshRenderer残像表現

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

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

youtu.be

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

f:id:yuukihirai0331:20190309131205p:plain

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

2、スクリプトを作成

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を1つ前にずらしていく
        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;
    }
}

 

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

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

f:id:yuukihirai0331:20190309133340p:plain


完了です。

f:id:yuukihirai0331:20190309134520p:plain

 

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

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