今回の作例
主にキャラクターがダメージを受けた際の演出イメージで作成しました。
事前準備・導入
作成環境:Unity2021.2.9f1
Editor:VisualStudio
下記をインストールしておく
C++でのゲーム開発・デスクトップ開発のコンポーネント
今回はUIEffect用のShaderのため、ビルドインシェーダを改良する形で編集を行う。
ビルドインシェーダダウンロード法
上記の記事に倣う形でUI-Defaultを複製、ファイル名・一行目のShader名をリネーム後
プロジェクトにドラッグアンドドロップで追加。
色収差・グリッチShader
完成版のShaderコード
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
Shader "UI/RGB"
{
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
_distance ("Distance", Float) = 0
_distancePower ("distancePower", Float) = 1
_FrameRate ("FrameRate", Range(0.1,30)) = 15
_Frequency ("Frequency", Range(0,1)) = 0.1
[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 One 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;
half4 mask : TEXCOORD2;
UNITY_VERTEX_OUTPUT_STEREO
};
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
float _UIMaskSoftnessX;
float _UIMaskSoftnessY;
//色収差のずらす距離
float _distance;
//色収差変化のスピード
float _distancePower;
//
float _FrameRate;
//ブロック
float _Frequency;
//ランダムな値を返す
float rand(float2 co) //引数はシード値と呼ばれる 同じ値を渡せば同じものを返す
{
return frac(sin(dot(co.xy, float2(12.9898, 78.233))) * 43758.5453);
}
//パーリンノイズ
float perlinNoise(fixed2 st)
{
fixed2 p = floor(st);
fixed2 f = frac(st);
fixed2 u = f * f * (3.0 - 2.0 * f);
float v00 = rand(p + fixed2(0, 0));
float v10 = rand(p + fixed2(1, 0));
float v01 = rand(p + fixed2(0, 1));
float v11 = rand(p + fixed2(1, 1));
return lerp(lerp(dot(v00, f - fixed2(0, 0)), dot(v10, f - fixed2(1, 0)), u.x),
lerp(dot(v01, f - fixed2(0, 1)), dot(v11, f - fixed2(1, 1)), u.x),
u.y) + 0.5f;
}
v2f vert(appdata_t v)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
float4 vPosition = UnityObjectToClipPos(v.vertex);
OUT.worldPosition = v.vertex;
OUT.vertex = vPosition;
float2 pixelSize = vPosition.w;
pixelSize /= float2(1, 1) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
OUT.texcoord = TRANSFORM_TEX(v.texcoord.xy, _MainTex);
OUT.mask = half4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));
OUT.color = v.color * _Color;
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
//ポスタライズ
float posterize1 = floor(frac(perlinNoise(_SinTime) * 10) / (1 / _FrameRate)) * (1 / _FrameRate);
float posterize2 = floor(frac(perlinNoise(_SinTime) * 5) / (1 / _FrameRate)) * (1 / _FrameRate);
//uv.x方向のノイズ計算 -0.1 < noiseX < 0.1
float noiseX = (2.0 * rand(posterize1) - 0.5) * 0.1;
//step(t,x) はxがtより大きい場合1を返す
float frequency = step(rand(posterize2), _Frequency);
noiseX *= frequency;
//uv.y方向のノイズ計算 -1 < noiseY < 1
float noiseY = 2.0 * rand(posterize1) - 0.5;
//グリッチの高さの補間値計算 どの高さに出現するかは時間変化でランダム
//float glitchLine1 = step(IN.texcoord.y - noiseY, rand(IN.texcoord));
float glitchLine1 = step(IN.texcoord.y - noiseY, rand(_distance) * (_distance * 100));
float glitchLine2 = step(IN.texcoord.y + noiseY, noiseY);
float glitch = saturate(glitchLine1 - glitchLine2);
//速度調整
IN.texcoord.x = lerp(IN.texcoord.x, IN.texcoord.x + noiseX, glitch);
//Round up the alpha color coming from the interpolator (to 1.0/256.0 steps)
//The incoming alpha could have numerical instability, which makes it very sensible to
//HDR color transparency blend, when it blends with the world's texture.
const half alphaPrecision = half(0xff);
const half invAlphaPrecision = half(1.0/alphaPrecision);
IN.color.a = round(IN.color.a * alphaPrecision)*invAlphaPrecision;
//色収差距離計算
_distance = cos(_Time.y * _distancePower) * _distance;
//赤色成分のUVベクトル作成
float2 redVector = float2(IN.texcoord.x + sin(_Time.y * _distancePower) * _distance, IN.texcoord.y + cos(_Time.y * _distancePower) * _distance);
//緑色成分のUVベクトル作成
float2 greenVector = float2(IN.texcoord.x + cos(-_Time.y * _distancePower) * _distance, IN.texcoord.y + sin(-_Time.y * _distancePower) * _distance);
//青色成分のUVベクトル作成
float2 brueVector = float2(IN.texcoord.x, IN.texcoord.y);
//赤色カラーベクトル作成
half4 redColor = tex2D(_MainTex, redVector);
//緑色カラーベクトル作成
half4 greenColor = tex2D(_MainTex, greenVector);
//青色カラーベクトル作成
half4 blueColor = tex2D(_MainTex, brueVector);
//RGB各カラーベクトルのそれぞれの成分とα合成したカラーベクトルを作成
half4 color = IN.color * half4(redColor.r, greenColor.g, blueColor.b, clamp( redColor.a + greenColor.a + blueColor.a, 0, 1) ) + _TextureSampleAdd;
#ifdef UNITY_UI_CLIP_RECT
half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
color.a *= m.x * m.y;
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
color.rgb *= color.a;
return color;
}
ENDCG
}
}
}解説
Properties UnityInspectorからShader内部のメンバー変数へアクセスするための入口
書き方の例
Properties
｛
変数名 ( "インスペクター表示名", 型名もしくは入力制限) = 初期値
｝ 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
_distance ("Distance", Float) = 0
_distancePower ("distancePower", Float) = 1
_FrameRate ("FrameRate", Range(0.1,30)) = 15
_Frequency ("Frequency", Range(0,1)) = 0.1
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
}Propertiesで宣言している変数はShaderPass内で宣言されている。
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
float _UIMaskSoftnessX;
float _UIMaskSoftnessY;
//色収差のずらす距離
float _distance;
//色収差変化のスピード
float _distancePower;
float _FrameRate;
//ブロック
float _Frequency;
今回編集したのはランダム値返却メソッド、パーリンノイズメソッド、
フラグメントメソッド部分です。
//ランダムな値を返す
float rand(float2 co)
{
~省略~
}
//パーリンノイズ
float perlinNoise(fixed2 st)
{
~省略~
}
//フラグメント
fixed4 frag(v2f IN) : SV_Target
{
~省略~
}ランダム値返却メソッド、パーリンノイズメソッド、下記フラグメントメソッド内グリッチ演出部分は下記のサイトを参考にしています。
//ポスタライズ
float posterize1 = floor(frac(perlinNoise(_SinTime) * 10) / (1 / _FrameRate)) * (1 / _FrameRate);
float posterize2 = floor(frac(perlinNoise(_SinTime) * 5) / (1 / _FrameRate)) * (1 / _FrameRate);
//uv.x方向のノイズ計算 -0.1 < noiseX < 0.1
float noiseX = (2.0 * rand(posterize1) - 0.5) * 0.1;
//step(t,x) はxがtより大きい場合1を返す
float frequency = step(rand(posterize2), _Frequency);
noiseX *= frequency;
//uv.y方向のノイズ計算 -1 < noiseY < 1
float noiseY = 2.0 * rand(posterize1) - 0.5;
//グリッチの高さの補間値計算 どの高さに出現するかは時間変化でランダム
//float glitchLine1 = step(IN.texcoord.y - noiseY, rand(IN.texcoord));
float glitchLine1 = step(IN.texcoord.y - noiseY, rand(_distance) * (_distance * 100));
float glitchLine2 = step(IN.texcoord.y + noiseY, noiseY);
float glitch = saturate(glitchLine1 - glitchLine2);
//速度調整
IN.texcoord.x = lerp(IN.texcoord.x, IN.texcoord.x + noiseX, glitch);色収差部分
まず色ずれを起こす距離を計算します。
Cosにシーン経過時間などを入れることにより
一定周期で色ずれを起こす向きを変えるようにしています。
cos(_Time.y * _distancePower) = -1 ~ 1の値
//色収差距離計算
_distance = cos(_Time.y * _distancePower) * _distance;求めた色ずれの距離をRGB別のベクトルを用意し合成しています。 RとGはそれぞれ反転する向きになるように合成しています。
Bはなにも追加で合成していません。
//赤色成分のUVベクトル作成
float2 redVector = float2(IN.texcoord.x + sin(_Time.y * _distancePower) * _distance, IN.texcoord.y + cos(_Time.y * _distancePower) * _distance);
//緑色成分のUVベクトル作成
float2 greenVector = float2(IN.texcoord.x + cos(-_Time.y * _distancePower) * _distance, IN.texcoord.y + sin(-_Time.y * _distancePower) * _distance);
//青色成分のUVベクトル作成
float2 brueVector = float2(IN.texcoord.x, IN.texcoord.y);
各RGBカラーようのベクトルを元にしたカラーを_MainTexから取得。
最終的な出力カラーベクトルとして
(赤色カラーベクトルのR要素,緑色カラーベクトルのG要素,青色カラーベクトルのB要素,各0<=RGBカラーベクトルのA要素の合成<=1)を作成する。
//赤色カラーベクトル作成
half4 redColor = tex2D(_MainTex, redVector);
//緑色カラーベクトル作成
half4 greenColor = tex2D(_MainTex, greenVector);
//青色カラーベクトル作成
half4 blueColor = tex2D(_MainTex, brueVector);
//RGB各カラーベクトルのそれぞれの成分とα合成したカラーベクトルを作成
half4 color = IN.color * half4(redColor.r, greenColor.g, blueColor.b, clamp( redColor.a + greenColor.a + blueColor.a, 0, 1) ) + _TextureSampleAdd;これにより色収差を表現できる。
色収差のイメージは光の三原色の図が個人的にはイメージするのに理解しやすい気がします。
元の色(白い部分)をRGB別でずらしている表示するイメージ
色収差・グリッチエフェクト再生用のスクリプト
完成版
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class TuchEffect : MonoBehaviour
{
[SerializeField] Image image;
Material material;
[SerializeField]
float power, tmpPower;
[SerializeField]
float sec;
[SerializeField]
[Range(0.1f, 30f)]
float frameRate;
[SerializeField]
[Range(0f, 1f)]
float frequency;
bool tucheFlag = false;
float subPower;
string rgbDistanceName = "_distance";
string frameRateName = "_FrameRate";
string frequencyName = "_Frequency";
// Start is called before the first frame update
void Start()
{
material = image.material;
if(material == null)
{
return;
}
if (material.HasProperty(rgbDistanceName))
{
//色収差距離初期化
material.SetFloat(rgbDistanceName, 0);
//フレームレート初期化
material.SetFloat(frameRateName, 0.1f);
//周波数初期化
material.SetFloat(frequencyName, 0f);
}
}
// Update is called once per frame
void Update()
{
if (material == null)
{
return;
}
//ダメージ演出秒数経過後
if (!tucheFlag)
{
//グリッチの初期化
material.SetFloat(frameRateName, 0.1f);
material.SetFloat(frequencyName, 0f);
return;
}
if (material.HasProperty(rgbDistanceName))
{
//グリッチ演出を徐々に弱める
tmpPower = Mathf.Max(tmpPower - (subPower * Time.deltaTime), 0f);
material.SetFloat(rgbDistanceName, tmpPower);
}
if(tmpPower <= 0f)
{
tucheFlag = false;
}
}
/// <summary>
/// ボタンが押された際に色収差・グリッチエフェクトを行う
/// </summary>
public void OnTup()
{
PlayEffect();
}
//エフェクト再生
public void PlayEffect()
{
if (material == null)
{
return;
}
if (material.HasProperty(rgbDistanceName))
{
tucheFlag = true;
//1sec毎の色収差距離減衰度を計算
subPower = power / sec;
//色収差距離の保持
tmpPower = power;
//色収差距離設定
material.SetFloat(rgbDistanceName, tmpPower);
//グリッチの設定
material.SetFloat(frameRateName, frameRate);
material.SetFloat(frequencyName, frequency);
}
}
}
完成版のスクリプトを、任意のオブジェクトへアタッチ。
ImageにRGBグリッチマテリアルを割り当てているImageコンポーネントを参照させてください。
Power:色収差の最大値
Sec:エフェクト再生時間
FrameRate:分割数
Frequency:周波数
スクリプトからShaderのPropertiesのパラメータをmaterial.setFloatなどを用いて操作しています。
UnityPackage
デモシーン
再生開始後、画面をタップすると演出再生が始まります。
参考サイト
HLSL Tools
【Unity】UIデザイナー向け！uGUIで色の加算をする方法
そろそろShaderをやるパート38 グリッチ表現
光の三原色
＝＝＝＝＝＝
更新2022.3.1 大枠記述
追記・UnityPackage追加
Comentarios