UGUI源码深度剖析优质PPT.pptx
- 文档编号:13956432
- 上传时间:2022-10-15
- 格式:PPTX
- 页数:60
- 大小:1.98MB
UGUI源码深度剖析优质PPT.pptx
《UGUI源码深度剖析优质PPT.pptx》由会员分享,可在线阅读,更多相关《UGUI源码深度剖析优质PPT.pptx(60页珍藏版)》请在冰豆网上搜索。
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),M,N,构成三角形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=Sliced,border.x,border.y,border.z,border.w,s_VertScratch0,s_VertScratch1,s_VertScratch2,s_VertScratch3,源码剖析-Image,Image.Type=Tiled,rec.height,tileheight,rec.width,tilewidth,A,B,C,D,E,F,G,H,I,右图中,tilewidthrec.width2*tilewi,dthtileheightrec.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,源码剖析-Image,Image.Type=FilledFillMethod=Horizontal,rec.height,rec.width,FillAmount,A,B,C,D,A=(0,0)B=(FillAmount*rec.width,0)C=(x,rec.height)D=(FillAmount*rec.width,rec.height),源码剖析-Image,Image.Type=FilledFillMethod=Vertical,rec.height,rec.width,FillAmount,A,B,A=(0,0)B=(rec.width,0)C=(0,rec.height*FillAmount)D=(rec.width,0,rec.height*FillAmount),D,C,源码剖析-Image,Image.Type=FilledFillMethod=Radial90FillAmount=0.3,rec.width,A,B,C,rec.height,angle=0.3angle=10.3=0.7angle=0.7*90*0.0174533=1.099cos=cos(1.099)=0.454sin=sin(1.099)=0.891,源码剖析-Image,rec.width,A,B,C,rec.height,Image.Type=FilledFillMethod=Radial90FillAmount=0.3同时缩放1/sin,A=(0,0)B=(0,rec.height)C=(Mathf.Lerp(0,rec.width,cos),rec.height)=(rec.width*0.509,rec,height),源码剖析-Image,Image.Type=FilledFillMethod=Radial180FillOrigin=BottomFillAmount=0.4,rec.width,A,B,C,rec.height,D,源码剖析-Image,Image.Type=FilledFillMethod=Radial180FillOrigin=BottomFillAmount=0.4,rec.width,A,B,C,D,rec.height,val=0.8,同Radial90一样,源码剖析-Image,VS,源码剖析-Image,VS,源码剖析-Selectable家族,源码剖析-Selectable,源码剖析-Selectable,布局系统-概述,Theautolayoutsystemprovideswaystoplaceelementsinnestedlayoutgroupssuchashorizontalgroups,verticalgroups,orgrids.Italsoallowselementstoautomaticallybesizedaccordingtothecontainedcontent.,布局系统-概述,布局系统-概述,200,200,200,200,布局系统-概述,500,101010000,布局系统-概述,567.5,77.577.577.5,布局系统-布局过程,布局系统-布局过程,布局系统-布局计算Thepropertiesareusedinthefollowingmannerwhenalayoutcontrollerallocateswidthorheighttoalayoutelement:
@#@Firstminimumsizesareallocated.Ifthereissufficientavailablespace,preferredsizesareallocated.Ifthereisadditionalavailablespace,flexiblesizeisallocated.,布局系统已知如下条G件am:
@#@eObject.Width=800,布局系统,布局系统,totalMinSize=500totalPreferredSize=530tmotianlMFleaxxiLbelerpSize=4=Mathf.Clamp01(size-totalMinSize)/(totalPreferredSize-totalMinSize)=iteMmaFthlefx.CiblalemMpu0l1ti(p(8li0e0r-500)/(530-500)=1=(size-totalPreferredSize)/totalFlexibleSize=(800-530)/4=67.5,7.5,totalMinSize=500totalPreferredSize=530totalFlexibleSize=4minMaxLerp=1itemFlexibleMultiplier=6childSize=Mathf.Lerp(min,preferred,minMaxLerp)childSize+=flexible*iAte.WmiFdlethxi=bleMMauthltfi.pLleierrp(500,500,1)=500A.Width+=1*67.5=500+67.5=567.5B.Width=Mathf.Lerp(0,10,1)=10B.Width+=1*67.5=10+67.5=77.5,布局系统,totalPreferredSize=420,totalMinSize=330totalFlexibleSize=4minMaxLerp=1,itemFlexibleMultiplier=95,布局系统,totalPreferredSize=420,totalMinSize=330totalFlexibleSize=4,minMaxLerp=1itemFlexibleMultiplier=95A.Width=Mathf.Lerp(150,200,1)=200BA.Wiidtth=+=M1at*h9f5.L=erp20(1020+,19550=,1)=291550,CB.Width+=M1a*t9h5f.L=er1p5(010+,2905,1=)=,2045,DC.Width+=M1a*th95f.L=er2p0(5+0,9550=,1)=,51105D.Width+=1*95=50+95=,UGUI扩展任务:
@#@给Image添加百叶窗效果,UGUI扩展,width,height,80%,UGUI扩展,width,height,80%,结束?
@#@,一切刚刚开始,加油,好运,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- UGUI 源码 深度 剖析