Cocos Creator 适配

今天总算找到一个全分辨率适配的工具了。

首先，我们需要将 项目--项目设置--项目数据中的 适配屏幕宽度和 适配屏幕高度全部都 取消勾选 ，这是最重要的一点！！！

// Cocos Creator 3.4.x 版本

import { _decorator, Component, Node,Size,find,Canvas,view,UITransform } from 'cc';
const { ccclass, property } = _decorator;

export default class ScreenAdapter extends Component {
    public curDR:Size = null;
    public resize(){
      	//找到 Canvas 组件
        var cvs = find('Canvas').getComponent(Canvas);

        //保存原始设计分辨率，供屏幕大小变化时使用
        if(!this.curDR){
          	//获取当前视图的设计分辨率
            this.curDR = view.getDesignResolutionSize();
        }
        var dr = this.curDR;
      	//获取屏幕的宽度高度，也就是实际设备的分辨率
        var s = view.getFrameSize();
        var rw = s.width;
        var rh = s.height;
        var finalW = rw;
        var finalH = rh;
      	
        if((rw/rh) > (dr.width / dr.height)){
            //如果更长，则用定高
            finalH = dr.height;
            finalW = finalH * rw/rh;
        }
        else{
            //如果更短，则用定宽
            finalW = dr.width;
            finalH = rh/rw * finalW;
        }
      	//将计算出来的分辨率重新设置为设计分辨率
        view.setDesignResolutionSize(finalW,finalH,5)
      	//将 Canvas 的宽高设置为新的设计分辨率
        cvs.node.getComponent(UITransform).setContentSize(finalW,finalH)
        cvs.node.emit('resize');
    }
}

新建 ScreenAdapter.ts文件，将文件放到背景图的节点中，就可以看到全分辨率适配的效果了。

注意：如果需要游戏中的所有元素位置都能全分辨率适配，就需要将元素作为背景图节点的子节点。

案例

IPhone XR

IPhone SE

iPad Mini

可以看看效果，所有分辨率显示的效果都是一样的，游戏中的背景图、banner、开始挑战按钮位置都是一模一样的。背景图还会随着设备的高度变高而变高。基本上可以解决我们工作中 90%的业务场景了，还有 10%的场景我暂时想不到