@cc-component/cc-guide 1.0.0

package/assets/guide/guide/model/ITableGuide.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "490d919b-c58d-4283-8937-89a7ede7e8f5",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/model/ITableNPC.ts

@@ -0,0 +1,10 @@
+export interface ITableNPC {
+
+    /** 编号【KEY】 */
+    id: number
+
+    /** npc昵称 */
+    npcname: string
+    /** npc头像资源 */
+    npcavator: string
+}

package/assets/guide/guide/model/ITableNPC.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "bdc2bbec-1dcb-4169-8dad-8b3a6b51218b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/model.meta

@@ -0,0 +1,12 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "a5f91df6-39f1-4510-ade7-7d9960dc9dda",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}

package/assets/guide/guide/view/GuideTest.ts

@@ -0,0 +1,150 @@
+import { GraphicsComponent } from 'cc';
+import { Graphics } from 'cc';
+import { Color } from 'cc';
+import { Mask } from 'cc';
+import { _decorator, Component, Node } from 'cc';
+
+const { ccclass, property } = _decorator;
+
+@ccclass('GuideTest')
+export class GuideTest extends Component {
+    @property(Mask)
+    mask: Mask = null!;
+
+    @property(Graphics)
+    graphics: Graphics = null!;
+
+    protected onLoad(): void {
+        this.drawCircleWithInnerBlur(0, 0, 500);
+
+        // this.drawRectWithGradient()
+    }
+
+    /** 绘制带有透明度渐变的圆形遮罩 */
+    drawCircleWithGradient(centerX: number, centerY: number, radius: number, gradientWidth: number = 20): void {
+        // if (this.mask.type !== Mask.Type.GRAPHICS_STENCIL) {
+        //     return;
+        // }
+
+        var g: Graphics = this.graphics;
+        g.clear();
+
+        // 绘制中心不透明圆形
+        g.fillColor = new Color(0, 0, 0, 255);
+        g.circle(centerX, centerY, radius);
+        g.fill();
+
+        // 创建渐变边缘（通过多个半透明圆环实现）
+        const steps = 15;
+        for (let i = 1; i <= steps; i++) {
+            const progress = i / steps;
+            const currentRadius = radius + gradientWidth * progress;
+            const alpha = Math.floor(255 * (1 - progress));
+
+            g.fillColor = new Color(0, 0, 0, alpha);
+            g.circle(centerX, centerY, currentRadius);
+            g.fill();
+        }
+    }
+
+    /** 绘制带有从中心向边缘渐变的圆形遮罩 */
+    drawCircleWithInnerBlur2(centerX: number, centerY: number, radius: number, blurWidth: number = 20): void {
+        var g: Graphics = this.graphics;
+        g.clear();
+
+        // 从内向外绘制多个半透明圆环，实现向外渐变效果
+        const steps = 20;
+        for (let i = steps; i >= 1; i--) {
+            const progress = i / steps;
+            const currentRadius = radius * progress;
+            // 从中心到边缘，透明度逐渐增加
+            const alpha = Math.floor(255 * (1 - progress));
+
+            g.fillColor = new Color(0, 0, 0, alpha);
+            g.circle(centerX, centerY, currentRadius);
+            g.fill();
+        }
+    }
+drawCircleWithInnerBlur(centerX: number, centerY: number, radius: number): void {
+    const g: Graphics = this.graphics;
+    g.clear(); // 清空之前的绘制
+
+    const steps = 3; // 渐变的步数，越高越平滑
+    const maxAlpha = 255; // 最大透明度
+    const minAlpha = 0;   // 最小透明度
+
+    // 从内到外逐步绘制多个圆形，透明度逐渐增加
+    for (let i = 0; i < steps; i++) {
+        const progress = i / (steps - 1); // 计算每一步的进度（从 0 到 1）
+        const currentRadius = radius * progress; // 当前圆的半径
+        const alpha = Math.floor(maxAlpha * progress); // 计算透明度，越远离中心越不透明
+
+        // 设置每个圆的填充颜色，透明度逐渐增加
+        g.fillColor = new Color(0, 0, 0, 20); // 黑色，透明度渐变
+        g.circle(centerX, centerY, currentRadius); // 绘制圆形
+        g.fill(); // 填充当前圆形
+    }
+}
+
+
+
+
+
+
+    /** 绘制带边缘渐变的矩形遮罩 */
+    drawRectWithGradient(x: number, y: number, width: number, height: number, gradientWidth: number = 20): void {
+        if (this.mask.type !== Mask.Type.GRAPHICS_STENCIL) {
+            return;
+        }
+
+        var g: GraphicsComponent = this.graphics;
+        g.clear();
+
+        // 绘制中心不透明矩形
+        g.fillColor = new Color(0, 0, 0, 255);
+        g.rect(x, y, width, height);
+        g.fill();
+
+        // 绘制渐变边缘
+        const steps = 10;
+        for (let i = 1; i <= steps; i++) {
+            const progress = i / steps;
+            const alpha = Math.floor(255 * (1 - progress));
+            const currentColor = new Color(0, 0, 0, alpha);
+
+            // 上边缘
+            g.fillColor = currentColor;
+            g.rect(x - gradientWidth * progress, y + height, gradientWidth * progress * 2 + width, gradientWidth * progress);
+            g.fill();
+
+            // 下边缘
+            g.fillColor = currentColor;
+            g.rect(x - gradientWidth * progress, y - gradientWidth * progress, gradientWidth * progress * 2 + width, gradientWidth * progress);
+            g.fill();
+
+            // 左边缘
+            g.fillColor = currentColor;
+            g.rect(x - gradientWidth * progress, y, gradientWidth * progress, height);
+            g.fill();
+
+            // 右边缘
+            g.fillColor = currentColor;
+            g.rect(x + width, y, gradientWidth * progress, height);
+            g.fill();
+        }
+    }
+
+    yang() {
+        const g = this.graphics
+        g.lineWidth = 10;
+        g.fillColor.fromHEX('#00ccffff');
+        g.strokeColor = Color.GREEN
+        g.moveTo(-40, 0);
+        g.lineTo(0, -80);
+        g.lineTo(40, 0);
+        g.lineTo(0, 80);
+        g.close();
+        g.stroke();
+        g.fill();
+    }
+}

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

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "91d112dc-b6a3-4072-b5f5-ce7d74c86e44",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/view/GuideViewComp.ts

