7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Unityでアウトライン(輪郭)を使う

Last updated at Posted at 2023-01-30

目的

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

環境

Unity 2021.3.16f1
URP(多分URPじゃなくても動く)

必要なもの

・DOTween
・Quick Outline

実践

image.png
適当にハイライトさせたいオブジェクトを作成する

Interactオブジェクト 空のオブジェクト で追加
image.png

その子供に
Cube 3D オブジェクト → キューブ で追加 
他のも同じように追加
image.png

こんな形に配置してみた
image.png

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

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

image.png

動作確認してみる

image.png

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

コード

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

そしてCubeOutline Colorにあるアルファ値を0にしておく

image.png

完成

無事にフェードイン、フェードアウトできれば完成
outline.gif

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

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?