質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

unity チュートリアルにあるハイライト(?)の作り方

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,803

score 1088

本来調べればわかるようなことなのかもしれませんが、知識不足というか単語不足というか
何の単語を入れて検索すればいいのかがまず分からなかったのでこちらで質問します。

実現したいこと

ゲームのチュートリアルでよく見かける、説明したいボタンや文字情報をハイライト表示させるために、周りを若干暗くさせて、その部分だけが明るく表示させる方法があると思います。
あれを実現させたいのですが、そもそもこのエフェクトの名前がわからなかったです。。。

考えられる方法

半透明のImageオブジェクトを4つ生成し、上側、左側、右側、下側から目標までを覆い、四角を作成する
→半透明なので、それぞれが重なるところと重ならないところで色の差が出来てしまう。

質問

1.そもそもこの表現方法は何というのですか?
2.できれば最適な実現方法があれば教えていただきたいです。

補足情報(FW/ツールのバージョンなど)

unity 2018.2.15f
CanvasはOverlayでuGUIを使っています

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

すみませんが、そのような表現を何と呼ぶのか、一般的な名称があるのかは情報を見つけられませんでした...

以前どこかのサイトでそんな表現を見かけたなと思い検索してみましたら、Unity UI:一部分だけ残してフェードアウトさせる - いんでぃーづが出てきました。全面を薄暗いImageで覆い、影響を及ぼしたくない部分だけステンシルを使って抜くというアプローチのようです。
ご質問者さんの案でも、下図のように4方向のImageが交差しないように配置すればいけそうに思いますが、不定形のオブジェクトにも対応するにはステンシル方式の方がいいかもしれませんね。

4分割方式

追記

ご参考までに、サーフェイスシェーダーにステンシル機能を追加して、どうなるか試してみました。後述しますが、Canvasの描画モードがScreen Space - Overlayだとうまくいかないのが難点ですね。
新規サーフェイスシェーダーを作って名前をCustom/StandardStencilとし、下記のようにステンシル用プロパティとステンシルブロックを追加しました。それ以外はデフォルトの状態から変わっていません。

Shader "Custom/StandardStencil"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0

        // ステンシル用プロパティを追加
        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        // ステンシルブロックを追加
        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

        half _Glossiness;
        half _Metallic;
        fixed4 _Color;

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

注目オブジェクト以外を暗くするための黒イメージを2枚用意しました。
Canvasの描画モードはScreen Space - Cameraとし、Plane Distanceは1にしてカメラの近くに描画されるようにします。
Screen Space - Overlayだと、3Dオブジェクトが描画された後にステンシルバッファがクリアされてしまうため、せっかく3Dオブジェクトがステンシルバッファをいじっても黒イメージが影響を受けなくなってしまうためです。

Ethanがシーン上の赤玉に触れると黒イメージ1が、青玉に触れると黒イメージ2が現れるようにして、各オブジェクトのステンシル設定を下記のようにすると...

  • Ethan...Custom/StandardStencil
    Stencil Comparison 8(常にステンシル通過)、Stencil ID 1(リファレンス値1)、Stencil Operation 2(ステンシルバッファにリファレンス値を書き込み)
  • 赤玉、青玉...Custom/StandardStencil
    Stencil Comparison 8(常にステンシル通過)、Stencil ID 2(リファレンス値2)、Stencil Operation 2(ステンシルバッファにリファレンス値を書き込み)
  • 黒イメージ1...UI/Default
    Stencil Comparison 6(ステンシル値とリファレンス値が不一致ならステンシル通過)、Stencil ID 1(リファレンス値1)、Stencil Operation 0(ステンシルバッファを変更しない)
  • 黒イメージ2...UI/Default
    Stencil Comparison 6(ステンシル値とリファレンス値が不一致ならステンシル通過)、Stencil ID 2(リファレンス値2)、Stencil Operation 0(ステンシルバッファを変更しない)

下図のように、赤玉に触れるとEthan以外が暗く、青玉に触れると赤玉・青玉以外が暗くなりました。

Ethan

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/12 10:58

    回答ありがとうございます!
    名称なかったですか・・・。

    ステンシルを使ったアプローチの方、見てみました。いい方法だとは思うんですが、今回uiだけではなく3dオブジェクトもハイライトしたいので少し難しいかもしれないです。。。
    もう少し他の方の回答を待ってみて、最適解がなければ4つのImageを交差しない方法で作っていこうと思います

    キャンセル

  • 2019/02/12 12:18

    おそらく3Dオブジェクトが混在していてもステンシル方式が通用しそうな気がしますが、3Dオブジェクト用のマテリアルはステンシル対応のものを自前で作成しなければならないかもしれませんね。
    もし4枚Image方式や他の方法で行き詰まってしまうようでしたら、再びステンシル方式を候補に入れてもいいかと思います。

    キャンセル

  • 2019/02/13 06:01

    3Dオブジェクトにステンシルプロパティを追加する方針を実験してみましたので追記します。本文中でも言及しましたが、Screen Space - Overlayだと3Dオブジェクトとの混在は難しそうでした。描画モードを変えても構わないなら、いんでぃーづさんのやり方が通用しそうです。

    キャンセル

  • 2019/02/13 21:57

    追記わざわざありがとうございます
    確かに3dオブジェクトでも実現できてますね、、
    参考にしながらもう少し思考してみたいと思います

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る