基本完善一个新手引导页面

2026-05-07 22:27:22 +08:00 · 2018-11-27 13:28:49 +08:00
parent 5d3c99fb24
commit 60f0313a9b
5 changed files with 290 additions and 17 deletions
--- a/GuideDemo/README.md
+++ b/GuideDemo/README.md
@@ -1,2 +1,2 @@
-# hello-world
-Hello world new project template.
+# Guide demo
+一个简单的选择性点击，可用于新手引导。
--- a/GuideDemo/assets/Scene/helloworld.fire
+++ b/GuideDemo/assets/Scene/helloworld.fire
@@ -78,10 +78,10 @@
    "_active": true,
    "_components": [
      {
-        "__id__": 24
+        "__id__": 30
      },
      {
-        "__id__": 25
+        "__id__": 31
      }
    ],
    "_prefab": null,
@@ -367,7 +367,7 @@
    },
    "_enabled": true,
    "_useOriginalSize": false,
-    "_actualFontSize": 40,
+    "_actualFontSize": 60,
    "_fontSize": 60,
    "_lineHeight": 60,
    "_enableWrapText": true,
@@ -736,7 +736,7 @@
    },
    "_enabled": true,
    "_useOriginalSize": false,
-    "_actualFontSize": 40,
+    "_actualFontSize": 20,
    "_fontSize": 20,
    "_lineHeight": 40,
    "_enableWrapText": false,
@@ -854,17 +854,21 @@
  },
  {
    "__type__": "cc.Node",
-    "_name": "New Node",
+    "_name": "MarkTouch",
    "_objFlags": 0,
    "_parent": {
      "__id__": 2
    },
-    "_children": [],
+    "_children": [
+      {
+        "__id__": 23
+      }
+    ],
    "_tag": -1,
    "_active": true,
    "_components": [
      {
-        "__id__": 23
+        "__id__": 29
      }
    ],
    "_prefab": null,
@@ -885,8 +889,8 @@
    },
    "_contentSize": {
      "__type__": "cc.Size",
-      "width": 1280,
-      "height": 720
+      "width": 0,
+      "height": 0
    },
    "_rotationX": 0,
    "_rotationY": 0,
@@ -904,6 +908,200 @@
    "_opacityModifyRGB": false,
    "groupIndex": 0
  },
