Unity3D UGUI 渐变效果

今天我们利用BaseMeshEffect来实现 UGUI的Text和Image 渐变。
先上效果

UGUI的Image、Text等都是Mesh 网格，这个可以通过选择wireframe显示方式来查看，如下图，每个字符都是一个网格。

渐变效果代码：

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient : BaseMeshEffect
{public Color32 topColor = Color.white;public Color32 bottomColor = Color.black;public override void ModifyMesh(VertexHelper vh){if (!IsActive()){return;}var count = vh.currentVertCount;if (count == 0)return;var vertexs = new List<UIVertex>();for (var i = 0; i < count; i++){var vertex = new UIVertex();vh.PopulateUIVertex(ref vertex, i);vertexs.Add(vertex);}var topY = vertexs[0].position.y;var bottomY = vertexs[0].position.y;for (var i = 1; i < count; i++){var y = vertexs[i].position.y;if (y > topY){topY = y;}else if (y < bottomY){bottomY = y;}}var height = topY - bottomY;for (var i = 0; i < count; i++){var vertex = vertexs[i];var color = Color32.Lerp(bottomColor, topColor, (vertex.position.y - bottomY) / height);vertex.color = color;vh.SetUIVertex(vertex, i);}}
}

BaseMeshEffect可以操作这些网格数据。所以我可以通过它来实现一些效果。

BaseMeshEffect是用于修改生成的网格的特效类的抽象基类，Outline和Shadow等都是其衍生类或衍生类的衍生类。

其定义如下：


public abstract class BaseMeshEffect : UIBehaviour, IMeshModifierBaseMeshEffect实现了接口IMeshModifier，所以其内部实现了方法ModifyMesh(VertexHelper verts)：public interface IMeshModifier{[Obsolete("use IMeshModifier.ModifyMesh (VertexHelper verts) instead", false)]void ModifyMesh(Mesh mesh);void ModifyMesh(VertexHelper verts);}

IMeshModifier核心功能是对网格的修改，在Graphic的DoMeshGeneration()中会遍历所有实现了IMeshModifier接口的组件并调用其ModifyMesh(VertexHelper verts)方法，以达到修改网格的目的：

private void DoMeshGeneration(){if (rectTransform != null && rectTransform.rect.width >= 0 && rectTransform.rect.height >= 0)OnPopulateMesh(s_VertexHelper);elses_VertexHelper.Clear(); // clear the vertex helper so invalid graphics dont draw.var components = ListPool<Component>.Get();GetComponents(typeof(IMeshModifier), components);for (var i = 0; i < components.Count; i++)((IMeshModifier)components[i]).ModifyMesh(s_VertexHelper);ListPool<Component>.Release(components);s_VertexHelper.FillMesh(workerMesh);canvasRenderer.SetMesh(workerMesh);}

在BaseMeshEffect中，ModifyMesh(VertexHelper verts)是抽象虚方法，因此，继承BaseMeshEffect的类必须覆写ModifyMesh(VertexHelper vh)。以下是UGUI中BaseMeshEffect的各个衍生类及继承关系：

public class PositionAsUV1 : BaseMeshEffectpublic class Shadow : BaseMeshEffectpublic class Outline : Shadow

Unity3D UGUI 渐变效果相关推荐

Unity3d UGUI 通用Confirm确认对话框实现（Inventory Pro学习总结）
背景曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...
Unity3d Ugui图片上制作点光、棱形光效果shader，并具有裁切
Unity3d Ugui图片上制作点光 .棱形光效果实现的效果可以参考如下图所示通过shader来实现上述的效果,为了大家的适应性,推荐在unity官方的默认ui shader上更改,我用的是20 ...
Unity3d UGUI基础控件使用（一）
转载自:Unity3d UGUI基础控件使用(一) 一:UGUI介绍 UGUI是Unity4.6之后,经过多重测试,推出全新的UI系统,更灵活,快捷,易用的可视化游戏UI开发工具. 由于之前传统的UI ...
Unity3d UGUI 实现底部UI自适应的功能（含工程）
Unity3d UGUI 实现底部UI自适应的功能(含工程) 前言 UI的自适应常常在项目中使用到,特别手游中,不同比例屏幕的手机,如果能考一套UI自适应显示,能省去不少的开发工作量.这里只是浅浅的讨 ...
unity3d UGUI九宫格纹理拉伸的使用
本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用,不论是游戏中的UI,还是应用中的UI,纹理九宫格拉伸都是必不可少的,因为采用这种拉伸方式,可以最大化的节省纹理资源,任意缩 ...
Unity3d Ugui 15 TextMeshPro
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.属性介绍二.字体制作三.常用功能前言 Ugui基础的Text放大以后会出现毛边或锯齿,而TextMeshPr ...
Unity3D UGUI系列之合批
目录 1. 什么是UGUI的合批 1.1 准备工作 1.2 批处理 1.3 批处理的意义 1.4 UGUI的合批 2 分析工具的使用 2.1 Frame Debugger的使用 2.2 Profile ...
unity3d UGUI Scroll View的使用
在使用ugui的时候,碰到了无法设置Scrollbal Horizontal和Scrollbal Vertical成Active(不工作),其根据原因是Content的长度太短,必须比Scroll V ...
Unity3D - UGUI的手动搭建
了解UGUI组件的搭建方式,有助于搭建我们自己的UI界面. Text 文本 text 是UGUI中的基本控件,在Hierarchyi面板创建一个空物体 - 给这个空物体添加一个Text组件即可实现与t ...

Unity3D UGUI 渐变效果

Unity3D UGUI 渐变效果相关推荐

最新文章

热门文章