面板背景组件上传

mk_framework/assets/resources/prefab/uiPanel/login.prefab

@@ -13,7 +13,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "load",
+    "_name": "login",
     "_objFlags": 0,
     "_parent": null,
     "_children": [
@@ -28,10 +28,13 @@
       },
       {
         "__id__": 10
+      },
+      {
+        "__id__": 11
       }
     ],
     "_prefab": {
-      "__id__": 11
+      "__id__": 12
     },
     "_opacity": 255,
     "_color": {
@@ -193,8 +196,8 @@
         0,
         0,
         1,
-        1,
-        1,
+        0.5,
+        0.5,
         1
       ]
     },
@@ -363,6 +366,24 @@
     "_id": ""
   },
   {
+    "__type__": "58495/rJOBNGoxELFSp8G2a",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 120
+    },
+    "bClickClose": false,
+    "_id": ""
+  },
+  {
     "__type__": "cc.PrefabInfo",
     "root": {
       "__id__": 1

mk_framework/assets/script/game/component/UIBG.ts

@@ -2,36 +2,68 @@
 const TopEdgeDistance = 0;
 const BottomEdgeDistance = 0;
 const { ccclass, property } = cc._decorator;
+enum BGType {
+    /**
+     * 无
+     * @property {Number} None
+     */
+    None = 0,
+
+    /**
+     * 半透明
+     * @property {Number} Translucent
+     */
+    Translucent = 1,
+}
+
 /**
  * 窗口遮罩
+ * - 挂载到节点上
  * @author 薛鸿潇
  */
-@ccclass//('UIMask')
-export class UIMask extends cc.Component {
-    @property({ type: cc.Node, tooltip: '遮罩节点' })
-    private node_mask: cc.Node = null;
-
-    start() {
-        this.node.zIndex = -10000;
-        this.adaptTopAndBottomBox();
-        this.node.getComponent(cc.Widget).updateAlignment();
-        this.node_mask.getComponent(cc.Widget).updateAlignment();
+@ccclass//('UIBG')
+export class UIBG extends cc.Component {
+    @property({ displayName: '背景颜色' })
+    private color = new cc.Color(0, 0, 0, 120);
+    @property({ displayName: '点击关闭' })
+    private bClickClose: boolean = false;
+
+    /** 背景节点 */
+    private node_bg: cc.Node = null;
+
+    onLoad() {
+        this.initBG();
+    }
+
+    private initBG() {
+        const width = mk.game.getWinSize().width;
+        const height = mk.game.getWinSize().height;
+        this.node_bg = this.drawColorRect(new cc.Rect(-width / 2, -height / 2, width, height));
+        this.node_bg.parent = this.node;
+        this.node_bg.zIndex = -10000;
+        this.node_bg.addComponent(cc.Button);
+        this.node_bg.on('click', this.initClick, this);
     }
+
     /**
-     * 全面屏适配
+     * 按钮回调
      */
-    private adaptTopAndBottomBox() {
-        let widget = this.node.getComponent(cc.Widget);
-        widget.top = TopEdgeDistance;
-        widget.bottom = BottomEdgeDistance;
+    private initClick() {
+        if (this.bClickClose) mk.ui.closePanel(this.node.name);
     }
-
     /**
-     * 设置遮罩显示 or 隐藏
-     * @param bVisible {boolen} 显示或隐藏
+     * 创建背景蒙版 by 绘图组件
+     * @param size 坐标及宽高
+     * @returns 创建的节点
      */
-    public setMaskVisible(bVisible: boolean) {
-        this.node_mask.active = bVisible;
+    public drawColorRect(size: cc.Rect): cc.Node {//
+        cc.log(size)
+        let node = new cc.Node('colorRect');
+        node.setContentSize(size);
+        let graph = node.addComponent(cc.Graphics);
+        graph.fillColor = this.color;
+        graph.fillRect(size.x, size.y, size.width, size.height);
+        return node;
     }
 
 }