From 60f0313a9b85099d72b1eed2c41284ca22e9ef1f Mon Sep 17 00:00:00 2001 From: leo <907600065@qq.com> Date: Tue, 27 Nov 2018 13:28:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E5=96=84=E4=B8=80?= =?UTF-8?q?=E4=B8=AA=E6=96=B0=E6=89=8B=E5=BC=95=E5=AF=BC=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- GuideDemo/README.md | 4 +- GuideDemo/assets/Scene/helloworld.fire | 224 +++++++++++++++++++++- GuideDemo/assets/Script/MarkTouch.js | 48 ++++- GuideDemo/assets/Script/MaskLayer.js | 22 +++ GuideDemo/assets/Script/MaskLayer.js.meta | 9 + 5 files changed, 290 insertions(+), 17 deletions(-) create mode 100644 GuideDemo/assets/Script/MaskLayer.js create mode 100644 GuideDemo/assets/Script/MaskLayer.js.meta diff --git a/GuideDemo/README.md b/GuideDemo/README.md index 09b0019..239e048 100644 --- a/GuideDemo/README.md +++ b/GuideDemo/README.md @@ -1,2 +1,2 @@ -# hello-world -Hello world new project template. +# Guide demo +一个简单的选择性点击，可用于新手引导。 diff --git a/GuideDemo/assets/Scene/helloworld.fire b/GuideDemo/assets/Scene/helloworld.fire index 7daeda2..be4503d 100644 --- 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 } }, { diff --git a/GuideDemo/assets/Script/MarkTouch.js b/GuideDemo/assets/Script/MarkTouch.js index 2fb2f4c..e14ec1e 100644 --- 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) { }, diff --git a/GuideDemo/assets/Script/MaskLayer.js b/GuideDemo/assets/Script/MaskLayer.js new file mode 100644 index 0000000..6f16663 --- /dev/null +++ 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) {}, +}); \ No newline at end of file diff --git a/GuideDemo/assets/Script/MaskLayer.js.meta b/GuideDemo/assets/Script/MaskLayer.js.meta new file mode 100644 index 0000000..d7a01ff --- /dev/null +++ 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": {} +} \ No newline at end of file