@@ -0,0 +1,299 @@
+/*
+ * @Author: dgflash
+ * @Date: 2021-07-03 16:13:17
+ * @LastEditors: dgflash
+ * @LastEditTime: 2022-09-06 10:16:57
+ */
+import { Button, EventTouch, Node, _decorator } from "cc";
+
+import { GuideModelComp } from "../model/GuideModelComp";
+import { GuideViewMask } from "./GuideViewMask";
+import { GuideViewPrompt } from "./GuideViewPrompt";
+
+import { isValid } from "cc";
+import { sp } from "cc";
+import { GuideViewItem } from "./GuideViewItem";
+import { Component } from "cc";
+import { Log } from "../../common/Log";
+
+const { ccclass, property } = _decorator;
+
+/** 
+ * 新手引导界面管理
+ */
+@ccclass('GuideViewComp')
+export class GuideViewComp extends Component {
+    @property({ type: sp.Skeleton })
+    skel: sp.Skeleton;
+    /** 引导数据 */
+    private model: GuideModelComp = null!;
+    /** 引导遮罩 */
+    private mask: GuideViewMask = null!;
+    /** 引导提示动画 */
+    private prompt: GuideViewPrompt = null!;
+    step_week = -1
+
+    nextCall: Function;
+
+    protected onLoad(): void {
+
+    }
+    start() {
+        this.model = GuideModule.GuideCenter.guide.GuideModel//this.ent.get(GuideModelComp);
+
+        this.prompt = this.node.addComponent(GuideViewPrompt);
+        this.prompt.model = this.model;
+        this.mask = this.node.addComponent(GuideViewMask);
+        this.mask.model = this.model;
+
+        this.mask.clickMask = () => {
+            const data = this.model.prompts[this.model.step]
+            GuideModule.GuideCenter.is_guide_week = data.is_week
+            if (data.is_week) {
+                this.mask.hideUI(false);
+                this.prompt.hideUI(false);
+                this.prompt.hideHard(false);
+
+                this.mask.hide();
+                this.prompt.hide();
+            }
+        }
+    }
+
+    /** 注册引导项 */
+    register(step: number, Node: Node) {
+
+        // if (step === 53) {
+
+        //     Log.error('注册引导项', step, Node.parent.name, Node.name)
+        //     Log.error('注册引导项', this.model.guides.get(53)?.name)
+
+        //     return
+        // }
+        this.model.guides.set(step, Node);
+
+    }
+
+    /** 下一个引导 */
+    next() {
+        this.model.step++;
+        this.model.refesh();
+        this.nextCall?.()
+        Log.log(`验证下一个引擎【${this.model.step}】-${this.model.last}`);
+        if (this.model.step === 100001) {
+            this.mask.hide();
+            this.prompt.hide();
+        }
+        else if (this.model.step > this.model.last && this.model.step < 100000) {
+            this.mask.hide();
+            this.prompt.hide();
+            Log.log(`全部结束`);
+        }
+        else {
+            this.check();
+        }
+    }
+
+    /** 验证引导 */
+    check(comName?: string) {
+
+        // if(this.model.step === 4){
+        //     Log.error('引导打印',4)
+        //     return
+        // }
+        // 延时处理是为了避免与cc.Widget组件冲突，引导遮罩出现后，组件位置变了
+        this.scheduleOnce(() => {
+            let btn = this.getTargetNode()
+            if ((btn == null || !isValid(btn, true))) {
+                this.mask.hide();
+                this.prompt.hide();
+
+                Log.log(`暂无引导`)
+            }
+            else {
+                Log.log(`当前步骤：${this.model.step} 引导事件节点：${btn.name}--父节点：${btn.parent.name}`)
+                GuideModule.GuideCenter.callMessage?.(this.model.currentPrompt.data)
+
+                GuideModule.GuideCenter.is_guide_week = false;
+                // const is_choose = this.model.step === 5 || this.model.step === 6
+                // if (is_choose) {
+                //     this.mask.node.active = true;
+                //     this.mask.hideUI(false)
+                // } else {
+                this.mask.draw(btn);
+                //Log.warn('2引导打印', this.model.step)
+                if (this.model.step !== 4) {
+
+                    //  }
+                }
+                //Log.warn('1引导打印', this.model.step)
+
+
+                this.prompt.show(btn);
+                //Log.warn('3引导打印', this.model.step)
+
+                this.prompt.showPrompt();
+                //Log.warn('4引导打印', this.model.step)
+
+                // 引导节点加触摸事件，跳到下一步
+                btn.on(Node.EventType.TOUCH_END, this.onTouchEnd, this, false);
+                btn.on(Node.EventType.TRANSFORM_CHANGED, this.onTransformChanged, this);
+                this.mask.dispatchEvent = (event, target) => {
+                    this.onTouchEnd(event, target)
+                }
+                //Log.warn('5引导打印', this.model.step)
+
+
+            }
+        });
+    }
+
+    private onTransformChanged() {
+        this.refresh();
+    }
+
+    private onTouchEnd(event: EventTouch, target?: Node) {
+        try {
+            //Log.error('引导3', this.model.step)
+            let target_btn = this.getTargetNode()
+            if ((target_btn == null || !isValid(target_btn, true) || !target_btn.activeInHierarchy) && !this.isHavePathNode(target_btn)) {
+
+                this.mask.hide();
+                this.prompt.hide();
+                Log.log(`暂无引导-目前节点隐藏了`, target_btn?.name)
+                return
+            }
+
+            //event.preventSwallow = true;
+            //  var btn = event.target as Node;
+            let btn = target;
+            if (!isValid(btn, true)) {
+                return;
+            }
+            btn.off(Node.EventType.TOUCH_END, this.onTouchEnd, this, false);
+            btn.off(Node.EventType.TRANSFORM_CHANGED, this.onTransformChanged, this);
+
+            // 触发按钮组件
+            var button = btn.getComponent(Button);
+            if (button) {
+                if (event["_other_button"]) {
+                    event["_other_button"] = null;
+                    const view = btn.getComponent(GuideViewItem)
+                    const other_button = view.findNodeButton()
+                    const is_ok = other_button && other_button.isValid && other_button.node.activeInHierarchy && other_button.interactable
+                    other_button.clickEvents.forEach((e, index) => {
+                        if (is_ok)
+                            e.emit([event]);
+                        if (index === 0) {
+                            this.onClick()
+                        }
+                    });
+
+                } else {
+                    button.clickEvents.forEach((e, index) => {
+                        if (button.interactable)
+                            e.emit([event]);
+                        if (index === 0) {
+                            this.onClick()
+                        }
+                    });
+                }
+            } else {
+                const item = this.model.current
+                if (item && isValid(item, true)) {
+                    const view = item.getComponent(GuideViewItem)
+                    //按钮
+                    let target_button = view.findButton()
+                    const clickEvents = target_button?.clickEvents ?? [];
+                    if (target_button?.interactable) {
+                        clickEvents.forEach((e, index) => { e.emit([event]); });
+                    }
+                    //解决用node.on("click") 监听的事件
+                    if (target_button && clickEvents.length <= 0) {
+                        if (target_button.interactable) {
+                            target_button.node.emit("click");
+                        }
+                    }
+                    else {
+                        //toggle组件
+                        const target_toggle = view.findToggle()
+                        const target_toggle_container = view.findToggleContainer()
+                        if (target_toggle_container && target_toggle) {
+                            target_toggle_container?.checkEvents.forEach(event => {
+                                if (target_toggle.interactable)
+                                    event.emit([target_toggle]);
+                            })
+                        } else {
+                            btn.dispatchEvent(event)
+                        }
+
+                    }
+                }
+                this.onClick()
+            }
+
+            this.next();
+        } catch (error) {
+
+            Log.error('报错了：', error)
+        }
+
+    }
+
+    /** 刷新引导位置 */
+    refresh() {
+        let btn = this.model.guides.has(this.model.step) ? this.model.guides.get(this.model.step) : null;
+        if (btn && isValid(btn, true)) {
+            this.mask.draw(btn);
+            this.prompt.show(btn);
+            this.prompt.showPrompt();
+        }
+    }
+
+    reset(): void {
+        this.model = null!;
+        this.mask.destroy();
+        this.prompt.destroy();
+        this.destroy();
+    }
+
+    logout() {
+        this.mask.hide()
+    }
+    hideUI() {
+        return
+        const data = this.model.prompts[this.model.step]
+        const isShow: boolean = !data.is_week
+        this.mask.hideUI(isShow);
+        this.prompt.hideUI(isShow);
+        //  this.prompt.hideHard(isShow)
+    }
+
+    onClick() {
+        GuideModule.GuideCenter.onClick()
+    }
+    isGuideShow() {
+
+        //引导
+        return this.mask.isGuideShow()
+    }
+
+    isHavePathNode(target_btn) {
+        if (target_btn && target_btn.isValid) {
+            const item = this.model.current
+            const view = item.getComponent(GuideViewItem)
+            const node = view.findNode()
+
+            return node && node.activeInHierarchy ? true : false
+        }
+        return false
+    }
+
+    getTargetNode() {
+
+        return this.model.guides.has(this.model.step) ? this.model.guides.get(this.model.step) : null;
+
+    }
+
+
+}

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

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "c7549945-97fd-4e11-a587-9493742f107e",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/view/GuideViewItem.ts

