ひつじコレクション - 13. パフォーマンスチューニングみたいなこと（2）

[ミニゲームを作ってUnityを学ぶ！[ひつじコレクション編]](https://qiita.com/YzRoid/items/8dfd6c168b916ac82a0d)
###**第13回目: パフォーマンスチューニングみたいなこと（2）**
前回に引き続き、描画部分の機能改善を行っていきます。
まずは前回までのステータスを再掲載。

###**最初のステータス**

![action_sheep_ss_12_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/c9662d9b-23ea-3746-53bc-1d0d19ffd441.jpeg)

<pre>

BushオブジェクトのLODのみ有効な状態

Batches: 785
Tris: 466.9k
Verts: 1.1M
SetPass calls: 103

</pre>

###**影を描画しない**

![action_sheep_ss_12_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/08694991-10a6-4c3a-c07d-2215a334cdc4.jpeg)

<pre>

Directional LigheのパラメーターShadowTypeを「No Shadows」に設定

Batches: 190
Tris: 119.8k
Verts: 245.1k
SetPass calls: 64

</pre>

それでは、引き続き描画部分の修正を行っていきます。

###**ミニマップの修正**
問題があるまま放置していたミニマップの描画を修正します。
現在はステージを単純に上から見下ろしているだけの状態ですが、これを新しくミニマップ専用のオブジェクトを用意してMinimapCameraにはそのオブジェクトのみが描画されるように変更します。

+ 新しいLayer「ForMinimap」を定義
+ MainCameraのCullingMaskからForMinimapのチェックを外す
+ MinimapCameraのCullingMaskにはForMinimapのみチェックを入れる
+ 同じくMinimapCameraのclear flgsを「Depth only」に設定

![action_sheep_ss_13_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/d31fc738-d10b-eea8-cc9b-4e5c32b2a47b.jpeg)


CullingMaskはカメラに映し出すレイヤーを指定する項目ですので、これによってForMinimapレイヤーのオブジェクトはMainCameraに映らず、MinimapCameraのみに映るようになります。

![AtlasMinimap.png](https://qiita-image-store.s3.amazonaws.com/0/239877/09e199b0-ad4e-9ec2-e2c5-0d10777a2e1f.png)

+ 上の画像をダウンロードし、AtlasMinimapという名前でプロジェクトにインポート
+ AtlasMinimapの「Alpha is Transparen」にチェックを入れる
+ 新しいMaterial「Minimap」を作成
+ MinimapのシェーダーをLegacy Shaders/Transparent/Diffuseに設定
+ 同じく使用するテクスチャにAtlasMinimapを設定

![action_sheep_ss_13_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/20dd7661-d5c6-63cc-7766-b8276debad44.jpeg)

このMinimapマテリアル適用した板ポリゴンを各パーツに張り付けて、MinimapCameraではその板ポリゴンのみを描画していきます。

+ Bushの子要素としてQuadを作成

![action_sheep_ss_13_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/939e4585-f89e-4b15-389d-c9b3b136173c.jpeg)

+ QuadのMeshColliderのチェックを外す
+ 同じくQuadのLayerにForMinimapを指定し、以下のようにTransformを修正

<pre>

Position: x=0, Y=0.02, z=0
Rotation: x=90, y=0, z=0
Scale: x=0.5, y=0.5, z=1

</pre>

+ 新しいスクリプト「UvMapQuad」を作成してBushプレハブの子Quadにアタッチ

```cs:UvMapQuad.cs

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

    /// <summary>
    /// Quadのメッシュに対してUVマップを設定する
    /// 頂点の順番は
    /// 0:左下
    /// 1:右上
    /// 2:右下
    /// 3:左上
    /// </summary>
    public class UvMapQuad : MonoBehaviour
    {

        [SerializeField]
        private float leftBottomU, leftBottomV, rightUpU, rightUpV, rightBottomU, rightBottomV, leftUpU, leftUpV;

        private void Awake()
        {
            Vector2[] newUv =
            {
                new Vector2(leftBottomU, leftBottomV),
                new Vector2(rightUpU, rightUpV),
                new Vector2(rightBottomU, rightBottomV),
                new Vector2(leftUpU, leftUpV)
            };
            Mesh mesh = GetComponent<MeshFilter>().mesh;
            mesh.uv = newUv;
        }

    }

```

+ インスペクタからUvMapQuadのフィールドを上から順番に以下のように設定

<pre>
0.25, 0.75, 0.5, 1, 0.5, 0.75, 0.25, 1
</pre>

ちょっと見にくいですが、プロジェクトを実行するとBushがミニマップに表示されます。

![action_sheep_ss_13_4.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/d09b7b63-44e1-7d76-49e0-546ebcf2f011.jpeg)

この作業をミニマップに表示したいオブジェクト全てに対して行っていきます。

+ Floorの子要素として新しいQuadを作成
+ QuadのMeshColliderのチェックを外す
+ QuadのLayerにForMinimapを指定してUvMapQuadをアタッチ
+ QuadのトランスフォームとUvMapQuadのフィールドを以下のように設定

<pre>

Position: x=0, Y=0, z=0
Rotation: x=90, y=0, z=0
Scale: x=10, y=10, z=10

UvMapQuad: 0.75, 0, 1, 0.25, 1, 0, 0.75, 0.25

</pre>

![action_sheep_ss_13_5.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/7b5504cb-e087-63b4-9f56-dafe88ea1c80.jpeg)

以下、各オブジェクトについてQuadのトランスフォーム値とUvMapQuadのフィールド値のみを掲示していきます。

<pre>
【Player】

Position: x=0, Y=0.04, z=0
Rotation: x=90, y=0, z=0
Scale: x=1, y=1, z=1

UvMapQuad: 0, 0.75, 0.25, 1, 0.25, 0.75, 0, 1

</pre>

<pre>
【GoalArea】

Position: x=0, Y=0.04, z=0
Rotation: x=90, y=0, z=0
Scale: x=1, y=1, z=1

UvMapQuad: 0, 0.25, 0.25, 0.5, 0.25, 0.25, 0, 0.5

</pre>

<pre>
【PopupPoint】

子要素に空オブジェクト「Effect」を追加し、その中にmagic_ring_03とQuadを配置する（下画像）
それに併せてスクリプトPopupPointのフィールド参照を変更。

Position: x=0, Y=-0.124, z=0
Rotation: x=90, y=0, z=0
Scale: x=1, y=1, z=1.25

UvMapQuad: 0.5, 0.75, 0.75, 1, 0.75, 0.75, 0.5, 1

</pre>

![action_sheep_ss_13_6.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/b39c1aa6-5ff1-94cf-9475-bf95fec19348.jpeg)


<pre>
【ChaserBlue】

Position: x=0, Y=0.0016, z=0
Rotation: x=90, y=0, z=0
Scale: x=0.04, y=0.04, z=0.04

UvMapQuad: 0, 0.5, 0.25, 0.75, 0.25, 0.5, 0, 0.75

</pre>

<pre>
【ChaserYellow】

Position: x=0, Y=0.0016, z=0
Rotation: x=90, y=0, z=0
Scale: x=0.04, y=0.04, z=0.04

UvMapQuad: 0.25, 0.5, 0.5, 0.75, 0.5, 0.5, 0.25, 0.75

</pre>

<pre>
【ChaserRed】

Position: x=0, Y=0.0016, z=0
Rotation: x=90, y=0, z=0
Scale: x=0.04, y=0.04, z=0.04

UvMapQuad: 0.5, 0.5, 0.75, 0.75, 0.75, 0.5, 0.5, 0.75

</pre>

![action_sheep_ss_13_7.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/812ea55e-8b78-7d43-1937-81ec620ba4b6.jpeg)

ミニマップの修正が完了しました。
ステータスは以下のようになります。

![action_sheep_ss_13_8.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/30f2d6f1-25b5-ade1-f9a5-452cda2afe2c.jpeg)

<pre>

Batches: 155
Tris: 72.6k
Verts: 154.3k
SetPass calls: 46

</pre>

影の有無と比べると見劣りはしますが、それでも確実に描画ステータスが改善されています。



###**パーティクルのテクスチャアトラス化**
続いて、フォロワーのポップアップ中を表すために使用しているエフェクト（magic_ring_03）を修正します。
こちらは1つのエフェクトを表示するために3枚のテクスチャ画像と5つのマテリアルを利用している状態なため、これを1枚のテクスチャ画像と1つのマテリアルで同じようなエフェクトが表示できるようにします。

![AtlasPopupEffect.png](https://qiita-image-store.s3.amazonaws.com/0/239877/369ecf53-d687-17df-3546-d45e11e5d13e.png)

+ 上の画像をダウンロードして「AtlasPopupEffect」という名前でインポート
+ 新しいMaterial「PopupEffect」を作成
+ PopupEffectのシェーダーをParticles/Additiveに設定
+ ParticleTextureにAtlasPopupEffectを選択

![action_sheep_ss_13_10.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/373a0840-22d2-655b-1fba-1d15ba85f00e.jpeg)


+ magic_ring_03を構成するそれぞれのパーツ「01, 01_B, 02, 02_B, 03」について、ParticleSystemコンポーネント内のRendererモジュールを選択
+ Renderer内のMaterial部分に作成したPopupEffectを設定

![action_sheep_ss_13_11.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/2bc96669-954f-a901-773b-a961f88ebaaf.jpeg)


+ メインモジュール（オブジェクト名と同じ項目）の右横にある+ボタンからTextureSheetAnimationを選択
+ TextureSheetAnimationモジュール内のModelを「Grid」に、Tilesを「x=2, y=2」に設定

![action_sheep_ss_13_12.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/6252f1d6-7eb8-8bf4-2206-8c6421260189.jpeg)


TextureSheetAnimationは名前の通り、1枚のテクスチャ内で表示部分を切り替える設定です。

**参考：** [エフェクトのテクスチャのアトラス化とShurikenへの設定方法 ](https://www.cg-method.com/entry/2015/06/12/112117/)

+ FrameOverTimeをフラットに設定し、以下のようにそれぞれのパーツ毎に適用するテクスチャマップ番号を設定

<pre>

01:     0（4分割されたテクスチャの左上部分）
01_B:   0
02:     2（左下部分）
02_B:   2
03      1（右上部分）

</pre>

![action_sheep_ss_13_13.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/d2aaa3fc-3cbf-f010-9292-e7fa02047770.jpeg)

+ パーツ「02, 02_B」について、メインモジュールの「3D Start Size」にチェックを入れる
+ 新しく表示された設定項目を以下のように修正

![action_sheep_ss_13_9.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/635367e8-6d2d-ece2-cdfd-ae28e1ecd6cf.jpeg)

完成品がこちら……

![action_sheep_ss_13_14.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/5b6e1e9e-e66e-ae8a-7952-d24725196895.jpeg)

新しいエフェクトを使用した際の描画ステータスが以下になります。

![action_sheep_ss_13_15.jpg](https://qiita-image-store.s3.amazonaws.com/0/239877/feadbc7f-8442-754e-255a-6203ae87f116.jpeg)

<pre>

Batches: 148
Tris: 72.5k
Verts: 154.2k
SetPass calls: 33

</pre>

テクスチャとマテリアルを共有したことで環境の変更回数が少なくなり、SetPass callsを13減少させることができました。


###**メッシュ結合について**

ひつじコレクションでは行っていませんが、今回の修正に加えて複数オブジェクトのMeshを結合することでさらにレンダリング負荷を下げることができます。

その際には[「Mesh Baker」](https://assetstore.unity.com/packages/tools/modeling/mesh-baker-free-31895)というアセットがよく利用されますので、ご興味がありましたら下記参考サイトなどをぜひご覧くださいませ。

**参考：** [Mesh Bakerを使ってメッシュをまとめ、Draw Callsを1306から6にしてみた](http://kan-kikuchi.hatenablog.com/entry/Mesh_Baker) 



---
次のページに進む（現在作成中……）
[イントロダクションに戻る](https://qiita.com/YzRoid/items/8dfd6c168b916ac82a0d)
<BR>
<div><img src="http://unity-chan.com/images/imageLicenseLogo.png" alt="ユニティちゃんライセンス"><p>この作品は<a href="http://unity-chan.com/contents/license_jp/" target="_blank">ユニティちゃんライセンス条項</a>の元に提供されています</p></div>
<Br><Br>