Q&A
本来調べればわかるようなことなのかもしれませんが、知識不足というか単語不足というか
何の単語を入れて検索すればいいのかがまず分からなかったのでこちらで質問します。
###実現したいこと
ゲームのチュートリアルでよく見かける、説明したいボタンや文字情報をハイライト表示させるために、周りを若干暗くさせて、その部分だけが明るく表示させる方法があると思います。
あれを実現させたいのですが、そもそもこのエフェクトの名前がわからなかったです。。。
考えられる方法
半透明のImageオブジェクトを4つ生成し、上側、左側、右側、下側から目標までを覆い、四角を作成する
→半透明なので、それぞれが重なるところと重ならないところで色の差が出来てしまう。
質問
1.そもそもこの表現方法は何というのですか？
2.できれば最適な実現方法があれば教えていただきたいです。
補足情報（FW/ツールのバージョンなど）
unity 2018.2.15f
CanvasはOverlayでuGUIを使っています
回答1件
0
ベストアンサー
すみませんが、そのような表現を何と呼ぶのか、一般的な名称があるのかは情報を見つけられませんでした...
以前どこかのサイトでそんな表現を見かけたなと思い検索してみましたら、Unity UI：一部分だけ残してフェードアウトさせる - いんでぃーづが出てきました。全面を薄暗いImageで覆い、影響を及ぼしたくない部分だけステンシルを使って抜くというアプローチのようです。
ご質問者さんの案でも、下図のように4方向のImageが交差しないように配置すればいけそうに思いますが、不定形のオブジェクトにも対応するにはステンシル方式の方がいいかもしれませんね。
#追記
ご参考までに、サーフェイスシェーダーにステンシル機能を追加して、どうなるか試してみました。後述しますが、Canvasの描画モードがScreen Space - Overlayだとうまくいかないのが難点ですね。
新規サーフェイスシェーダーを作って名前をCustom/StandardStencilとし、下記のようにステンシル用プロパティとステンシルブロックを追加しました。それ以外はデフォルトの状態から変わっていません。
ShaderLab
1Shader "Custom/StandardStencil" 2{ 3 Properties 4 { 5 _Color ("Color", Color) = (1,1,1,1) 6 _MainTex ("Albedo (RGB)", 2D) = "white" {} 7 _Glossiness ("Smoothness", Range(0,1)) = 0.5 8 _Metallic ("Metallic", Range(0,1)) = 0.0 9 10 // ステンシル用プロパティを追加 11 _StencilComp ("Stencil Comparison", Float) = 8 12 _Stencil ("Stencil ID", Float) = 0 13 _StencilOp ("Stencil Operation", Float) = 0 14 _StencilWriteMask ("Stencil Write Mask", Float) = 255 15 _StencilReadMask ("Stencil Read Mask", Float) = 255 16 } 17 SubShader 18 { 19 Tags { "RenderType"="Opaque" } 20 LOD 200 21 22 // ステンシルブロックを追加 23 Stencil 24 { 25 Ref [_Stencil] 26 Comp [_StencilComp] 27 Pass [_StencilOp] 28 ReadMask [_StencilReadMask] 29 WriteMask [_StencilWriteMask] 30 } 31 32 CGPROGRAM 33 // Physically based Standard lighting model, and enable shadows on all light types 34 #pragma surface surf Standard fullforwardshadows 35 36 // Use shader model 3.0 target, to get nicer looking lighting 37 #pragma target 3.0 38 39 sampler2D _MainTex; 40 41 struct Input 42 { 43 float2 uv_MainTex; 44 }; 45 46 half _Glossiness; 47 half _Metallic; 48 fixed4 _Color; 49 50 // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader. 51 // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing. 52 // #pragma instancing_options assumeuniformscaling 53 UNITY_INSTANCING_BUFFER_START(Props) 54 // put more per-instance properties here 55 UNITY_INSTANCING_BUFFER_END(Props) 56 57 void surf (Input IN, inout SurfaceOutputStandard o) 58 { 59 // Albedo comes from a texture tinted by color 60 fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; 61 o.Albedo = c.rgb; 62 // Metallic and smoothness come from slider variables 63 o.Metallic = _Metallic; 64 o.Smoothness = _Glossiness; 65 o.Alpha = c.a; 66 } 67 ENDCG 68 } 69 FallBack "Diffuse" 70}
注目オブジェクト以外を暗くするための黒イメージを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以外が暗く、青玉に触れると赤玉・青玉以外が暗くなりました。
投稿2019/02/11 22:09
編集2019/02/12 20:57
総合スコア10807
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/12 01:58
2019/02/12 03:18
2019/02/12 21:01
2019/02/13 12:57