Unity实现UGUI空物体颜色渐变的描边方法
文章目录
- 一、关于UGUI的描边
- 二、重写OnPopulateMesh实现UI空物体描边
- 原理解析
- 完整代码实现
- 完整描边效果
- 三、拓展功能(渐变色的UI描边)
- 两种渐变色描边
- 多种渐变色描边
- 四、推荐阅读
一、关于UGUI的描边
当我们有如上图的描边需求时,可以考虑使用Unity原生自带两个组件的Outline和Shadow实现对于UI的描边,但是弊端还是很大的,因为这个两组件会造成顶点数和三角面数加倍,导致就是很耗电脑性能!而且挂载到UI空物体上是没有描边效果的。我们只能另寻他法,UGUI为我们提供了一个类MaskableGraphic帮助我们可以自定义重构UI组件,下面将演示如何重写其 OnPopulateMesh方法绘制线框。
二、重写OnPopulateMesh实现UI空物体描边
说是实现UI空物体的描边可能有点不准确,应该是给不继承于Graphic类的组件描边,因为一个游戏对象只允许拥有一个Graphic组件。像image和button等这种就不能添加这个脚本绘制描边,只能给这些组件添加空物体作为父物体,再将该描边脚本拖拽给空物体实现描边。
原理解析
注意:设置顶点位置是相对于UI锚点来确定的,如果锚点pivot=(0.5,0.5),那么UI顶点原点(0,0)就在UI中心点;如果锚点pivot=(0,0),那么UI顶点原点(0,0)在UI左下角。其中依次类推。
上图中,脚本里rectTransform.rect.width和height表示该ui空物体的宽高,即width=100,height=100。锚点为(0.5,0.5)所以:
(1)顶点1:quad1[0].positon=(-50,50,0)即UI左上角位置①处
(2)顶点2:quad1[1].positon=(50,50,0)即UI右上角位置②处
(3)顶点3:quad1[2].positon=(50,49,0)即UI右上角下方一个线宽像素位置③处
(4)顶点4:quad1[3].positon=(-50,49,0)即UI左上角下方一个线宽像素位置④处。
最后调用vh.AddUIVertexQuad(quad1)方法,将一个面片顶点信息添加进去,它就帮我们绘制出来下图的矩形线框了:
接下来我们就寻找规律,依次类推将其他线框绘制出来,实现一个可以将UI组件描边的效果啦。
完整代码实现
/// <summary>
/// UI空物体描边
/// </summary>
public class UIoutline : MaskableGraphic
{public Color lineColor = Color.black;//默认描边颜色public float lineWidth = 1f;//默认绘制的线宽,表示一个像素宽protected override void OnPopulateMesh(VertexHelper vh){base.OnPopulateMesh(vh);vh.Clear();//定义边框的面片数组,表示面片的四个顶点。根据顶点顺序进行顺时针绘制UIVertex[] quad1 = new UIVertex[4];quad1[0] = new UIVertex();quad1[0].color = lineColor;quad1[0].position = new Vector3(-rectTransform.rect.width * 0.5f, rectTransform.rect.height * 0.5f, 0);Debug.Log(quad1[0].position);quad1[0].uv0 = Vector2.zero;quad1[1] = new UIVertex();quad1[1].color = lineColor;quad1[1].position = new Vector3(rectTransform.rect.width * 0.5f, rectTransform.rect.height * 0.5f, 0);quad1[1].uv0 = Vector2.zero;quad1[2] = new UIVertex();quad1[2].color = lineColor;quad1[2].position = new Vector3(rectTransform.rect.width * 0.5f, rectTransform.rect.height * 0.5f - lineWidth, 0);quad1[2].uv0 = Vector2.zero;quad1[3] = new UIVertex();quad1[3].color = lineColor;quad1[3].position = new Vector3(-rectTransform.rect.width * 0.5f, rectTransform.rect.height * 0.5f - lineWidth, 0);quad1[3].uv0 = Vector2.zero;vh.AddUIVertexQuad(quad1);UIVertex[] quad2 = new UIVertex[4];quad2[0] = new UIVertex();quad2[0].color = lineColor;quad2[0].position = new Vector3(-rectTransform.rect.width * 0.5f, -rectTransform.rect.height * 0.5f + lineWidth, 0);quad2[0].uv0 = Vector2.zero;quad2[1] = new UIVertex();quad2[1].color = lineColor;quad2[1].position = new Vector3(rectTransform.rect.width * 0.5f, -rectTransform.rect.height * 0.5f + lineWidth, 0);quad2[1].uv0 = Vector2.zero;quad2[2] = new UIVertex();quad2[2].color = lineColor;quad2[2].position = new Vector3(rectTransform.rect.width * 0.5f, -rectTransform.rect.height * 0.5f, 0);quad2[2].uv0 = Vector2.zero;quad2[3] = new UIVertex();quad2[3].color = lineColor;quad2[3].position = new Vector3(-rectTransform.rect.width * 0.5f, -rectTransform.rect.height * 0.5f, 0);quad2[3].uv0 = Vector2.zero;vh.AddUIVertexQuad(quad2);UIVertex[] quad3 = new UIVertex[4];quad3[0] = new UIVertex();quad3[0].color = lineColor;quad3[0].position = new Vector3(-rectTransform.rect.width * 0.5f, rectTransform.rect.height * 0.5f, 0);quad3[0].uv0 = Vector2.zero;quad3[1] = new UIVertex();quad3[1].color = lineColor;quad3[1].position = new Vector3(-rectTransform.rect.width * 0.5f + lineWidth, rectTransform.rect.height * 0.5f, 0);quad3[1].uv0 = Vector2.zero;quad3[2] = new UIVertex();quad3[2].color = lineColor;quad3[2].position = new Vector3(-rectTransform.rect.width * 0.5f + lineWidth, -rectTransform.rect.height * 0.5f, 0);quad3[2].uv0 = Vector2.zero;quad3[3] = new UIVertex();quad3[3].color = lineColor;quad3[3].position = new Vector3(-rectTransform.rect.width * 0.5f, -rectTransform.rect.height * 0.5f, 0);quad3[3].uv0 = Vector2.zero;vh.AddUIVertexQuad(quad3);UIVertex[] quad4 = new UIVertex[4];quad4[0] = new UIVertex();quad4[0].color = lineColor;quad4[0].position = new Vector3(rectTransform.rect.width * 0.5f - lineWidth, rectTransform.rect.height * 0.5f, 0);quad4[0].uv0 = Vector2.zero;quad4[1] = new UIVertex();quad4[1].color = lineColor;quad4[1].position = new Vector3(rectTransform.rect.width * 0.5f, rectTransform.rect.height * 0.5f, 0);quad4[1].uv0 = Vector2.zero;quad4[2] = new UIVertex();quad4[2].color = lineColor;quad4[2].position = new Vector3(rectTransform.rect.width * 0.5f, -rectTransform.rect.height * 0.5f, 0);quad4[2].uv0 = Vector2.zero;quad4[3] = new UIVertex();quad4[3].color = lineColor;quad4[3].position = new Vector3(rectTransform.rect.width * 0.5f - lineWidth, -rectTransform.rect.height * 0.5f, 0);quad4[3].uv0 = Vector2.zero;vh.AddUIVertexQuad(quad4);}
}
完整描边效果
三、拓展功能(渐变色的UI描边)
我们只需要根据自己的需求修改绘制线框时顶点的颜色就可以实现渐变色的效果了。
两种渐变色描边
我们只需要再添加一种颜色属性,设置顶点颜色时赋值不同颜色值即可得到上图左边红黑渐变描边效果。
脚本修改如下,其他顶点依次类推设置。
多种渐变色描边
添加另外三种颜色属性,设置顶点颜色时赋值不同颜色值即可得到上图右边红黄蓝绿渐变描边效果。
脚本修改如下,其他顶点依次类推设置,可在面板修改颜色属性查看不同渐变色效果。
四、推荐阅读
Unity在UI上使用MaskableGraphic类画一个矩形
渐变色描边源码下载
Unity实现UGUI空物体颜色渐变的描边方法相关推荐
- Unity 2D及3D物体随鼠标转向的方法(类似孤胆枪手效果)
首先明确效果,如孤胆枪手那样任务随鼠标方向转向的效果 要实现此效果我们首先要知道鼠标的位置 话不多说直接上代码 Vector3 point = Input.mousePosition;//注意,此时的 ...
- 【Unity】UGUI超级简单的摇杆制作,摇杆控制物体移动
[Unity]UGUI超级简单的摇杆制作,摇杆控制物体移动 目录 1.效果展示 2.博客介绍 3.具体内容和思路 (1)摇杆制作 (2)移动控制 4.资源包下载 5.推送 6. ...
- Unity设置字体颜色渐变
unity开发程序在一些必要的的程序的时候需要实现一些简单的渐变效果,之前不太懂都是直接让美术那边出图片用图片来代替,用着用着就让工程中多了很多没有必要的图片.后面找到了一种很好优化包的方法就是直接用 ...
- 颜色渐变丶渲染效果类---(Unity自学笔记)
using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;/*** 颜色渐变特效类*/ public clas ...
- unity中实现3d物体的颜色随时间渐渐消失
实现的原理就是修改material的color属性的Alpha值,通过把值逐渐变为0来达到消失 注意:这种方法只对部分shader有作用,我用的是 下面是代码: using System.Collec ...
- Unity GUI(uGUI)使用心得与性能总结
Unity GUI(uGUI)使用心得与性能总结 作者 kingshijie 关注 2015.09.26 15:35 字数 3686 阅读 28031评论 10喜欢 49 背景和目的 小哈接触Unit ...
- unity之UGUI系统基础
UGUI系统基础 一.UGUI 简介: ①.Unity3D4.6 版本开始, ...
- Unity的UGUI使用Text和Image实现文字下划线
Unity的UGUI使用Text和Image实现文字下划线 引子效果 设置 原文链接 引子效果 写需求的时候搜了一些文字加下划线的方法,UGUI的Text,大都需要写一堆代码来封装Text,比较麻烦. ...
- 零基础入门 Unity 之 UGUI 详解专栏 | 寻找C站宝藏
零基础入门 Unity 之 UGUI 详解专栏 | 寻找C站宝藏 六大推荐理由 理由一:系统 理由二:详细 理由三:专业 理由四:图解 理由五:深度 理由六:实例 一键直达:<UGUI 控件详解 ...
最新文章
- zookeeper -- Mac 上 Intellij IDEA 配置 zookeeper(3.5.8) 源码阅读、运行、调试环境
- 关于解决arduino SHT1x诸多问题
- springboot tomcat配置_用了 10 多年的 Tomcat 居然有bug !
- php switch换界面,php switch的“高级”用法详解
- visio wps 流程图_科研必备:几款好用的流程图工具,助力你的论文/科研绘图
- 统计学习方法概论---分类问题
- 密钥协商(密钥交换)机制的讲解
- CWE 4.3:强化你的数据自我保护能力
- JavaScript面向对象:类、方法、属性
- STL(1)——查找函数find的使用
- python复制文件到指定文件夹_python 拷贝文件夹下所有的文件到指定文件夹(不包括目录)...
- 如何在点击事件中取得复选框选中的单元格值
- 机器学习 —— 神经网络(matlab)
- linux 查看pgsql端口,如何查看postgres数据库端口
- 继 layui 之后, jQuery Mobile 宣布完全弃用!
- 2021WSB-day3-1 - Arun Ross 老师讲解Privacy Preserving Biometrics
- android 开发之蓝牙开发
- 计算机组成原理课程设计报告 给出指令执行流程 add(二进制加法),计算机组成原理课程设计...
- Ubuntu防火墙状态整理
- ukf实测信号的预测 matlab,ukf的matlab实现