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

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

新規登録して質問してみよう
ただいま回答率
85.51%

Q&A

解決済

1回答

3558閲覧

UnityでSpriteを使って一部を透明化する方法

apple_pie

総合スコア25

0グッド

0クリップ

投稿2017/07/13 08:17

最近、シーンチェンジを実装するために基礎となる画像をSpriteを用いて一部透明化しようと考えたのですが、当たり前ですが単純に配置しても基礎画像が表示されてしまいます。(以下参考画像ご参照ください)

そこで質問なのですが、Spriteを用いて基礎となる画像のみを一部透明化することは可能でしょうか?
また、可能であればどのような方法で実装するのが良いのでしょうか・・・

Hierarchy
イメージ説明
参考画像
イメージ説明

開発環境
Unity 5.6.2f1

不足情報等ありましたらご連絡いただけると幸いです

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下図のような、アルファチャンネル付き基礎画像をご用意できるのであれば話は単純かと思いますが、

アルファチャンネル付き画像の例
アルファチャンネル付き画像の例

さもなければ、指定した色を抜くためのカスタムマテリアルを用意する必要があるかと思います。
ダウンロードアーカイブからビルトインシェーダーをダウンロードし、「DefaultResourcesExtra/UI/UI-Default.shader」をコピーして内容を下記のように改造してみました。

Shader "UI/ChromaKey" // 名前を変更 { Properties { [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {} _Color ("Tint", Color) = (1,1,1,1) _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 _ColorMask ("Color Mask", Float) = 15 _KeyColor ("Key Color", Color) = (0,1,0,1) // 追加 : 抜きたい色 _KeyThreshold ("Key Threshold", Range (0.0, 1.0)) = 0.75 // 追加 : ピクセルRGBと抜き色RGBの内積が閾値以上なら透明にする _KeySharpness ("Key Sharpness", Range (1.0, 256.0)) = 8.0 // 追加 : 値を大きくするほどシャープに抜く [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0 } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" } Stencil { Ref [_Stencil] Comp [_StencilComp] Pass [_StencilOp] ReadMask [_StencilReadMask] WriteMask [_StencilWriteMask] } Cull Off Lighting Off ZWrite Off ZTest [unity_GUIZTestMode] Blend SrcAlpha OneMinusSrcAlpha ColorMask [_ColorMask] Pass { Name "Default" CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 2.0 #include "UnityCG.cginc" #include "UnityUI.cginc" #pragma multi_compile __ UNITY_UI_ALPHACLIP struct appdata_t { float4 vertex : POSITION; float4 color : COLOR; float2 texcoord : TEXCOORD0; UNITY_VERTEX_INPUT_INSTANCE_ID }; struct v2f { float4 vertex : SV_POSITION; fixed4 color : COLOR; float2 texcoord : TEXCOORD0; float4 worldPosition : TEXCOORD1; UNITY_VERTEX_OUTPUT_STEREO }; fixed4 _Color; fixed4 _TextureSampleAdd; float4 _ClipRect; fixed4 _KeyColor; // 追加 float _KeyThreshold; // 追加 float _KeySharpness; // 追加 v2f vert(appdata_t IN) { v2f OUT; UNITY_SETUP_INSTANCE_ID(IN); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT); OUT.worldPosition = IN.vertex; OUT.vertex = UnityObjectToClipPos(OUT.worldPosition); OUT.texcoord = IN.texcoord; OUT.color = IN.color * _Color; return OUT; } sampler2D _MainTex; fixed4 frag(v2f IN) : SV_Target { half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color; color.a *= pow(1.0 - clamp((dot(normalize(color.rgb), normalize(_KeyColor.rgb)) - _KeyThreshold) / (1.0 - _KeyThreshold), 0.0, 1.0), _KeySharpness); // 追加 : RGBを正規化し、内積を_KeyThreshold〜1.0→1.0〜0.0にし、_KeySharpness乗してアルファに掛ける color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect); #ifdef UNITY_UI_ALPHACLIP clip (color.a - 0.001); #endif return color; } ENDCG } } }

これを使用したマテリアルを作成し、ImageオブジェクトのImageコンポーネントのMaterialをそれに差し替えると下図のようになりました。こんな方法でいかがでしょうか?

実行図

投稿2017/07/15 20:19

Bongo

総合スコア10807

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

apple_pie

2017/07/16 02:30

ご回答ありがとうございます。 無事実装することができました。 アルファチャンネルについては勉強しようかと思います。 本当にありがとうございました 
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問