@cc-component/cc-guide 1.0.0

package/assets/guide/guide/GuideCenter.ts

@@ -0,0 +1,364 @@
+import { assetManager } from 'cc';
+import { AssetManager } from 'cc';
+import { _decorator, Component, Node } from 'cc';
+//import { Guide } from './Guide';
+import { Guide } from './Guide';
+import { JsonAsset } from 'cc';
+import { IGuideData } from './model/GuideCommon';
+import { ITableGuide } from './model/ITableGuide';
+import { Sprite } from 'cc';
+import { isValid } from 'cc';
+import { SpriteFrame } from 'cc';
+import { Log } from '../common/Log';
+import { CreateNode, IsJson } from '../common/GuideTool';
+
+const { ccclass, property } = _decorator;
+
+@ccclass('GuideCenter')
+export class GuideCenter {
+    static _instance: GuideCenter = null!;
+    static get instance() {
+        if (!this._instance) {
+            this._instance = new GuideCenter()
+        }
+        return this._instance
+    }
+    static get guideCenter() {
+        return GuideCenter.instance;
+    }
+    callMessage: (param: ITableGuide) => void;
+    callMessageNet: (param: number, finish: Function) => void;
+
+    callClick: (step: number) => void;
+    callJumpWindow: (urls: string[]) => void;
+    callFinishGroup: () => void;
+    /** 游戏初始化模块 */
+    guide: Guide = null!;
+    node: Node;
+    /** 资源路径 */
+    path: string = "guide/tableJS/";
+    bundleName: string = "guide";
+
+    /** 数据缓存 */
+    data: Map<string, any> = new Map();
+
+
+    is_guide_week = false;
+    step_week = -1
+    _step = 1
+    param: IGuideData
+    /**设置步数 */
+    set step(step: number) {
+        this.guide.GuideModel.step = step;
+    }
+
+    get step() {
+        return this.guide.GuideModel.step;
+    }
+
+    /** 加载完成事件 */
+    public init(node: Node, step: number, param: IGuideData) {
+        this.param = param;
+        return new Promise<void>(async (resolve, reject) => {
+            const guide_window = CreateNode("GuideWindow")
+            node.addChild(guide_window)
+            // 动态导入 Guide
+            this.node = guide_window;
+            // 创建引导模块
+            this.guide = new Guide();
+            this.guide.init(param)
+            // 引导当前位置
+            this.step = step;
+            // 引导最大步数（最后步骤引导完后自动释放引导相关资源）
+            //this.guide.GuideModel.last = 2;
+            this.load(this.bundleName, [this.guide.GuideModel.res_dir], (pro) => {
+                // Log.log("加载进度：", pro);
+            }).then(async () => {
+                //await this.loadDirJsonAsync()
+                Log.log("加载完成");
+                this.guide.load(this.node);
+
+                this.guide.GuideView.nextCall = () => {
+                    this.is_guide_week = false//this.step >= this.step_week
+                    this.hideUI()
+                }
+                resolve()
+            })
+        })
+    }
+
+
+    getAsset<T>(name: string) {
+        return assetManager.getBundle(this.bundleName).get(name) as T;
+
+    }
+    /**加载视频 */
+    load(bundleName: string, dirs: string[], pro: (pro: number) => void) {
+        return new Promise<void>(async (resolve, reject) => {
+            let bundle = assetManager.getBundle(bundleName);
+            if (!bundle) {
+                bundle = await new Promise<AssetManager.Bundle>(resolve => {
+                    assetManager.loadBundle(bundleName, (err, bundle) => {
+                        if (err) {
+                            reject(err);
+                        } else {
+                            resolve(bundle)
+                        }
+                    });
+                })
+            }
+            let pro_num = 0
+            for (let index = 0; index < dirs.length; index++) {
+                const dir = dirs[index];
+                await new Promise<void>(resolve => {
+                    bundle.loadDir(dir, (fin, total) => {
+                        // const value = fin / total * 100;
+                        // pro?.(value);
+                    }, (err, assets) => {
+                        resolve()
+                    })
+                })
+                let pro_add = (index + 1) / dirs.length
+                pro_num = pro_add * 100
+                pro?.(index);
+            }
+            resolve()
+        })
+    }
+
+    /** 加载所有配置表数据到缓存中 */
+    loadDirJsonAsync(): Promise<boolean> {
+        return new Promise((resolve, reject) => {
+            assetManager.getBundle(this.param.bundleName).loadDir(this.path, (err: Error | null, assets: JsonAsset[]) => {
+                if (err) {
+                    //Log.warn(err.message);
+                    resolve(false);
+                }
+                else {
+                    assets.forEach(asset => {
+                        this.data.set(asset.name, asset.json);
+                    });
+                    //resLoader.releaseDir(this.path);
+                    resolve(true);
+                }
+            });
+        });
+    }
+
+    get(name: string): any {
+        return this.data.get(name);
+    }
+
+    /** 检查指定引导是否触发 */
+    check(step: number) {
+        if (this.guide.GuideModel) {
+            this.guide.GuideModel.refeshStepLast()
+        }
+        this.guide.check(step);
+    }
+
+    hideUI() {
+        this.guide.GuideView.hideUI()
+    }
+
+
+    /** 开始指定功能引导组-注意此方法需要更新服务器的步骤 */
+    startGuideGroup(group_id: number) {
+        if (group_id === undefined || group_id < 0 || !this.guide.GuideModel.guide_group.has(group_id)) {
+            Log.error("请检查表格，没有引导组：", group_id)
+            return
+        }
+
+        //功能引导
+        const data = this.guide.GuideModel.guide_group.get(group_id)
+        const step = data[0].data.id;
+        this.callMessageNet?.(step, () => {
+            this.step = step;
+            this.check(step)
+        })
+    }
+    onClick() {
+        this.callClick?.(this.step)
+        //Log.warn("2点击了")
+        const curren = this.guide.GuideModel.prompts[this.step];
+        //Log.warn("3点击了", curren.data.id);
+        if (curren.data.saveID === curren.data.step) {
+            //Log.warn("4点击了", curren.data.id);
+            //const map = JsonUtil.getMap<number, ITableGuide>(ITableGuide.TableName)
+            const step_new = this.step + 1;
+            const next = this.guide.GuideModel.prompts[step_new];
+            //Log.warn("5点击了", curren.data.id);
+            const group_list = this.guide.GuideModel.guide_group.get(curren.data.groupID)
+            const last = group_list[group_list.length - 1]
+            const is_last = last.data.saveID === curren.data.saveID;
+            //const data = map.get(step_new)
+            if (curren.data.groupID === 1 && next && next.data.groupID === 1) {
+                this.callMessageNet?.(step_new, () => { }) // 新手强引导
+            }
+            else if (curren.data.groupID === 1 && next && next.data.groupID !== 1 || is_last) {
+                let step_net = this.step
+                //GuideModule.StartGuideGroup(this.guide.GuideModel.currentPrompt.data.enableGroup)
+                // Log.error("开始引导", this.guide.GuideModel.currentPrompt.data.groupID, this.guide.GuideModel.currentPrompt.data.enableGroup)
+                const enableGroup = this.guide.GuideModel.currentPrompt.data.enableGroup
+                if (enableGroup > 0) {
+                    const step = this.guide.GuideModel.guide_group.get(enableGroup)[0].data.id
+                    this.step = step - 1
+                    step_net = step
+                } else {
+                    this.step = 100000
+                    step_net = this.step;
+                    GuideModule.GuideCenter.callFinishGroup?.()
+                }
+                this.callMessageNet?.(step_net, () => { }) //功能引导
+            }
+            else {
+                this.callMessageNet?.(step_new, () => { }) //功能引导
+            }
+        }
+    }
+
+    refresh() {
+        const curren = this.guide.GuideModel.prompts[this.step];
+        if (!curren || !curren.data) {
+            Log.log("当前无引导");
+            return
+        }
+        if (curren.data.groupID !== 1) {
+
+        } else {
+
+        }
+
+        const ui_com_map = this.guide.GuideModel.ui_com_map;
+        const guides = this.guide.GuideModel.guides;
+        const save_map = this.guide.GuideModel.save_map;
+        const guide_group_list = this.guide.GuideModel.guide_group.get(curren.data.groupID);
+        let step_first = 0;
+        let prompts = [...this.guide.GuideModel.prompts].splice(1, this.step - 1);
+        prompts.sort((a, b) => b.data.id - a.data.id)
+        prompts.forEach(element => {
+            const saveID = element.data.saveID;
+            if (saveID === element.data.step) {
+                save_map.get(saveID).forEach(element => { element.is_finish = true });//引导完成
+                //   Log.error('引导完成', element.data.GuideGroupID, saveID)
+            }
+        });
+        //找到下一个没有执行的存储点
+        const _guide_group_list = [...guide_group_list].sort((a, b) => b.data.id - a.data.id)
+        _guide_group_list.forEach(element => {
+            const saveID = element.data.saveID;
+            if (saveID > curren.data.saveID) {
+                step_first = saveID
+            }
+            const save_data = save_map.get(saveID)?.[0]
+            if (save_data && !save_data.is_finish) {
+                step_first = save_data.data.saveID
+            }
+        });
+
+        // prompts.forEach(element => {
+        //     const saveID = element.data.saveID;
+        //     if (saveID > curren.data.saveID) {
+        //         step_first = saveID
+        //     }
+        //     const save_data = save_map.get(saveID)?.[0]
+        //     if (save_data && !save_data.is_finish) {
+        //         step_first = save_data.data.saveID
+        //     }
+        // });
+
+
+        Log.log("引导当前步数：", this.step, step_first);
+        if (step_first > 0) {
+            this.step = save_map.get(step_first)[0].data.id
+        } else {
+            //有引导组，并且引导组没有完成
+            const group = save_map.get(curren.data.saveID);
+            if (group) {
+                if (group[0].is_finish) {
+                    for (let index = 0; index < guide_group_list.length; index++) {
+                        const element = guide_group_list[index];
+                        if (!element.is_finish) {
+                            this.step = element.data.id
+                            break;
+                        }
+                    }
+                } else {
+                    this.step = group[0].data.id
+                }
+            }
+        }
+
+        Log.log("引导当前步数-刷新后：", this.step);
+        Log.log("引导数据", this.guide.GuideModel.prompts);
+
+        // ui_com_map.forEach((value, key) => {
+        //     value.forEach(element => {
+        //         const com = this.node.getComponentInChildren(key)
+        //         if (com) {
+        //             com.interactable = true
+        //         }
+        //     });
+        // });
+        //跳转指定页面
+        if (IsJson(curren.data.jumpWindow)) {
+            const urls: string[] = JSON.parse(curren.data.jumpWindow)//curren.data.jumpWindow?.toArray<string>() ?? []
+            this.callJumpWindow?.(urls)
+        } else {
+            Log.error("jumpWindow 参数格式错误")
+        }
+    }
+
+    OnMessageStep(call: (param: ITableGuide) => void) {
+        this.callMessage = call
+    }
+    OnMessageStepNet(call: (step: number, finish: Function) => void) {
+        this.callMessageNet = call
+    }
+    OnMessageClick(call: (step: number) => void) {
+        this.callClick = call
+    }
+    OnMessageJumpWindow(call: (urls: string[]) => void) {
+        this.callJumpWindow = call
+    }
+    OnMessageFinishGroup(call: () => void) {
+        this.callFinishGroup = call
+    }
+
+    LoadSprite(sp: Sprite, param: string, callback?: () => void) {
+        const path = param + '/spriteFrame'
+        const bundleName = this.param.bundleName
+        const bundle = assetManager.getBundle(bundleName)
+        const sprite = bundle.get(path, SpriteFrame)
+        if (sprite) {
+            if (isValid(sp, true)) {
+                sp.spriteFrame = sprite;
+                callback?.()
+            }
+            else {
+                Log.log("图片已销毁")
+            }
+            return;
+        }
+        bundle.load(path, SpriteFrame, (err, res) => {
+            if (err) {
+                Log.error('包：' + bundleName, " 图片路径不对：", path)
+            }
+            else if (sp) {
+                if (isValid(sp, true)) {
+                    sp.spriteFrame = res;
+                    callback?.()
+                }
+                else {
+                    Log.log("图片已销毁")
+                }
+            }
+        })
+    }
+
+
+    spriteRootPath(name: string) { return `${this.param.spriteRootPath}/${name}` }
+}
+
+
+

