unity3d学习(六)UI组件的使用一

勇哥注:

UI是非常重要的内容,如果想做触摸屏效果,或者把unity变成软件界面来使用的话,这个是必须搞明白的。


(一)UI的基础理论

(1)如果要使用UI,场景中至少要有一个Canvas(画布),所有的UI组件都要成为它的子物体

(2)另一个是EventSystem(事件系统),如果场景中没有,系统会自动跟你添加一个。

(3)点击image.png按钮,切换到2D视图,此时你看到了Canvas的大小,这个默认大小是跟据你的摄像机视图来的。

         如下图所示,这个图片组件在2D视图中的上下左右的位置,等于游戏视图(也就是摄像机视图)的对应位置。


image.png

(4)Canvas的“渲染模式”默认项是“屏幕空间-覆盖”,它的效果就是你的UI对象永远都是在所有场景对象的最前面。

如果切换成第三项,“世界空间”,那么Canvas连同它的子对象,都会变成一个普通的场景中的3D对象,它就可以使用Transform进行变换位置了。

image.png


(二)UI组件定位的理论

定位的作用是UI适配不同大小的屏幕设备。

(1)锚点。

如下图,锚点是作用于选中对象的父物体上面的东西,下图中的图片组件位置,是相对于锚边计算的坐标。

image.pngimage.png

另一个要注意的是,此时锚点的4个爪子是合拢状态image.png

这个时候,图片的宽度与高度就是固定的。

这意味着,如果切换屏幕大小,图片的大小是固定的,不能正确适配屏幕。

(2)把锚点四个爪子鼠标拖动张开

image.png

此时最大的区别是图片不是固定大小,而相对于锚点4个爪子的相对位置。

而此时锚点的4个爪子又是相对于父对象(这个例子里是Canvas)的百分比位置。

因此屏幕大小一变,Canvas就变化,Canvas变化就会让锚点4个爪子位置变化,图片组件又是相对于锚点4个爪子的,因此它也会变化。

这样就达成屏幕自适应的效果。

image.png

为了方便快速移动锚点的4个爪子,你可以点击图标image.png

出现常用的方案,如下图:

image.png





本文出自勇哥的网站《少有人走的路》wwww.skcircle.com,转载请注明出处!讨论可扫码加群:
本帖最后由 勇哥,很想停止 于 2024-10-24 20:23:37 编辑

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

会员中心
搜索
«    2025年4月    »
123456
78910111213
14151617181920
21222324252627
282930
网站分类
标签列表
最新留言
    热门文章 | 热评文章 | 随机文章
文章归档
友情链接
  • 订阅本站的 RSS 2.0 新闻聚合
  • 扫描加本站机器视觉QQ群,验证答案为:halcon勇哥的机器视觉
  • 点击查阅微信群二维码
  • 扫描加勇哥的非标自动化群,验证答案:C#/C++/VB勇哥的非标自动化群
  • 扫描加站长微信:站长微信:abc496103864
  • 扫描加站长QQ:
  • 扫描赞赏本站:
  • 留言板:

Powered By Z-BlogPHP 1.7.2

Copyright Your skcircle.com Rights Reserved.

鄂ICP备18008319号


站长QQ:496103864 微信:abc496103864