Unity UGUI源码解析

article/2025/10/5 21:49:51

前言

这篇文章想写的目的也是因为我面试遇到了面试官问我关于UGUI原理性的问题，虽然我看过，但是并没有整理出完整的知识框架，导致描述的时候可能自己都是不清不楚的。自己说不清楚的东西，别人就等于你不会。每当学完一个东西的时候，应该会大体框架流程，具体实现细节有所了解，然后整理出来，以备日后查阅。人的记忆是有限的，如果不记下来，每次翻的都是别人的博客，这样其实是一个很不好的习惯。所以决定整理出一些自己关于UGUI的了解。以上只是我的牢骚，下面开始今天的内容。

学习方法论与要点整理

在框架之前我们需要先思考，我们要从哪里入手来看这个框架。引用我最近经常听到的一句话吧，你写的这个东西有什么用呢，他解决了什么问题。这确实是需要值得思考的问题，我们为什么要用UGUI，他人给我们提供了什么东西，为我们解决了什么问题。那么从这个思路开始，我们来梳理这个框架。

学习方法论

我们要看一个框架，会发现这个框架的代码实在是太多了，不同于我们我们平时写模块化的逻辑，点开一个脚本基本上只能看到很小部分框架业务逻辑实现，那么下面就推荐我看代码的思路。

  • 用全宇宙最强编辑器生成UML图，通过观看框架结构接口定义，来实现对整个框架结构有个概览。
  • 下载源码，尝试写代码对单个功能点的逻辑进行断点调试，跟着断点查看整个框架代码的执行流程

举个例子，假如你需要看Image的绘制流程，只需要写个测试代码，对Image的color进行赋值，会触发Canvas刷新，对Image进行更新，这时候就可以跟着断点走进去看到整个逻辑执行顺序

UGUI功能点

让我们分析一个UI界面所需要的要点，抛开业务逻辑，那么一个UI框架需要为我们提供的是

  • UI要素的渲染
  • 可控的渲染层级排序
  • UI布局的自适应
  • 交互事件的检测与响应
  • 面向功能性的UI组件

UGUI框架解析

UGUI框架结构概览

框架UML图如下, 点击试试看能不能放大
在这里插入图片描述
UGUI框架结构几个核心的类如下：

  • UIBehaviour 抽象类 继承MonoBehaviour，提供核心事件驱动
  • Graphic 抽象类 提供绘制接口，各种Dirty方法来注册到更新列队
  • EventSystem 事件中心，负责处理各种输入，光线投射，以及发送事件
  • BaseInputModule 输入模块基类，负责发送各种输入事件到GameObject
  • BaseRaycaster 光线投射基类
  • EventInterfaces 注意这是一个脚本，他定义了所有EventSystem事件方法接口

其他功能性的组件，以及布局我就不一一列举了，具体请查看源码

渲染以及重绘流程

在unity中我们绘制一个图形需要几个基本要素，Mesh，Material，Texture，以下的几个要素都被定义在了Graphic中。这些属性都是被CanvasRenderer这个组件托管进行渲染的，我们可以再编写组件的时候对这些要素进行定义和替换，但是最后都需要赋值到CanvasRenderer中由Canvas进行渲染。

网格绘制

在unity中我们绘制一个图形需要几个基本要素，Mesh，Material，Texture，以下的几个要素都被定义在了Graphic中，那么首先让我们看一下UGUI源码的例子，看他是怎么对一个网格进行绘制的

