屏幕适配的基本原理
三种分辨率
设计分辨率
在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:是否固定宽度