@cc-component/cc-guide 1.0.0

package/assets/guide/guide/view/GuideViewMask.ts

@@ -0,0 +1,342 @@
+/*
+ * @Author: dgflash
+ * @Date: 2021-07-03 16:13:17
+ * @LastEditors: dgflash
+ * @LastEditTime: 2022-09-06 10:13:17
+ */
+import { Component, EventTouch, instantiate, Node, Prefab, UITransform, v2, Widget, _decorator } from "cc";
+
+import { GuideModelComp } from "../model/GuideModelComp";
+import { PolygonMask } from "./PolygonMask";
+import { UIOpacity } from "cc";
+import { Sprite } from "cc";
+import { tween } from "cc";
+import { Tween } from "cc";
+import { GuideViewItem } from "./GuideViewItem";
+import { v3 } from "cc";
+import { ViewUtil } from "../../common/ViewUtil";
+import { Log } from "../../common/Log";
+
+const { ccclass, property } = _decorator;
+
+/** 新后引导遮罩逻辑 */
+@ccclass('GuideViewMask')
+export class GuideViewMask extends Component {
+    model: GuideModelComp = null!;
+
+    private bg: Node = null!;
+    private mask: Node = null!;
+    private mask_pm: PolygonMask = null!;
+    private mask_widget: Widget = null!;
+    clickMask: Function;
+    op: UIOpacity
+    big_sp: Sprite;
+    is_show: boolean = false;
+    bg_op: UIOpacity;
+    is_anim_start: boolean = false;
+    is_anim_hide: boolean = false;
+    delayAction: Function;
+
+    dispatchEvent: Function
+
+    protected onLoad(): void {
+
+
+    }
+    start() {
+        var prefab: Prefab = GuideModule.GuideCenter.getAsset(this.model.res_mask)
+        const mask = instantiate(prefab);
+        mask.parent = this.node;
+
+        this.mask = mask.getChildByPath("mask")!
+        this.bg = this.mask.getChildByPath("bg")!;
+        this.big_sp = mask.getChildByName("big_sp")!.getComponent(Sprite);
+        this.mask_pm = this.mask.getComponent(PolygonMask)!;
+        this.mask_widget = this.bg.getComponent(Widget)!;
+        //this.node.active = false;
+        this.op = this.node.addComponent(UIOpacity)
+        this.bg_op = this.bg.getComponent(UIOpacity)
+        this.showNode(false, false, true)
+
+    }
+
+    /** 显示引导 */
+    show(width: number, height: number) {
+        //this.node.active = true;
+        this.showNode(true)
+
+        this.mask_widget.target = this.node;
+        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
+        this.mask_pm.draw(width, height, this.model.currentPrompt.data.showType);
+        this.refesh(this.model.currentPrompt.data.showType);
+        if (this.model.currentPrompt && this.model.currentPrompt.data.backgroundImage) {
+            if (this.model.current_bg !== this.model.currentPrompt.data.backgroundImage) {
+                GuideModule.GuideCenter.LoadSprite(this.big_sp, GuideModule.GuideCenter.spriteRootPath(this.model.currentPrompt.data.backgroundImage), () => {
+                    //if (this.big_sp && this.big_sp.isValid)
+                    // this.big_sp.fitHeight()
+                });
+            } else {
+                this.big_sp.spriteFrame = null;
+            }
+        } else {
+            this.big_sp.spriteFrame = null;
+        }
+    }
+
+    /** 隐藏引导 */
+    hide() {
+        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
+        //this.node.active = false;
+        this.showNode(false)
+
+    }
+
+    /** 绘制遮罩 */
+    draw(btn: Node, isCircle: boolean = true) {
+        if (isCircle) {
+            this.drawRectangleMask2(btn);
+        } else {
+            this.drawRectangleMask(btn);
+        }
+    }
+    private drawRectangleMask2(btn: Node) {
+        // 定义规制区域的位置
+        var left_top = this.mask_pm.polygon.points[0];
+        var left_bottom = this.mask_pm.polygon.points[3];
+        var right_top = this.mask_pm.polygon.points[2];
+        var right_bottom = this.mask_pm.polygon.points[1];
+
+        // 绘制引导可点击区域
+        var uit = btn.getComponent(UITransform)!;
+        var size = this.node.getComponent(UITransform)!.contentSize;
+        var widthHalf = size.width / 2;
+        var heightHalf = size.height / 2;
+
+        var left_x = uit.contentSize.width * uit.anchorX;
+        var right_x = uit.contentSize.width * (1 - uit.anchorX);
+        var left_y = uit.contentSize.height * uit.anchorY;
+        var right_y = uit.contentSize.height * (1 - uit.anchorY);
+
+        left_top.x = btn.worldPosition.x - widthHalf - left_x;
+        left_top.y = btn.worldPosition.y - heightHalf - left_y;
+        left_bottom.x = btn.worldPosition.x - widthHalf - left_x;
+        left_bottom.y = btn.worldPosition.y - heightHalf + right_y;
+        right_top.x = btn.worldPosition.x - widthHalf + right_x;
+        right_top.y = btn.worldPosition.y - heightHalf + right_y;
+        right_bottom.x = btn.worldPosition.x - widthHalf + right_x;
+        right_bottom.y = btn.worldPosition.y - heightHalf - left_y;
+
+        this.show(uit.width, uit.height);
+        // this.show(254 , 254);
+
+    }
+
+    /** 绘制矩形遮罩 */
+    private drawRectangleMask(btn: Node) {
+        // 定义规制区域的位置
+        var left_top = this.mask_pm.polygon.points[0];
+        var left_bottom = this.mask_pm.polygon.points[3];
+        var right_top = this.mask_pm.polygon.points[2];
+        var right_bottom = this.mask_pm.polygon.points[1];
+
+        // 绘制引导可点击区域
+        var uit = btn.getComponent(UITransform)!;
+        var size = this.node.getComponent(UITransform)!.contentSize;
+        var widthHalf = size.width / 2;
+        var heightHalf = size.height / 2;
+
+        var left_x = uit.contentSize.width * uit.anchorX;
+        var right_x = uit.contentSize.width * (1 - uit.anchorX);
+        var left_y = uit.contentSize.height * uit.anchorY;
+        var right_y = uit.contentSize.height * (1 - uit.anchorY);
+
+        left_top.x = btn.worldPosition.x - widthHalf - left_x;
+        left_top.y = btn.worldPosition.y - heightHalf - left_y;
+        left_bottom.x = btn.worldPosition.x - widthHalf - left_x;
+        left_bottom.y = btn.worldPosition.y - heightHalf + right_y;
+        right_top.x = btn.worldPosition.x - widthHalf + right_x;
+        right_top.y = btn.worldPosition.y - heightHalf + right_y;
+        right_bottom.x = btn.worldPosition.x - widthHalf + right_x;
+        right_bottom.y = btn.worldPosition.y - heightHalf - left_y;
+
+        this.show(uit.width, uit.height);
+    }
+
+
+
+    /** 事件模拟触发目标按钮触摸事件 */
+    private onTouchEnd(event: EventTouch) {
+        var btn = this.model.current;
+        if (btn && btn.isValid) {
+            var touchPos = ViewUtil.calculateScreenPosToSpacePos(event, this.node);
+            touchPos = ViewUtil.calculateASpaceToBSpacePos(this.node, btn.parent!, touchPos);
+            var uiPos = v2(touchPos.x, touchPos.y);
+            const view = btn.getComponent(GuideViewItem)
+            const target_node = view.findNode()
+            let is_hace: boolean = false
+            if (target_node && target_node.isValid) {
+                const rect1 = target_node.getComponent(UITransform)!.getBoundingBox();
+                is_hace = rect1.contains(uiPos) && target_node.activeInHierarchy
+            }
+
+            //引导
+            // 判断触摸点是否在按钮上
+            var rect = btn.getComponent(UITransform)!.getBoundingBox();
+            if (is_hace) {
+                event['_other_button'] = true;
+            }
+            if ((rect.contains(uiPos) && btn.activeInHierarchy || is_hace)) {
+                this.is_anim_hide = false
+                // 模拟触摸点击事件
+                // const listeners = btn['_eventProcessor']['capturingTarget']["_callbackTable"]["touch-end"]["callbackInfos"];
+                // if (listeners) {
+                //     Log.error(listeners)
+                //     if (listeners) {
+                //         listeners.forEach((listener) => {
+                //             if (listener.callback && listener.target) {
+                //                 listener.callback.call(listener.target, event);
+                //             }
+                //         });
+                //     }
+                // }
+
+                //  btn.emit(Node.EventType.TOUCH_END, event)
+
+
+                this.dispatchEvent(event, btn)
+                //  btn.dispatchEvent(event);
+
+            }
+            else {
+                this.onClickMask()
+                this.clickMask?.()
+            }
+        } else {
+            Log.error('引导出问题了，赶紧查看:', this.model.step)
+        }
+    }
+
+
+    onClickMask() {
+        const ShowType = this.model.currentPrompt.data.showType
+        switch (ShowType) {
+            case 0:
+                this.bg_op.opacity = 255;
+                break;
+            case 1:
+                this.bg_op.opacity = 255;
+                break;
+            case 2:
+                this.bg_op.opacity = 255;
+                break;
+            case 3:
+                this.bg_op.opacity = 255;
+                this.hideUI(false)
+                break;
+            case 4:
+                this.showBGAnim(true, () => {
+                    const delayAction = () => {
+                        this.is_anim_hide = false
+                    }
+                    this.delayAction = delayAction
+                    this.scheduleOnce(delayAction, 1)
+                })
+                break;
+            default:
+                break;
+        }
+
+
+
+    }
+
+
+    hideUI(isShow = true) {
+        this.bg.active = isShow
+    }
+
+    showBGAnim(is_show: boolean, callback?: Function) {
+        if (this.bg_op) {
+            if (is_show) {
+                this.bg_op.opacity = 255;
+                Tween.stopAllByTarget(this.mask)
+                this.mask.scale = v3(10, 10, 1)
+                this.unschedule(this.delayAction)
+                tween(this.mask).to(0.2, { scale: v3(1, 1, 1) }).call(() => { callback?.() }).start();
+                tween(this.bg_op).to(0.2, { opacity: 255 }).call(() => { }).start();
+            } else {
+                this.bg_op.opacity = 0;
+            }
+        }
+    }
+
+    refesh(ShowType: number) {
+
+        // 0 = 有对话框  有手
+        // 1 = 仅小手
+        // 2 = 仅对话框
+        // 3 = 都无
+        this.hideUI(true)
+
+        switch (ShowType) {
+            case 0:
+                this.bg_op.opacity = 255;
+                break;
+            case 1:
+                this.bg_op.opacity = 255;
+                break;
+            case 2:
+                this.bg_op.opacity = 255;
+                break;
+            case 3:
+                this.bg_op.opacity = 255;
+                this.hideUI(false)
+                break;
+            case 4:
+                if (!this.is_anim_hide) {
+                    this.is_anim_hide = true
+                    this.showBGAnim(false)
+                }
+                break;
+            default:
+                break;
+        }
+    }
+
+
+    showNode(is_show: boolean, is_anim = true, is_init: boolean = false) {
+        if (this.op) {
+            this.startAnim(is_show, is_anim, is_init)
+        }
+        this.is_show = is_show
+    }
+
+    isGuideShow() {
+        return this.is_show//this.op.opacity > 1
+    }
+
+    startAnim(is_show, is_anim, is_init: boolean = false) {
+        if (this.is_show === is_show && !is_init) {
+            return
+        }
+        if (is_anim) {
+            //Tween.stopAllByTarget(this.op)
+            if (is_show) {
+                this.op.opacity = 255
+                //  tween(this.op).to(0.2, { opacity: 255 }).start();
+            }
+            else {
+                this.op.opacity = 0
+                //tween(this.op).to(0.1, { opacity: 0 }).start();
+            }
+        } else {
+            if (is_show) {
+                this.op.opacity = 255
+            } else {
+                this.op.opacity = 0
+                //   tween(this.op).to(0.1, { opacity: 0 }).start();
+            }
+        }
+    }
+
+}

