We become indebted to.
Currently, we are in the process of creating a UI screen, but we are thinking of a visual effect for displaying the button that is pressed by the user with more emphasis.
It is a production performed with the button of the following Gif video
・ The button expands and contracts periodically
・ The image shining on the button flows from left to right
Of the above two points, the former could be achieved by scaling the scale using Dotween.
However, I am bothered by the way the glowing image on the button scrolls.
I didn't know what to call this expression, and I couldn't find the information I was looking for, so if anyone knows about this expression technique, I would appreciate any hints about the approach.
-Place a white diagonal image on top and scroll left or right
Rather than shining inside the button, it looks unnatural as if the texture is crossing from the outside of the button
・ Try a test to display another image based on the built-in shader
The button image is sliced, or the display is strange.
Texture used
If i try adding the above image to AddTexture of Material with Shader applied
The image to put on top collapses
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
Shader "Custom/Twinkle GUI"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_AddTex ("Add 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
[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_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ 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
};
sampler2D _MainTex;
sampler2D _AddTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
v2f vert (appdata_t v)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID (v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO (OUT);
OUT.worldPosition = v.vertex;
OUT.vertex = UnityObjectToClipPos (OUT.worldPosition);
OUT.texcoord = TRANSFORM_TEX (v.texcoord, _MainTex);
OUT.color = v.color * _Color;
return OUT;
}
fixed4 frag (v2f IN): SV_Target
{
half4 color = (tex2D (_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
half4 color2 = (tex2D (_AddTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
#ifdef UNITY_UI_CLIP_RECT
color.a * = UnityGet2DClipping (IN.worldPosition.xy, _ClipRect);
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a-0.001);
#endif
return color2;// Display only the textures that will be posted for testing
}
ENDCG
}
}
}
If i have any wisdom, thank you.
-
Answer # 1
-
Answer # 2
Animated GIF should be fine.
Related articles
- unity how to attach a large number of images
- unity - attack se is played by pressing the button on the result screen
- make images and text transparent after processing in unity
- unity - i want to move the enemy in the direction i am facing with the rigidbody
- unity - want to change the button image on the screen by acquiring the image of the object in the list
- unity - i want to direct the spotlight in the direction (up and down)
- c # - [unity 3d] i want to match the movement direction of the thirdperson player with the camera direction
- c # - [unity 2d] i want to fire a bullet in the direction of the enemy
- unity - cannot add images or scripts
- c # - [unity] i want to push the button attached to the dynamically generated prefab to destroy another dynamically generated pr
- c # - wait for input until unity button is pressed
- i want to load multiple images with resourcesload () [unity, c #]
- unity3d smoothly change the direction of characters
- unity - the player's bullets fly back, the direction does not change
- c # - i want to play the animation by pressing the [unity] button
- [unity] how to select ui button when ui button is activated/deactivated
- unity ui: button does not respond when clicked
- unity2d - 2d unity game button display hiding does not work
- c# - navigation setting of button does not work well in unity ui
- python - you may need to restart the kernel to use updated packages error
- dart - flutter: the instance member'stars' can't be accessed in an initializer error
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- javascript - how to check if an element exists in puppeteer
- sh - 'apt-get' is not recognized as an internal or external command, operable program or batch file
- i want to check the type of a shell script variable
- i want to call a child component method from a parent in vuejs
I wonder what this glossy expression is ... I'm sorry, but I don't understand the general term.
As you say,
texcoord
I think that if I sample the texture using, it will look bad due to Slice.As described below,
_AddTex
As the sampling position ofworldPosition
Why not try using?The appearance of the offset operation is shown below. The Wrap Mode of glossy texture is set to Clamp.
worldPosition
One of the harmful effects of using is that the way the gloss is applied changes depending on the position of the button on the screen. You may need to make some adjustments such as adjusting the Offset according to the coordinates of the button on the script side.If you have a small number of buttons, you may want to create a material object for each button and control the Offset individually, but if you have a large number of buttons, it is more efficient to give the shift amount in MaterialPropertyBlock. It may be.
Alternatively, I think it is a good idea to allow gloss position to change depending on the button position, and use a gloss texture that will not break even if Wrap Mode is Repeat.
For example, if you use a glossy texture as shown below (it may look white on StackOverflow, I'm sorry) ...
It will look as if the gloss passes through the entire world space as shown below.