package/assets/guide/guide/GuideCenter.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "3b10a434-fdbd-486d-9c53-775942139d2a",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/GuideSDK.ts

@@ -0,0 +1,71 @@
+import { GuideCenter } from "./GuideCenter";
+import { Node } from "cc";
+import { IGuideData } from "./model/GuideCommon";
+import { ITableGuide } from "./model/ITableGuide";
+import { IsJson } from "../common/GuideTool";
+import { Log } from "../common/Log";
+
+export class GuideSDK {
+
+    current_setp = 0;
+
+    static async init(node: Node, step: number, param: IGuideData): Promise<void> {
+        return GuideCenter.instance.init(node, step, param);
+    }
+    static step(value: number) {
+        GuideCenter.instance.step = value === 0 ? 0 : value;
+        GuideCenter.instance.refresh();
+    }
+    static getSetp() {
+        return GuideCenter.instance.step;
+    }
+
+    /** 检查指定引导是否触发 */
+    static check(step: number) {
+        GuideCenter.instance.check(step === 0 ? 0 : step);
+        GuideCenter.instance.refresh();
+
+    }
+
+    static save(value) {
+
+    }
+
+    static async startGuideGroup(group_id: number) {
+        return GuideCenter.instance.startGuideGroup(group_id);
+    }
+
+    GuideModel() {
+        return GuideCenter.instance.guide.GuideModel;
+    }
+
+    static MoveTo(param: any, window_name: string): { window: string, value: any } {
+        const guide: ITableGuide = param;
+        if (guide?.move) {
+            if (IsJson(guide.move)) {
+                const data: Record<string, any> = JSON.parse(guide.move)// guide.move.toMap<string, any>()
+                const key = Array.from(Object.keys(data))[0]
+                if (key === window_name) {
+                    const value = data[key]
+                    return { window: key, value: value }
+                }
+            } else {
+                Log.error("move参数格式错误，请检查")
+            }
+        }
+        return null
+    }
+
+    static GuideShow() {
+        return GuideCenter.instance.guide.GuideView.isGuideShow()
+    }
+
+
+    // static loadData() {
+
+    //     GuideSDK.step(1);
+    // }
+
+}
+
+

