UGUI源码深度剖析.pptx

UGUI源码深度剖析

方法论What-Why-HowUGUI是什么？Unity官方推出的开源GUI系统为什么要阅读源码？程序员理解世界的终极方式——Readthefuckingsourcecode怎样阅读源码？工具(VisualStudio)+调试

自制UI在一个空白的场景中显示一副图片，当鼠标点击该图片时，执行一段代码

源码简介

UML全家福

图形绘制-绘制基础核心概念：Mesh、Vertex、Triangle、UVMesh：网格，决定物体的形状Vertex：顶点，组成Mesh的元素Triangle：三角形，决定顶点顺序UV：纹理贴图坐标

图形绘制-绘制基础

图形绘制-绘制基础

图形绘制-绘制基础

图形绘制-绘制基础

图形绘制-绘制基础这是一个矩形这个矩形由M和N两个三角形组成A(0,0)B(0,1)C(1,1)D(1,0)MN构成三角形M和N的顶点顺序为顺时针构成M和N的顶点顺序分别为A,B,C和C,D,A

图形绘制-绘制基础UV：纹理坐标，定义模型中的位置与贴图之间的位置关系通俗理解，即如何将一张图片贴在模型表面

图形绘制-绘制基础A(0,0)D(1,0)C(1,1)B(0,1)(0,0)(1,0)(1,1)(0,1)

图形绘制-绘制基础A(0,0.5)D(0.5,0.5)C(0.5,1)B(0,1)(0,0)(1,0)(1,1)(0,1)(0.5,0)(1,0.5)(0,0.5)(0.5,1)(0.5,0.5)

图形绘制-绘制过程

图形绘制-绘制过程

图形绘制-绘制过程

图形绘制-绘制过程注册Canvas.willRenderCanvases事件，UI发生变动，该事件触发该事件从渲染队列中获取元素，分别调用ReBuild方法Rebuild方法中完成网格、材质等更新UI发生变动时，会将发生变动的元素加入渲染队列，实现UI更新

事件系统-输入模块为什么UI中的元素可以交互？生成射线射线碰撞检测引发事件

事件系统-输入模块ButtonClick触发过程

事件系统-输入模块

事件系统-事件触发

源码剖析-Graphic家族

源码剖析-Graphic

源码剖析-Graphic

源码剖析-Image

源码剖析-Image

源码剖析-ImageImage.Type=Slicedborder.xborder.yborder.zborder.ws_VertScratch[0]s_VertScratch[1]s_VertScratch[2]s_VertScratch[3]

源码剖析-ImageImage.Type=Tiledrec.heighttileheightrec.widthtilewidthABCDEFGHI右图中tilewidthrec.width2*tilewidthtileheightrec.height2*tileheiAg=ht(0,0)B=(tilewidth,0)C=(rec.width,0)D=(0,tileheight)E=(tilewidth,tileheight)F=(rec.width,tileheight)G=(0,rec.height)H=(tilewidth,rec.height)I=(rec.width,rec.hei

源码剖析-ImageImage.Type=FilledFillMethod=Horizontalrec.heightrec.widthFillAmountABCDA=(0,0)B=(FillAmount*rec.width,0)C=(x,rec.height)D=(FillAmount*rec.width,rec.height)

源码剖析-ImageImage.Type=FilledFillMethod=Verticalrec.heightrec.widthFillAmountABA=(0,0)B=(rec.width,0)C=(0,rec.height*FillAmount)D=(rec.width,0,rec.height*FillAmount)DC

源码剖析-ImageImage.Type=FilledFillMethod=Radial90FillAmount=0.3rec.widthABCrec.heightangle=0.3angle=1–0.3=0.7angle=0.7*90*0.0174533=1.099cos=cos(1.099)=0.454sin=sin(1.099)=0