支持多分辨率适配

assets/scripts/ccutils/multiresolution.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "93bfb663-05e2-402a-9ed4-0e9f785baeda",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/scripts/ccutils/multiresolution/ContentAdapter.ts

@@ -0,0 +1,79 @@
+const { ccclass, property } = cc._decorator;
+
+/**
+ * @classdesc  游戏主内容节点自适应所有分辨率的脚本
+ * @author caizhitao
+ * @version 0.1.0
+ * @since 2018-11-30
+ * @description
+ *
+ * 用法：
+ *      1. 将本组件挂载在节点上即可
+ *
+ * 适配原理：
+ *      1. 将游戏主内容节点的宽高调整为画布的大小，以进行Size适配
+ *
+ * 注意：
+ *      1. 挂载这个脚本的节点不能加入Widget组件，不然这个适配是没有效果的
+ *      2. 目前只支持 SHOW_ALL 模式下的背景缩放适配，不支持其他模式的背景缩放
+ *
+ *  @example
+    ```
+    // e.g.
+    // 代码中设置 SHOW_ALL 模式的参考代码
+    cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.SHOW_ALL);
+
+    // 或者 Canvas 组件中，同时勾选 Fit Width 和 Fit Height 
+    ```
+ */
+@ccclass
+export default class ContentAdapter extends cc.Component {
+    onLoad() {
+        // if (CC_DEBUG) {
+        //     cc.log("调整前");
+        //     cc.log(`屏幕分辨率: ${cc.view.getCanvasSize().width} x ${cc.view.getCanvasSize().height}`);
+        //     cc.log(`视图窗口可见区域分辨率: ${cc.view.getVisibleSize().width} x ${cc.view.getVisibleSize().height}`);
+        //     cc.log(`视图中边框尺寸: ${cc.view.getFrameSize().width} x ${cc.view.getFrameSize().height}`);
+        //     cc.log(`设备或浏览器像素比例: ${cc.view.getDevicePixelRatio()}`);
+        //     cc.log(`节点宽高: ${this.node.width} x ${this.node.height}`);
+        // }
+
+        // 1. 先找到 SHOW_ALL 模式适配之后，本节点的实际宽高以及初始缩放值
+        let srcScaleForShowAll = Math.min(cc.view.getCanvasSize().width / this.node.width, cc.view.getCanvasSize().height / this.node.height);
+        let realWidth = this.node.width * srcScaleForShowAll;
+        let realHeight = this.node.height * srcScaleForShowAll;
+
+        // 2. 基于第一步的数据，再做节点宽高适配
+        this.node.width = this.node.width * (cc.view.getCanvasSize().width / realWidth);
+        this.node.height = this.node.height * (cc.view.getCanvasSize().height / realHeight);
+
+        // // 3. 因为本节点的宽高发生了改变，所以要手动更新剩下子节点的宽高
+        // this._updateAllChildNodeWidget(this.node);
+
+        // if (CC_DEBUG) {
+        //     cc.log(`节点在SHOW_ALL模式下展示的宽高: ${realWidth} x ${realHeight}`);
+        //     cc.log(`节点在SHOW_ALL模式下展示的缩放: ${srcScaleForShowAll}`);
+        //     cc.log(
+        //         `节点在SHOW_ALL模式下做全屏处理后的实际宽高（${cc.view.getCanvasSize().width}x${
+        //             cc.view.getCanvasSize().height
+        //         }）等价于于原节点的宽高(${this.node.width}x${this.node.height})`
+        //     );
+        // }
+    }
+
+    // private _updateAllChildNodeWidget(parentNode: cc.Node) {
+    //     if (parentNode == null) {
+    //         return;
+    //     }
+    //     let widget = parentNode.getComponent(cc.Widget);
+    //     if (widget != null) {
+    //         widget.updateAlignment();
+    //     }
+    //     if (parentNode.childrenCount == 0) {
+    //         return;
+    //     }
+    //     parentNode.children.forEach((childNode: cc.Node) => {
+    //         this._updateAllChildNodeWidget(childNode);
+    //     });
+    // }
+}

assets/scripts/ccutils/multiresolution/ContentAdapter.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "a749157b-2487-4425-b8f5-35bdc284b345",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}