[Unity3D]利用DoTween制作卡牌翻转的效果

1. 卡牌翻转效果

利用Unity的UGUI制作了2D卡牌翻转的效果,如果是sprite对象的话,原理应该也是一样的,以下是效果图


图1 卡牌翻转效果

2. 关于DoTween

DoTween是一款十分强大且好用的动画效果插件,有免费版和收费版,免费版就可以满足大部分需求了,在Unity Assets Store里就可以下载,在本效果里就用了DoTween的旋转功能。

3. 设计思路

创建一个空物体,空物体下有两个image对象,一个是正面,一个是背面。假设我们从正面开始,则初始状态下正面的旋转角度为 ( 0 , 0 , 0 ) (0,0,0) (0,0,0),让背面的旋转角度为 ( 0 , 90 , 0 ) (0,90,0) (0,90,0),这样背面就看不见了。
触发旋转时,例如让正面在0.3秒内旋转到 ( 0 , 90 , 0 ) (0,90,0) (0,90,0),这样正面就看不见了,等旋转完成后再让背面0.3秒旋转到 ( 0 , 0 , 0 ) (0,0,0)

  • 4
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
要实现这个效果,你需要使用Unity中的DoTween插件和卡牌的2D图片。以下是实现步骤: 1. 将卡牌的2D图片导入到Unity中,并在场景中创建一个空物体来作为卡牌的父物体。 2. 在卡牌父物体上添加一个Box Collider 2D组件,用来检测鼠标点击事件。 3. 创建两个子物体,一个用于显示卡牌的正面,另一个用于显示卡牌的反面,将它们分别作为卡牌父物体的子物体,并将它们的位置和大小设置为相同。 4. 在正面和反面子物体上添加Sprite Renderer组件,并分别将卡牌正面和反面的精灵设置到Sprite Renderer的Sprite属性中。 5. 使用DoTween库中的DOTween.Sequence()方法创建一个序列,将卡牌旋转到反面并缩放到0,然后再次旋转到正面并缩放回原大小。这个序列应该绑定到卡牌父物体的鼠标点击事件。 6. 在代码中,使用一个bool变量来记录卡牌当前是否是正面。在鼠标点击事件中,根据卡牌是否是正面来判断应该播放哪个动画序列。 以下是示例代码: ``` using UnityEngine; using System.Collections; using DG.Tweening; public class CardFlip : MonoBehaviour { public Sprite cardFront; public Sprite cardBack; private bool isFront = true; void OnMouseDown() { if (isFront) { // Play flip to back animation DOTween.Sequence() .Append(transform.DOScaleX(0, 0.25f)) .AppendCallback(() => { GetComponent<SpriteRenderer>().sprite = cardBack; }) .Append(transform.DOScaleX(1, 0.25f)); isFront = false; } else { // Play flip to front animation DOTween.Sequence() .Append(transform.DOScaleX(0, 0.25f)) .AppendCallback(() => { GetComponent<SpriteRenderer>().sprite = cardFront; }) .Append(transform.DOScaleX(1, 0.25f)); isFront = true; } } } ``` 在这个示例代码中,我们假设卡牌的父物体上挂载了一个名为CardFlip的脚本,并将卡牌正面和反面的2D图片分别赋值给cardFront和cardBack变量。在OnMouseDown()方法中,我们使用DOTween.Sequence()方法创建了两个动画序列,一个用于将卡牌翻转到反面,另一个用于将卡牌翻转回正面。每次点击卡牌时,根据isFront变量的值来判断应该播放哪个动画序列,并更新isFront的值以记录卡牌当前是否是正面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值