【unity实战】在 Unity 中实现卡牌翻转或者翻书的效果

最终效果

前言

注意，我这里只是作为参考，觉得使用shader会比较简单，其实实现方法还有很多，比如：

• 我们可以将背面和正面设置成不同的排序层，卡牌旋转到90度时，替换这两个排序
• 我们也可以在卡牌旋转到90度时，直接替换卡牌图片内容，替换成正面卡牌图片
• 等等

实战

1、素材

https://assetstore.unity.com/packages/2d/gui/card-shirts-lite-165698

2、这里准备正面和背面两张卡牌

将他们作为Card的子集，叠加显示

3、书写shader

实现背面卡牌不渲染正面，正面卡牌不渲染背面

Shader "Unlit/one-side"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        [Enum(UnityEngine.Rendering.CullMode)] _Cull("Cull", Float)=0
    }
    SubShader
    {
        Tags {"Queue"="Transparent" "RenderType"="Transparent"}
        Lighting Off ZWrite Off
        Cull [_Cull]

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

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

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
}

3、新增两个不渲染正面和不渲染背面的材质

4、挂载材质

现在我们只需要通过修改Card绕Y轴从0-180度旋转，就可以实现卡牌翻转的效果了

5、翻转卡牌

书写代码控制

using System.Collections;
using UnityEngine;

public class CardGO : MonoBehaviour
{
    // 表示卡牌是否翻转
    private bool flipped = false;
    private bool isRotating = false; // 防止旋转过程中重复触发

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space) && !isRotating)
        {
            // 如果按下空格键，调用 Flip 方法翻转卡牌 
            Flip();
        }
    }

    // 翻转卡牌
    private void Flip()
    {
        flipped = !flipped;

        StartCoroutine(RotateCard(flipped ? 180f : 0f, 0.25f));
    }

    // 协程：平滑旋转卡牌
    private IEnumerator RotateCard(float targetYAngle, float duration)
    {
        isRotating = true;
        Quaternion startRotation = transform.rotation;
        // 确保角度在 [0, 360) 范围内
        targetYAngle = Mathf.Repeat(targetYAngle, 360f);
        Quaternion targetRotation = Quaternion.Euler(0, targetYAngle, 0);
        float elapsedTime = 0f;

        while (elapsedTime < duration)
        {
            // 使用 Lerp 插值计算当前旋转角度
            transform.rotation = Quaternion.Lerp(startRotation, targetRotation, elapsedTime / duration);
            elapsedTime += Time.deltaTime;
            yield return null; // 等待下一帧
        }

        // 确保最终旋转角度准确
        transform.rotation = targetRotation;
        isRotating = false;
    }
}

也可以直接使用DoTween简单的实现该效果，DoTween的使用介绍具体可以参考：【推荐100个unity插件之2】 DoTween动画插件的安装和使用整合（最全）

// 私有方法 Flip，用于翻转卡牌
private void Flip()
{
    // 切换 flipped 的值（true 变 false，false 变 true）
    flipped = !flipped;

    // 使用 DoRotate 方法在 0.25 秒内旋转卡牌
    // 如果 flipped 为 true，绕 Y 轴旋转 180 度（背面朝上）
    // 如果 flipped 为 false，绕 Y 轴旋转 0 度（正面朝上）
    transform.DoRotate(new Vector3(0, flipped ? 180f : 0, 0), 0.25f);
}

挂载脚本

6、效果

专栏推荐

完结

好了，我是向宇，博客地址：https://xiangyu.blog.csdn.net，如果学习过程中遇到任何问题，也欢迎你评论私信找我。

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！