Cocos Creator教程:屏幕适配

众所周知，移动终端的各种分辨率大小，各种屏幕宽高比。现在还出全面屏，iphone x的刘海屏。正因为这些原因，需要游戏中对这些终端的进行屏幕适配。而一般会进行适配宽或者适配高。

基本概念

如果是从cocos2dx学习过来的，都知道cocos2dx有一套屏幕适配的方案。简单说来，首先要了解设计分辨率 （其大小依赖于游戏设计人员，与硬件设备无关）也就是当我们新建一个scene时，需要在Canves节点中的Canves组件设置游戏设计的分辨率。就是我们以此分辨率为基准，其二就是结合适配模式（Cocos Creator 简化为两种模式：适配宽或者适配高），从而适配终端屏幕。

Canvas.png

分辨率及坐标

由上面的概念可以得到三类分辨率大小，一个设计分辨率、终端硬件分辨率还有就是由设计分辨率与适配模式概念而产生的可视区域大小（是小于等于设计分辨率大小）关于三者关系可以点击这。

• 取得设计分辨率大小

//设计分辨率
let designSize=cc.view.getDesignResolutionSize();

• 硬件分辨率

//屏幕物理分辨率 也就是手机分辨率。
let frameSize=cc.view.getFrameSize();

• 可视区域大小
  我从测试程序中发现：WinSize = WinPixel = VisibleSize。不过一般是使用VisibleSize即可。

        //获取视图的大小，以点为单位。 
        let winSize=cc.director.getWinSize();
        console.log('winSize',winSize.width,winSize.height);
        //获取运行场景的可见大小。
        let visiSize=cc.director.getVisibleSize();
        console.log('visiSize',visiSize.width,visiSize.height);
        let winSizePixels=cc.director.getWinSizeInPixels();
        console.log('winSizePixels',winSizePixels);

适配利器Widget(对齐挂件)

这是Creator用于在编辑ui所用到的组件，也是十分简单好用。主要能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，让你的游戏可以方便地适配不同的分辨率。感兴趣的可以参考官方文档。

关于iphone x的适配

在官方论坛中已有人提出了解决方案。