Unity UI -- (3)管理屏幕大小和锚点

这篇具有很好参考价值的文章主要介绍了Unity UI -- (3)管理屏幕大小和锚点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        在前面我们探索了一些基本的文本格式。我们需要考虑一个问题,这个文本在屏幕大小发生变化时该如何适应呢?

        在Unity中,我们可以使用Canvas和Anchor Point(锚点)系统来确保UI元素总是出现在正确的位置,不管它们在哪种屏幕上出现。

修改Editor布局方便UI相关工作

        在编辑修改UI的时候,让场景视图和游戏视图同时都能看到是非常有帮助的。

        1. 重新安排一下Unity Ediotr的布局,让场景视图和游戏视图堆叠到一起。在Layout选择器里,使用2 by 3选项可以达到此目的,当然我们也可以自定义布局,最终期望的效果类似下图:

Unity UI -- (3)管理屏幕大小和锚点

        2. 在Hierarchy中,双击Canvas游戏物体,在场景视图中框住它。现在的透视视图会变成3D场景在Canvas的左下角位置,变得很小,屏幕主要显示的是一个巨大的2D矩形。

Unity UI -- (3)管理屏幕大小和锚点

        如果我们没有看到矩形的边框,可能需要再场景视图里启用Gizmos。

        这个矩形Canvas表示了项目最终要显示到的屏幕,所有UI元素必须在矩形内才能在屏幕上被看到。

        3. 在场景视图中,启用2D模式。

Unity UI -- (3)管理屏幕大小和锚点

        由于Canvas是二维平面的,因此2D模式是最方便的编辑方式,2D模式会限制元素只在X和Y轴上移动。要退出2D模式,再点一次2D按钮即可。

选择长宽比(aspect ratio)

什么是长宽比?

        我们现在实际已经知道了屏幕的轮廓(Canvas),接下来我们设置一下屏幕的形状,或者叫做长宽比(aspect ratio)。

        长宽比描述了屏幕的宽度和高度的关系。举个例子,老电视机使用4:3长宽比,意思是屏幕有4个单位的宽度和3个单位的高度。宽屏电视使用16:9长宽比,意思是一样的。

Unity UI -- (3)管理屏幕大小和锚点

锁定项目的长宽比

        Unity允许我们选择Canvas所使用的长宽比。

        1. 在游戏视图中,使用屏幕分辨率下拉菜单,选择Free Aspect。

Unity UI -- (3)管理屏幕大小和锚点

        Free Aspect意思是屏幕可以自由地改变长宽比。当Free Aspect被启用时,Canvas会我们改变游戏视图窗口的时候改变它的形状和大小。如果我们想要确保场景在不同形状的屏幕上看起来都OK,使用Free Aspect非常有帮助。

        2. 移动游戏视图窗口的边界,让其变得更宽或更窄。我们会注意到场景视图里的Canvas会自适应游戏视图窗口的大小和形状改变。 

Unity UI -- (3)管理屏幕大小和锚点

Unity UI -- (3)管理屏幕大小和锚点

        在改变窗口过程中,我们也可以看到文本会跳出屏幕外,从这点可以看出UI要能正确响应不同的屏幕有多困难。简单起见,我们将长宽比设置为一个固定值。 

        3. 在游戏视图中,使用屏幕分辨率下拉菜单,选择16:9或16:10长宽比。

            16:9是标准的宽屏比,因此是最安全的选项。为一个可预期的长宽比做UI设计会让工作简单不少。使用一个固定的长宽比,我们会注意到游戏视图窗口的变化并不会影响场景视图里的Canvas的长宽比。

添加设置按钮到屏幕某个角落

        1. 在Hierarchy中,点击右键,选择UI > Button - TextMeshPro。Canvas上会出现一个按钮,它是Canvas游戏物体的一个子物体。

Unity UI -- (3)管理屏幕大小和锚点

         2. 在Hierarchy中,重命名"Button"为“Settings Button”。

        3. 展开Settings Button游戏物体,选择Text(TMP)子游戏物体。这是一个TextMeshPro元素,和之前的标题文本所用的UI元素一样。将它的文本改成“Settings”,编辑一下文字的风格大小等。

Unity UI -- (3)管理屏幕大小和锚点

        4. 使用移动工具,将按钮放到Canvas的某个角落,在按钮和屏幕边界之间保留一定的空间。选择哪个地方,按照自己的场景情况和喜好进行选择即可。

Unity UI -- (3)管理屏幕大小和锚点

Unity UI -- (3)管理屏幕大小和锚点

什么是Anchor?

 为何我们需要锚点?

        现在我们已经将设置按钮放到了屏幕的某个角落了。

Unity UI -- (3)管理屏幕大小和锚点

        一切看起来似乎很美好,但如果我们移动游戏视图窗口的边界,增加或减少屏幕的大小,按钮会飘到我们不想要的位置上去。

        如果屏幕太小,按钮会飘出屏幕外。

