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

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

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

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

Q&A

解決済

1回答

389閲覧

ImageのFillを中央からの距離で行いたい

StellaSplitter

総合スコア37

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

0グッド

0クリップ

投稿2022/10/27 03:34

編集2022/10/27 03:45

前提

ImageのFillを中央からの距離で行いたいです。

実現したいこと

  • ImageのスプライトのFillを中央からの距離(円形)で行いたい

これを
イメージ説明
マテリアルを保ったままこうしたい
イメージ説明
内径(切り抜く大きさ)と外径(画像自体の大きさ)は時と場合によって変わるので予めテクスチャを加工しておく手段は使えません。
外径が500で内径が200だったり、外径が300で内径が183だったりします。

発生している問題・エラーメッセージ

MaskとUnmask( https://github.com/mob-sakai/UnmaskForUGUI )で画像の中央を切り落とそうとしましたが、Materialが設定されているとUnmaskが適用されません。

該当のソースコード

BurningPaper.shader

1// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' 2 3Shader "Custom/2D/Dissolve" 4{ 5 Properties { 6 [PerRendererData] _MainTex ("Main texture", 2D) = "white" {} 7 _DissolveTex ("Dissolution texture", 2D) = "gray" {} 8 _Threshold ("Threshold", Range(0., 1.01)) = 0. 9 } 10 11 SubShader { 12 13 Tags { "Queue"="Transparent" } 14 Blend SrcAlpha OneMinusSrcAlpha 15 16 Pass { 17 18 CGPROGRAM 19 #pragma vertex vert 20 #pragma fragment frag 21 22 #include "UnityCG.cginc" 23 24 struct v2f { 25 float4 pos : SV_POSITION; 26 float2 uv : TEXCOORD0; 27 }; 28 29 sampler2D _MainTex; 30 31 v2f vert(appdata_base v) { 32 v2f o; 33 o.pos = UnityObjectToClipPos(v.vertex); 34 o.uv = v.texcoord; 35 return o; 36 } 37 38 sampler2D _DissolveTex; 39 float _Threshold; 40 41 fixed4 frag(v2f i) : SV_Target { 42 float4 c = tex2D(_MainTex, i.uv); 43 float val = tex2D(_DissolveTex, i.uv).r; 44 45 c.a *= step(_Threshold, val); 46 return c; 47 } 48 ENDCG 49 } 50 } 51}

マテリアルの設定
Fillしたい画像の設定

試したこと

MaskとUnmask( https://github.com/mob-sakai/UnmaskForUGUI )で画像の中央を切り落とそうとしましたが、Materialが設定されているとUnmaskが適用されないようで困っています。
ImageのFillをコントロールすることで画像を任意の形に加工できることはわかりましたが、水平、垂直、Radial360、Radial180、Radial90の5種類しかないため画像の中央からの距離でfillをコントロールする(円形に切り抜く)ことができません。
Fillを中央からの距離で行う方法はないでしょうか。

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

Windows 11 21H2
Unity 2021.3.11f1 Personal

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

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

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

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

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

guest

回答1

0

自己解決

Shaderのほうにスクリプトから半径情報を与えてあげて、内側を描画しないようにすることで解決しました。

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Custom/2D/Dissolve" { Properties { [PerRendererData] _MainTex ("Main texture", 2D) = "white" {} _DissolveTex ("Dissolution texture", 2D) = "gray" {} _Threshold ("Threshold", Range(0., 1.01)) = 0. _InsideRadius ("Inside Radius", Range(0., 1.)) = 0. } SubShader { Tags { "Queue"="Transparent" } Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; }; sampler2D _MainTex; v2f vert(appdata_base v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.texcoord; return o; } sampler2D _DissolveTex; float _Threshold; float _InsideRadius; fixed4 frag(v2f i) : SV_Target { float4 c = tex2D(_MainTex, i.uv); float val = tex2D(_DissolveTex, i.uv).r; i.uv -= fixed2(0.5, 0.5); if (distance(i.uv, fixed2(0, 0)) < _InsideRadius / 2.) { discard; } c.a *= step(_Threshold, val); return c; } ENDCG } } }

投稿2022/10/27 04:43

StellaSplitter

総合スコア37

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問