+  {
+    "__type__": "cc.Node",
+    "_name": "mark",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 22
+    },
+    "_children": [
+      {
+        "__id__": 24
+      }
+    ],
+    "_tag": -1,
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 28
+      }
+    ],
+    "_prefab": null,
+    "_id": "8csg6kIi9Kw7Q0zdQXfwDi",
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_cascadeOpacityEnabled": true,
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 10,
+      "height": 10
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_scaleX": 1,
+    "_scaleY": 1,
+    "_position": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_localZOrder": 0,
+    "_globalZOrder": 0,
+    "_opacityModifyRGB": false,
+    "groupIndex": 0
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "bg",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 23
+    },
+    "_children": [],
+    "_tag": -1,
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 25
+      },
+      {
+        "__id__": 26
+      },
+      {
+        "__id__": 27
+      }
+    ],
+    "_prefab": null,
+    "_id": "d3/5akjxhPfKjN4tjgJiLs",
+    "_opacity": 100,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 167,
+      "g": 167,
+      "b": 167,
+      "a": 255
+    },
+    "_cascadeOpacityEnabled": true,
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 640
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_scaleX": 1,
+    "_scaleY": 1,
+    "_position": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_localZOrder": 0,
+    "_globalZOrder": 0,
+    "_opacityModifyRGB": false,
+    "groupIndex": 0
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 24
+    },
+    "_enabled": true,
+    "_spriteFrame": {
+      "__uuid__": "9bbda31e-ad49-43c9-aaf2-f7d9896bac69"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_atlas": null
+  },
+  {
+    "__type__": "cc.Layout",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 24
+    },
+    "_enabled": true,
+    "_layoutSize": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 640
+    },
+    "_resize": 0,
+    "_N$layoutType": 0,
+    "_N$padding": 0,
+    "_N$cellSize": {
+      "__type__": "cc.Size",
+      "width": 40,
+      "height": 40
+    },
+    "_N$startAxis": 0,
+    "_N$paddingLeft": 0,
+    "_N$paddingRight": 0,
+    "_N$paddingTop": 0,
+    "_N$paddingBottom": 0,
+    "_N$spacingX": 0,
+    "_N$spacingY": 0,
+    "_N$verticalDirection": 1,
+    "_N$horizontalDirection": 0
+  },
+  {
+    "__type__": "517f8UW7BJI9oGCvHqlhjb8",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 24
+    },
+    "_enabled": true
+  },
+  {
+    "__type__": "cc.Mask",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 23
+    },
+    "_enabled": true,
+    "_type": 1,
+    "_segements": 100,
+    "_N$spriteFrame": null,
+    "_N$alphaThreshold": 1,
+    "_N$inverted": true
+  },
  {
    "__type__": "de4cb+WU6FBp6LLmkt88AIS",
    "_name": "",
@@ -913,7 +1111,13 @@
    },
    "_enabled": true,
    "nodeTarget": {
-      "__id__": 16
+      "__id__": 10
+    },
+    "nodeMark": {
+      "__id__": 23
+    },
+    "nodeMarkBg": {
+      "__id__": 24
    }
  },
  {
--- a/GuideDemo/assets/Script/MarkTouch.js
+++ b/GuideDemo/assets/Script/MarkTouch.js
@@ -3,32 +3,70 @@ cc.Class({

  properties: {
    nodeTarget: cc.Node,
+    nodeMark: cc.Node,
+    nodeMarkBg: cc.Node
  },

  onLoad() {
    this.registerEvent();
-    this.node.on('touchstart', this.onTouchStart, this);
+    this.init();
  },

  registerEvent() {

  },

+  init(data) {
+    this.setBoxBounding();
+    this.node.on('touchstart', this.onTouchStart, this);
+    this.initMarKPos(this.nodeTarget.convertToWorldSpaceAR(cc.v2(0, 0)));
+  },
+
+  initMarKPos(posWorld) {
+    let parent = this.node.parent || this.node;
+    let posLocal = parent.convertToNodeSpaceAR(posWorld);
+    this.nodeMark.setPosition(posLocal);
+    let size = this.getMaxLen(this.nodeTarget);
+    this.nodeMark.width = size;
+    this.nodeMark.height = size;
+    posLocal.x -= 0;
+    posLocal.y -= 0;
+    this.nodeMarkBg.setPosition(cc.v2(-posLocal.x, -posLocal.y));
+  },
+
+  getMaxLen(node) {
+    let size = node.width;
+    if (size < node.height) {
+      size = node.height;
+    }
+    return size;
+  },
+
+  /**
+   * 设置触摸区域
+   */
+  setBoxBounding() {
+    let visiSize = cc.director.getVisibleSize();
+    this.node.width = visiSize.width;
+    this.node.height = visiSize.height;
+  },
+
+  /**
+   * 设置 touch 事件
+   * @param {*} event 
+   */
  onTouchStart(event) {
    let touchPos = event.getLocation();
    console.log('touchPos=', touchPos);
    let retWorld = this.nodeTarget.getBoundingBoxToWorld();
    if (retWorld.contains(touchPos)) {
      this.node._touchListener.setSwallowTouches(false);
+      this.node.active = false;
    } else {
      this.node._touchListener.setSwallowTouches(true);
    }
  },

-  init(data) {
-
-  },
-
  update(dt) {

  },
--- a/GuideDemo/assets/Script/MaskLayer.js
+++ b/GuideDemo/assets/Script/MaskLayer.js
@@ -0,0 +1,22 @@
+cc.Class({
+    extends: cc.Component,
+
+    properties: {},
+
+    // LIFE-CYCLE CALLBACKS:
+
+    onLoad() {
+        //获取运行场景的可见大小。
+        let visiSize = cc.director.getVisibleSize();
+
+        this.node.width = visiSize.width;
+        this.node.height = visiSize.height;
+        // this.node.setAnchorPoint(0, 0); 
+        this.node.color = cc.hexToColor("#000000");
+        this.node.opacity = 100;
+    },
+
+    start() {},
+
+    // update (dt) {},
+});
--- a/GuideDemo/assets/Script/MaskLayer.js.meta
+++ b/GuideDemo/assets/Script/MaskLayer.js.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "517f8516-ec12-48f6-8182-bc7aa58636fc",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}