Unity UI -- (3)管理屏幕大小和锚点

         如果屏幕太大,按钮则会靠近中心位置。

Unity UI -- (3)管理屏幕大小和锚点

        Canvas的锚点系统控制着这种移动。每个Canvas上的UI元素都锚定到了其父物体上的一个特定的位置,当屏幕大小改变时它会相对于这个位置移动。

锚点可视化

        在场景视图的工具栏中,选择Rect工具(或在场景视图中按键盘的T键),然后选择设置按钮游戏物体。

Unity UI -- (3)管理屏幕大小和锚点

        Rect工具选中时,我们能卡到按钮的Rect Transform的四个角,这四个角以蓝色圆点表示。我们还可以看到锚点处于屏幕中心,由四个指向内部的小三角形 组成。

        注:上图中为了演示锚点,关闭了标题的TextMeshPro物体和天空盒。

        按钮总是会保持和锚点的距离,无论屏幕有多大或多小。我们可以通过修改游戏视图窗口的大小来验证一下。

        下图是游戏视图窗口非常小的时候,设置按钮相对于屏幕中心的位置,按钮会跑到屏幕外。

Unity UI -- (3)管理屏幕大小和锚点

        下图是游戏视图窗口正常大小的时候,设置按钮相对于屏幕中心的位置,按钮处于右上角。

Unity UI -- (3)管理屏幕大小和锚点

        下图是游戏视图窗口非常大的时候,设置按钮相对于屏幕中心的位置,按钮靠近屏幕中心。

Unity UI -- (3)管理屏幕大小和锚点

        每一个按钮的四个角的蓝色小圆点,对应锚点的四个小三角。

Unity UI -- (3)管理屏幕大小和锚点

        我们可以单独地控制锚点的四个角,但目前我们不需要这样做。

为按钮设置锚点

        将标题的锚点放到屏幕中心可能没什么问题,因为标题就应该停留在靠近屏幕中心的位置。但对于设置按钮来说,它应该在屏幕的角落里。因此它应该被锚定在屏幕的角落上。

        1. 保持设置按钮选中状态,鼠标选择锚点的中心位置,然后将它移动到最靠近按钮的角落位置。要小心不要只点中锚点的某一个单独的小三角,而是直接在锚点中心点击它做整体移动。

Unity UI -- (3)管理屏幕大小和锚点

        2. 尝试调整游戏视图窗口的大小。现在按钮应该会和屏幕的某个角落的位置保持不变。

            为了节省我们的时间精力,Unity中有一些预设的锚点设置供我们使用。

        3. 保持设置按钮物体被选中,在Rect Transform组件中,选择Anchor Preset图标。

Unity UI -- (3)管理屏幕大小和锚点

            这样会打开预设锚点面板:

Unity UI -- (3)管理屏幕大小和锚点

        4. 尝试选择一下不同的预设锚点位置,注意看锚点在场景视图中的位置变化。可以修改一下游戏视图窗口的大小来看看实际效果,最后选择一种最适合你的情况即可。

什么是支点(pivot point)?

        我们在Anchor Presets菜单顶部,会看到一个Shift:Aslo set pivot。

        当设置一个预设锚点的同时按住Shit键时,我们会同时改变物体的支点(pivot point)。

Unity UI -- (3)管理屏幕大小和锚点

        下图中的空心圆圈就是物体的支点,物体的位置移动、旋转和缩放等,都会以这个支点为参考。当我们的UI元素没有按照预期行为动作时,支点也是一个我们需要关注的点。

Unity UI -- (3)管理屏幕大小和锚点

        关于支点、锚点的更多细节信息,可以参考Unity官方文档:
Basic Layout | Unity UI | 1.0.0https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html

探索:实验Canvas缩放

        在设计UI的时候,我们可能会注意到当我们缩放游戏视图窗口分辨率变大变小的时候,UI元素占据屏幕的比例大小会有所不同。

        在更高分辨率下,UI看起来占比更小;在更低分辨率下,UI看起来占比更大。

Unity UI -- (3)管理屏幕大小和锚点

        这和Canvas Scaler有关系,Canvas Scaler是一个控制UI元素在不同屏幕大小中的缩放和分辨率的组件。 

        1. 选中Canvas游戏物体,定位到Canvas Sclaer组件。注意UI Scale Mode属性默认被设置为了Constant Pixel Size。

Unity UI -- (3)管理屏幕大小和锚点

            当使用constant pixel size时,无论屏幕的总大小是多少,UI元素总是使用相同的像素个数。在某些情况下,这会比较有用,比如我们想要在非常低分辨率设备上用户也能看清我们的文字的时候。

        2. 设置UI Scale Mode为Scale with Screen Size。这个模式会根据屏幕分辨率按照比例缩放UI元素。UI元素会占据相同的比例。

