そろそろShaderをやるパート40　カードがめくれる表現をDoTweenと組み合わせて作る

そろそろShaderをやります

そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。

という感じでやってます。

※初心者がメモレベルで記録するので
　技術記事としてはお力になれないかもしれません。

下準備

下記参考
そろそろShaderをやるパート1　Unite 2017の動画を見る(基礎知識～フラグメントシェーダーで色を変える)

デモ

カードを裏返すと柄が変わります。

Shaderサンプル

Shader "Custom/SwitchTexture"
{
    Properties
    {
        _BackTexture ("Back Texture", 2D) = "white" {}
        _FrontTexture ("Front Texture", 2D) = "white" {}
        [Toggle] _RenderSwitch("RenderSwitch", Float) = 0
    }

    SubShader
    {
        Pass
        {
            Tags
            {
                "RenderType"="Opaque"
            }
            
            Cull Off

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D  _FrontTexture;
            sampler2D  _BackTexture;
            float _RenderSwitch;
            
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
            
            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            v2f vert(appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                float4 frontCol = tex2D(_FrontTexture,i.uv);
                float4 backCol = tex2D(_BackTexture,i.uv);
                float4 finalCol = lerp(backCol,frontCol,_RenderSwitch);               
                return finalCol;
            }
            ENDCG
        }
    }
}

ShaderでBool値を使う

サンプル内の[Toggle] _RenderSwitch("RenderSwitch", Float) = 0
という部分でBool値としてFlootの値を利用しています。
Inspector上にもトグルとして出現します。

0か1かで処理を分岐させるときに便利です。
サンプル内ではlerpの補間値に渡すことでカードの絵柄を切り替える役割に利用しています。

【参考リンク】：そろそろShaderをやるパート12　線を描画してスクロールさせる

Script

先述のトグルをDoTweenによって任意のタイミングで切り替えることで
良い感じにアニメーションと組み合わせています。

using DG.Tweening;
using UnityEngine;

/// <summary>
/// カードの絵柄が変わるDoTweenアニメーション
/// </summary>
public class SwitchCardAnimation : MonoBehaviour
{
    [SerializeField] private GameObject card;

    void Start()
    {
        var m = card.GetComponent<MeshRenderer>().material;
        var t = card.transform;
        var propId = Shader.PropertyToID("_RenderSwitch");

        DOTween.Sequence()
            .Append(t.DOLocalRotate(new Vector3(0, 90, 0), 0.25f))
            .Append(m.DOFloat(1, propId, 0)) //ここでカードが切り替わる
            .Append(t.DOLocalRotate(new Vector3(0, 180, 0), 0.25f))
            .Join(t.DOPunchScale(t.localScale * 0.15f, 0.2f, 1))
            .Play();
    }
}