먼저 잘한 것부터 시작하세요.

개시하다

RPG 등 게임에서 괴물이 죽었을 때 모래처럼 사라지는 멋진 공연을 종종 볼 수 있었고, 스크레이퍼로 그 공연을 만들어 봤다.

개발 환경

Unity2018.3.0f2

Windows10

실제 동작 확인

안드로이드 갤럭시s6edge를 통해 확인.

※ iOS가 없어 iOS가 검증되지 않았습니다.양해 부탁드립니다.

VanishingShader

이것은 이번에 만든 면도기의 전선이다.
사라지게 하는 차폐물이기 때문에 그렇게 명명했다VanishingShader.
VanishingShader.

Shader "Custom/VanishingShader"
{
    Properties
    {
        _MainTex ("Source", 2D) = "white" {}
        _StrengthX("StrengthX",Float) = 0
        _StrengthY("StrengthY",Float) = 0
        _Alpha("Alpha",Range(0,1)) = 1
    }

    SubShader
    {
        Blend SrcAlpha OneMinusSrcAlpha
        ZWrite Off
        Fog { Mode Off }
        Tags { "Queue" = "Transparent" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _StrengthX;
            float _StrengthY;
            float _Alpha;

            float rand(float2 co)
            {
                return frac(sin(dot(co.xy, float2(12.9898, 78.233))) * 43758.5453);
            }

            fixed4 frag (v2f_img i) : SV_Target
            {
                float r = rand(i.uv);
                float2 uv = i.uv + r * float2(_StrengthX, -_StrengthY);
                fixed4 c = tex2D(_MainTex, uv );
                c.a *= _Alpha;
                return c;
            }
            ENDCG
        }
    }
}

해설

제가 페이지 번호를 설명해 드릴게요.
우선 Properties부터 시작해서 이 속성들이 나옵니다.
조립품부터 만지작거리다.

    Properties
    {
        _MainTex ("Source", 2D) = "white" {}
        _StrengthX("StrengthX",Float) = 0
        _StrengthY("StrengthY",Float) = 0
        _Alpha("Alpha",Range(0,1)) = 1
    }

_Source: 텍스쳐를 지정합니다._StrengthX:0이면 아무 효과가 없어요.값이 클수록 가로가 모래로 변합니다._StrengthY:0이면 아무 효과가 없어요.값이 클수록 수직이 모래화됩니다._Alpha:0이면 투명합니다.값이 1이고 불투명합니다.

정점 차광기 및 세그먼트 차광기 지정하기

#pragma vertex vert_img
#pragma fragment frag

이 부분에서 정점 음영vert_img에 세그먼트 음영frag을 지정했다.vert_img는 구축 내의 정점 음영선이다.
파일에 컴파일 변수UnityCG.cginc와 조수 함수(조수 함수)가 정의되어 있습니다.

#include "UnityCG.cginc"

이렇게 정의하면 사용할 수 있다.
이번에는 이미 정의된 정점 음영을 사용했기 때문에 음영선을 쓴 코드량도 줄어들었다
실제 정의를 인용하는 것은 이렇다.

struct appdata_img
{
    float4 vertex : POSITION;
    half2 texcoord : TEXCOORD0;
    UNITY_VERTEX_INPUT_INSTANCE_ID
};

v2f_img vert_img( appdata_img v )
{
    v2f_img o;
    UNITY_INITIALIZE_OUTPUT(v2f_img, o);
    UNITY_SETUP_INSTANCE_ID(v);
    UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);

    o.pos = UnityObjectToClipPos (v.vertex);
    o.uv = v.texcoord;
    return o;
}

그리고 사이다를 모래로 만드는 주요 부분은 여기에 있다.

float r = rand(i.uv);
float2 uv = i.uv + r * float2(_StrengthX, -_StrengthY);
fixed4 c = tex2D(_MainTex, uv );

UV를 임의로 분리하기
모래 같은 느낌을 준다.
rand에 관해서는 여기임의 값을 반환하는 함수 on GLSL를 참고했습니다.

텍스쳐 설정 정보

Texture 설정WrapMode은 Clamp입니다.Repeat위쪽으로 이동하면 모래가 아래쪽으로 나와요.
이상해 보여요.

재료 생성하기

재료를 생성하고 섀도우Custom/VanishingShader를 선택합니다.

컨트롤러

애니메이션에서 소재의 섀도우 매개변수를 조작할 수 있습니다.
애니메이션을 위한 섀도우 매개 변수 제어
컨트롤러 구성 요소를 만듭니다.
VanishingShaderController.cs

using UnityEngine;

[ExecuteInEditMode]
public class VanishingShaderController : MonoBehaviour
{
    [SerializeField] float strengthX = 0f;
    [SerializeField] float strengthY = 0f;
    [SerializeField] float alpha = 1f;
    [SerializeField] Material material;

    void Update()
    {
        UpdateMaterial();
    }

    void UpdateMaterial()
    {
        if (material == null) { return; }

        material.SetFloat("_StrengthX", strengthX);
        material.SetFloat("_StrengthY", strengthY);
        material.SetFloat("_Alpha", alpha);
    }
}

인스펙터는 이런 느낌이에요.

부접 소재

UGUI의 Image와 VanishingShaderController의 Material에 자료를 첨부합니다.

애니메이션으로 구성 요소를 제어하는 색인기로 노출된 값을 시험해 보세요.

이런 느낌으로 컨트롤StrengthY(또는 X)과Alpha하면 조정이 가능합니다.

프로젝트 데이터

이번에 만든 프로젝트를 지허브에 올렸어요.
자유롭게 사용하세요.
https://github.com/gingerbread4/VanishingShader

총결산

어때?제작된 면도기는 간단하지만,
사이다가 모래처럼 사라지는 것 같아.
RPG 등은 괴물이 죽는 공연에 쓸 수 있잖아요.

과제.

자세히 보면 Image의 경계에서 살짝 Image 위로 모래로 변하는 픽셀이 이미 간파되었다는 것을 알 수 있을 것 같다.투명해지면 조금 헷갈릴 것 같은데 별로 안 좋아 보여요.

사이트 축소판 그림

섀도우 참조

https://docs.unity3d.com/ja/current/Manual/SL-Reference.html

임의 값을 반환하는 함수 on GLSL

https://qiita.com/shimacpyon/items/d15dee44a0b8b3883f76

고블린의 이미지

http://lightningseraph.tumblr.com/Resources