Unity UI -- (3)管理屏幕大小和锚点

            默认情况下,Canvas Scaler会匹配屏幕的宽度,使用800x600为参考分辨率。

Unity UI -- (3)管理屏幕大小和锚点

        3. 增加或减少参考分辨率的X(width)会让我们的UI元素适应到我们所用屏幕的最佳相对大小。

            每种UI Scale模式都有其优点:

            Scale with Screen Size会保证所有UI元素无论屏幕大小,都能被放到相同的相对位置上。

            Constant Pixel Size会确保UI元素总是有相同的像素个数。

            Constant Physical Size会让UI元素占据相同的物理大小,这是因为它也考虑了设备的DPI(dots per inch)。

        4. 选择Constant Pixel Size或Scale with Screen Size中的一种作为你的项目的UI Scale Mode。文章来源地址https://www.toymoban.com/news/detail-510588.html

到了这里,关于Unity UI -- (3)管理屏幕大小和锚点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PyQt5实现UI自适应屏幕大小且可缩放

    PyQt5实现UI自适应屏幕大小且可缩放 在开发GUI界面的过程中,为了让用户能够在不同尺寸屏幕下都有好的体验,我们需要实现UI自适应屏幕大小的功能。而PyQt5提供了很多方法和工具来达到这个目的。 下面是一个简单的例子,展示如何使用PyQt5来实现UI自适应屏幕大小的功能:

    2024年01月16日
    浏览(34)
  • 【Unity细节】为什么UI移动了锚点,中心点和位置,运行的时候还是不在设置的位置当中

    👨‍💻个人主页 :@元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 😶‍🌫️收录于专栏 :unity细节和bug 😶‍🌫️优质专栏 ⭐【软件设计师高频考点暴击】 此时我已经将锚点设置为左上角,但是运行时它不在左上角,而是在中间 它的父对象不

    2024年02月05日
    浏览(71)
  • Unity UGUI文本内容自适应大小和内容滚动

    要实现UGUI文本内容自适应大小和内容超出一定范围就自动出现滚动条实现滚动,具体需要如下操作。 1、创建Scrooll View组件 只勾选Vertical。 并且在组件子组件Content中创建Vertical Layout Group和Content Size Fitter组件,如下图所示, 然后在Content组件下,创建文本文件,如下图 最后就是

    2024年02月04日
    浏览(38)
  • Unity解决:Unity SpriteRenderer屏幕自适应的多种模式【动态调整大小 以遮盖Ipad所谓的安全区问题】

    上代码: 如何使用: 1.把脚本挂在Camera上 2.把需要进行屏幕适配的SpriteRender对象放在Member队列中 3.选择更新类型EUpdateType、选择适配类型EFillModel即可

    2024年02月20日
    浏览(34)
  • 【Unity】URP屏幕后处理UI模糊效果实现

     这里Canvas(1)设置为Overlay能渲染出指定UI高清,其他UI模糊,然而这做法非常不好,如果此时再打开UI 以及 关闭模糊效果 要将这些置顶UI 恢复到原本Canvas里,也就是要管理2套Canvas Shader代码实现模糊  1个Canvas和2个摄像机 主要以上内容,实际上就是因为Render Pass Event是只能Af

    2024年02月10日
    浏览(39)
  • 【Unity】获取UI物体在屏幕上的位置

    获取ui在自身Canvas的相对位置且canvas全屏 ui的屏幕坐标就是自身相对于canvas位置加上canvas大小的1/2;

    2024年02月12日
    浏览(45)
  • 【Unity】 Canvas及UI屏幕自适应的基本介绍

    当使用Unity引擎开发游戏时,可以使用Canvas(画布)来处理游戏中的用户界面࿰

    2024年02月12日
    浏览(48)
  • [unity]如何通过代码获取UI宽高和屏幕宽高

    1.获取UI宽高 首先,使用GetComponentRectTransform().sizeDelta获取,但是这样会有问题,会跟锚点设置有关,改变设置后获取不对 只适用于MiddleCenter 所以又看了API,可以使用GetComponentRectTransform().rect获取 打印如下:  2.获取屏幕宽高 宽度: UnityEngine.Screen.width 高度: UnityEngine.Screen.

    2024年02月17日
    浏览(39)
  • unity webgl网页运行后屏幕模糊,UI无响应问题解决

    【记一个莫名其妙的问题】 工具:Unity 2019.4.40f1c1 先前Unity打包apk,设置了最大帧率15 在Project Settings -Quality中设置了Other-VSync Count:Don’t Sync 运行后,帧率稳定在100上下,呵呵 后来在代码中加了一行: 问题解决 今天,准备再打一个webgl包 打包运行后,打开网页,画面停留在

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包