cocos creator之分辨率、屏幕适配

屏幕适配的基本原理

三种分辨率

设计分辨率

在cocos creator编辑器中设计的屏幕分辨率，一般就是Canvas的大小

上图中的Canvas的大小是640*960，那么设计分辨率也是640*960

获取设计分辨率的代码如下

let designSize = cc.view.getDesignResolutionSize();

硬件分辨率

各种手机、pad上的屏幕分辨率

获取硬件分辨率的代码如下

let frameSize=cc.view.getFrameSize();

可视区域大小

设计分辨率放在手机上后经过适配操作（拉伸、裁剪）后的大小

一般使用VisibleSize可以得到可视区域大小，实际上WinSize = WinPixel = VisibleSize

获取可视区域大小的代码如下

//获取视图的大小，以点为单位
let winSize=cc.director.getWinSize();
//获取运行场景的可见大小
let visiSize=cc.director.getVisibleSize();
//获取视图的大小，以像素为单位
let winSizePixels=cc.director.getWinSizeInPixels();

屏幕适配原理

设计分辨率是在cocos creator编辑器中假想的游戏分辨率，开发人员是根据这个分辨率来摆放控件、精灵等，而硬件分辨率才是游戏真正运行时所在的环境，因此从设计分辨率到硬件分辨率有一个适配的过程。

根据适配策略，会将设计分辨率进行宽度或高度上的缩放、拉伸等操作，然后才放在屏幕上，这时就是玩家最后在手机上看到的效果，但是放在屏幕上后有时会出现黑边。

适配策略

Canvas组件

cocos creator的全局性的屏幕适配主要是通过Canvas组件来实现的。当创建一个新Scene时，默认会在层级管理器上产生一个Canvas对象，场景内其他节点默认都应该放在Canvas节点上。Canvas节点上默认有一个Canvas组件，并且默认勾选了“Fix Height”选项，如下图所示。

Canvas组件有三个属性

• Design Resolution：主要设置游戏设计分辨率的尺寸
• Fit Height：是否固定高度
• Fit Width：是否固定宽度