Unity UGUI 实现翻牌效果（shader实现）

最新推荐文章于 2024-06-25 21:32:39 发布
最新推荐文章于 2024-06-25 21:32:39 发布
阅读量3.9k 收藏 3
点赞数 1
分类专栏： 渲染/Shader 文章标签： 翻牌 shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuming2016/article/details/90545169
版权

先看效果。因为没做成gif格式，就分别取牌旋转0,45,135,180 这4张图，表示旋转。

 

 

实现思路

1.牌的两面是两张图，分别用两个UGUI的Image控件。这两个挂在一个父节点下，并且位置重合。

2.修改UIGUI的Image的Shader。牌的正面用的shader进行背面剔除，牌的背面用的shader进行正面剔除。也就是说这两张图片用的shader是经过修改后的shader。

Cull Back 和 Cull Front

3.旋转父节点，实现翻牌效果

完整shader下载 下载

 

1024路漫漫
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
unity ASE连的Shader制作的卡牌扫描效果详细的可更改参数已经截图,可以更换主图，扫描网格，扫描线效果移动端可用，Unity2020版本制作。
qq_36494783的博客
06-01 813
unity ASE连的Shader制作的卡牌扫描效果详细的可更改参数已经截图,可以更换主图，扫描网格，扫描线效果移动端可用，Unity2020版本制作。
Unity之UGUI实现滑动翻页效果
41814169的博客
03-29 8002
这个问题真的是老生常谈的事情了，不过在这里还是要说一下，以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngi...
【Unity】Shader之3D翻页效果——Plane实现翻页效果
两水先木示的博客
10-26 2388
开头声明转载出处：https://blog.csdn.net/qq_39741605/article/details/80678229感谢作者！ 效果图： 原理：Shader顶点动画 在顶点着色器进行对顶点Y值的偏移（使用了Sin函数模拟翻页时产生的弯曲），对顶点X值的偏移实现纸张在翻页时的收缩（一般是不用收缩），最后对顶点进行围绕Z轴旋转实现Plane翻页（Z轴是本例的旋转轴，请...
Unity3d实现卡牌的搓牌
08-06
此Demo是笔者自己写的一个搓牌的Demo,如果又想学习的同学可以参考下!
unity实现翻牌记忆匹配小游戏
最新发布
m0_62670368的博客
06-25 1060
游戏面板上有一定数量（偶数个）的方块，每个方块都有一个特定的图标或文字符号。 游戏开始时，所有方块都是背面朝上隐藏的。 玩家需要点击两个方块来翻开它们。如果这两个方块的标记相同，则这两个方块会保持翻 开状态；否则，在短暂展示后自动翻回来。 当所有方块都被成功匹配后，游戏结束。
Unity 之 制作翻牌效果
陈言必行 -- Unity游戏开发领域优质博主
01-10 2836
Unity 之 制作翻牌翻书效果
基于UGUI的卡牌效果Shader
qq_28580731的博客
06-02 1472
废话不多说，先上效果图，因为博主美术水平有限，只做了很简单的扰动加流动。 此shader是基于UGUI上使用的shader,创建材质，拖到sprite的material上面即可。因为博主发现网上很多卡牌shader都是在面片等模型上面，如果一些不太懂shader的人来使用可能不会把他转换到UGUI的sprite上进行使用。那么我们先看下shader的属性图块: 可以看到，基本的都带有扰...
记忆翻牌游戏——使用unity完成的2D游戏
Y2807593076的博客
09-28 996
在这一篇博客中，我将介绍如何使用unity以及Entity-Component-System (ECS)和Model-View-Controller (MVC)概念来制作一个简单的2D游戏——记忆翻牌游戏。在这一个过程中，我们将会了解游戏循环的基本原理，掌握常见游戏事件的使用及其执行顺序，学会使用unity的简单操作与编程，掌握游戏世界的基本概念。同时还对ECS以及MVC概念有一定的深入了解。好啦，在前面各种基础知识的了解下，我们可以开始制作我们的2D小游戏啦。
Unity之UGUI翻页效果
41814169的博客
12-13 1128
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using System; public class PageView : MonoBehaviour, IBeginD...
Unity UGUI 流光特效Shader源码。
05-15
本资源提供的是一套Unity UGUI的流光特效Shader源码，用于帮助开发者实现自定义的UI元素动态效果。Shader在图形渲染中扮演着关键角色，它控制着物体表面颜色、光照、纹理等视觉属性。在Unity中，Shader语言通常使用...
Unity UGUI实现滑动翻页效果
08-19
Unity UGUI 实现滑动翻页效果 Unity UGUI 是 Unity 游戏引擎中的一种用户界面系统，提供了许多实用的功能来帮助开发者快速构建用户界面。滑动翻页效果是 UGUI 中的一种常见效果，通过滑动手势来翻页，非常适合移动...
Unity3D利用DoTween实现卡牌翻转效果
08-26
主要为大家详细介绍了Unity3D利用DoTween实现卡牌翻转效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
cocos creater +js shader 实现搓牌效果，cocoscreater 版本1.9.3
03-21
cocos creater +js shader 实现搓牌效果，cocoscreater 版本1.9.3版本可用，
Unity UGUI实现简单拖拽图片功能
08-19
Unity UGUI实现简单拖拽图片功能 在 Unity 中实现拖拽图片功能是非常常见的需求，特别是在制作游戏、交互式应用程序时。在本文中，我们将详细介绍如何使用 Unity UGUI 实现简单拖拽图片功能。 UGUI 坐标系统 -----...
Unity攻击范围光圈Shader实现(UGUI)
05-19
在Unity游戏开发中，Shader是实现复杂视觉效果的关键工具，特别是在UGUI（Unity Graphical User Interface）系统下。Shader能够自定义渲染过程，为UI元素赋予动态和交互性。本教程将聚焦于如何使用Shader在UGUI环境...
Unity UGUI实现卡片椭圆方向滚动
08-26
Unity UGUI实现卡片椭圆方向滚动是指在 Unity 游戏引擎中使用 UGUI 组件实现卡片椭圆方向滚动效果的技术。这种效果在游戏、育成类应用程序中非常常见，能够为用户提供更加直观和交互的体验。 UGUI 卡片椭圆方向...
【Unity3d Shader】ugui image的双面渲染
PangNanGua的专栏
08-05 1697
最近在做一款卡牌游戏，需要模拟类型扑克牌的运动动画，运动过程中可能显示牌的正面，也可能显示背面。 那么需求来了，要实现一个支持双面渲染的shader， 效果如下：转动过程中自动切换牌的正反面。 核心思想如下： frag()函数里面传入一下VFACE if (vface > 0) 渲染正面; else 渲染背面; 核心代码如下： fixed4 frag(v2...
Unity中实现UI翻转
L的博客
04-24 5114
一：效果演示 二：使用 FlipType：翻转类型(水平翻转、竖直翻转、水平竖直翻转) 三：为什么不使用将Scale设置为-1 将Scale的x、y设置为-1也可以实现翻转的效果，但是这样还会影响到子物体以及animation，所以最佳的方法是修改图片的显示，我们可以继承UGUI提供的网格效果基类BaseMeshEffect修改网格顶点去实现翻转效果 四：代码实现 using UnityEngine; using UnityEngine.UI; using System.Collecti
Unity2d收金币特效及卡片翻转demo
天道酬勤
02-08 1814
一、效果图 1、收集金币效果（可根据需求自行更改） 2、翻页效果（可自行改成搓牌效果【支持4边】） 二、脚本及绑定对象 收集金币需要创建金币的预制体 using System.Collections; using System.Collections.Generic; using UnityEngine; using System; using DG.Tweening; using UnityEngine.UI; /// <summary> /// 特效管理 /// </summary
unity ugui实现图片轮播
06-01
要在Unity中使用UGUI实现图片轮播，你可以按照以下步骤进行： 1. 首先，在Unity中创建一个空对象，命名为“ImageSlider”或者其他你喜欢的名字。 2. 在这个空对象下创建一个UGUI的Image组件作为你的背景图，并设置好你需要的背景图片。 3. 在ImageSlider下创建一个Scroll View对象，并将其Rect Transform的Anchor Presets设置为Stretch-All，并设置宽高和位置。 4. 在Scroll View下创建一个Viewport对象，并将其Rect Transform Anchor Presets设置为Stretch-All，并设置宽高和位置。 5. 在Viewport下创建一个Content对象，并将其Rect Transform Anchor Presets设置为Top-Left，并设置宽高和位置。 6. 在Content下创建多个Image对象，每个Image对象代表一张图片，并设置宽高和位置。 7. 在Content下创建一个Horizontal Layout Group组件，并将其Child Alignment设置为UpperLeft，并勾选Child Force Expand和Child Force Width。 8. 在每个Image对象中设置你需要的图片。 通过以上步骤，你就可以实现一个简单的图片轮播了。如果你需要自动轮播功能，你可以添加一个Slider组件，并在Update函数中改变Content的anchoredPosition，以此实现自动轮播。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值