《从Cocos到Unity》- 4.UI-屏幕适配

本期涉及到的Cocos知识点

1.Cocos中的Canvas组件和Camera组件
2.Cocos中的屏幕适配原则FixedWidth和FixedHeight

创建Canvas和Camera节点

1.首先新建一个空的Scene。将场景上所有元素删除掉。留下一个空白的场景

2.右键创建一个Canvas节点，接着在Canvas下创建一个Camera节点。这样子目前的场景就类似于Cocos的空场景了。

带有Canvas的空场景

3.选中Canvas节点。
(1)将Canvas 组件上的 Render Mode设置为Screen Space - Camera
(2)将Canvas 组件上的Render Camera设置为我们刚刚创建的Camera(用Cocos的拖拽方式即可)
(3)将Canvas Scaler 组件上的UI Scale Mode 设为Scale With Sceen Size
(4)将Canvas Scaler 组件上的 Reference Resoultion 设置为我们需要的设计分辨，比如说 1080 x 1920
(5)将Canvas Scaler 组件上的 Sceen Match Mode 设置为 Match Width or Height
(6)Canvas Scaler组件上的Match是一个进度条。最左边是Width，最右边是Height。如果你滑动到最左边，那么就是Cocos里的FixedWidth， 如果滑动到最右边的就是Cocos里的FixedHeight。这里我们设置成FixedWidth

Canvas节点的属性设置如下

4.选中Camera节点
(1)将Camera 组件上的 Clear Flags 设置为 Skybox。(这点和Cocos类似)
(2)将Camera 组件上的 Culling Mask 设置为 UI。(这点和Cocos类似)
(2)将Camera 组件上的 Projection 设置为 Orthographic。(设置成正交视图)
(3)将Camera 组件上的 Size 设置为 1080。(因为本例子中设置的设计分辨率为1080 x 1920 并且为FixedWidth，其实这个属性值可以不设置，并有影响游戏运行)
(4)将Camera 节点的位置，设置为0,0, -100(这点很重要，不然摄像机照不到画布上)

设置Camera组件的属性

5.我们观察 Canvas节点 的 Rect Transform 里的 Width 和 Height属性。可以看到现在Canvas的Size确实符和Cocos里的FixedWidth的效果。同时，我们也可以创建一个Image节点，通过切换Game视图的分辨率，观察不同分辨率下，这个Imag的大小和位置是否符合Cocos 的 FixedWidth的特性

多试试不同的分辨率下的效果

6.接着，我们拖动摄像机的位置，让其不在屏幕正中间。
(1)摄像机也能像Cocos的一样，渲染出部分的场景。这点和Cocos一样
(2)缩放摄像机，无法让UI界面也缩放。这点和Cocos不一样

getVisibleSize

Unity没有cocos类似的View.getVisibleSize()的函数，所以我们需要自己包装一层。

using UnityEngine;
using System.Collections;

namespace cc
{
    public class View
    {
         public enum ResoultionPolicy {
            FixedWidth,
            FixedHeight
        };

        public static float ResoultionWidth = 1080;
        public static float ResoultonHeight = 1920;
        public static ResoultionPolicy resoultonPoily = ResoultionPolicy.FixedWidth;

        /**
         * 获取到Cocos里类于visibleSize
         */
        static public Vector2 getVisbleSize()
        {
            float realWidth = Screen.width;
            float realHeight = Screen.height;
            Vector2 v2 = new Vector2();
            if (resoultonPoily == ResoultionPolicy.FixedWidth)
            {
                float scaler = realWidth / ResoultionWidth;
                float visibleHeight = realHeight / scaler;
                v2.x = ResoultionWidth;
                v2.y = visibleHeight;
            }
            else
            {
                float scaler = realHeight / ResoultonHeight;
                float visibleWidth = realWidth / scaler;
                v2.x = visibleWidth;
                v2.y = ResoultonHeight;
            }

            return v2;
        }


        /**
         * 获取到转换到了visibleSize下的safeArea
         */
        static public Rect getVisbleSafeArea()
        {
            Rect rect = Screen.safeArea;
       
            if (resoultonPoily == ResoultionPolicy.FixedWidth)
            {
                float realWidth = Screen.width;
                float scaler = ResoultionWidth / realWidth;
                rect.width *= scaler;
                rect.height *= scaler;
                rect.x *= scaler;
                rect.y *= scaler;
            }
            else
            {

                float realHeight = Screen.height;
                float scaler = ResoultonHeight / realHeight;
                rect.width *= scaler;
                rect.height *= scaler;
                rect.x *= scaler;
                rect.y *= scaler;
            }

            return rect;
        }




    }
}

这样子就可以愉快的使用了

 Debug.Log(cc.View.getVisbleSize());
 Debug.Log(cc.View.getVisbleSafeArea());