using UnityEngine;
using UnityEngine.UI;
[ExecuteInEditMode]
// 这是一个简易的基于UGUI的Image实现
public class SimpleImage : Graphic
{// 这里是 Graphic 可重写的绘制网格的接口protected override void OnPopulateMesh(VertexHelper vh){// VertexHelper 这是UGUI一个用于构建网格的帮助类// 他可以用于填充顶点数据，设置三角面片信息，并缓存他们// 最后用这些数据填充并构建一个mesh// 构建顶点数据// 此处两个Vector2结构体的数据来源为当前Gameobject的Rectransform// 因为RectTransform的数据是基于布局自适应的Vector2 corner1 = Vector2.zero;Vector2 corner2 = Vector2.zero;corner1.x = 0f;corner1.y = 0f;corner2.x = 1f;corner2.y = 1f;corner1.x -= rectTransform.pivot.x;corner1.y -= rectTransform.pivot.y;corner2.x -= rectTransform.pivot.x;corner2.y -= rectTransform.pivot.y;corner1.x *= rectTransform.rect.width;corner1.y *= rectTransform.rect.height;corner2.x *= rectTransform.rect.width;corner2.y *= rectTransform.rect.height;vh.Clear();UIVertex vert = UIVertex.simpleVert;vert.position = new Vector2(corner1.x, corner1.y);vert.color = color;vh.AddVert(vert);vert.position = new Vector2(corner1.x, corner2.y);vert.color = color;vh.AddVert(vert);vert.position = new Vector2(corner2.x, corner2.y);vert.color = color;vh.AddVert(vert);vert.position = new Vector2(corner2.x, corner1.y);vert.color = color;vh.AddVert(vert);// 此处指定了三角面片的绘制顺序 顺时针方向// 0 (0,0) 顶点在数组中的index（x坐标，y坐标）//// 1 (0,1)   >    2 (1,1) //    ...........//    .       . .// ^  .    .    .//    . .       .//    ...........// 0 (0,0)  <     3 (1,1)vh.AddTriangle(0, 1, 2);vh.AddTriangle(2, 3, 0);}
}

通过以上的例子应该对网格绘制原理有所了解，并且也能通过官方例子来实现一个简易的Image绘制。

材质

在UGUI的Image中，就算我们没有给他其特定的材质，Image还是能够进行正常的渲染。Unity为我们设置了一个默认的材质定义，他的位置在Sahder面板中的UI/Default。以下静态方法被定义在Canvas组件中

    public static Material GetDefaultCanvasMaterial();public static Material GetDefaultCanvasTextMaterial();public static Material GetETC1SupportedCanvasMaterial();
重绘流程

由于Canvas没有开源代码，没办法看到底层的渲染流程，只能通过调整参数来控制他的渲染逻辑，下面讲一下主要的几个控制参数。

RenderMode

  • ScreenSpace-Overlay 屏幕空间并覆盖在屏幕上，也就是说，当前渲染层级永远在最上层
  • ScreenSpace-Camera 屏幕空间并由Camera来控制渲染，这个多了一层Camera套娃，可以来控制渲染和层级
  • WorldSpace 世界空间，这个渲染是三维空间的，可以用z轴进行渲染排序

PixelPerfect 强制于像素对齐，无特殊需要建议关闭，会影响性能

SortOrder 在ScreenSpace-Overlay模式下用于控制Canvas的渲染顺序

SortingLayer 世界空间下画布的渲染层

OrderInLayer 画布在当前渲染层下的渲染顺序

AdditionalShaderChannels 顶点数据的遮罩

那么下面我们再来说一下UGUI的重绘流程，在UGUI中渲染的核心就是Canvas组件和CanvasRenderer组件，Graphic只是为了填充渲染的必要元素，他并不直接参与绘制，那么让我们看一下他是怎么触发整个Canvas重新绘制的，这是Canvas中重绘的关键事件。

    public static event WillRenderCanvases willRenderCanvases;

那么让我们思考一下，什么情况下需要触发重新绘制，就是当前Canvas下需要绘制的物体属性变更的时候，一共有以下几个点。

  • 材质变更
  • 贴图变更
  • Mesh信息变更
  • 位置变更
  • 显示与隐藏

