【Unity】スプライトアニメーションの再生速度がやたらと早い時の対処

　スプライトアニメーションを今まで通りドラッグ＆ドロップで作成した所、やたらとアニメーション再生が早いという事になりました。例えばトップ絵の左のように、速歩きのような速度でアニメーションを再生してしまいます。出来れば右のような速度に設定したい所です。

サンプルレート

　これは単純にアニメーションのサンプルレートが想定より早い事が原因です。Unityの初期設定でスプライトアニメーションを作成する場合サンプルレートは12となっています*1。これは 1秒間に12回キーを打てる という事です。

　例えば2Dスプライトを登録した場合、毎フレーム変化するスプライトが登録されるので、4スプライトで構成されるアニメーションの場合は１スプライト0.3秒で、１秒に３回サイクルが回るアニメーションが再生されます。

　これでは速度が早すぎるので、１サイクル１秒で再生したいというのが、今回の趣旨です。

微妙な解決策

　最初に出てくるアイディアは１秒に合わせてアニメーションするようにAnimationClipを調整するというものです。これはサンプルレート的に少しもったいないような気がしなくもないです。またアニメーションをループさせる場合、「最終に登録したスプライトは１サンプル分しか表示されない」問題があるので、秒数側を操作すると少し面倒くさい話になります。

　またAnimator側でアニメーション速度を調整するというアイディアがあるかもしれません。速度的に0.3をかければ1秒間にだいたい1回の再生です。これは他のアニメーションとの折り合いを考えたときに少しだけ面倒くさくなります。

そうだ、サンプルレートを変えよう

　この問題をスマートに解決するのは、サンプルレートを変更することです。たぶんコレが一番はやいとおもいます。

　問題は、以前にあったサンプルレートの項目が表示されないことです。以前は現在のフレーム数の下あたりにありましたが、現在は表示されなくなっています。サンプルレートは何故か現在は非表示になっており、オプションから表示に切り替える必要があります。

　コンテキストメニュー > Show Sample rate でサンプルレートが表示されます。

～　HAPPY END　～

感想

　なぜ非表示にしたし。コレ見つける前に一瞬Debugモードで編集を考えました。

関連

ぴぽや https://pipoya.net/

*1:普通に作ると60

【Unity】NavMeshComponentsに2D対応ブランチが追加されていたので試してみた

NavMeshComponents

　NavMeshComponentsはNavMeshの機能を拡張するクラス郡です。NavMeshを動的に構築したりアセットに書き出したりといった事を非常に簡単に実現してくれます。エディターからリンクを参照される程度には重要な機能の割にパッケージ化されない謎機能でもあります。

2D ブランチ

　なんとなくブランチ一覧を見た時「2019.3-2D」という妙なブランチを見かけたので早速入れて試した所、Tilemapで作った地形をNavMeshで走らせることが出来ました。追加されているのはNavMeshBuilder2D と NavMeshSourceTag2D というクラスで、この機能でナビゲーションを実現します。

ブランチ

含まれるスクリプト

タイルマップでNavMeshを使用しよう

　タイルマップベースでパスの取得を試してみました。

ステージを作成しよう

　まずはタイルマップベースのステージを作成します。使用したのは2D UFO Tutorialです。この中のBackGround.pngに用が合ったので使用しています。現実的な話で言えば、タイルマップなら別に何でも良いです。取得した画像ファイルはタイルのグリッドに合わせて分割します。今回の場合は３ｘ３で９分割です。
　なおスプライトのサイズが大きすぎるかもしれないので、Pixel Per Unitを1000辺りにしました（1000ピクセルが１m）

assetstore.unity.com

Background.pngを9分割

　次にCustom Physics Shapeを選択して、タイルのコライダーの形状を変更します。このコライダーは通れる場所に設定するという点に注意する必要があります。通常だと逆（コライダーが無い場所を通れる）ですが、今回の場合はそうなっています。

コライダーの設定

　あとはタイルマップを作成していきます。

1. パレットを作成
2. パレットにタイルを登録
3. タイルを作成していく

あとは作成したタイルマップにはTilemap Collider2Dを設定します。これで事前準備は完了です。

NavMeshをベイクしよう！

　NavMeshをベイクします。

　最初に先程作成したTilemap Collider 2Dが付いているグリッドに NavMesh Surface Tag 2D を設定します。 GameObjectを新しく作成し、NavMeshBuilder2Dコンポーネントを追加します。 NavMeshBuilder2DのBakeボタンを押します。

