cocosCreator | 常用的 n 个 size 及 n 个 rect

大大源码 • 2023年3月18日 pm8:17 • 未分类

更好的阅读体验，请关注公众号：

在认识 n 个 size 之前，先了解下两个名词：

· 屏幕分辨率

游戏在设备上运行时的实际屏幕显示分辨率，即设备的像素分辨率

比如 iPhone 8 Plus - 技术规格：

对应的 size 为：cc.view.getFrameSize()

· 设计分辨率

内容生产者在制作场景时使用的分辨率蓝本，内容生产者即美术和研发

比如 creator 中场景的 Canvas 组件：

对应的 size 为：cc.view.getDesignResolutionSize()

剩下的 size，都是基于这两个 size 通过相应的规则计算得来的

n 个 size 的注释：

/** * 返回视图的设计分辨率。 * 默认下分辨率尺寸同 `getFrameSize` 方法相同 */console.log("getDesignResolutionSize:");console.log(cc.view.getDesignResolutionSize());/** * 返回横轴的缩放比，这个缩放比是将画布像素分辨率放到设计分辨率的比例。 */console.log("getScaleX:");console.log(cc.view.getScaleX());/** * 返回纵轴的缩放比，这个缩放比是将画布像素分辨率缩放到设计分辨率的比例。 */console.log("getScaleY:");console.log(cc.view.getScaleY());/*** 返回视图中 canvas 的尺寸。* 在 native 平台下，它返回全屏视图下屏幕的尺寸。* 在 Web 平台下，它返回 canvas 元素尺寸。*/console.log("getCanvasSize:");console.log(cc.view.getCanvasSize());/** * 返回视图中边框尺寸。 * 在 native 平台下，它返回全屏视图下屏幕的尺寸。 * 在 web 平台下，它返回 canvas 元素的外层 DOM 元素尺寸。 */console.log("getFrameSize:");console.log(cc.view.getFrameSize());/** * 为当前的游戏窗口的大小。 */console.log("winSize:");console.log(cc.winSize);/** * 返回视图窗口可见区域尺寸。 */console.log("getVisibleSize:");console.log(cc.view.getVisibleSize());

接下来看一下 n 个 size 是怎么计算得出的

总结起来，如下图

相关源码路径：

resources\engine\cocos2d\core\platform\CCView.js

游戏初始化时：

· 引擎初始化时

init：初始化 n 个 size

init () {    // 设置视图中边框尺寸：cc.view.getFrameSize()    this._initFrameSize();    // 视图中 canvas 的尺寸：cc.view.getCanvasSize()    var w = cc.game.canvas.width, h = cc.game.canvas.height;    // 设置视图的设计分辨率：cc.view.getDesignResolutionSize()    this._designResolutionSize.width = w;    this._designResolutionSize.height = h;        this._originalDesignResolutionSize.width = w;    this._originalDesignResolutionSize.height = h;    // 设置视窗剪裁区域：cc.view.getViewportRect()    this._viewportRect.width = w;    this._viewportRect.height = h;        // 设置视图窗口可见区域尺寸：cc.view.getVisibleSize()    this._visibleRect.width = w;    this._visibleRect.height = h;    // 设置当前的游戏窗口的大小：cc.winSize    cc.winSize.width = this._visibleRect.width;    cc.winSize.height = this._visibleRect.height;    cc.visibleRect && cc.visibleRect.init(this._visibleRect);}

_initFrameSize：设置视图中边框尺寸

_initFrameSize: function () {    var locFrameSize = this._frameSize;    var w = __BrowserGetter.availWidth(cc.game.frame);    var h = __BrowserGetter.availHeight(cc.game.frame);    var isLandscape = w >= h;    if (CC_EDITOR || !cc.sys.isMobile ||        (isLandscape && this._orientation & cc.macro.ORIENTATION_LANDSCAPE) ||         (!isLandscape && this._orientation & cc.macro.ORIENTATION_PORTRAIT)) {        locFrameSize.width = w;        locFrameSize.height = h;        cc.game.container.style['-webkit-transform'] = 'rotate(0deg)';        cc.game.container.style.transform = 'rotate(0deg)';        this._isRotated = false;    }    else {        locFrameSize.width = h;        locFrameSize.height = w;        cc.game.container.style['-webkit-transform'] = 'rotate(90deg)';        cc.game.container.style.transform = 'rotate(90deg)';        cc.game.container.style['-webkit-transform-origin'] = '0px 0px 0px';        cc.game.container.style.transformOrigin = '0px 0px 0px';        this._isRotated = true;    }    if (this._orientationChanging) {        setTimeout(function () {            cc.view._orientationChanging = false;        }, 1000);    }}

· 场景激活时

setDesignResolutionSize:

通过设置设计分辨率和匹配模式来进行游戏画面的屏幕适配

setDesignResolutionSize: function (width, height, resolutionPolicy) {    // Defensive code    if( !(width > 0 && height > 0) ){        cc.errorID(2200);        return;    }    // 设置分辨率适配策略：FIXED_HEIGHT/FIXED_WIDTH等    this.setResolutionPolicy(resolutionPolicy);    var policy = this._resolutionPolicy;    if (policy) {        policy.preApply(this);    }    // Reinit frame size    if (cc.sys.isMobile)        this._adjustViewportMeta();    // Permit to re-detect the orientation of device.    this._orientationChanging = true;    // If resizing, then frame size is already initialized, this logic should be improved    if (!this._resizing)         // 更新视图中边框尺寸：cc.view.getFrameSize()        this._initFrameSize();    if (!policy) {        cc.logID(2201);        return;    }    // 更新视图的设计分辨率：cc.view.getDesignResolutionSize()    this._originalDesignResolutionSize.width = this._designResolutionSize.width = width;    this._originalDesignResolutionSize.height = this._designResolutionSize.height = height;    // 调用策略方法，根据容器尺寸、设计分辨率尺寸、分辨率适配策略计算出视图窗口及横纵轴缩放比    var result = policy.apply(this, this._designResolutionSize);    if(result.scale && result.scale.length === 2){        // 横纵轴的缩放比，这个缩放比是将画布像素分辨率放到设计分辨率的比例        this._scaleX = result.scale[0];        this._scaleY = result.scale[1];    }    if(result.viewport){        var vp = this._viewportRect,            vb = this._visibleRect,            rv = result.viewport;        // 更新视窗剪裁区域：cc.view.getViewportRect()        vp.x = rv.x;        vp.y = rv.y;        vp.width = rv.width;        vp.height = rv.height;        // 更新视图窗口可见区域尺寸：cc.view.getVisibleSize()        vb.x = 0;        vb.y = 0;        vb.width = rv.width / this._scaleX;        vb.height = rv.height / this._scaleY;    }    policy.postApply(this);    // 更新当前的游戏窗口的大小：cc.winSize    cc.winSize.width = this._visibleRect.width;    cc.winSize.height = this._visibleRect.height;    cc.visibleRect && cc.visibleRect.init(this._visibleRect);    renderer.updateCameraViewport();    cc.internal.inputManager._updateCanvasBoundingRect();    this.emit('design-resolution-changed');}

原文链接：https://blog.csdn.net/u010799737/article/details/116144892

THE END

大大搜源码

搜索内容

cocosCreator | 常用的 n 个 size 及 n 个 rect