package/assets/guide/guide/GuideSDK.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "842acd8a-f5b5-4f53-a934-85d3b0dd0b90",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/model/GuideCommon.ts

@@ -0,0 +1,27 @@
+import { ITableGuide } from "./ITableGuide";
+
+
+export enum GuideCommon {
+    Full = 0, // 有对话框  有手
+    Hard = 1,// 仅小手
+    Box = 2,// 仅对话框 
+    None = 3 // 都无
+
+}
+
+
+export interface IGuideData {
+    /**资源bundle-引导 */
+    bundleName: string;
+    /**图片资源根路径 */
+    spriteRootPath: string;
+    /**资源表json */
+    tableGuide: Map<number, ITableGuide>;
+}
+
+export enum GuideStep {
+    /**客户端：更新了引导步骤 */
+    GuideEventStep = "GuideEventStep",
+    /**服务器：需要你更新服务器的步骤 */
+    GuideEventStepNet = "GuideEventStepNet",
+}

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

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "da20c711-8be2-4461-9036-e07844ed0396",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/guide/guide/model/GuideModelComp.ts

@@ -0,0 +1,161 @@
+/*
+ * @Author: dgflash
+ * @Date: 2022-03-21 11:12:03
+ * @LastEditors: dgflash
+ * @LastEditTime: 2022-09-06 10:12:03
+ */
+import { Node } from "cc";
+import { GuideViewItem } from "../view/GuideViewItem";
+import { ITableGuide } from "./ITableGuide";
+import { IGuideData } from "./GuideCommon";
+import { Log } from "../../common/Log";
+
+/** 引导数据 */
+export class GuideModelComp {
+    /** 当前引导步骤 */
+    _step: number = 1;
+    /** 当前引导步骤 */
+    set step(value: number) {
+        this._step = value;
+        // if (this.currentPrompt)
+        //     GuideModule.GuideCenter.callMessage?.(this.currentPrompt.data)
+    };
+    get step(): number {
+        return this._step;
+    };
+    /** 最后一步索引 */
+    last: number = Number.MAX_VALUE;
+    /** 引导的节点 */
+    guides: Map<number, Node> = new Map();
+
+    /** 资源文件夹 */
+    res_dir = "interface/guide";
+    /** 遮罩预制资源 */
+    res_mask = "interface/guide/mask";
+    /** 提示预制资源 */
+    res_prompt = "interface/guide/prompt";
+
+    current_bg = ''
+    /** 当前准备引导的节点 */
+    get current(): Node | undefined {
+        return this.guides.get(this.step);
+    }
+
+
+    get currentPrompt() {
+        return this.prompts[this.step]
+    }
+    get npc_icon(): string {
+        return this.currentPrompt.data.npcAvator
+    }
+
+    get npc_name(): string {
+        return this.currentPrompt.data.npcName
+    }
+
+    reset(): void {
+        this.step = 1;
+        this.last = Number.MAX_VALUE;
+
+        this.guides.forEach(node => {
+            if (node.isValid) node.getComponent(GuideViewItem)!.destroy();
+        });
+        this.guides.clear();
+    }
+
+    /** 提示词数据 */
+    // prompts: any = {
+    //     1: "提示词1",
+    //     2: "提示词2",
+    //     4: "提示词3",
+    //     5: "提示词5",
+    //     6: "提示词6",
+    //     8: "提示词8",
+    // }
+
+
+    prompts: { is_week: boolean, is_finish: boolean, data: ITableGuide }[] = []
+    ui_com_map = new Map<string, number[]>();
+    ui_com_choose_map = new Map<string, { index: number, step: number }[]>();
+
+    save_map = new Map<number, { is_week: boolean, is_finish: boolean, data: ITableGuide }[]>();
+    guide_group = new Map<number, { is_week: boolean, is_finish: boolean, data: ITableGuide }[]>();
+    table: Map<number, ITableGuide> = new Map();
+    get is_week(): boolean {
+        return false//this.prompts[this.step].is_week;
+    };
+
+    loadData(param: IGuideData) {
+        this.table = param.tableGuide
+        this.prompts.push({ is_week: false, is_finish: false, data: null })
+        this.table.forEach((element, key) => {
+            const data = { is_week: false, is_finish: key === 2 ? false : false, data: element }
+            this.prompts.push(data)
+            const map_key = element.clickArea
+            if (map_key) {
+                //ui
+                if (!this.ui_com_map.has(map_key)) {
+                    this.ui_com_map.set(map_key, [])
+                }
+                this.ui_com_map.get(map_key).push(key)
+
+                //存档
+                if (!this.save_map.has(element.saveID)) {
+                    this.save_map.set(element.saveID, [])
+                }
+                this.save_map.get(element.saveID).push(data)
+                //选项
+                if (!this.guide_group.has(element.groupID)) {
+                    this.guide_group.set(element.groupID, [])
+                }
+                this.guide_group.get(element.groupID).push(data)
+            }
+
+        });
+
+        // Log.warn("引导数据加载完成", this.ui_com_map)
+        // Log.warn("引导数据加载完成", this.prompts)
+
+        this.refeshStepLast()
+    }
+
+    //模块独立
+    // prompts: ITableGuide[] = []
+    // loadData2() {
+    //     var table = GuideModule.get(TableGuideTest.TableName);
+    //     const keys = Object.keys(table)
+    //     for (const index in keys) {
+    //         const key = Number(keys[index]);
+    //         var guide = new TableGuideTest();
+    //         guide.init(key);
+    //         this.prompts.push(guide)
+    //     }
+    //     for (var i = 0; i < table.length; i++) {
+
+    //     }
+
+    //     Log.error("引导数据加载完成", this.prompts)
+
+    // }
+
+
+    refesh() {
+        Log.log("引导数据刷新", this._step)
+        while (this._step < this.prompts.length) {
+            const prompt = this.prompts[this._step]
+            if (prompt.is_finish) {
+                this._step++
+            } else {
+                Log.log("引导数据刷新2", this._step)
+                return;
+            }
+        }
+
+    }
+
+    refeshStepLast() {
+        this.last = this.prompts[this.prompts.length - 1].data.id;
+        Log.log("引导最大步数", this.last)
+
+    }
+}

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

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "2ab07d41-202c-4c6d-830a-aaf6a5cec14a",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

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

@@ -0,0 +1,32 @@
+export interface ITableGuide {
+    /** 编号【KEY】-引导步骤 */
+    id: number;
+    /** 点击位置 */
+    clickArea: string;
+    /** 框选位置备注 */
+    Des: string;
+    /** 步数 */
+    step: number;
+    /** 存档节点 */
+    saveID: number;
+    /** 引导组ID */
+    groupID: number;
+    /** 展示类型 */
+    showType: number;
+    /**npc名 */
+    npcName: string;
+    /**npc头像 */
+    npcAvator: string;
+    /** 对话内容 */
+    contentKey: string;
+    /** 界面移动 */
+    move: string;
+    /** 背景图 */
+    backgroundImage: string;
+    /** 引导跳界面 */
+    jumpWindow: string;
+    /** 对话框Y轴坐标 */
+    dialogY: number;
+    /** 节点显示触发引导组 */
+    enableGroup: number;
+}