　実際にベイクできたかは Window > AI > Navigation ウィンドウを開いて確認します。ベイクで来ている場合は移動範囲を青く表現されます。
　ベイクで来たらBake On Enableを設定しておきます。

移動範囲を、もっとタイルに沿って配置したい場合は、Agent TypeのHumanoidのRadiusを小さな値にします。

NavMeshによる移動経路を取得しよう

　ナビゲーションの移動経路を取得してみます。これは特に特殊なことはせず、今まで通りの形で取得できます。例えばパスを LineRenderer で表現するコードを考えてみます。

using UnityEngine;
using UnityEngine.AI;

[DefaultExecutionOrder(10)]
public class DrawPath : MonoBehaviour
{
    [SerializeField] LineRenderer line;

    [SerializeField] Transform startPos, endPos;

    private NavMeshPath path;

    void Awake()
    {
        path = new NavMeshPath();
    }

    void OnEnable()
    {
        var result = NavMesh.CalculatePath(startPos.position, endPos.position, NavMesh.AllAreas, path);
        enabled = line.enabled = result;

        if( result )
        {
            var corners = path.corners;
            line.positionCount = corners.Length;
            line.SetPositions(corners);
        }
    }
}

NavMeshAgentを使用する場合

　NavMeshAgentはパスを3Dの物と認識しているので注意が必要です。NavMeshAgentを使用したい場合、座標だけ同期して実際の描画は別のGameObjectで行う等が楽で良いです。

関連

　トップ絵のキャラクターの表現はコレを使用。移動方向を渡せば良いだけの簡単仕様

tsubakit1.hateblo.jp

　この機能はすごく単純に、NavMeshをベイクする際のポリゴン情報をNavMeshから取得しているだけです。

tsubakit1.hateblo.jp

【Unity】LWRPでポストプロセスを使用しつつUIの手前にパーティクルを表示する

PCを新しくしてからの初更新です。

環境：Unity 2019.2f8、LightWeight RP 6.9.1

LWRPはカメラのスタックができない

　いろいろと便利なLWRPですが、一つだけよく言われる致命的な問題があります。 カメラを複数使用して描画する事ができない という点です。　RenderTexture に描画結果を出力して後でまとめるといった事は可能なのですが、今まで使ってきた 複数のカメラを使って描画する事が出来ないのは、非常にもどかしいです。

　特に問題になりやすいのはUIとパーティクルの描画です。　よくある演出として UIの手前にエフェクトを表示する があります。これは大抵の場合「ゲームを描画するカメラ」「UIだけを表示するカメラ」の二つに分けて描画し、「UIだけを表示するカメラ」にパーティクルを描画させることで実現していました。 　ただしLWRPになりカメラのスタックが出来なくなったので、専用カメラが使用できません。よって異なる方法を考える必要があります。

　難しいのが、まず ScreenSpaceOverlay は使えません。UIの手前にパーティクルを描画出来ない為です。　 　また ScreenSpace-Camera でも単純には上手くいきません。単純に処理すればUIがポストプロセスの影響を受けるので、特にカラーコレクションを使用すると盛大に色合いが変わってしまいます。またBloomやDOFの影響を受けるのはひどいです。同様にPlaneDistanceの設置でUIがステージにめり込む事もあり得ます。この設定をいくら小さくしても、手前で爆発するなど何らかの理由でUIよりステージオブジェクトが手前に描画される事があるのは問題でしょう。

UIがポストプロセスの影響を受けてしまっているケース

UIがステージにめり込んでしまっているケース。ScreenSpace-CameraだとPlaneDistance設定で起こりえる

PostProcessingの後にUIとパーティクルを描画する

　一番手っ取り早いアプローチは Custom Forward Render を使用して、UIとパーティクルを描画する事です。　このアプローチではUIをポストプロセスの影響を受けないようにしつつパーティクルをUIの手前に描画出来ます。また Screen Space Camera を使いつつもステージやキャラクターの後ろにUIが表示されるといった事も回避できます。
　この手順のアイディアは非常に単純で 任意のレイヤーに所属するオブジェクトを、ポストプロセスの後に描画しよう というものです。

　実際の手順はこんな感じです。

