NGUI 翻牌效果

本文介绍如何利用NGUI创建翻牌效果。通过设置两个对象初始角度,点击时翻转指定角度,达到视觉上的翻牌动画。翻牌过程中内部显示内容始终保持可见。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图如下:

111

 

思路:两个对象。默认选中角度一个旋转角度为0 。一个为90。点击旋转 角度为0的至90度。然后回调。让90度的另外一张旋转至0度。既实现翻牌效果。同时两张内部的显示类型不受相互影响 

using UnityEngine;
using System.Collections;
public class TweenFlipCARDS : MonoBehaviour {
    public GameObject positive;
    public GameObject reverse;
    private TweenRotation mPositiveTween;
    private TweenRotation mReverseTween;
    /// <summary> 半圈时间 </summary>
    public float duration = 1;
    void Start()
    {
        mPositiveTween = positive.GetComponent<TweenRotation>();
        if (mPositiveTween == null)mPositiveTween = positive.AddComponent<TweenRotation>();
        mReverseTween = reverse.GetComponent<TweenRotation>();
        if (mReverseTween == null) mReverseTween = reverse.AddComponent<TweenRotation>();
        mPositiveTween.enabled = false;
        mReverseTween.enabled = false;
        reverse.gameObject.transform.localEulerAngles = new Vector3(0, 90, 0);
        mPositiveTween.from = Vector3.zero;
        mPositiveTween.to = new Vector3 (0, 90, 0);
        mPositiveTween.duration = duration;
        mReverseTween.from = new Vector3(0, 90, 0);
        mReverseTween.to = Vector3.zero;
        mReverseTween.duration = duration;
        UIEventListener listener = UIEventListener.Get(positive.gameObject);
        listener.onClick = ClickUIButton;
        listener = UIEventListener.Get(reverse.gameObject);
        listener.onClick = ClickUIButton;
        mPositiveTween.onFinished.Add(new EventDelegate(PositiveEventDelegate));
        mReverseTween.onFinished.Add(new EventDelegate(ReverseEventDelegate));
    }
    GameObject mNowDown;
    void ClickUIButton(GameObject click)
    {
        mNowDown = click;
        if(click == positive)
        {
            PlayPositive();
        }
        else if(click == reverse)
        {
            PlayReverse();
        }
    }
    /// <summary>
    /// 翻牌
    /// </summary>
    public void PlayPositive()
    {
        mPositiveTween.Play(true);
    }
    /// <summary>
    /// 复位
    /// </summary>
    public void PlayReverse()
    {
        mReverseTween.Play(false);
    }

    /// <summary>
    /// 翻牌回调
    /// </summary>
    void PositiveEventDelegate()
    {
        if (mNowDown == mPositiveTween.gameObject) mReverseTween.Play(true);
    }
    /// <summary>
    /// 复位回调
    /// </summary>
    void ReverseEventDelegate()
    {
        if (mNowDown == mReverseTween.gameObject) mPositiveTween.Play(false);
    }
}

直接将代码绑定在父物体上。下级两个GameObject即可。 

NGUI的UI边框流光效果可以通过使用UIHollowedTexture组件来实现。UIHollowedTexture是对UITexture进行魔改得到的组件,可以设置边框贴图,并且支持UV滚动。\[1\] 要实现流光效果,可以通过修改shader的参数来实现。在NGUI的渲染机制中,当渲染时会合并DrawCall,合并的是使用同一材质球的元素。NGUI会新建一个Material,并且在渲染时调用onRender回调函数,将这个新建的Material传递给我们,方便我们进行自定义操作。\[3\] 因此,我们可以在onRender回调函数中修改shader的参数,来实现流光效果。具体的实现方法可以参考相关的教程或者文档。\[3\] 需要注意的是,NGUI在维护以前的Unity项目时仍然很重要,所以对NGUI的了解也是有必要的。\[2\] #### 引用[.reference_title] - *1* [NGUI通用边框流光](https://blog.youkuaiyun.com/lzdidiv/article/details/88740159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [NGUI相关----UITexture图片边缘流光效果](https://blog.youkuaiyun.com/blinkseed/article/details/48393501)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [NGUI的流光shader解决方案(一)(支持UITexture和使用图集的UISprite)](https://blog.youkuaiyun.com/jw5678/article/details/55002983)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值