Unity3D UGUI 实现翻书特效

参考大佬的,链接找不到了,找到了再加在这。

下边是Shader代码:

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Personal/PageTurning" {
	Properties 
	{
		_Color ("Color", Color) = (1,1,1,1)
		_MainTex("MainTex",2D)="White"{}
		_SecTex("SecTex",2D)="White"{}
		_Angle("Angle",Range(0,180))=0
		_Warp("Warp",Range(0,10))=0
		_WarpPos("WarpPos",Range(0,1))=0
		_Downward("Downward",Range(0,1))=0
	}
	SubShader
	{
		pass
		{
			Cull Back

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

			struct v2f 
			{
				float4 pos : POSITION;
				float2 uv : TEXCOORD0;
			};
			fixed4 _Color;
			float _Angle;
			float _Warp;
			float _Downward;
			float _WarpPos;
			sampler2D _MainTex;
			float4 _MainTex_ST;

			v2f vert(appdata_base v)
			{
				v2f o;
				v.vertex += float4(5,0,0,0);
				float s;
				float c;
				sincos(radians(-_Angle),s,c);
				float4x4 rotate={			
				c,s,0,0,
				-s,c,0,0,
				0,0,1,0,
				0,0,0,1};
				float rangeF=saturate(1 - abs(90-_Angle)/90);
				v.vertex.y += -_Warp*sin(v.vertex.x*0.4-_WarpPos* v.vertex.x)*rangeF;
				v.vertex.x -= rangeF * v.vertex.x*_Downward;
				v.vertex = mul(rotate,v.vertex);
				
				v.vertex += float4(-5,0,0,0);
				o.pos = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
				return o;
			}

			fixed4 frag(v2f i):COLOR
			{
				fixed4 color = tex2D(_MainTex,-i.uv);
				return _Color * color;
			}


			ENDCG
		}

		pass
		{
			Cull Front

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

			struct v2f 
			{
				float4 pos : POSITION;
				float2 uv : TEXCOORD0;
			};
			fixed4 _Color;
			float _Angle;
			float _Warp;
			float _Downward;
			float _WarpPos;
			sampler2D _SecTex;
			float4 _MainTex_ST;

			v2f vert(appdata_base v)
			{
				v2f o;
				v.vertex += float4(5,0,0,0);
				float s;
				float c;
				sincos(radians(-_Angle),s,c);
				float4x4 rotate={			
				c,s,0,0,
				-s,c,0,0,
				0,0,1,0,
				0,0,0,1};
				float rangeF=saturate(1 - abs(90-_Angle)/90);
				v.vertex.y += -_Warp*sin(v.vertex.x*0.4-_WarpPos* v.vertex.x)*rangeF;
				v.vertex.x -= rangeF * v.vertex.x*_Downward;
				v.vertex = mul(rotate,v.vertex);
				
				v.vertex += float4(-5,0,0,0);
				o.pos = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
				return o;
			}

			fixed4 frag(v2f i):COLOR
			{
				float2 uv = i.uv;
				uv.x = -uv.x;
				fixed4 color = tex2D(_SecTex,-uv);
				return _Color * color;
			}
			ENDCG
		}
	}
}

下面是UI代码:

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class FanShuUI : UIBase
{
    private GameObject Plane;
    private Material m_Material;
    private Coroutine effect;
    private Image LeftPage;
    private Image RightPage;
    private void Awake()
    {
        InitUI();
    }
    public override void InitUI()
    {
        Plane = GetGameObject("Plane");
        LeftPage = GetComp<Image>("LeftPage");
        RightPage = GetComp<Image>("RightPage");
        Plane.SetActive(false);
        m_Material = Plane.GetComponent<MeshRenderer>().material;
    }
    public void PlayPageTurnEffect(bool isLeft = true)
    {
        if (!gameObject.activeSelf)
        {
            return;
        }
        if (effect != null)
        {
            StopCoroutine(effect);
        }
        effect = StartCoroutine(FanShuEffect(0.5f, isLeft));
    }
    public void ShowRightImage(string right)
    {
        RightPage.gameObject.SetActive(true);
        RightPage.sprite = ResourcesMgr.Instance.LoadObj<Sprite>(right);
    }
    public void ShowLeftImage(string left)
    {
        LeftPage.gameObject.SetActive(true);
        LeftPage.sprite = ResourcesMgr.Instance.LoadObj<Sprite>(left);
    }
    private IEnumerator FanShuEffect(float time, bool isLeft)
    {
        LeftPage.gameObject.SetActive(false);
        RightPage.gameObject.SetActive(false);
        Plane.SetActive(true);
        int angle = (int)(180 * 0.1f);
        for (int i = 0; i < 10; i++)
        {
            if (isLeft)
            {
                m_Material.SetFloat("_Angle", angle * i);
            }
            else
            {
                m_Material.SetFloat("_Angle", 180 - angle * i);
            }
            yield return new WaitForSeconds(time * 0.1f);
        }
        if (isLeft)
        {
            m_Material.SetFloat("_Angle", 180);
        }
        else
        {
            m_Material.SetFloat("_Angle", 0);
        }
        Plane.SetActive(false);
        OnEffectOver();
    }
    private void OnEffectOver()
    {
        //--callback
    }
}

左右两页纸可以在翻书结束动态加载图片。

下边是Plane的面板信息:

 

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Unity中使用UGUI实现装备合成树的步骤如下: 1. 设计装备合成树的结构:装备合成树是一个有层级关系的树形结构,每个节点代表一个装备,节点之间通过合成关系连接。可以使用脚本或者数据结构来定义装备节点和合成关系。 2. 创建UI界面:在Unity中创建一个Canvas对象,并添加需要的UI元素,比如按钮、文本等,用来显示装备合成树。 3. 绘制节点:使用UGUI提供的Button或者Image等UI组件,绘制每个装备节点的图标,并设置对应的合成信息和按钮事件等。 4. 布局节点:根据装备合成树的结构,将装备节点按照层级和位置进行布局,可以使用UGUI中的Layout组件来实现自动布局。 5. 添加交互:为每个装备节点的按钮添加事件监听,当点击某个装备节点时,根据节点的合成信息刷新树的显示内容,比如显示合成材料和合成结果等。 6. 更新合成树:当成功合成某个装备后,需要更新装备合成树的结构和显示内容,可以使用脚本来实现树的动态更新。 7. 状态管理:根据游戏逻辑和玩家行为,需要考虑装备合成树节点的状态管理,比如显示已拥有的装备节点和未解锁的装备节点等。 8. 界面优化:为了提升用户体验,可以考虑添加特效、动画和过渡效果等,使装备合成树的界面更加活跃和吸引人。 通过上述步骤,在Unity中使用UGUI可以实现一个功能完善的装备合成树界面,为玩家提供更好的游戏体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值