package/assets/guide/guide/view/GuideViewMask.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "6d04bfaf-bb69-4fcd-8139-f8f514b50407",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/view/GuideViewPrompt.ts

@@ -0,0 +1,178 @@
+/*
+ * @Author: dgflash
+ * @Date: 2021-07-03 16:13:17
+ * @LastEditors: dgflash
+ * @LastEditTime: 2022-09-06 10:17:14
+ */
+import { Component, Label, Node, Prefab, UITransform, Vec3, _decorator, instantiate } from "cc";
+import { GuideModelComp } from "../model/GuideModelComp";
+import { v3 } from "cc";
+import { Sprite } from "cc";
+import { Widget } from "cc";
+import { sp } from "cc";
+import { UIOpacity } from "cc";
+import { view } from "cc";
+
+const { ccclass, property } = _decorator;
+
+/** 新手引导提示逻辑 */
+@ccclass('GuideViewPrompt')
+export class GuideViewPrompt extends Component {
+    model: GuideModelComp = null!;
+
+    private prompt: Node = null!;
+    private content: Label = null!;
+    private root: Node = null!;
+    private hard: Node = null!;
+    private hard_op: UIOpacity = null!;
+
+    private root_wg: Widget = null!;
+
+    parUT: UITransform;
+    spr_role_center: Sprite = null;
+    lbl_roleName: Label;
+    prompt_op: UIOpacity;
+    test_lb: Label;
+    start() {
+        var prefab: Prefab = GuideModule.GuideCenter.getAsset(this.model.res_prompt)
+        this.prompt = instantiate(prefab);
+        this.prompt.parent = GuideModule.GuideCenter.node;
+        this.prompt_op = this.prompt.addComponent(UIOpacity);
+        this.root = this.prompt.getChildByPath("root");
+
+        this.content = this.root.getChildByName("content").getComponent(Label);
+        this.hard = this.prompt.getChildByName("hard");
+        this.hard_op = this.hard.getComponent(UIOpacity);
+        this.parUT = this.root.parent.parent.getComponent(UITransform);
+        this.spr_role_center = this.root.getChildByPath("ren_mask_node/spr_role_center").getComponent(Sprite);
+        this.lbl_roleName = this.root.getChildByPath("dialogNode/Sprite/lbl_roleName").getComponent(Label);
+        this.root_wg = this.root.getComponent(Widget);
+
+        this.hide();
+        // this.node.addChild(this.root);
+        // this.scheduleOnce(() => {
+        //     this.root.setSiblingIndex(10);
+        // })
+
+        this.loadSkel()
+    }
+
+    protected update(dt: number): void {
+
+        if (!this.spr_role_center) { return }
+        const size = this.spr_role_center.node.parent.getComponent(UITransform).contentSize
+    }
+    loadSkel() {
+        // Log.warn("1加载引导动画")
+        // const sp1 = this.hard.getChildByPath('UI/skeleton').getComponent(sp.Skeleton)
+        // MiddleCenter.LoadSpine(sp1, "guide/spine/guide/skeleton", {
+        //     bundle: "guide", callback: () => {
+        //         sp1.setAnimation(0, 'idle', true)
+        //         Log.warn("2加载引导动画")
+        //     }
+        // })
+    }
+
+    /** 显示引导提示动画 */
+    show(btn: Node) {
+        // 提示位置修正到显示对象中心
+        var pos = btn.worldPosition.clone();
+        var offset: Vec3 = new Vec3();
+        var uit = btn.getComponent(UITransform)!;
+        offset.x = uit.contentSize.width * 0.5 - uit.contentSize.width * uit.anchorX;
+        offset.y = uit.contentSize.height * 0.5 - uit.contentSize.height * uit.anchorY;
+        pos = pos.add(offset);
+
+        // 0=有对话框  有手
+        // 1=仅小手
+        // 2=仅对话框 
+        // 3=都无
+        let is_show = true;
+        let is_ui = !this.model.is_week
+        //Log.warn("7引导打印")
+
+
+        switch (this.model.currentPrompt.data.showType) {
+            case 0:
+                is_show = true;
+                break;
+            case 1:
+                is_show = true;
+                is_ui = false
+                break;
+            case 2:
+                is_show = false;
+                break;
+            case 3:
+                is_show = false;
+                is_ui = false
+                break;
+            case 4:
+                is_show = true;
+                is_ui = false
+                break;
+            default:
+                is_show = false;
+                break;
+        }
+        //Log.warn("8引导打印", this.model.step)
+        //this.prompt.active = true;
+        this.hideNode(true)
+
+        this.prompt.setSiblingIndex(this.prompt.parent!.children.length);
+        this.prompt.worldPosition = pos;
+        this.hideHard(is_show)
+        this.hideUI(is_ui)
+
+    }
+
+
+    /** 显示提示词 */
+    showPrompt() {
+        var data = this.model.prompts[this.model.step];
+        if (!data) { return }
+        if (this.content.string !== data.data.contentKey && this.model.npc_icon) {
+
+            GuideModule.GuideCenter.LoadSprite(this.spr_role_center, GuideModule.GuideCenter.spriteRootPath(this.model.npc_icon))
+        }
+        if (this.model.npc_icon) {
+            this.spr_role_center.node.active = true
+        } else {
+            this.spr_role_center.node.active = false
+        }
+
+        this.lbl_roleName.string = this.model.npc_name ?? "";
+        this.content.string = data.data.contentKey;
+        this.prompt.updateWorldTransform()
+
+        // 将本地坐标转换为世界坐标
+        const localPos = v3(0, data.data.dialogY - view.getVisibleSize().height * 0.5, 0);
+        const worldPos = this.parUT.convertToWorldSpaceAR(localPos) || localPos;
+        this.root.worldPosition = worldPos
+        // this.root_wg.isAlignBottom = true;
+        // this.root_wg.bottom = data.data.DialogPosY //- 1920 * 0.5
+        //Log.log(view.getVisibleSize().height)
+    }
+
+    hide() {
+        //this.prompt.active = false;
+        this.hideNode(false)
+    }
+
+
+    hideUI(isShow: boolean) {
+        this.root.active = isShow
+    }
+    hideHard(isShow: boolean) {
+        //this.hard.active = isShow;
+        this.hard_op.opacity = isShow ? 255 : 0;
+    }
+
+    hideNode(isShow: boolean) {
+        //this.hard.active = isShow;
+
+        if (this.prompt_op)
+            this.prompt_op.opacity = isShow ? 255 : 0;
+    }
+
+}

