• UI开发核心问题-UI随屏幕自适应


    屏幕分辨率对UI适配的影响

      一般来说,UIRoot都会选择FixSize的缩放模式,这样可以让UI随着分辨率而自动缩放,保持和屏幕相对的大小比例不变,让UI整体看上去不会有变大变小的奇怪现象。但是,还有另一个真正严重的问题:不同屏幕的宽高比不一样。

      在Unity中,不同屏幕的宽高比,一般都会以高度为基准而拉伸宽度。

      切换屏幕比例模式的方法为在Game视图中的屏幕比例菜单,FreeAspect为不限长宽比,可以在其中选择想要的长宽比。

      如果屏幕比例菜单中没有想要的屏幕比例,可以单击菜单最底部那个小较好按钮,会弹出一个让自定义一个新的屏幕比例模式的界面,Label选项中,可以输入一个名称来为这个自定义的屏幕比例命名。在Type中可以选择FixedResolution和Aspect Ratio两个选项,如果选择FixedResolution,可以在下面的Width&Height中输入分辨率的宽和高的具体像素;如果选择Aspect Ratio,可以在下面的Width&Height中输入分辨率的宽高比。设定好之后单击OK按钮,即可保存这个自定义的屏幕分辨率模式。

      因为NGUI的UIRoot具备FixSize模式,所以,一般在进行UI随屏幕自适应时,主要着重解决的是屏幕宽高比发生变化之后的自适应。

    主流设备的屏幕分辨率

      不论是PC设备还是移动设备,屏幕分辨率一般处于4:3到16:9之间,一般来说,只需要考虑这两个值作为极限值即可。

    自适应核心组件Anchor的使用

      所谓Anchor,即为锚点,它的工作原理是它会自动地绑定摄像机的某一个点作为锚点,锚点一共有上左、上、上右、左、中、右、左下、下、右下9个点可以设定。当相机变动时,Anchor组件所在的物体位置也会跟随相机的变动而变动,并始终处于相机边界的锚点位置。

      Anchor的创建方式,在Unity顶部NGUI菜单中选择Create->Anchor即可。

      Anchor组件的设置:

        UICamera选项自动锁定了该Anchor所在的UI的摄像机,它将会绑定这个摄像机边缘上的某一个点作为锚点。Container即为包含的物体,一般情况下无需设置,因为将物体放置于Anchor的子物体中,就可以利用“子物体跟随父物体”实现跟随Anchor的锚点。

        Side一项为核心项,选择该Anchor的脑电,一共9个点,分别对应相机边缘的上左、上、上右、左、中、右、左下、下、右下。

        RunOnlyOnce意为执行一次,即只在开始的时候进行一次适配,默认为勾选上,一把把不需要去修改它。

        RelativeOffset,这是Anchor的相对位置偏移,百分比形式的。

        PixelOffset,像素偏移,Anchor会相对于相机边缘上的锚点以像素为单位进行偏移。

    使用Anchor的注意事项

      (1)在设定了Anchor的Side锚点之后,Anchor会自动跑到响应的锚点位置上去,不需要手动拖动Anchor。

      (2)不论是3D UI还是2D UI,Anchor的用法是一模一样的,不要手动拖动Anchor的位置。

      (3)一般情况下,尽量不要去设置Anchor的RelativeOffset和PixelOffset,就让Anchor保持锚点原位置,然后将UI控件放到Anchor下作为子物体,再去调整UI控件的位置。

      (4)Anchor物体身上,尽量保证只有Anchor一个组件,以便于管理维护。

      (5)一套UI体系中,可以有无数多个Anchor(例如有5个Anchor都定位于左上角是被允许的),但是,尽量确保Anchor的父物体中没有Anchor,也就是尽量避免Anchor中套Anchor。Anchor的父物体可以是UI Root,也可以是一个空物体。

      (6)不要滥用Anchor,如果相机边缘的9个锚点中的每个点都有多个Anchor来定位,那么一定是UI结构的实际有问题了。

    正式开发UI之前必须明确的几个问题

      (1)针对的是什么样的平台。

      (2)游戏的设备屏幕宽高比最大、最小是几比几。

      (3)游戏开发时的标准分辨率是多少像素,这将关系到美术制作图片资源的标准。

      (4)检查UI设计草图,和策划人员明确哪些UI会在屏幕宽高比变化时自适应位置。

      (5)明确需要自适应位置的UI分别属于哪一个锚点,并设计一个最佳的UI结构。

  • 相关阅读:
    mac c++编译出现segmentation fault :11错误
    ssh 连接缓慢解决方法
    237. Delete Node in a Linked List
    203. Remove Linked List Elements
    Inversion of Control Containers and the Dependency Injection pattern
    82. Remove Duplicates from Sorted List II
    83. Remove Duplicates from Sorted List
    SxsTrace
    使用CCleaner卸载chrome
    decimal and double ToString problem
  • 原文地址:https://www.cnblogs.com/-soy/p/5878309.html
Copyright © 2020-2023  润新知