让我们看一下UGUI源码这个简单的例子。

    // 设置顶点颜色public virtual Color color { get { return m_Color; } set { if (SetPropertyUtility.SetColor(ref m_Color, value)) SetVerticesDirty(); } }// 设置材质public virtual Material material{get{return (m_Material != null) ? m_Material : defaultMaterial;}set{if (m_Material == value)return;m_Material = value;SetMaterialDirty();}}// 材质变化 将自身注册到重绘列表中public virtual void SetMaterialDirty(){if (!IsActive())return;m_MaterialDirty = true;CanvasUpdateRegistry.RegisterCanvasElementForGraphicRebuild(this);if (m_OnDirtyMaterialCallback != null)m_OnDirtyMaterialCallback();}// 顶点变化 将自身注册到重绘列表中public virtual void SetVerticesDirty(){if (!IsActive())return;m_VertsDirty = true;CanvasUpdateRegistry.RegisterCanvasElementForGraphicRebuild(this);if (m_OnDirtyVertsCallback != null)m_OnDirtyVertsCallback();}

以上的方法都是在Graphic类中，一个用于一个顶点颜色，也就是顶点信息改变，一个用于设置材质，也就是材质改变，相对应的每个需要渲染的属性都有其属性设置器，我们可以看到他在set的时候调用了一个相对应的Dirty的方法，他会在方法中把自身注册进CanvasUpdateRegistry这个类中，这个类是重绘的关键，让我们看一下这个类主要实现了什么逻辑，以下列举几个关键方法

    public class CanvasUpdateRegistry{// 构造方法，将PerformUpdate方法注册进Canvas即将渲染前会调用的事件protected CanvasUpdateRegistry(){Canvas.willRenderCanvases += PerformUpdate;}// 将组件注册进布局重建的列表public static void RegisterCanvasElementForLayoutRebuild(ICanvasElement element){instance.InternalRegisterCanvasElementForLayoutRebuild(element);}// 将组件注册进渲染重建的列表public static void RegisterCanvasElementForGraphicRebuild(ICanvasElement element){instance.InternalRegisterCanvasElementForGraphicRebuild(element);}// 更新布局与渲染的方法private void PerformUpdate(){// 由于篇幅限制这里只贴了更新Graphic的部分，实际上还有布局更新的部分，请自行查阅源码var graphicRebuildQueueCount = m_GraphicRebuildQueue.Count;for (var i = (int)CanvasUpdate.PreRender; i < (int)CanvasUpdate.MaxUpdateValue; i++){UnityEngine.Profiling.Profiler.BeginSample(m_CanvasUpdateProfilerStrings[i]);for (var k = 0; k < graphicRebuildQueueCount; k++){try{var element = m_GraphicRebuildQueue[k];if (ObjectValidForUpdate(element))//这个是关键方法，他根据Canvas更新的流程来选择不同的绘制方法，// 来重建Graphicelement.Rebuild((CanvasUpdate)i);}catch (Exception e){Debug.LogException(e, m_GraphicRebuildQueue[k].transform);}}UnityEngine.Profiling.Profiler.EndSample();}for (int i = 0; i < graphicRebuildQueueCount; ++i)m_GraphicRebuildQueue[i].GraphicUpdateComplete();m_GraphicRebuildQueue.Clear();m_PerformingGraphicUpdate = false;UISystemProfilerApi.EndSample(UISystemProfilerApi.SampleType.Render);}}

Tips：先描述一下 ICanvasElement 这个类的定义，这个类是顾名思义他就是Canvas元素，而Canvas主要负责绘制，所以他是一个所有需要带绘制属性组件的基类，这个类中定义了 Rebuild 方法，可以在这个方法对主要元素进行重新绘制，顺便贴上在 Graphic 中的ReBuild实现

    // 核心的重绘方法public virtual void Rebuild(CanvasUpdate update){if (canvasRenderer == null || canvasRenderer.cull)return;// 根据自定义的更新流程来更新顶点和材质switch (update){case CanvasUpdate.PreRender:if (m_VertsDirty){UpdateGeometry();m_VertsDirty = false;}if (m_MaterialDirty){UpdateMaterial();m_MaterialDirty = false;}break;}}

接着上面说，我们可以看到这个类主要做了这几件事情，在构造的时候将更新方法注册进 Canvas.willRenderCanvases 中，这个事件是会在Canvas更新前被调用，然后可以利用 RegisterCanvasElementForGraphicRebuild 这个方法将需要绘制的元素注册进待更新的队列，然后在Canvas即将渲染时会执行这个类的更新方法 PerformUpdate，这时候他会根据自定义的CanvasUpdate更新流程作为参数，调用每个element的Rebuild函数

总结：我们可以看上片段逻辑已经实现了一个绘制的基本要素和触发重绘的条件，形成了一个完整的闭环，
核心就是依赖的Canvas即将要渲染前的事件，来构造这样一段逻辑，主要是实现了观察者模式，算是一个比较高效率的实现，所以在我们做项目的UGUI优化的时候也是主要观察这个willRenderCanvases，被注册的次数，尽量用Canvas来隔开不必要的重绘次数，当然这需要和Drawcall之间进行衡量，找出性能的瓶颈点来进行优化。

事件触发以及响应

在看之前首先让我们思考，如果让我们编写一个事件系统的话，我们会怎么实现这样一个功能。
很明显，事件就是一个观察者模式，他有一个事件中心(EventSystem)，以及众多的观察者(例: Button)，当然我们也需要对事件进行类型区分，比如说 OnClick, OnDrag，很明显他们实现的功能职责不同，既然我们要区别这些事件类型，那么我们必然需要一个用户输入的手势数据(例：PointerEventData)用来判断区分不同的事件触发，既然已经整理清楚思路了，就让我们看一下UGUI中模块的定义。

模块定义

在这里插入图片描述

他主要根据文件目录分了以下几个模块，输入数据模块(EventData), 输入模块(InputModules), 射线模块(Raycaster), UI元素模块(UIElement)

事件绑定

让我们先看一段我们平时在代码中会编写的方法触发逻辑，这里主要利用了Button。

    void Start(){_button = GetComponent<Button>();_button.onClick.AddListener(func);}

这个方法主要是把 func 托管给了Button这个组件，然后来进行事件的触发，那么让我们看看Button里面做了什么把。

    public class Button : Selectable, IPointerClickHandler, ISubmitHandler{public class ButtonClickedEvent : UnityEvent {}private ButtonClickedEvent m_OnClick = new ButtonClickedEvent();// 方法绑定在这个事件中public ButtonClickedEvent onClick{get { return m_OnClick; }set { m_OnClick = value; }}private void Press(){if (!IsActive() || !IsInteractable())return;UISystemProfilerApi.AddMarker("Button.onClick", this);m_OnClick.Invoke();}// 这里是主要的触发逻辑，实现了 IPointerClickHandler 接口public virtual void OnPointerClick(PointerEventData eventData){if (eventData.button != PointerEventData.InputButton.Left)return;Press();}}// Click事件的接口public interface IPointerClickHandler : IEventSystemHandler{void OnPointerClick(PointerEventData eventData);}

我们可以发现组件想要触发事件主要依赖于实现UGUI的接口，然后框架会调用接口中的方法来触发组件的逻辑
能触发这种不同类型的事件的接口有很多，他们都被定义在了 EventInterfaces 这个脚本中，所有的接口都继承了 IEventSystemHandler 这个事件触发的基类。

事件检测以及触发

我们要触发事件，必然需要一个核心驱动来获取我们每帧的手势输入，我们先看一下事件触发的核心驱动部分逻辑。

    // 这是挂载在场景中的核心驱动模块public class EventSystem : UIBehaviour{// 输入模块private List<BaseInputModule> m_SystemInputModules = new List<BaseInputModule>();// 当前的输入模块private BaseInputModule m_CurrentInputModule;// 事件中心列表，实际上当前场景只允许有一个private  static List<EventSystem> m_EventSystems = new List<EventSystem>();// 每帧驱动输入模块的逻辑protected virtual void Update(){// 核心逻辑，截取部分，具体的查阅源码if (current != this)return;// 更新驱动输入模块TickModules();if (!changedModule && m_CurrentInputModule != null)// 这个模块方法里面会构造当前的输入数据m_CurrentInputModule.Process();// 可以看到驱动执行事件在处理输入数据之前，这说明我们的输入数据会在这一帧被构造，在下一帧被执行}// 更新驱动输入模块private void TickModules(){var systemInputModulesCount = m_SystemInputModules.Count;for (var i = 0; i < systemInputModulesCount; i++){if (m_SystemInputModules[i] != null)// 这里驱动对应的输入模块了m_SystemInputModules[i].UpdateModule();}}}

以上逻辑可以看到EventSystem模块主要负责和驱动相应的输入模块，具体实现要延迟到各个输入模块中，要注意的点是，输入数据会在这一帧被构造，在下一帧被执行, 那么我们以 TouchInputModule 为例，来看看他实现了什么功能。

    // 这是一个触摸的输入模块public class TouchInputModule : PointerInputModule{// 定义了输入的数据private PointerEventData m_InputPointerEvent;// 每帧更新的方法，执行当前的输入事件public override void UpdateModule(){if (!eventSystem.isFocused){if (m_InputPointerEvent != null && m_InputPointerEvent.pointerDrag != null && m_InputPointerEvent.dragging)// 这是核心逻辑，这里执行了对应的数据的事件，ExecuteEvents.Execute(m_InputPointerEvent.pointerDrag, m_InputPointerEvent, ExecuteEvents.endDragHandler);m_InputPointerEvent = null;}m_LastMousePosition = m_MousePosition;m_MousePosition = input.mousePosition;}// 构造当前的输入数据public override void Process(){if (UseFakeInput())FakeTouches();elseProcessTouchEvents();}// 构造当前的输入数据private void ProcessTouchEvents(){for (int i = 0; i < input.touchCount; ++i){// 这里终于能看见调用Unity的API来通过GetTouch来获取当前的触摸点Touch touch = input.GetTouch(i);if (touch.type == TouchType.Indirect)continue;bool released;bool pressed;var pointer = GetTouchPointerEventData(touch, out pressed, out released);// 在这个方法里面会对当前的 m_InputPointerEvent 进行赋值// 这样当前帧的输入信息的构造好了ProcessTouchPress(pointer, pressed, released);if (!released){ProcessMove(pointer);ProcessDrag(pointer);}elseRemovePointerData(pointer);}}}

我们可以看到这个输入模块每帧构造当前的输入数据以及每帧驱动模块进行事件的分发，并且他调用了核心的方法 ExecuteEvents.Execute()，这个方法会负责触发对应接口的方法，让我们看一下这个方法的定义

    // 这里把需要执行的方法定义在了外部public delegate void EventFunction<T1>(T1 handler, BaseEventData eventData);private static readonly EventFunction<IPointerEnterHandler> s_PointerEnterHandler = Execute;private static void Execute(IPointerEnterHandler handler, BaseEventData eventData){handler.OnPointerEnter(ValidateEventData<PointerEventData>(eventData));}public static bool Execute<T>(GameObject target, BaseEventData eventData, EventFunction<T> functor) where T : IEventSystemHandler{// 这个方法主要实现了收集gameObject上所有的 IEventSystemHandler 组件var internalHandlers = ListPool<IEventSystemHandler>.Get();GetEventList<T>(target, internalHandlers);var internalHandlersCount = internalHandlers.Count;for (var i = 0; i < internalHandlersCount; i++){T arg;try{arg = (T)internalHandlers[i];}catch (Exception e){var temp = internalHandlers[i];Debug.LogException(new Exception(string.Format("Type {0} expected {1} received.", typeof(T).Name, temp.GetType().Name), e));continue;}try{// 执行对应的方法以及传入数据参数functor(arg, eventData);}catch (Exception e){Debug.LogException(e);}}var handlerCount = internalHandlers.Count;ListPool<IEventSystemHandler>.Release(internalHandlers);return handlerCount > 0;}// 这个方法主要实现了收集gameObject上所有的 IEventSystemHandler 组件private static void GetEventList<T>(GameObject go, IList<IEventSystemHandler> results) where T : IEventSystemHandler{// Debug.LogWarning("GetEventList<" + typeof(T).Name + ">");if (results == null)throw new ArgumentException("Results array is null", "results");if (go == null || !go.activeInHierarchy)return;var components = ListPool<Component>.Get();go.GetComponents(components);var componentsCount = components.Count;for (var i = 0; i < componentsCount; i++){if (!ShouldSendToComponent<T>(components[i]))continue;// Debug.Log(string.Format("{2} found! On {0}.{1}", go, s_GetComponentsScratch[i].GetType(), typeof(T)));results.Add(components[i] as IEventSystemHandler);}ListPool<Component>.Release(components);// Debug.LogWarning("end GetEventList<" + typeof(T).Name + ">");}

主要需要分析的是Execute这个方法的 functor 参数，他实现的功能就是相对应需要执行的方法如OnPointerEnter,定义在了外部，通过传参的方法来执行对应的方法，

参数还有一个gameObject，这是一个必须的参数，这个gameObject在构建输入数据的时候已经被赋值，并随着输入数据进行传递，让我们来看一下UGUI是怎么获取当前需要接受这个事件的gameObject的。

    // 所有输出模块的基类public abstract class BaseInputModule : UIBehaviour{// 接受事件检测的对象列表protected List<RaycastResult> m_RaycastResultCache = new List<RaycastResult>();}
    public class EventSystem : UIBehaviour{// 这个方法调用了会获取所有需要检测的组件列表public void RaycastAll(PointerEventData eventData, List<RaycastResult> raycastResults){raycastResults.Clear();var modules = RaycasterManager.GetRaycasters();var modulesCount = modules.Count;for (int i = 0; i < modulesCount; ++i){var module = modules[i];if (module == null || !module.IsActive())continue;module.Raycast(eventData, raycastResults);}raycastResults.Sort(s_RaycastComparer);}}

RaycastAll方法会获取所有需要响应检测的列表，并对其进行排序，然后在构造输入数据的时候获取第一个被检测的对象，这个对象就是那个GameObject，其他具体检测逻辑请参考Canvas的渲染模式以及源码

对于Graphic对象来说，我们有两种方式控制其射线的检测逻辑，一种是继承并重写Graphic.Raycast方法，还有一种就是让子类同时继承 ICanvasRaycastFilter 接口, 实现其接口方法 IsRaycastLocationValid 来进行来实现过滤。

总结

UGUI的逻辑已经比较完善了，源框架代码也很规范，希望这篇文章可以帮助大家快速的通读UGUI的源码相关逻辑，共同进步，哦耶~

好像少了一个部分还没说就是关于自适应布局逻辑及更新这块，还有蒙板逻辑，其他部分留着下次再补充吧

布局组件这块已经更新好啦，>>>>>> 戳这里 Unity UGUI自适应布局系统详解<<<<<<

那么今天就教程就到这里结束了，如果觉得我说的有用的话就在我的>>>>>> 戳这里 github项目<<<<<<点上一个小小的star吧，咖啡就不用请我喝了，屑屑(比心)


http://chatgpt.dhexx.cn/article/GrJ0Ljbq.shtml

相关文章

UGUI基础学习

UGUI基础学习

目录 TEXT IMAGE ROWIMAGE TEXT fontsize:字体 color&#xff1a;字体颜色 ;inespacing:字行间隔 代码展示&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class TEXTtest : MonoBehaviour {p…
阅读更多...
UGUI源码解析——总览

UGUI源码解析——总览

一&#xff1a;图像相关 ——UIBehaviour&#xff1a;UI组件的基类&#xff0c;继承MonoBehaviourUGUI源码解析——UIBehaviour——CanvasUpdateRegistry&#xff1a;图像、布局重建注册器UGUI源码解析——CanvasUpdateRegistry——ICanvasElement&#xff1a;图像、布局重建接…
阅读更多...
UGUI 全方位了解

UGUI 全方位了解

随着 unity3d 4.6 ~ 5.x 新 UI 系统终于与大家见面了。这篇文章将不会介绍如何使用按钮、滚动条之类的UI控件&#xff0c;这些内容可以参考 Unity Manual&#xff1b;这篇文章的重点是&#xff0c;如何理解 UI 系统的设计&#xff0c;以便更好的在实际中使用它。 RectTransfor…
阅读更多...
UI框架(UGUI)

UI框架(UGUI)

整个游戏的工程源码下载链接&#xff1a;点击打开链接 可以参考的写的Demo和本文章来学习 毕竟有些细节问题在文章中不能一一说到 工具&#xff1a;VS2010、Unity5.2.3f 先介绍整个Demo的主面板 其中任务、技能、符文等等都是按钮&#xff0c;点击按钮会生成相应面板 【Pro…
阅读更多...
UGUI相关使用

UGUI相关使用

UGUI 文章目录 UGUI1.六大基础组件概述1.1 Canvas组件1.2 CanvasScaler组件1.3 Graphic Raycaster组件1.4 Event System组件1.5 Standalone Input Module组件1.6 RectTransform组件 2.三大基础控件概述2.1 图像控件Image2.2 文本控件Text2.3 RawImage原始图像组件 3.七大组合控…
阅读更多...
Unity UGUI系统

Unity UGUI系统

UI系统对比 对 UI 系统的选择取决于是为 Unity 编辑器开发 UI&#xff0c;还是为游戏或应用程序开发运行时 UI。 UI 的类型UI 工具包Unity UI(uGUI)IMGUI注意事项运行时&#xff08;调试&#xff09;✔ *✔✔这指用于调试用途的临时运行时 UI。运行时&#xff08;游戏内&…
阅读更多...
UGUI 详解

UGUI 详解

1.RectTransform RectTransform组件 继承自Transform组件&#xff0c;是2D界面中元素的Transform。 对比Transform增加了新的属性分别是&#xff1a;Anchor&#xff08;锚点&#xff09;和 Pivot&#xff08;轴心点&#xff09;。 属性&#xff1a; localPosition&#xff1a;图…
阅读更多...
UGUI学习笔记（八）UGUI不规则响应区域

UGUI学习笔记（八）UGUI不规则响应区域

一、Unity自带的点击策略 在上一篇文章中我们了解到&#xff0c;UI的默认响应区域是UI元素所在的矩形框线内的区域。这也就意味着&#xff0c;当UI的图形为不规则形状时&#xff0c;点击图形的外部也可能会触发事件。 但其实Unity自带了一种不规则区域点击策略。要想使用它&…
阅读更多...
[Unity UGUI图集系统]浅谈UGUI图集使用

[Unity UGUI图集系统]浅谈UGUI图集使用

**写在前面&#xff0c;下面是自己做Demo的时候一些记录吧&#xff0c;参考了很多网上分享的资源 一、打图集 1.准备好素材&#xff08;建议最好是根据图集名称按文件夹分开&#xff09; 2、创建一个SpriteAtlas 3、将素材添加到图集中 4、生成图集 到此&#xff0c;我们的图…
阅读更多...
Ngui和Ugui的区别

Ngui和Ugui的区别

NGUI的元素更新&#xff1a; UIPanel.LateUpdate采用轮询的方式&#xff0c;每帧都会执行&#xff0c;并且每帧都会有UIPanel.UpdateWidgets这个函数的调用&#xff0c;做的事情就是对这些UI元素的位置、缩放等信息的获取&#xff0c;也就是即使没有变化的UI元素&#xff0c;也…
阅读更多...
Unity—UGUI

Unity—UGUI

每日一句&#xff1a;读数、学习 去更远的地方&#xff0c;才能摆脱那些你不屑一顾的圈子 目录 InputFiled输入框 例&#xff1a;用户名和密码 Toggle组件 案例&#xff1a;冷却效果 InputFiled输入框 Text Component 输入文本组件 Text输入内容 Character Limit 输入字符…
阅读更多...
【Unity3D】UGUI概述

【Unity3D】UGUI概述

1 UGUI 与 GUI 区别 GUI控件 在编译时不能可视化&#xff0c;并且界面不太美观&#xff0c;在实际应用中使用的较少。UGUI 在编译时可视化&#xff0c;界面美观&#xff0c;实际应用较广泛。 2 Canvas 渲染模式&#xff08;Render Mode&#xff09; Screen Space - Overlay&a…
阅读更多...
怎样使用UGUI

怎样使用UGUI

什么是 UGUI UGUI 是 Unity 自带的一套 GUI 系统&#xff0c;含有基本的一些 UI 控件。 UGUI 控件有哪些&#xff1f; 我们常用的有 Canvas&#xff0c;Text&#xff0c;Image&#xff0c;Button&#xff0c;Toggle&#xff0c;Slider&#xff0c;Scroll Bar&#xff0c;Scroll…
阅读更多...
Unity3D UGUI系列之合批

Unity3D UGUI系列之合批

目录 1. 什么是UGUI的合批1.1 准备工作1.2 批处理1.3 批处理的意义1.4 UGUI的合批 2 分析工具的使用2.1 Frame Debugger的使用2.2 Profiler-UI的使用 3 UGUI合批规则3.1 UGUI合批初体验3.2 UGUI合批被打断初体验3.3 UGUI合批规则详解3.3.1 合批规则3.3.2 合批规则示例13.3.3 合…
阅读更多...
unity中NGUI与UGUI的区别？

unity中NGUI与UGUI的区别？

什么是UI? UI即User Interface&#xff08;用户界面&#xff09;的简称。泛指用户的操作界面&#xff0c;UI设计主要指界面的样式&#xff0c;美观程度。而使用上&#xff0c;对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得…
阅读更多...
【UGUI】UGUI入门，系统介绍

【UGUI】UGUI入门，系统介绍

Unity 2017.1.0f3 常用的UI控件 添加UI控件 创建UI控件时&#xff0c;如果没有Canvas和EventSystem系统会自动创建。 Canvas是画布&#xff0c;是所有UI控件的根类&#xff0c;所有UI控件都必须在Canvas上绘制。如果UI控件不在Canvas下&#xff0c;将无法正常渲染显示。 Eve…
阅读更多...
UGUI框架

UGUI框架

记录最新学习的UGUI框架。 UIType类保存面板基本信息&#xff08;名称、路径&#xff09;&#xff0c;该面板会在具体的面板类里面&#xff08;StartPanel&#xff09;进行实例化。 public class UIType {private string name;public string Name { get > name; }private …
阅读更多...
UGUI的简单理解

UGUI的简单理解

1.Canvas（画布） UGUI中几乎所有的组件都要在Canvas下搭建 2.EventSysteam（事件系统） 如果进行UI搭建的时候，缺少或删除了EventSysteam的话会导致UGUI中的组件无法交互，无法发生事件. 3.Panel 平时我们进行UI工程搭建的时候，我们都会先创建Panel面板，创建Panel面板的…
阅读更多...
UGUI底层

UGUI底层

关于UGUI底层的小知识---上 (转雨松momo) 1 | UGUI原理简述 1.1　原理 首先得生成显示UI用的Mesh&#xff0c;如图1-1所示&#xff0c;一个矩形的Mesh&#xff0c;由4个顶点&#xff0c;2个三角形组成&#xff0c;每个顶点都包含UV坐标&#xff0c;如果需要调整颜色&#xf…
阅读更多...
UGUI组件详解

UGUI组件详解

什么是 UGUI UGUI 是 Unity 自带的一套 GUI 系统&#xff0c;含有基本的一些 UI 控件。 UGUI 控件有哪些&#xff1f; 我们常用的有 Canvas&#xff0c;Text&#xff0c;Image&#xff0c;Button&#xff0c;Toggle&#xff0c;Slider&#xff0c;Scroll Bar&#xff0c;Scroll…
阅读更多...
推荐文章

Copyright @ 2022~2023