　まず最初にUIは ScreenSpace-Camera を使用する必要があります。 CanvasのRender ModeをScreen space-Cameraに設定します。またCanvas GameObjectのレイヤーはUIに設定します。パーティクルのGameObjectもUIに設定します。
　パーティクルをUIの手前に描画したいので、Order in Layerを使用してUIの手前にパーティクルを描画するように設定します。 UIの場合はCanvasに、パーティクルの場合はRendererにあります。

Canvasの設定

ParticleのOrder In layerを設定する場所

　レンダラー側の設定を行います。まずは Create > Rendering > ***Pipeline > Forward Renderer でCustom Forward Rendererアセットを作ります。その後、Lightweight Renderer Pipeline AssetのRender TypeをCustomに設定し、Custom Forward Rendererアセットを登録します。

Custom Forward Rendererを作る

Custom Forward Rendererを使用する設定

　次にCustom Forward Rendererの設定を行います。ここは少し手順が多いので、箇条書きします。

1. Default Layer Mask から UI を外す。
2. Render Features の + を押す。追加するパスは Rendere Object を選択
3. NameをUIに変更（任意）
4. EventをAfter Rendering に変更
5. Filters > Queue を Transparent に変更
6. Filters > Layer Mask で UI を選択
7. Override > Depth にチェックを入れ、Depth Test を Disabledに変更

手順

これでUIの手前にパーティクルを描画出来ました。

UIの間にパーティクルを挟む

　今回の手順では描画順は完全にOrder In Layer順になっています。なのでパーティクルの所属するOrder In LayerをCanvasの間に挟んでやれば、UIとUIの間にパーティクルを挟む事も可能です。

UIとUIの間にパーティクルを挟む

注意点

　これはあくまでもパーティクルがTransparentを使用している前提の使い方なので成立しています（つまりDepth Testを使用していない事が重要）。もしUIの手前に複数のSubMeshを持つオブジェクトを描画するといった場合はRenderTextureをオフスクリーンで描画する方が理にかなっていると言えるかもしれません。

　今回の手順はURPでも使用できました。HDRPは不明です。

　ScreenSpace-Cameraを使用する関係上、編集する場合にはPrefabモードが便利です。ただし、その場合ScreenSpace-Overlayになるので（PrefabからScene上のカメラを参照出来ない為）描画順回りは少し混乱するかもしれません。

　カメラのスタックはロードマップには載っているみたいです。現状は未実装なので、このトリックが必要という感じで。

【Unity】LWRPの2Dパイプラインで、ShaderGraphを使ってみる

今回はLWRPの2DRendererでShaderGraphを使用してみます。

2Dパイプライン

コチラを参照

tsubakit1.hateblo.jp

Shader Graph

この2Dパイプラインでは、単純なLit/Unlitのシェーダーだけでなく2D用のマスターノードが用意されています。コレを使用すると、スプライトレンダラー向けの表示にもShaderGraphを使用したシェーダー構築が可能になります。

それ以前にもUnlitのシェーダーを使用すれば簡単な表現はできたんですが、Spite Mask等にちゃんと対応したマスターノードが提供されたという感じです。マスターノード、もうちょっと簡単に構築出来れば良いんですが…

使ってみる

Shaderを用意する際には、Create > シェーダー > 2D Renderer から作りたいシェーダーを選択します。Litが光源処理に対応したシェーダー、Unlitが対応していないシェーダーです。

あとは作成したシェーダーをダブルクリックでShader Graphを起動、編集していきます。

Shader Graphでスプライトを使用する場合、必ず _MainTexのTexture2Dを要求しますので、コレを追加します。下のシェーダーは今までのシェーダーと同じような動きをするシェーダーの例です。

MainTexが無い場合、「Material does not have a MainTex property. it is required for sprite renderer」と表示されます。

他のテクスチャ設定ですが、Secondary Textureで設定したテクスチャの名称と一致します。例えばNormalMapのテクスチャを設定した場合、ShaderGraph側でもNormalMapと設定すれば、シェーダー側で使用できるようになります。

なおノーマルマップは普通にSamplerTexture2Dでとってくれば良いです。

後は色々と頑張って作れば、簡単なエフェクト程度なら割とサクっと作れます。下は試しに作ったスプライトをチェック柄に消す奴（トップ絵の）

注意事項

• Emissiveが効きません。
• SpriteAtlasを使用すると絵が破綻します
• 別に2D用ノード必要なくね？…それな