Unityでアウトライン（輪郭）を使う

# 目的
アウトラインをオブジェクトに近づいたら表示させるようにしたい

## 環境
Unity 2021.3.16f1
URP（多分URPじゃなくても動く）

## 必要なもの
・DOTween
・Quick Outline

https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676?locale=ja-JP

https://assetstore.unity.com/packages/tools/particles-effects/quick-outline-115488

## 実践
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/66970215-0ff8-4221-3810-d1a31393dd7a.png)
適当にハイライトさせたいオブジェクトを作成する

Interactオブジェクト　`空のオブジェクト` で追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/9085d0c9-8f22-731e-a3db-6a4bc92b11d3.png)

その子供に
Cube `3D オブジェクト → キューブ` で追加　
他のも同じように追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/0439b29b-a0d3-be45-fd03-0d29a9240d10.png)

こんな形に配置してみた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/ab6e0a3d-a8a1-1ac5-ea86-092137dca098.png)

ここで必要なのが親であるInteractオブジェクトには`Box Collider`コンポーネントを追加していること
そして`トリガーにする`にチェックをいれていること　
これによりコライダをトリガーにして行いたい処理が行える

そして作成したすべての`Cube`にインポートした`Outline`コンポーネントを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/def82a8c-05ec-56cd-0844-0a9797ca7bf2.png)

動作確認してみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/32d74fa0-8443-77f5-029a-96ec73ce5286.png)

アウトラインがちゃんと表示されたので次は範囲内に入ったらアウトラインを表示させてみる
このままだと無骨なのでDOTweenでフェード処理も作る

## コード
```C#:ObjectHighLight
using DG.Tweening;
using UnityEngine;

public class ObjectHighLight : MonoBehaviour
{
    [SerializeField] Color color;
    [SerializeField] private float fadeInTime = 1.0f;
    [SerializeField] private float fadeInAlpha = 1.0f;
    [SerializeField] private float fadeOutTime = 1.0f;
    [SerializeField] private float fadeOutAlpha = 0.0f;
    private Outline[] outline;

    private void Start()
    {
        outline = gameObject.GetComponentsInChildren<Outline>(); //Outlineが適用された子を取得
    }

    private void OnTriggerEnter(Collider other) //フェードイン
    {
        if (other.CompareTag("Player"))
        {
            foreach(var outline in outline) 
            {
                DOVirtual.Float(0f, fadeInAlpha, fadeInTime, fadeInAlpha => 
                {
                    color.a = fadeInAlpha;
                    outline.OutlineColor = color;
                });
            }
        }
    }

    private void OnTriggerExit(Collider other) //フェードアウト
    {
        foreach (var outline in outline)
        {
            DOVirtual.Float(1f, fadeOutAlpha, fadeOutTime, fadeOutAlpha => 
            {
                color.a = fadeOutAlpha;
                outline.OutlineColor = color;
            });
        }
    }
}
```

このスクリプトを親の`Interactオブジェクト`に追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/208e3a60-4abb-86c5-d141-81c166393a44.png)

そして`Cube`の`Outline Color`にあるアルファ値を0にしておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/f279d813-f371-d21e-7ccb-e389f5db9a6f.png)

## 完成
無事にフェードイン、フェードアウトできれば完成
![outline.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2170587/743b3410-7432-8a06-487d-40afe7028050.gif)

`OnTriggerStay`を使ってトリガー内にいるときは点滅させるというパターンも面白そうだな～と思いました