通用框架(十)创建UIRoot和UIGroup以及UI适配

UIRoot选取Camera模式,添加UICamera

可以看到我们对UIRoot的一些设置,包括定义数据格式,每个Group都会设置自己的id,以及层级,id方便我们以后再配置数据表的时候,根据每个ui的设置的配置信息,方便直接进行加载UI,也对UI方便进行统一管理。

每一个UIGroup都会对自己的层级有一个基础排序,这个可根据自己项目设定。

	public class UIGroup
	{
                /// <summary>
		/// 分组编号
		/// </summary>
		public byte Id;

                /// <summary>
		/// 基础排序
		/// </summary>
		public ushort BaseOrder;

		public Transform Group;

	}

UI适配

UI适配首先UI适配要注意一点就是,常用分辨率的比值,比如我们常用的1280*720的分辨率比值为1.777,而我们常用的16/9分辨率比值也为1.7777,所以我们做ui适配主要要要注意的就是不同比值下,ui的适配问题。需注意一点类似于苹果的刘海屏需要进行特殊处理。

我们最常用的分辨率比值为16/9蛰是市面大多数屏幕的比例,那么我们把16/9设定为标准分辨率。

那么我们可以把不同的分辨率设为两类,一类是比16:9大的分辨率,一类为比16:9小的分辨率。

做ui适配的注意点有两点

需要让UIRoot的Scale为1
调整Match的比例

各位小伙伴可以看看自己的UIRoot的缩放值对不对

这个Scale值是根据UICamera的Size决定的,UIRoot的Scale如果想让他变成1的话,需要把屏幕分辨的高/2变为Camera的Size,你就可以发现自己的UIRoot的Size变为1了;

UICamera的Size = 分辨率的高/2

比如我当前的分辨率是1280*720那么UICamera的size就是720/2=360,设置过后这样你的UIRoot的缩放就为1了。

我们这样设置的目的是,未来在开发屏幕Effect的时候需要计算不同画布实时的缩放值,与其计算不如我们直接项目启动时根据不同分辨率直接设置。

Match

这个值为 width 意思为适配宽度,把宽度设置为屏幕宽度,然后保持比例, heigth 相反。

如果我们做横版游戏设置为heigth即可,竖屏相反。

        /// <summary>
        /// 标准分辨率比值
        /// </summary>
        private float m_StandarScreen = 0;

        /// <summary>
        /// 当前分辨率比值
        /// </summary>
        private float m_CurrScreen = 0;

        m_StandarScreen = m_StandarWidth / (float)m_StandarHeigth;
        m_CurrScreen = Screen.width / (float)Screen.height;

设置两个值一个是标准的比值,一个是当前屏幕的比值。

然后写适配方法

  1. loading界面的适配
  2. 全屏ui的适配
  3. 普通窗口的适配
        /// <summary>
        /// LoadingForm自动适配
        /// </summary>
        public void LoadingFormCanvasScaler()
        {
            if (m_CurrScreen > m_StandarScreen)
            {
                //设置为0
                m_UIRootScaler.matchWidthOrHeight = 0;
            }
            else
            {
                m_UIRootScaler.matchWidthOrHeight = m_StandarScreen - m_CurrScreen;
            }
        }
        /// <summary>
        /// 全屏窗口FullForm适配缩放
        /// </summary>
        public void FullFormCanvasScaler()
        {
            m_UIRootScaler.matchWidthOrHeight = 1;
        }

        /// <summary>
        /// 普通Form自动适配
        /// </summary>
        public void NormalFormCanvasScaler()
        {
            m_UIRootScaler.matchWidthOrHeight = (m_CurrScreen >= m_StandarScreen) ? 1 : 0;

        }

这三个方法核心是如果当前比值为1.7777的话比这个值大的全部设置为0,比值比这个小的就用1.7777减去小的比值。

核心方法写完之后,按照自己的不同的需求调用就好,默认NormalFormCanvasScaler();

基本上到这里ui适配就做好了,适配的基本原理也说明了。美术直接按照标准分辨率作图就好。

需要注意一点的是loading适配需要让美术把图做成一张1:1的大图,这种图是要全屏铺满,不然碰见5:4或者19:8这种极限分辨率的屏幕,会铺不满。

留下评论

邮箱地址不会被公开。 必填项已用*标注