package/assets/guide/guide/view/GuideViewPrompt.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "199a434a-26a4-4455-8e2f-e60644722498",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/view/PolygonMask.ts

@@ -0,0 +1,161 @@
+/*
+ * @Author: dgflash
+ * @Date: 2022-03-23 10:31:06
+ * @LastEditors: dgflash
+ * @LastEditTime: 2022-09-06 10:13:58
+ */
+import * as cc from "cc";
+import { Color } from "cc";
+import { UITransform } from "cc";
+import { Vec3 } from "cc";
+import { Size } from "cc";
+import { Graphics } from "cc";
+import { GraphicsComponent } from "cc";
+import { Sprite } from "cc";
+import { Component, Mask, _decorator } from "cc";
+const { ccclass, property, executeInEditMode, requireComponent } = _decorator;
+
+/** 多边形遮罩编辑 */
+@ccclass("PolygonMask")
+@executeInEditMode
+@requireComponent([cc.PolygonCollider2D, cc.Mask])
+export class PolygonMask extends Component {
+	/** 遮罩组件 */
+	mask: Mask = null!;
+	/** 用于编辑器中自定义位置的拖拽操作，如果不用物理引擎时，可考虑换成一个数据结构 */
+	polygon: cc.PolygonCollider2D = null!;
+	//quan: Sprite;
+
+	size: { width: number, height: number } = { width: 0, height: 0 }
+	/**
+	 * 0=有对话框  有手
+	 * 1=仅小手
+	 * 2=仅对话框 
+	 * 3=都无
+	 */
+	ShowType: number = -1
+	onLoad() {
+		this.mask = this.getComponent(cc.Mask)!;
+		this.polygon = this.getComponent(cc.PolygonCollider2D)!;
+		// this.quan = this.node.getChildByName('quan').getComponent(Sprite)!;
+		// this.quan.node.parent = this.node.parent;
+		// this.quan.node.active = false;
+		if (this.mask.type !== cc.Mask.Type.GRAPHICS_STENCIL) {
+			cc.error("PolygonMask: mask type must be graphics_stencil");
+			return;
+		}
+
+		// 监听 point 修改
+		// @ts-ignore
+		let old_value = this.polygon["_points"];
+		Object.defineProperty(this.polygon, "_points", {
+			get: () => old_value,
+			set: (new_value) => {
+				old_value = new_value;
+				// 更新遮罩
+				this.draw(0, 0, this.ShowType)
+			},
+		});
+	}
+
+	/** 绘制遮罩 */
+	draw(width: number, height: number, ShowType: number): void {
+		if (width > 0) {
+			this.size.width = width
+			this.size.height = height
+		}
+		if (ShowType > -1) {
+			this.ShowType = ShowType
+		}
+		this.circle()
+		return
+		if (this.mask.type !== cc.Mask.Type.GRAPHICS_STENCIL) {
+			return;
+		}
+
+		var g: any = this.mask.subComp;
+		g.clear();
+		g.moveTo(
+			this.polygon.points[0].x,
+			this.polygon.points[0].y
+		);
+		for (let k_n = 1; k_n < this.polygon.points.length; ++k_n) {
+			g.lineTo(
+				this.polygon.points[k_n].x,
+				this.polygon.points[k_n].y
+			);
+		}
+		g.close();
+		g.stroke();
+		g.fill();
+	}
+
+	circle() {
+		const value = Math.max(this.size.width, this.size.height)
+		// let radius = value * 0.5 + 100;
+		// const pos = this.polygon.points[0]
+		// const x = pos.x + this.size.width * 0.5
+		// const y = pos.y + this.size.height * 0.5
+		//this.drawCircle( x,  y, radius);
+
+		// this.quan.node.getComponent(UITransform).contentSize = new Size(radius*2 , radius*2 )
+		// this.quan.node.position = new Vec3(x, y, 0)
+
+		//this.drawCircleWithBlur(0, 0, 200);
+
+		const radius = 254 * 0.5
+		const width = 320 + 30
+		const pos = this.polygon.points[0]
+		const x = pos.x + this.size.width * 0.5
+		const y = pos.y + this.size.height * 0.5
+		// const tr = this.node.getComponent(UITransform)
+		// tr.anchorX = 0.5
+		// tr.anchorY = 0.8
+
+		// 0 = 有对话框  有手
+		// 1 = 仅小手
+		// 2 = 仅对话框
+		// 3 = 都无
+		this.node.position = new Vec3(x, y, 0);
+
+		switch (this.ShowType) {
+			case 0:
+				this.drawCircle(0, 0, radius);
+				break;
+			case 1:
+				this.drawCircle(0, 0, radius);
+				break;
+			case 2:
+				this.drawCircle(0, 0, 1);
+				break;
+			case 3:
+				this.drawCircle(0, 0, 1);
+				break;
+			case 4:
+				//this.drawCircle(x, y, radius);
+				this.drawCircle(0, 0, radius);
+				break;
+			default:
+				this.drawCircle(0, 0, radius);
+				break;
+		}
+	}
+
+	/** 绘制圆形遮罩 */
+	drawCircle(centerX: number, centerY: number, radius: number): void {
+		if (this.mask.type !== cc.Mask.Type.GRAPHICS_STENCIL) {
+			return;
+		}
+
+		var g: Graphics = this.mask.subComp as any;
+		g.clear();
+
+		// 使用Canvas的arc方法绘制圆形
+		g.circle(centerX, centerY, radius);
+
+
+		g.close();
+		g.stroke();
+		g.fill();
+	}
+}