@@ -0,0 +1,104 @@
+/*
+ * @Author: dgflash
+ * @Date: 2022-03-14 11:18:54
+ * @LastEditors: dgflash
+ * @LastEditTime: 2022-04-13 10:34:33
+ */
+import { Button } from "cc";
+import { ToggleContainer } from "cc";
+import { Toggle } from "cc";
+import { CCInteger, Component, _decorator } from "cc";
+import { Log } from "../../common/Log";
+
+const { ccclass, property } = _decorator;
+
+/** 新手引导数据（绑定到引导节点上） */
+@ccclass('GuideViewItem')
+export class GuideViewItem extends Component {
+    @property({
+        type: [CCInteger],
+        visible: false,
+    })
+    step: Array<number> = [];
+
+
+    @property({ displayName: "组件名称", tooltip: "引导节点绑定的组件名称" })
+    comName: string = "";
+    @property({ displayName: "选中行路径", tooltip: "引导节点绑定的组件名称" })
+    path: string = '';
+
+    is_open = true;
+    is_enable = false;
+    start() {
+        var gm = GuideModule.GuideCenter.guide?.GuideModel;
+        if (gm) {
+            this.step = gm.ui_com_map.get(this.comName)
+            if (!this.step) {
+                Log.warn("引导数据未找到--请检查表格：", this.comName)
+                return;
+            }
+            this.step.forEach((step: number) => {
+                var gv = GuideModule.GuideCenter.guide.GuideView;
+                // 注册引导数据
+                gv.register(step, this.node);
+
+                // 验证当前是否触发这个引导
+                // if (is_choose) {
+                //     gv.check(this.comName);
+                // } else {
+                if (gm.step == step) {
+                    gv.check();
+                }
+                // }
+
+            });
+        }
+    }
+
+
+    update(dt: number) {
+
+        var gm = GuideModule.GuideCenter.guide?.GuideModel;
+        if (gm && !GuideModule.GuideCenter.is_guide_week) {
+            if (this.step) {
+                this.step.forEach((step: number) => {
+
+                    var gv = GuideModule.GuideCenter.guide.GuideView;
+                    // 验证当前是否触发这个引导
+                    if (gm.step == step) {
+                        gv?.refresh();
+                    }
+                });
+            }
+
+        }
+    }
+
+    // guideSelect(index: number) {
+    //     if (index === this.row) {
+    //         this.row = index
+    //     } else {
+    //         this.row = -1
+    //     }
+    // }
+
+    findButton() {
+        return this.node.parent.getChildByPath(this.path)?.getComponent(Button)
+    }
+    findToggle() {
+        return this.node.parent.getChildByPath(this.path)?.getComponent(Toggle)
+    }
+    findToggleContainer() {
+        return this.node.parent.getChildByPath(this.path)?.parent?.getComponent(ToggleContainer)
+    }
+    findNode() {
+        if (this.path == "") {
+            return null
+        }
+        return this.node.parent.getChildByPath(this.path)
+    }
+    findNodeButton() {
+        const node = this.findNode()
+        return node?.getComponent(Button)
+    }
+}

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

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "bc20da7c-a39b-420e-a3c7-cefd80fe0d0c",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}