mk_framework/assets/script/game/module/guide/Guide.ts

import GuideVO from "./GuideVO";

/**
 * @description 新手引导
 * @author 邹勇
 */
const { ccclass, property } = cc._decorator;

@ccclass
export default class Guide extends cc.Component {

    @property({ type: cc.Node, displayName: "显示区域" })
    node_display: cc.Node = null;
    @property({ type: cc.Node, displayName: "点击区域" })
    node_click: cc.Node = null;
    @property({ type: cc.Node, displayName: "背景" })
    node_bg: cc.Node = null;
    @property({ type: cc.Node, displayName: "对话框" })
    node_dialog: cc.Node = null;
    @property({ type: cc.Node, displayName: "手指" })
    node_finger: cc.Node = null;
    @property({ type: cc.Sprite, displayName: "头像" })
    node_head: cc.Sprite = null;
    @property({ type: sp.Skeleton, displayName: "形象" })
    node_person: sp.Skeleton = null;
    @property({ type: cc.RichText, displayName: "对话内容" })
    rich_dialog: cc.RichText = null;


    private guides: GuideVO[];
    private crtStep: number;
    private crtGuide: GuideVO;
    private targetNode: cc.Node;
    private event_data: string;

    /** 对话框对齐方式 上下左右中 */
    private widgets: string[] = ['top', 'bottom', 'left', 'right', 'verticalCenter', 'horizontalCenter'];

    onLoad() {

    }

    start() {
        if (gData.guideData.crtID == null) {
            this.node.destroy();
            return;
        }
        this.guides = gData.guideData.getGuidesByID(gData.guideData.crtID);
        this.crtStep = -1;
        this.nextStep();
    }

    private nextStep() {
        this.crtStep++;
        this.crtGuide = this.guides[this.crtStep];
        this.updateGuide();
    }

    private updateGuide() {
        if (this.crtGuide == null) {
            this.close();
        }
        else {
            this.node_bg.opacity = 180;
            this.node_finger.opacity = 255;
            this.node_dialog.opacity = 255;
            this.targetNode = null;
            this.event_data = null;
            let [x, y, w, h] = [null, null, null, null];

            //点击全屏下一步，显示区域不显示，点击区域全屏
            if (this.crtGuide.click_rect == "all") {
                this.node_display.width = this.node_display.height = 0;
                this.node_click.x = 0;
                this.node_click.y = 0;
                this.node_click.width = this.node.width;
                this.node_click.height = this.node.height;
            }
            else if (this.crtGuide.click_rect.indexOf("event") != -1) {//点击区域下一步，并发送事件，显示区域读配置，点击区域=显示区域
                this.event_data = this.crtGuide.id + "_" + this.crtStep;
                let arr = this.crtGuide.display_rect.split(":");
                x = parseInt(arr[0]);
                y = parseInt(arr[1]);
                w = parseInt(arr[2]);
                h = parseInt(arr[3]);
                this.node_click.x = x;
                this.node_click.y = y;
                this.node_click.width = w;
                this.node_click.height = h;
            }
            else {//点击按钮下一步，显示区域为配置的node，点击区域=显示区域
                this.targetNode = cc.find("Canvas/" + this.crtGuide.click_rect);
                w = this.targetNode.width;
                h = this.targetNode.height;
                let pos = mk.game.getWorldPos(this.targetNode);
                x = pos.x;
                y = pos.y;

                //穿透点击目标节点时增加一个事件触发下一步，触发后移除
                this.node_click.width = this.node_click.height = 0;
                let eventHandler = new cc.Component.EventHandler();
                eventHandler.target = this.node;
                eventHandler.component = "Guide";
                eventHandler.handler = "clickNodeClick";
                this.targetNode.getComponent(cc.Button).clickEvents.push(eventHandler);
            }

            //显示区域由大到小动画
            if (x != null && y != null && w != null && h != null) {
                cc.tween(this.node_display)
                    .to(0.3, { x: x, y: y, width: w, height: h }, {
                        onUpdate: () => {
                            this.node_bg.x = -this.node_display.x;
                            this.node_bg.y = -this.node_display.y;
                        }
                    })
                    .start();
            }

            //对话框位置
            ////全屏对齐
            if (this.crtGuide.dialog_pos != null && this.crtGuide.dialog_pos.length > 0) {
                let arr = this.crtGuide.dialog_pos.split(":");
                let wedgit = this.node_dialog.getComponent(cc.Widget);
                for (let i = 0; i < this.widgets.length; i++) {
                    wedgit[this.widgets[i]] = arr[i] == "" ? null : parseInt(arr[i]);
                }
            }
            else {//显示区域偏移
                let arr = this.crtGuide.dialog_pos1.split(",");
                this.node_dialog.x = x + parseInt(arr[0]);
                this.node_dialog.y = y + parseInt(arr[1]);
            }

            //对话文字对齐方式
            let a = this.crtGuide.dialog_alignment;
            this.rich_dialog.horizontalAlign = a == '0' ? cc.macro.TextAlignment.LEFT : (a == '1' ? cc.macro.TextAlignment.CENTER : cc.macro.TextAlignment.RIGHT);

            if (this.crtGuide.finger == "") {
                this.node_finger.active = false;
            }
            else {
                this.node_finger.active = true;
                let arr = this.crtGuide.finger.split(":");
                this.node_finger.x = x + parseInt(arr[0]);
                this.node_finger.y = y + parseInt(arr[1]);
            }

            if (this.crtGuide.tr_form == 1) {
                this.node_head.node.active = true;
                this.node_person.node.active = false;
            }
            else {
                this.node_head.node.active = false;
                this.node_person.node.active = true;
            }

            this.rich_dialog.string = this.crtGuide.dialog;
        }
    }

    async clickNodeClick() {
        mk.audio.playEffect("button");
        cc.Tween.stopAllByTarget(this.node_display);
        console.log("clickNodeClick");
        if (this.targetNode) {
            this.targetNode.getComponent(cc.Button).clickEvents.pop();
        }
        if (this.event_data) {
            //event_guide data:1_2 (1_2为新手引导的id)
            mk.event.emit("event_guide", this.event_data);
        }
        this.reset();
        if (this.crtGuide.lag_next > 0) {
            await mk.time.WaitForSeconds(this.crtGuide.lag_next);
        }
        this.nextStep();
    }

    /** 等待状态 透明不可点击 */
    private reset() {
        this.node_display.width = 0;
        this.node_display.height = 0;
        this.node_bg.x = -this.node_display.x;
        this.node_bg.y = -this.node_display.y;
        this.node_bg.opacity = 0;
        this.node_click.width = 0
        this.node_click.height = 0;
        this.node_finger.opacity = 0;
        this.node_dialog.opacity = 0;
    }


    private close() {
        mk.guide.close();
        this.node.destroy();
    }
}