b23_zuma/assets/script/userguide/UserGuide.ts

/**
 * The introduction of two main APIs.
 *
 * @format
 */

/*** 两个主要接口说明。*/

/**
 * @en
 * Shows guides or a single guide.
 * @param step Which step to be guided, 1 by default. You may also pass the alias name of the step.
 * @param isAuto Is to play the next guide automatically, false by default.
 * @param callback  Takes a callback function. which will be called the user completes the current guide. Only works when the parameter isAuto is false. Should use this parameter in single step guide type.
 *
 * @zh
 * 显示连续或单步引导。
 * @param step 新手引导的第几步，默认是第一步。也可以传入该引导步骤的别名。
 * @param isAuto 完成当前引导后是否自动播放下一个引导。
 * @param callback 接收一个回调函数，当用户完成当前引导后会执行该回调函数。只有isAuto为false时才有效，适用于单步引导。
 */
// showGuide(step:number|string, isAuto:boolean=false, callback: Function=null)

/**
 * @en
 * Shows the guide by group.
 * @param stepArray The guide steps array, [1, 3, 5] means to execute the fist, the third and the fifth guide step. You may also pass an alias array, e.g., ['alias of guide step1', 'alias of guide step 2'];
 * @param callback  Takes a callback function. which will be called the user completes the current guide.
 * @zh
 * 按分组显示引导。
 * @param stepArray 要执行各个引导步骤，比如传入[1, 3, 5]表示一次执行第一、第三和第五步引导。也可以传入别名数组['第一步引导别名', '第二步引导别名']。
 * @param callback 接收一个回调函数，当用户完成当前引导后会执行该回调函数。
 */
// showGuideByGroup(stepArray:Array<number|string>, callback: Function=null)

/**
 * @en
 * Hides all nodes related to user guide.
 * @zh
 * 隐藏与引导相关的所有节点。
 */
// hideGuide()

/*** Other APIs that are used to adjust the user guide. They have to be called before showGuide() or showGuideByGroup(). */
/*** 其他用于调整引导效果的接口，须在showGuide()或showGuideByGroup()方法前调用。*/

/**
 * @en
 * Sets the mask color, black and half transparent by default.
 * @zh
 * 设置遮罩层颜色，默认为黑色半透明。
 */
// setMaskColor(color: Color)

/**
 * @en
 * Sets the mask shape, rect by default. Param value can be 'rect', 'ellipse' or 'sprite stencil'.
 * @zh
 * 设置遮罩挖洞形状，默认为矩形。参数可选值有'rect'，'ellipse'或者'sprite stencil'。
 */
// setMaskShape(shape: string)

/**
 * @en
 * Sets the line height of guide text, 28 by default.
 * @zh
 * 设置引导文本行高，默认为40。
 */
// setGuideTextLineHeight(lineHeight: number)

/**
 * @en
 * Sets the font size of guide text, 28 by default.
 * @zh
 * 设置引导文本字体大小，默认为28。
 */
// setGuideTextFontSize(fontSize: number)

/**
 * @en
 * Sets the system font of guide text.
 * @zh
 * 设置引导文本的系统字体。
 */
// setGuideTextSystemFont(sysFontName: string)

/**
 * @en
 * Sets the custom font of guide text.
 * @param pathInRes The path of the custom font in resources folder. The format should be ttf and the path should end without the extension name .ttf.
 * @zh
 * @param pathInRes 自定义字体在resources文件夹中的路径，字体格式为ttf，注意路径最后不带后缀名.ttf。
 * 设置引导文本自定义字体。
 */
// setGuideTextCustomFont(pathInRes: string)

/**
 * @en
 * Sets the color of guide text, black by default.
 * @zh
 * 设置引导文本颜色，默认为黑色。
 */
// setGuideTextColor(color: Color)

/**
 * @en
 * Sets the position of guide text.
 * @param textPos Where to show the guide text. Choices are Vec3 type of value (position on Canvas), or string type of value: 'follow', 'center' and 'bottom'. 'follow' means showing next to the target node, 'center' means showing in the center of Canvas and 'bottom' means showing at the bottom of Canvas.
 * @zh
 * 设置引导文本位置。
 * @param textPos 要在哪里显示引导文本，可以是Vec3类型的值，即在画布上的具体位置，或者是字符串类型的值'follow'、'center'和'bottom'。'follow'表示显示在目标节点周围，'center'表示显示在画布中间，'bottom'表示显示在画布底部。
 */
// setGuideTextPos(textPos: cc.Vec3 | string='follow')

/**
 * @en
 * Sets the language type of guide text, 'zh' by default, the other value is 'en'.
 * @zh
 * 设置引导文本语言种类，默认是'zh'，其他可选值为'en'。
 */
// setGuideTextLang(lang: string='zh')

/**
 * @en
 * Sets the scale of guide text background node.
 * @zh
 * 设置引导文本背景缩放值。
 */
// setGuideTextBackgroundScale(scaleX: number, scaleY: number)

/**
 * @en
 * Sets the scale of guide sign node.
 * @zh
 * 设置引导图片缩放值。
 */
// setGuideSignScale(scaleX: number, scaleY: number)

/**
 * @en
 * Slides the guide sign node, i.e., move from one position to another. This method suits the game which needs a slide guide. Note this method only works for hand or arrow type of guide sign.
 * @param slideDistance The slide distance.
 * @param slideTime The slide time.
 * @zh
 * 滑动引导图片，即从一个位置移动到另一个位置，适用于需要进行滑动引导的游戏。注意该方法只对手指或箭头类型的引导图片有效。
 * @param slideDistance 滑动位移。
 * @param slideTime 滑动时间。
 */
// slideGuideSign(slideDistance: cc.Vec3, slideTime: number=2)

/**
 * @en
 * Moves the guide sign node up and down，i.e., like poking. Note this method only works for hand or arrow type of guide sign.
 * @zh
 * 让引导图片上下运动，即拥有戳戳戳的效果。注意该方法只对手指或箭头类型的引导图片有效。
 */
// makeGuideSignMoveUpAndDown()

/**
 * @en
 * Sets the rotation of guide sign node. The default value is 90, i.e., 90°. Note this method only works for hand or arrow type of guide sign.
 * @zh
 * 设置引导图片的旋转角度，默认旋转值为90，即绕z轴旋转90°。注意该方法只对手指或箭头类型的引导图片有效。
 */
// setGuideSignRotation(r: number=90)

/**
 * @en
 * Sets the position of guide sign on Canvas.
 * @zh
 * 设置引导图片在画布上的位置。
 */
// setGuideSignPos(pos: cc.Vec3)

/**
 * @en
 * Stops the guide sign tween.
 * @zh
 * 停止引导图片缓动。
 */
// stopGuideSignTween()

/**
 * @en
 * Is to make the guide sign fly to the next node position after each guide. If false, the guide sign will hide, and show at next guide.
 * @zh
 * 完成一次引导后，是否让引导图片飞到下一个被引导节点的位置上。如果是false，则引导图片会先被隐藏，下次引导时再显示出来。
 */
// setGuideSignFly(isFlying: boolean=false)

/**
 * @en
 * Sets flying tween duration. The default is 0.3 second.
 * @zh
 * 设置飞行缓动持续时间。
 */
// setGuideSignFlyingDuration(duration: number=0.3)

/**
 * @en
 * Sets the interval between two key-down operations, 1.5 seconds by default. For example, if a user presses Ctrl, and then presses G within 1.5 seconds, We see them as combined keys. If over 1.5 seconds, then we see the user presses G only.
 * @zh
 * 设置两次按键之间的时间间隔，默认是1.5秒。比如用户先按下Ctrl键，并在1.5秒内按下G键，则判断用户按下了组合键。如果超过1.5秒，则判断为只按下了G键。
 */
// setKeyDownInterval(interval: number)

/**
 * @en
 * Is to enable the typing effect.
 * @zh
 * 是否开启打字机效果。
 */
// setTypingEnabled(isEnabled: boolean)

import {Data, Mgr} from '../GameControl'
import {UI} from '../enums/UI'
import {ConstValue} from '../data/ConstValue'
import {ccUtils} from '../utils/ccUtils'
import {UserGuideConfig} from '../config/UserGuideConfig'

/**
 * @en
 * Typing interval (second) used in schedule, 0.05 second by default.
 * @zh
 * 设置打字机效果打字的时间间隔（秒），默认是0.05秒。
 */
// setTypingInterval(interval: number)

const {ccclass} = cc._decorator

@ccclass
export default class UserGuide extends cc.Component {
    /**
     * @en
     * The temp value for current step.
     * @zh
     * 用于记录当前引导步数。
     */
    currentStepTemp = 1

    /**
     * @en
     * The temp value for text pos.
     * @zh
     * 记录文本显示位置。
     */
    textPosTemp: cc.Vec3 | string = 'follow'

    /**
     * @en
     * The interval between two key-down operations.
     * @zh
     * 两次按键时间间隔。
     */
    keyDownInterval = 1.5

    /**
     * @en
     * Is to enable the typing effect, false by default.
     * @zh
     * 是否开启打字效果，默认不开启。
     */
    isTyping = false

    /**
     * @en
     * Typing interval (second) used in schedule.
     * @zh
     * 打字机效果打字的时间间隔（秒）。
     */
    typingInterval = 0.05

    /**
     * @en
     * Guide sprite rotation.
     * @zh
     * 引导图片角度。
     */
    guideSignRotation = 90

    /**
     * @en
     * Schedule count.
     * @zh
     * 调度次数。
     */
    scheduleCount = 0

    /**
     * @en
     * The temp value for guide text.
     * @zh
     * 引导文本副本。
     */
    guideTextTemp = ''

    /**
     * @en
     * Is to enable guide sign node tween.
     * @zh
     * 引导图片缓动是否开启。
     */
    isGuideSignTweenEnabled = false

    /**
     * @en
     * Current tween on guide sign node.
     * @zh
     * 引导图片缓动实例。
     */
    guideSignTween = null

    /**
     * @en
     * The tween type on guide sign node.
     * @zh
     * 引导图片的缓动类型。
     */
    guideSignTweenType = ''

    /**
     * @en
     * Is to make the guide sign fly to the next node position after each guide. If false, the guide sign will hide, and show at next guide.
     * @zh
     * 完成一次引导后，是否让引导图片飞到下一个被引导节点的位置上。如果是false，则引导图片会先被隐藏，下次引导时再显示出来。
     */
    isGudieSignFlying = false

    /**
     * @en
     * Guide sign flying tween.
     * @zh
     * 引导图片飞行缓动。
     */
    guideSignFlyingTween = null

    /**
     * @en
     * Guide sign flying tween duration.
     * @zh
     * 引导图片飞行缓动持续时间。
     */
    flyingTweenDuration = 0.3

    /**
     * @en
     * Is guide sign finished flying.
     * @zh
     * 引导图片飞行是否结束。
     */
    isFlyingFinised = true

    /**
     * @en
     * The data of slide tween on guide sign node。
     * @zh
     * 滑动缓动数据。
     */
    guideSignSlideTweenData = {
        slideDistance: null,
        slideTime: 0.5,
    }

    /**
     * @en
     * Is to guide by group.
     * @zh
     * 是否为分组引导。
     */
    isGuidedByGroup = false

    /**
     * @en
     * Saves the step when guiding by group.
     * @zh
     * 记录分组引导步数。
     */
    stepIndexInArray = 0

    /**
     * @en
     * The temp value for current step array.
     * @zh
     * 当前引导分组。
     */
    currentStepArrayTemp = []

    /**
     * @en
     * The guide data generated by user guide extension.
     * @zh
     * 用户通过插件生成的引导数据。
     */
    guideData = {
        nodesAndTexts: [],
        guideSignType: 'frame',
    }

    /**
     * @en
     * The language type of guide text, 'zh' by default, the other value is 'en'.
     * @zh
     * 引导文本语言种类，默认是'zh'，其他可选值为'en'。
     */
    guideTextLang = 'zh'

    /**
     * @en
     * The UITransform component of canvas.
     * @zh
     * 画布的UITransform组件。
     */
    canvasUITransform = {width: 1920, height: 1080}

    /**
     * @en
     * The mask node which is generated dynamically.
     * @zh
     * 动态创建的遮罩节点。
     */
    maskNode: cc.Node = null!

    /**
     * @en
     * The child node of mask node, which has a BlockInputEvents component.
     * @zh
     * 遮罩节点下的子节点，含有BlockInputEvents组件。
     */
    blockBgNode: cc.Node = null!

    /**
     * @en
     * The guide sign node which is generated dynamically.
     * @zh
     * 动态创建的引导图片节点。
     */
    guideSignSpriteNode: cc.Node = null!

    /**
     * @en
     * Saves the position of guide sign set by developers.
     * @zh
     * 保存开发者设置的引导图片位置。
     */
    guideSignPosTemp: cc.Vec3 = null

    /**
     * @en
     * The guide text background node which is generated dynamically.
     * @zh
     * 动态创建的文本背景图片节点。
     */
    guideTextBgSpriteNode: cc.Node = null!

    /**
     * @en
     * The guide text node which is generated dynamically.
     * @zh
     * 动态创建的文本节点。
     */
    guideTextLabelNode: cc.Node = null!

    //角色节点
    roleNode: cc.Node = null!
    //角色spine
    roleSpine: sp.SkeletonData = null!
    // 图片bundle
    texBundle: cc.AssetManager.Bundle = null!

    // handSp
    handSp: cc.SpriteFrame = null!
    // 箭头
    arrowSp: cc.SpriteFrame = null!

    onLoad() {}

    start() {}

    init(roleSpine: sp.SkeletonData, texBundle: cc.AssetManager.Bundle) {
        this.guideData.nodesAndTexts = Object.values(UserGuideConfig)
        this.roleSpine = roleSpine
        this.texBundle = texBundle
        this.createNodes()
        this.setGuideTextCustomFont('ttf/COMICBD')
        this.makeGuideSignMoveUpAndDown()
        this.setTypingEnabled(false)
        this.guideData.nodesAndTexts.forEach((nodeAndText: any) => {
            nodeAndText.guideText = Mgr.i18n.getLabel(nodeAndText.guideText)
            nodeAndText.isAliased = true
            nodeAndText.alias = nodeAndText.ID
        })
    }

    /**
     * @en
     * Creates nodes dynamically needed for user guide.
     * @zh
     * 动态创建新手引导需要用到的节点。
     */
    createNodes() {
        this.createMaskNode()
        this.createBlockBgNode()
        this.createGuideSignSpriteNode()
        this.createGuideTextBgSpriteNode()
        this.createGuideTextLabelNode()
    }

    /**
     * @en
     * Creates mask node dynamically.
     * @zh
     * 动态创建遮罩节点。
     */
    createMaskNode() {
        this.maskNode = new cc.Node('Mask Node')
        this.maskNode.active = false
        this.maskNode.addComponent(cc.Mask)
        let maskSpNode = new cc.Node('Mask Sprite Node')
        let spriteComp = maskSpNode.addComponent(cc.Sprite)
        spriteComp.type = cc.Sprite.Type.SLICED
        this.texBundle.load('Public/light_effect_3', cc.SpriteFrame, (err: any, spriteFrame: cc.SpriteFrame) => {
            spriteComp.spriteFrame = spriteFrame
            spriteFrame.addRef()
        })
        this.maskNode.addChild(maskSpNode)
        maskSpNode.setSiblingIndex(Number.MAX_SAFE_INTEGER)
        this.node.addChild(this.maskNode)
    }

    /**
     * @en
     * Creates the child node of mask node dynamically. This node can block all input events.
     * @zh
     * 创建可排除所有输入事件的节点，作为遮罩节点的子节点。
     */
    createBlockBgNode() {
        this.blockBgNode = new cc.Node('Block Bg Node')

        this.blockBgNode.addComponent(cc.BlockInputEvents)
        let spriteComp = this.blockBgNode.addComponent(cc.Sprite)
        this.blockBgNode.color = new cc.Color(0, 0, 0)
        this.blockBgNode.opacity = 200
        let self = this
        this.texBundle.load('Public/block2', cc.SpriteFrame, (err: any, spriteFrame: cc.SpriteFrame) => {
            spriteComp.spriteFrame = spriteFrame
            self.blockBgNode.width = this.canvasUITransform.width * 10
            self.blockBgNode.height = this.canvasUITransform.height * 10
            spriteFrame.addRef()
        })

        this.maskNode.addChild(this.blockBgNode)
        this.blockBgNode.setSiblingIndex(0)
    }

    /**
     * @en
     * Creates the guide sign node and loads the sprite dynamically.
     * @zh
     * 动态创建引导图片节点并设置引导图片。
     */
    createGuideSignSpriteNode() {
        this.guideSignSpriteNode = new cc.Node('Guide Sign Sprite Node')
        this.guideSignSpriteNode.active = false
        let self = this
        let spriteComp = this.guideSignSpriteNode.addComponent(cc.Sprite)
        // if (this.guideData.guideSignType.includes('frame')) {
        //     spriteComp.type = cc.Sprite.Type.SLICED
        //
        // }
        this.texBundle.load('Public/arrow_5', cc.SpriteFrame, (err: any, spriteFrame: cc.SpriteFrame) => {
            spriteComp.spriteFrame = spriteFrame
            self.arrowSp = spriteFrame
            //this.adjustGuideSignSpriteNode(1)
            spriteFrame.addRef()
        })
        this.texBundle.load('Public/guide_finger', cc.SpriteFrame, (err: any, spriteFrame: cc.SpriteFrame) => {
            self.handSp = spriteFrame
            //this.adjustGuideSignSpriteNode(1)
            spriteFrame.addRef()
        })
        this.node.addChild(this.guideSignSpriteNode)
    }

    /**
     * @en
     * Creates the guide text background node and loads the sprite dynamically.
     * @zh
     * 创建文本背景节点并设置图片。
     */
    createGuideTextBgSpriteNode() {
        this.guideTextBgSpriteNode = new cc.Node('Text Bg Sprite Node')
        this.guideTextBgSpriteNode.active = false
        this.roleNode = new cc.Node('Text Role Node')
        this.roleNode.active = false
        this.roleNode.scale = 0.75
        let self = this
        let spriteComp = this.guideTextBgSpriteNode.addComponent(cc.Sprite)
        spriteComp.type = cc.Sprite.Type.SLICED
        self.textPosTemp == 'bottom'
            ? self.setGuideTextBgSpriteSizeByCanvasSize()
            : self.setGuideTextBgSpriteSizeByTextLength()
        this.texBundle.load('Public/preview_bottom_1', cc.SpriteFrame, (err: any, spriteFrame: cc.SpriteFrame) => {
            spriteComp.spriteFrame = spriteFrame
            // self.textPosTemp == 'bottom'
            //     ? self.setGuideTextBgSpriteSizeByCanvasSize()
            //     : self.setGuideTextBgSpriteSizeByTextLength()
        })
        this.node.addChild(this.roleNode)
        let spCom = this.roleNode.addComponent(sp.Skeleton)
        this.roleNode.setSiblingIndex(Number.MAX_SAFE_INTEGER - 1)
        spCom.skeletonData = this.roleSpine
        this.node.addChild(this.guideTextBgSpriteNode)
    }

    /**
     * @en
     * Creates the guide text node dynamically.
     * @zh
     * 创建引导文本节点。
     */
    createGuideTextLabelNode() {
        this.guideTextLabelNode = new cc.Node('Guide Text Label Node')
        this.guideTextLabelNode.width = 100
        this.guideTextLabelNode.height = 40

        let labelComp = this.guideTextLabelNode.addComponent(cc.Label)
        labelComp.horizontalAlign = cc.Label.HorizontalAlign.LEFT
        labelComp.verticalAlign = cc.Label.VerticalAlign.TOP
        labelComp.overflow = cc.Label.Overflow.SHRINK
        this.guideTextLabelNode.color = new cc.Color(255, 255, 255)
        labelComp.fontSize = 36
        labelComp.lineHeight = 40
        let labelOutComp = this.guideTextLabelNode.addComponent(cc.LabelOutline)
        labelOutComp.color = new cc.Color(38, 17, 12)
        labelOutComp.width = 3
        this.guideTextBgSpriteNode.addChild(this.guideTextLabelNode)

        // Moves the guide text node downwards a litte bit to make it shown at center.
        // 稍微往下移动一点显得在图片上居中。
        this.guideTextLabelNode.setPosition(0, -5, 0)
    }

    /**
     * @en
     * Hides all nodes related to user guide.
     * @zh
     * 隐藏与引导相关的所有节点。
     */
    hideGuide() {
        // 隐藏与引导相关的所有节点
        console.log('hideGuide')
        this.maskNode.active = false
        this.guideSignSpriteNode.active = false
        this.guideTextBgSpriteNode.active = false
        this.roleNode.active = false
    }

    /**
     * @en
     * Slides the guide sign node, i.e., move from one position to another. This method suits the game which needs a slide guide. Note this method only works for hand or arrow type of guide sign.
     * @param slideDistance The slide distance.
     * @param slideTime The slide time.
     * @zh
     * 滑动引导图片，即从一个位置移动到另一个位置，适用于需要进行滑动引导的游戏。注意该方法只对手指或箭头类型的引导图片有效。
     * @param slideDistance 滑动位移。
     * @param slideTime 滑动时间。
     */
    slideGuideSign(slideDistance: cc.Vec3, slideTime: number = 2) {
        if (this.guideData.guideSignType.includes('hand') || this.guideData.guideSignType.includes('arrow')) {
            return
        }

        this.isGuideSignTweenEnabled = true
        this.guideSignTweenType = 'slide'
        this.guideSignSlideTweenData = {
            slideDistance: slideDistance,
            slideTime: slideTime,
        }
    }

    /**
     * @en
     * Is to make the guide sign fly to the next node position after each guide. If false, the guide sign will hide, and show at next guide.
     * @param isFlying Whether to make the guide sign fly to the target node.
     * @zh
     * 完成一次引导后，是否让引导图片飞到下一个被引导节点的位置上。如果是false，则引导图片会先被隐藏，下次引导时再显示出来。
     * @param isFlying 是否让引导图片飞到目标节点上
     */
    setGuideSignFly(isFlying: boolean = false) {
        this.isGudieSignFlying = isFlying
    }

    /**
     * @en
     * Sets flying tween duration. The default is 0.3 second.
     * @param duration Flying tween duration
     * @zh
     * 设置飞行缓动持续时间。
     * @param duration 飞行缓动持续时间，默认0.3秒。
     */
    setGuideSignFlyingDuration(duration: number = 0.3) {
        this.flyingTweenDuration = duration
    }

    /**
     * @en
     * Moves the guide sign node up and down，i.e., like poking. Note this method only works for hand or arrow type of guide sign.
     * @zh
     * 让引导图片上下运动，即拥有戳戳戳的效果。注意该方法只对手指或箭头类型的引导图片有效。
     */
    makeGuideSignMoveUpAndDown() {
        if (this.guideData.guideSignType.includes('hand') && this.guideData.guideSignType.includes('arrow')) {
            return
        }

        this.isGuideSignTweenEnabled = true
        this.guideSignTweenType = 'updown'
    }

    /**
     * @en
     * Sets the rotation of guide sign node. The default value is 90, i.e., 90°. Note this method only works for hand or arrow type of guide sign.
     * @zh
     * 设置引导图片的旋转角度，默认旋转值为90，即绕z轴旋转90°。注意该方法只对手指或箭头类型的引导图片有效。
     */
    setGuideSignRotation(r: number = 90) {
        if (this.guideData.guideSignType.includes('hand') && this.guideData.guideSignType.includes('arrow')) {
            return
        }

        this.guideSignRotation = r
    }

    /**
     * @en
     * Sets the position of guide sign on Canvas.
     * @zh
     * 设置引导图片在画布上的位置。
     */
    setGuideSignPos(pos: cc.Vec3) {
        this.guideSignPosTemp = pos
    }

    startGuideSignTween() {
        // Stops the current tween and restarts.
        // 先停止之前的缓动，然后再重新开始。
        if (this.guideSignTween) {
            this.guideSignTween.stop()
        }

        if (this.guideSignTweenType == 'slide') {
            // Slides the guide sign node and make it back to original position quickly, then slides again.
            // 滑动引导图片，滑动过后快速回到原来的位置，然后继续滑动。
            this.initGuideSignSlideTween()
        } else if (this.guideSignTweenType == 'updown') {
            // Moves the guide sign node up and down.
            // 让引导图片上下运动。
            this.initGuideSignUpDownTween()
        }

        // Starts the tween.
        // 开启引导图片缓动。
        this.guideSignTween.start()
    }

    /**
     * @en
     * Slides the guide sign node and make it back to original position quickly, then slides again.
     * @zh
     * 滑动引导图片，滑动过后快速回到原来的位置，然后继续滑动。
     */
    initGuideSignSlideTween() {
        let slideTime = this.guideSignSlideTweenData.slideTime
        let slideDistance = this.guideSignSlideTweenData.slideDistance
        this.guideSignTween = cc
            .tween(this.guideSignSpriteNode)
            .by(slideTime, {position: slideDistance})
            .by(slideTime / 5, {position: new cc.Vec3(-slideDistance.x, -slideDistance.y, -slideDistance.z)})
            .union()
            .repeatForever()
    }

    /**
     * @en
     * Moves the guide sign node up and down.
     * @zh
     * 让引导图片上下运动。
     */
    initGuideSignUpDownTween() {
        this.guideSignTween = cc
            .tween(this.guideSignSpriteNode)
            .by(0.5, {position: new cc.Vec3(0, -10, 0)})
            .by(0.5, {position: new cc.Vec3(0, 10, 0)})
            .union()
            .repeatForever()
    }

    /**
     * @en
     * Stops the guide sign tween.
     * @zh
     * 停止引导图片缓动。
     */
    stopGuideSignTween() {
        if (this.guideSignTween) {
            this.isGuideSignTweenEnabled = false
            this.guideSignTween.stop()
            this.guideSignTween = null
            this.guideSignTweenType = ''
            this.guideSignSlideTweenData = {
                slideDistance: null,
                slideTime: 0.5,
            }
        }
    }

    /**
     * @en
     * Sets the scale of guide sign.
     * @zh
     * 设置引导图片缩放值。
     */
    setGuideSignScale(scaleX: number, scaleY: number) {
        this.guideSignSpriteNode.setScale(scaleX, scaleY, 0)
    }

    /**
     * @en
     * Sets the color of guide text, black by default.
     * @zh
     * 设置引导文本颜色，默认为黑色。
     */
    setGuideTextColor(color: cc.Color) {
        this.guideTextLabelNode.color = color
    }

    /**
     * @en
     * Sets the font size of guide text, 28 by default.
     * @zh
     * 设置引导文本字体大小，默认为28。
     */
    setGuideTextFontSize(fontSize: number) {
        this.guideTextLabelNode.getComponent(cc.Label).fontSize = fontSize
    }

    /**
     * @en
     * Sets the system font of guide text.
     * @param sysFontName System font name
     * @zh
     * 设置引导文本的系统字体。
     * @param sysFontName 系统字体名称
     */
    setGuideTextSystemFont(sysFontName: string) {
        this.guideTextLabelNode.getComponent(cc.Label).useSystemFont = true
        this.guideTextLabelNode.getComponent(cc.Label).fontFamily = sysFontName
    }

    /**
     * @en
     * Sets the custom font of guide text.
     * @param pathInRes The path of the custom font in resources folder. The format should be ttf and the path should end without the extension name .ttf.
     * @zh
     * @param pathInRes 自定义字体在resources文件夹中的路径，字体格式为ttf，注意路径最后不带后缀名.ttf。
     * 设置引导文本自定义字体。
     */
    setGuideTextCustomFont(pathInRes: string) {
        this.guideTextLabelNode.getComponent(cc.Label).useSystemFont = false
        cc.resources.load(pathInRes, cc.Font, (err: any, font: cc.Font) => {
            this.guideTextLabelNode.getComponent(cc.Label).font = font
        })
    }

    /**
     * @en
     * Sets the line height of guide text, 28 by default.
     * @zh
     * 设置引导文本行高，默认为40。
     */
    setGuideTextLineHeight(lineHeight: number) {
        this.guideTextLabelNode.getComponent(cc.Label).lineHeight = lineHeight
    }

    /**
     * @en
     * Sets the position of guide text.
     * @param textPos Where to show the guide text. Choices are Vec3 type of value (position on Canvas), or string type of value: 'follow', 'center' and 'bottom'. 'follow' means showing next to the target node, 'center' means showing in the center of Canvas and 'bottom' means showing at the bottom of Canvas.
     * @zh
     * 设置引导文本位置。
     * @param textPos 要在哪里显示引导文本，可以是Vec3类型的值，即在画布上的具体位置，或者是字符串类型的值'follow'、'center'和'bottom'。'follow'表示显示在目标节点周围，'center'表示显示在画布中间，'bottom'表示显示在画布底部。
     */
    setGuideTextPos(textPos: cc.Vec3 | string = 'follow') {
        this.textPosTemp = textPos
    }

    /**
     * @en
     * Sets the language type of guide text, 'zh' by default, the other value is 'en'.
     * @zh
     * 设置引导文本语言种类，默认是'zh'，其他可选值为'en'。
     */
    setGuideTextLang(lang: string = 'zh') {
        this.guideTextLang = lang
    }

    /**
     * @en
     * Sets the scale of guide text background node.
     * @zh
     * 设置引导文本背景缩放值。
     */
    setGuideTextBackgroundScale(scaleX: number, scaleY: number) {
        this.guideTextBgSpriteNode.setScale(scaleX, scaleY, 0)

        // The scale of bakcground shouldn't influence the child label node.
        // 让Label节点不受父节点影响
        this.guideTextLabelNode.setScale(1 / scaleX, 1 / scaleY, 0)

        // Label is a little bit smaller than the background node.
        // Label大小稍微比背景图片小点。
        this.guideTextLabelNode.width = (this.guideTextBgSpriteNode.width * scaleX) / 1.1
        this.guideTextLabelNode.width = (this.guideTextBgSpriteNode.height * scaleY) / 1.1
    }

    /**
     * @en
     * Sets the mask color, black and half transparent by default.
     * @zh
     * 设置遮罩层颜色，默认为黑色半透明。
     */
    setMaskColor(color: cc.Color) {
        this.blockBgNode.color = color
        this.blockBgNode.opacity = color.a
    }

    /**
     * @en
     * Sets the mask shape, rect by default.
     * @param shape 'rect', 'ellipse' or 'sprite stencil'
     * @param spriteFrame This parameter must accept a SpriteFrame type of value When the shape value is 'sprite stencil'.
     * @zh
     * 设置遮罩挖洞形状，默认为矩形。
     * @param shape 'rect'，'ellipse'或者'sprite stencil'
     * @param spriteFrame 当遮罩挖洞形状为'sprite stencil'时，该参数必须接收一个SpriteFrame类型的值。
     */
    setMaskShape(shape: string, spriteFrame: cc.SpriteFrame = null) {
        if (shape == 'rect') {
            this.maskNode.getComponent(cc.Mask).type = cc.Mask.Type.RECT
        } else if (shape == 'ellipse') {
            this.maskNode.getComponent(cc.Mask).type = cc.Mask.Type.ELLIPSE
        } else if (shape == 'sprite stencil' && spriteFrame) {
            this.maskNode.getComponent(cc.Mask).type = cc.Mask.Type.IMAGE_STENCIL
            this.maskNode.getComponent(cc.Mask).spriteFrame = spriteFrame
        }
    }

    /**
     * @en
     * Sets the interval between two key-down operations, 1.5 seconds by default.
     * @zh
     * 设置两次按键之间的时间间隔，默认是1.5秒。
     */
    setKeyDownInterval(interval: number) {
        this.keyDownInterval = interval
    }

    /**
     * @en
     * Is to enable the typing effect.
     * @zh
     * 是否开启打字机效果。
     */
    setTypingEnabled(isEnabled: boolean) {
        this.isTyping = isEnabled
    }

    /**
     * @en
     * Typing interval (second) used in schedule, 0.05 second by default.
     * @zh
     * 设置打字机效果打字的时间间隔（秒），默认是0.05秒。
     */
    setTypingInterval(interval: number) {
        this.typingInterval = interval
    }

    /**
     * @en
     * Shows the guide by group.
     * @param stepArray The guide steps array, [1, 3, 5] means to execute the fist, the third and the fifth guide step. You may also pass an alias array, e.g., ['alias of guide step1', 'alias of guide step 2'];
     * @param callback  Takes a callback function. which will be called the user completes the current guide.
     * @zh
     * 按分组显示引导。
     * @param stepArray 要执行各个引导步骤，比如传入[1, 3, 5]表示一次执行第一、第三和第五步引导。也可以传入别名数组['第一步引导别名', '第二步引导别名']。
     * @param callback 接收一个回调函数，当用户完成当前引导后会执行该回调函数。
     */
    showGuideByGroup(stepArray: Array<number | string>, callback: Function = null) {
        // Return if the step array is empty.
        // 如果引导步骤为空，则直接返回。
        if (!stepArray.length) {
            return
        }

        // Sets some related variables to show we are in group guiding.
        // 设置相关变量，表明现在正在进行分组引导。
        this.isGuidedByGroup = true
        this.currentStepArrayTemp = stepArray
        this.makeGuideSignMoveUpAndDown()
        // Executes the fist guide step in the group.
        // 执行分组中的第一步引导
        this.stepIndexInArray = 0
        this.showGuide(stepArray[this.stepIndexInArray], true, callback)
    }

    /**
     * @en
     * Shows guides or a single guide.
     * @param step Which step to be guided, 1 by default. You may also pass the alias name of the step.
     * @param isAuto Is to play the next guide automatically, false by default.
     * @param callback  Takes a callback function. which will be called the user completes the current guide. Only works when the parameter isAuto is false. Should use this parameter in single step guide type.
     *
     * @zh
     * 显示连续或单步引导。
     * @param step 新手引导的第几步，默认是第一步。也可以传入该引导步骤的别名。
     * @param isAuto 完成当前引导后是否自动播放下一个引导。
     * @param callback 接收一个回调函数，当用户完成当前引导后会执行该回调函数。只有isAuto为false时才有效，适用于单步引导。
     */
    showGuide(step: number | string, isAuto: boolean = false, callback: Function = null) {
        if (!step) {
            console.log('请设置参数step的值。')
            console.log("Please set parameter step's value.")
            return
        }

        // Change alias to index.
        // 将别名转换成索引。
        if (typeof step == 'string') {
            let temp = step
            step = this.changeAliasToIndex(step)
            if (step == 0) {
                console.log(`step名称${temp}不存在。`)
                console.log(`The step alias ${temp} does not exist.`)
                return
            }
        }

        // If a developer passes a step value bigger than the biggest step number, then cleans related content and retuen.
        // 如果开发者传入的步数大于插件中设置的步数，则清理相关内容后返回。
        if (step > this.guideData.nodesAndTexts.length) {
            // Delete the guide sign (repeatForever) tween to prevent memory usage.
            // 需要删除引导图片的repeatForever缓动，防止占用内存。
            if (this.isGuideSignTweenEnabled) {
                this.stopGuideSignTween()
            }
            return
        }
        let curData = this.guideData.nodesAndTexts[step - 1]

        // Saves the current guide step, and it will be used in resources.load().
        // 保存当前引导步数，用在resources.load()方法中。
        this.currentStepTemp = step
        // 特殊UI引导。
        if (curData.guideType == 101 || curData.guideType > 200) {
            let self = this
            //this.showOnlyTextGuide(step, isAuto, callback)
            Mgr.ui.show(
                +curData.guideType == 101 ? UI.ModOpenUI : UI.UserGuideUI,
                Object.assign(
                    {
                        callback: () => {
                            self.goToNextGuide(this.currentStepTemp, isAuto, callback)
                        },
                    },
                    curData,
                ),
            )
            return
        }
        //重新设置当前引导类型
        this.guideData.guideSignType = `${curData.arrowType == 1 ? 'arrow' : ''}_${curData.showTextBg ? 'frame' : ''}_${
            curData.arrowType == 2 ? 'hand' : ''
        }`
        // Is touch guide or key guide.
        // 判断是触摸引导还是按键引导。
        if (!this.guideData.nodesAndTexts[step - 1].key) {
            let targetNodePath = this.guideData.nodesAndTexts[step - 1].path
            if (!targetNodePath) {
                console.error(`未找到uuid为${this.guideData.nodesAndTexts[step - 1].path}的节点`)
                console.error(`Can't find the node whose uuid is ${this.guideData.nodesAndTexts[step - 1].path}`)
                return
            }
            let targetNode = cc.find(`Canvas/${targetNodePath}`)
            if (curData.delay) {
                this.scheduleOnce(() => {
                    this.showNodeAndTextGuide(targetNode, +step, isAuto, callback)
                }, curData.delay)
            } else {
                this.showNodeAndTextGuide(targetNode, step, isAuto, callback)
            }
        } else {
            let keys = this.guideData.nodesAndTexts[step - 1].key.split('+')
            this.showKeyAndTextGuide(keys, step, isAuto, callback)
        }
    }

    /**
     * @en
     * Change alias to index.
     * @zh
     * 将别名转换成索引。
     */
    changeAliasToIndex(step: string) {
        for (let i = 0; i < this.guideData.nodesAndTexts.length; i++) {
            if (this.guideData.nodesAndTexts[i].alias == step) {
                return i + 1
            }
        }
        return 0
    }

    /**
     * @en
     * Shows the next guide.
     * @zh
     * 显示下一步引导。
     */
    goToNextGuide(step: number, isAuto: boolean, callback: Function = null) {
        // If it is guided by group, then gets the next guide step number from the guide array.
        // 判断是否为分组引导，是的话则需要从引导分组中获取下一步引导序号。
        if (this.isGuidedByGroup) {
            //重置当前大段引导
            let alias = this.currentStepArrayTemp[this.stepIndexInArray]
            let allSteps = this.guideData.nodesAndTexts.filter(v => v.alias.split('_')[0] == alias.split('_')[0])
            if (alias == allSteps[allSteps.length - 1].alias) {
                Mgr.global.curGuideStep = 0
            }

            this.stepIndexInArray += 1

            // If it is the last step, resets all related variables and executes the callback.
            // 如果已经是最后一步引导，则重置相关变量，执行回调。
            if (this.stepIndexInArray >= this.currentStepArrayTemp.length) {
                this.stepIndexInArray = 0
                this.isGuidedByGroup = false
                this.currentStepArrayTemp = []

                // Delete the guide sign (repeatForever) tween to prevent memory usage.
                // 需要删除引导图片的repeatForever缓动，防止占用内存
                if (this.isGuideSignTweenEnabled) {
                    this.stopGuideSignTween()
                }

                // Executes the callback.
                // 执行回调。
                if (callback) {
                    callback()
                }
            }
            // If it is not the last step, use the next guide number from array.
            // 如果不是最后一步引导，则使用数组中的下一个引导数字。
            else {
                this.showGuide(this.currentStepArrayTemp[this.stepIndexInArray], isAuto, callback)
            }
        }
        // If it is not guided by group, then adds 1 on the current step number.
        // 如果不是分组引导，则将引导步骤加上1。
        else {
            this.showGuide((step += 1), isAuto, callback)
        }
    }

    /**
     * @en
     * Shows the guide with text only.
     * @zh
     * 只有文本的引导，文本默认显示在屏幕中间。
     */
    showOnlyTextGuide(step: number, isAuto: boolean, callback: Function = null) {
        // Show related nodes.
        // 显示引导相关节点。
        // this.maskNode.active = true
        // this.guideTextBgSpriteNode.active = true

        // Sets the callback function.
        // 设置回调函数。
        let touchStartCallback = () => {
            this.hideGuide()
            if (isAuto) {
                this.goToNextGuide(step, isAuto, callback)
            } else if (callback) {
                callback()
            }
        }
        this.blockBgNode.once(cc.Node.EventType.TOUCH_END, touchStartCallback, this)

        // Sets mask. All nodes can not accept click event as there is no target node to be clicked in the guide.
        // 设置遮罩，让所有节点都无法被点击，因为没有在引导中设置要点击的目标节点        this.maskNode.setPosition(new cc.Vec3(0, 0, 0))
        this.maskNode.setSiblingIndex(0)
        this.maskNode.getComponent(cc.Mask).inverted = true
        this.maskNode.width = 0
        this.maskNode.height = 0

        // Shows the guide text.
        // 显示引导文本。
        // this.adjustGuideTextBgSpriteNode()
        // this.adjustGuideTextLabelNode(step)
    }

    /**
     * @en
     * Shows the guide text and the node to be guided.
     * @zh
     * 显示文本和节点引导。
     */
    showNodeAndTextGuide(targetNode: cc.Node, step: number, isAuto: boolean, callback: Function = null) {
        let curData = this.guideData.nodesAndTexts[step - 1]
        // Show related nodes.
        // 显示引导相关节点。
        this.maskNode.active = true
        let maskFrameNode = this.maskNode.children[1]
        maskFrameNode.active = false
        this.guideSignSpriteNode.active = curData.arrowType > 0
        if (this.arrowSp && this.handSp && curData.arrowType > 0) {
            let spArr = [null, this.arrowSp, this.handSp]
            this.guideSignSpriteNode.getComponent(cc.Sprite).spriteFrame = spArr[curData.arrowType]
        }
        this.guideTextBgSpriteNode.active = curData.showTextBg
        this.blockBgNode.active = curData.prevent
        this.roleNode.active = curData.showRole
        if (this.roleNode.active) {
            let spCom = this.roleNode.getComponent(sp.Skeleton)
            spCom.setAnimation(0, 'stand', true)
        }
        // Reset guide sign tween before each guide.
        // 每次引导前重置引导图片飞行缓动
        this.guideSignFlyingTween = null

        // Sets the callback function.
        // 设置点击后的回调函数。
        let touchStartCallback = () => {
            this.hideGuide()

            if (isAuto) {
                this.goToNextGuide(step, isAuto, callback)
            } else if (callback) {
                callback()
            }
        }
        //按钮或者局部点击下一步 或者 全屏弱引导下一步
        if (targetNode.height < ConstValue.CANVAS_HEIGHT || curData.guideType == 1) {
            targetNode.once(cc.Node.EventType.TOUCH_END, touchStartCallback, this)
            targetNode['_touchListener'].setSwallowTouches(curData.guideType != 1)
        }
        // Sets mask.
        // 设置遮罩相关属性。
        this.maskNode.setPosition(new cc.Vec3(0, 0, 0))
        this.maskNode.angle = 0
        this.maskNode.setSiblingIndex(0)
        this.maskNode.getComponent(cc.Mask).inverted = true

        // The callback that updates the properties (pos, size...) of mask node and guide sign node.
        // 更新遮罩和引导图片的计时器回调函数。
        // Changes the szie of mask hole and guide sign node according to the target node.
        // 根据目标节点改变遮罩挖洞和引导图片的大小。
        this.maskNode.width = targetNode.width * targetNode.scaleX * 1.1
        this.maskNode.height = targetNode.height * targetNode.scaleY * 1.1
        if (targetNode.height < ConstValue.CANVAS_HEIGHT && targetNode.height > 0) {
            maskFrameNode.active = true
            maskFrameNode.width = this.maskNode.width + 36
            maskFrameNode.height = this.maskNode.height + 36
        } else if (curData.prevent) {
            //全屏target 默认是全屏，点击屏幕任意位置下一步
            this.showOnlyTextGuide(step, isAuto, callback)
        }
        // Changes the mask's position according to the target node.
        // 根据目标节点调整遮罩节点位置。
        this.maskNode.setPosition(ccUtils.convertNode2NodePosAR(targetNode, this.node))
        this.maskNode.angle = targetNode.angle
        // Sets again the size of mask background, in case of the wrong size in some games.
        // 这里再一次设置遮罩背景大小，防止部分游戏逻辑下遮罩背景大小错误的情况。
        this.blockBgNode.width = this.canvasUITransform.width * 10
        this.blockBgNode.height = this.canvasUITransform.height * 10

        // Adjusts the position of guide text background. To ensure that the guide sign node is not covered by guide text background. We need to adjust guide text node before guide sign node.
        // 调整文本背景位置。为了不让引导图片被文本背景遮住，需要先设置文本背景，再设置引导图片。
        this.setGuideTextPos(cc.v3(curData.textBgPos[0], curData.textBgPos[1], 0))
        this.adjustGuideTextBgSpriteNode()
        // Adjust guide sign node. Different guide sign sprites need different adjustments.
        // 调整引导图片，不同引导图片需做不同处理。
        this.setGuideSignRotation(curData.arrowRotation)
        let arrowOffsetX = 0
        if (
            curData.path.includes('MainUI/leftNode') ||
            curData.path.includes('MainUI/bottomLeftNode') ||
            curData.ID == '18_2'
        )
            arrowOffsetX = Data.main.safeTop
        this.setGuideSignPos(cc.v3(curData.arrowPos[0] - arrowOffsetX, curData.arrowPos[1], 0))
        this.adjustGuideSignSpriteNode(step)
        // Adjusts the guide text.
        // 调整引导文本。
        this.adjustGuideTextLabelNode(step)
    }

    /**
     * @en
     * The anchor point of target node could be different from that of mask node, so the position should be adjused according to the anchor point.
     * @zh
     * 目标节点的锚点可能可遮罩节点不同，所以需要根据锚点来调整遮罩位置
     */
    adjustPosAccordingToAnchorPoint(nodeToAdjust: cc.Node, nodeToGuide: cc.Node) {
        let nodeToAdjustAnchorPoint = nodeToAdjust.getAnchorPoint()
        let nodeToGuideAnchorPoint = nodeToGuide.getAnchorPoint()
        if (
            nodeToAdjustAnchorPoint.x == nodeToGuideAnchorPoint.x &&
            nodeToAdjustAnchorPoint.y == nodeToGuideAnchorPoint.y
        ) {
            return
        }

        let xDiff = nodeToAdjustAnchorPoint.x - nodeToGuideAnchorPoint.x
        let yDiff = nodeToAdjustAnchorPoint.y - nodeToGuideAnchorPoint.y
        nodeToAdjust.position = nodeToAdjust.position.add(
            new cc.Vec3(xDiff * nodeToGuide.width, yDiff * nodeToGuide.height, 0),
        )
    }

    /**
     * @en
     * Watches the transformation of all parent ndoes.
     * @zh
     * 监听目标节点所有父类的变化。
     */
    onTargetNodeParentTransformChanged(targetNode: cc.Node, posChangedCallback: any) {
        let currentParentNode = null
        while (true) {
            if (!currentParentNode && targetNode.parent) {
                currentParentNode = targetNode.parent
                currentParentNode.on(cc.Node.EventType.POSITION_CHANGED, posChangedCallback, this)
                currentParentNode.on(cc.Node.EventType.SIZE_CHANGED, posChangedCallback, this)
                currentParentNode.on(cc.Node.EventType.ANCHOR_CHANGED, posChangedCallback, this)
            } else if (currentParentNode && currentParentNode.parent) {
                currentParentNode = currentParentNode.parent
                currentParentNode.on(cc.Node.EventType.POSITION_CHANGED, posChangedCallback, this)
                currentParentNode.on(cc.Node.EventType.SIZE_CHANGED, posChangedCallback, this)
                currentParentNode.on(cc.Node.EventType.ANCHOR_CHANGED, posChangedCallback, this)
            } else {
                break
            }
        }
    }

    /**
     * @en
     * Unwatches the transformation of all parent ndoes.
     * @zh
     * 取消监听目标节点所有父类的缓动变化。
     */
    offTargetNodeParentTransformChanged(targetNode: cc.Node, posChangedCallback: any) {
        let currentParentNode = null
        while (true) {
            if (!currentParentNode && targetNode.parent) {
                currentParentNode = targetNode.parent
                currentParentNode.off(cc.Node.EventType.POSITION_CHANGED, posChangedCallback, this)
                currentParentNode.off(cc.Node.EventType.SIZE_CHANGED, posChangedCallback, this)
                currentParentNode.off(cc.Node.EventType.ANCHOR_CHANGED, posChangedCallback, this)
            } else if (currentParentNode && currentParentNode.parent) {
                currentParentNode = currentParentNode.parent
                currentParentNode.off(cc.Node.EventType.POSITION_CHANGED, posChangedCallback, this)
                currentParentNode.off(cc.Node.EventType.SIZE_CHANGED, posChangedCallback, this)
                currentParentNode.off(cc.Node.EventType.ANCHOR_CHANGED, posChangedCallback, this)
            } else {
                break
            }
        }
    }

    /**
     * @en
     * Show guide text and keys to be guided.
     * @zh
     * 显示文本和按键引导。
     */
    showKeyAndTextGuide(keys: Array<string>, step: number, isAuto: boolean, callback: Function = null) {
        // Show related nodes.
        // 显示引导相关节点。
        this.maskNode.active = true
        this.guideTextBgSpriteNode.active = true

        // Sets callback function.
        // 设置回调函数。

        // Last press time.
        // 上次一按键时间。
        let lastKeyDownTime = 0

        // Keys pressed.
        // 按下的键。
        let pressedKeys = []
        let keyDownCallback = event => {
            // If the key-down interval is over 1.5 second, then we are not having combined keys.
            // 如果按键间隔超过1.5秒则说明不是组合键。
            let now = new Date().getTime()
            if ((now - lastKeyDownTime) / 1000 > this.keyDownInterval) {
                lastKeyDownTime = now
                pressedKeys = []
            }

            // Return if it's not the target key.
            // 如果按键不等于引导中的按键，则返回。
            pressedKeys.push(event.keyCode.toString())
            if (JSON.stringify(keys) != JSON.stringify(pressedKeys)) {
                return
            }

            this.hideGuide()
            if (isAuto) {
                this.goToNextGuide(step, isAuto, callback)
            } else if (callback) {
                callback()
            }
            cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, keyDownCallback, this)
        }
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, keyDownCallback, this)

        // Sets mask.
        // 设置遮罩。
        this.maskNode.setPosition(new cc.Vec3(0, 0, 0))
        this.maskNode.setSiblingIndex(0)
        this.maskNode.getComponent(cc.Mask).inverted = true
        this.maskNode.width = 0
        this.maskNode.height = 0

        // Adjusts the guide text.
        // 调整引导文本。
        this.adjustGuideTextBgSpriteNode()
        this.adjustGuideTextLabelNode(step)
    }

    /**
     * @en
     * Adjust guide sign node. Different guide sign sprites need different adjustments.
     * @zh
     * 调整引导图片，不同引导图片需要做不同的调整。
     */
    adjustGuideSignSpriteNode(step: number) {
        // Set the sibling index to maximum.
        // 设置层级最大。
        this.guideSignSpriteNode.setSiblingIndex(Number.MAX_SAFE_INTEGER)

        if (this.guideData.guideSignType.includes('frame')) {
            let adjustFunc = () => {
                this.guideSignSpriteNode.angle = this.maskNode.angle
                if (this.guideSignPosTemp) {
                    this.guideSignSpriteNode.setPosition(this.guideSignPosTemp)
                } else {
                    this.guideSignSpriteNode.setPosition(this.maskNode.position)
                }
            }

            if (this.isGudieSignFlying && step != 1) {
                if (!this.guideSignFlyingTween) {
                    this.isFlyingFinised = false
                    this.guideSignFlyingTween = cc
                        .tween(this.guideSignSpriteNode)
                        .to(this.flyingTweenDuration, {
                            position: this.maskNode.position,
                            rotation: this.guideSignSpriteNode.angle,
                        })
                        .call(() => {
                            adjustFunc()
                            this.isFlyingFinised = true
                            if (this.isGuideSignTweenEnabled) {
                                this.startGuideSignTween()
                            }
                        })

                    this.guideSignFlyingTween.start()
                } else if (this.isFlyingFinised) {
                    adjustFunc()
                }
            } else {
                adjustFunc()
            }

            //this.guideSignSpriteNode.width = this.maskNode.width * 1.1
            //this.guideSignSpriteNode.height = this.maskNode.height * 1.1
        }
        if (this.guideData.guideSignType.includes('hand') || this.guideData.guideSignType.includes('arrow')) {
            // If size of the mask hole is 0, then hide the guide sign.
            // 如果遮罩挖洞宽高为0，则隐藏引导图片。
            if (!this.maskNode.width || !this.maskNode.height) {
                //this.guideSignSpriteNode.active = false
            }

            // Adjusts the position and rotation of the guide sign node according to the mask hole.
            // 根据遮罩挖洞位置调整引导图片位置和角度。
            if (this.maskNode.position.y >= 0) {
                let adjustFunc = () => {
                    this.guideSignSpriteNode.angle = this.guideSignRotation // 手指朝上
                    if (this.guideSignPosTemp) {
                        this.guideSignSpriteNode.setPosition(this.guideSignPosTemp)
                    } else {
                        this.guideSignSpriteNode.setPosition(
                            new cc.Vec3(this.maskNode.position).subtract(
                                new cc.Vec3(0, this.maskNode.height * 1.01, 0),
                            ),
                        )
                    }
                }

                if (this.isGudieSignFlying && step != 1) {
                    if (!this.guideSignFlyingTween) {
                        this.isFlyingFinised = false
                        this.guideSignFlyingTween = cc
                            .tween(this.guideSignSpriteNode)
                            .to(this.flyingTweenDuration, {
                                position: new cc.Vec3(this.maskNode.position).subtract(
                                    new cc.Vec3(0, this.maskNode.height * 1.01, 0),
                                ),
                                rotation: this.guideSignSpriteNode.angle,
                            })
                            .call(() => {
                                adjustFunc()
                                this.isFlyingFinised = true
                                if (this.isGuideSignTweenEnabled) {
                                    this.startGuideSignTween()
                                }
                            })

                        this.guideSignFlyingTween.start()
                    } else if (this.isFlyingFinised) {
                        adjustFunc()
                    }
                } else {
                    adjustFunc()
                }
            } else if (this.maskNode.position.y < 0) {
                let adjustFunc = () => {
                    this.guideSignSpriteNode.angle = this.guideSignRotation // 手指朝下
                    if (this.guideSignPosTemp) {
                        this.guideSignSpriteNode.setPosition(this.guideSignPosTemp)
                    } else {
                        this.guideSignSpriteNode.setPosition(
                            new cc.Vec3(this.maskNode.position).subtract(
                                new cc.Vec3(0, -this.maskNode.height * 1.01, 0),
                            ),
                        )
                    }
                }

                if (this.isGudieSignFlying && step != 1) {
                    if (!this.guideSignFlyingTween) {
                        this.isFlyingFinised = false
                        this.guideSignFlyingTween = cc
                            .tween(this.guideSignSpriteNode)
                            .to(this.flyingTweenDuration, {
                                position: new cc.Vec3(this.maskNode.position).subtract(
                                    new cc.Vec3(0, -this.maskNode.height * 1.01, 0),
                                ),
                                rotation: this.guideSignSpriteNode.angle,
                            })
                            .call(() => {
                                adjustFunc()
                                this.isFlyingFinised = true
                                if (this.isGuideSignTweenEnabled) {
                                    this.startGuideSignTween()
                                }
                            })

                        this.guideSignFlyingTween.start()
                    } else if (this.isFlyingFinised) {
                        adjustFunc()
                    }
                } else {
                    adjustFunc()
                }
            }

            // If the guide sign tween exists, starts it.
            // 如果引导图片缓动存在，则开启。
            if (this.isGuideSignTweenEnabled && this.isFlyingFinised) {
                this.startGuideSignTween()
            }
        }
    }

    /**
     * @en
     * Adjust guide guide text. If there are many words, a bigger text background will be used. If the guide text is put at bottom, guide text background won't need adjustment.
     * @zh
     * 调整文本背景图片大小和位置。如果文本很多那图片就要大些，如果是放在底部的则无需调整。
     */
    adjustGuideTextBgSpriteNode() {
        // Sets the sibling index to maximum.
        // 设置层级最大
        this.guideTextBgSpriteNode.setSiblingIndex(Number.MAX_SAFE_INTEGER)

        // The guide text will be shown at center.
        // 屏幕居中显示。
        if (this.textPosTemp == 'center') {
            // Adjusts the background's size.
            // 调整文本背景大小。
            this.setGuideTextBgSpriteSizeByTextLength()

            // Adjusts the guide text backrgound's position.
            // 调整文本背景位置。
            this.guideTextBgSpriteNode.setPosition(0, 0, 0)
        }

        // The guide text will be shown at bottom.
        // 屏幕底部显示。
        else if (this.textPosTemp == 'bottom') {
            // Adjusts the guide text background's size.
            // 调整文本背景大小。
            this.setGuideTextBgSpriteSizeByCanvasSize()

            // Adjusts the guide text backrgound's position.
            // 调整文本背景位置。
            let y = this.canvasUITransform.height / 2 - this.guideTextBgSpriteNode.height / 2
            this.guideTextBgSpriteNode.setPosition(0, -y, 0)
        }

        // The guide text will be shown next to the target node.
        // 跟随引导图片显示。
        else if (this.textPosTemp == 'follow') {
            // Adjusts the background's size.
            // 调整文本背景大小。
            this.setGuideTextBgSpriteSizeByTextLength()

            // Adjusts the guide text backrgound's position.
            // 调整文本背景位置。
            if (this.maskNode.position.x >= 0 && this.maskNode.position.y >= 0) {
                this.guideTextBgSpriteNode.setPosition(
                    new cc.Vec3(this.maskNode.position).subtract(
                        new cc.Vec3(this.maskNode.width * 1.1, this.maskNode.height * 1.1, 0),
                    ),
                )
            } else if (this.maskNode.position.x >= 0 && this.maskNode.position.y <= 0) {
                this.guideTextBgSpriteNode.setPosition(
                    new cc.Vec3(this.maskNode.position).subtract(
                        new cc.Vec3(this.maskNode.width * 1.1, -this.maskNode.height * 1.1, 0),
                    ),
                )
            } else if (this.maskNode.position.x <= 0 && this.maskNode.position.y >= 0) {
                this.guideTextBgSpriteNode.setPosition(
                    new cc.Vec3(this.maskNode.position).subtract(
                        new cc.Vec3(-this.maskNode.width * 1.1, this.maskNode.height * 1.1, 0),
                    ),
                )
            } else if (this.maskNode.position.x <= 0 && this.maskNode.position.y <= 0) {
                this.guideTextBgSpriteNode.setPosition(
                    new cc.Vec3(this.maskNode.position).subtract(
                        new cc.Vec3(-this.maskNode.width * 1.1, -this.maskNode.height * 1.1, 0),
                    ),
                )
            }
        } else if (typeof this.textPosTemp == 'object') {
            // Adjusts the background's size.
            // 调整文本背景大小。
            this.setGuideTextBgSpriteSizeByTextLength()

            // Adjusts the guide text backrgound's position.
            // 调整文本背景位置。
            this.guideTextBgSpriteNode.setPosition(this.textPosTemp)
            let offsetX = 120
            let offsetY = -80
            this.roleNode.setPosition(
                this.textPosTemp.add(
                    cc.v3(
                        -this.guideTextBgSpriteNode.width / 2 + offsetX,
                        this.guideTextBgSpriteNode.height / 2 + offsetY,
                        0,
                    ),
                ),
            )
        }
    }

    /**
     * @en
     * When the guide text is shown at bottom, its size is adjusted based on the canvas size.
     * @zh
     * 当引导文本显示在屏幕底部时，根据屏幕大小来设置文本背景大小。
     */
    setGuideTextBgSpriteSizeByCanvasSize() {
        this.guideTextBgSpriteNode.width = this.canvasUITransform.width
        this.guideTextBgSpriteNode.height = this.canvasUITransform.height / 7
    }

    /**
     * @en
     * When the guide text is shown next to target node or at center, its size is adjusted based on the text length.
     * @zh
     * 当引导文本跟随引导图片或居中显示时，根据引导文本长度调整文本背景大小。
     */
    setGuideTextBgSpriteSizeByTextLength() {
        let guideText = ''
        let width = 0
        let height = 0

        if (Mgr.i18n.getLanguage() == 'zh') {
            guideText = this.guideData.nodesAndTexts[this.currentStepTemp - 1].guideText
            if (guideText.length <= 15 && guideText.length > 0) {
                width = this.canvasUITransform.width / 5
                height = this.canvasUITransform.height / 10
            } else if (guideText.length > 15 && guideText.length <= 40) {
                width = this.canvasUITransform.width / 5
                height = this.canvasUITransform.height / 8
            } else if (guideText.length > 40) {
                width = this.canvasUITransform.width / 3
                height = this.canvasUITransform.height / 6
            }
        } else {
            guideText = this.guideData.nodesAndTexts[this.currentStepTemp - 1].guideText
            if (guideText.length <= 40 && guideText.length > 0) {
                width = this.canvasUITransform.width / 3
                height = this.canvasUITransform.height / 10
            } else if (guideText.length > 15 && guideText.length <= 80) {
                width = this.canvasUITransform.width / 3
                height = this.canvasUITransform.height / 8
            } else if (guideText.length > 80) {
                width = this.canvasUITransform.width / 2
                height = this.canvasUITransform.height / 6
            }
        }
        width = 820
        height = 210
        if (!this.roleNode.active) {
            width = 540
            height = 160
        }
        // Switch the value of width and height if the canvas direction is portrait.
        // 如果是竖屏则将width和height值对调。
        if (width < height) {
            let temp = height
            height = width
            width = temp
        }

        this.guideTextBgSpriteNode.width = width
        this.guideTextBgSpriteNode.height = height
    }

    /**
     * @en
     * Sets guide text and adjusts the label size according to the background node.
     * @zh
     * 设置引导文本并根据文本背景图片调整Label宽高以及字体大小。
     */
    adjustGuideTextLabelNode(step: number) {
        if (!this.isTyping) {
            // If typing effect is not enabled, set the text directly to Label.
            // 如果没有打字机效果，则直接将引导文本设置到Label上。
            if (this.guideTextLang == 'zh') {
                this.guideTextLabelNode.getComponent(cc.Label).string = this.guideData.nodesAndTexts[step - 1].guideText
            } else {
                this.guideTextLabelNode.getComponent(cc.Label).string = this.guideData.nodesAndTexts[
                    step - 1
                ].guideEnText
            }
        } else {
            this.scheduleCount = 0
            if (this.guideTextLang == 'zh') {
                this.guideTextTemp = this.guideData.nodesAndTexts[step - 1].guideText
            } else {
                this.guideTextTemp = this.guideData.nodesAndTexts[step - 1].guideEnText
            }

            // Sets the callback function.
            // 设置调度函数。
            let callback = () => {
                if (this.guideTextTemp[this.scheduleCount]) {
                    this.guideTextLabelNode.getComponent(cc.Label).string += this.guideTextTemp[this.scheduleCount]
                }

                this.scheduleCount++
                if (this.scheduleCount >= this.guideTextTemp.length) {
                    this.unschedule(callback)
                }
            }

            // Cancel the last schedule and clean the text content.
            // 开始调度前要先取消上一次的调度并清空文本。
            this.unschedule(callback)
            this.guideTextLabelNode.getComponent(cc.Label).string = ''

            // Begins a new schedule.
            // 开始新的调度。
            this.schedule(callback, this.typingInterval)
        }

        // The size of Label should be a little bit smaller than that of the text background node.
        // Label大小稍微比背景图片小点。
        this.guideTextLabelNode.width = (this.guideTextBgSpriteNode.width * this.guideTextBgSpriteNode.scaleX) / 1.1
        this.guideTextLabelNode.height = (this.guideTextBgSpriteNode.height * this.guideTextBgSpriteNode.scaleY) / 1.1
    }

    /**
     * @en
     * Find the target node recursively.
     * @zh
     * 递归寻找目标节点。
     */
    getNodeByUuid(node: cc.Node, uuid: string) {
        let targetNode = null
        for (let i = 0; i < node.children.length; i++) {
            if (node.children[i].uuid == uuid) {
                targetNode = node.children[i]
                break
            } else if (node.children[i].children.length) {
                targetNode = this.getNodeByUuid(node.children[i], uuid)
                if (targetNode) {
                    break
                }
            }
        }
        return targetNode
    }

    /**
     * @en
     * Get positions of all parent nodes except for Canvas.
     * @zh
     * 获取目标节点坐标及其所有父节点，祖父节点，曾祖父节点...的坐标（不包括Canvas节点）。
     */
    getAllParentPosIncludingSelf(node: cc.Node) {
        let posArray = [node.position]
        let tempNode = node
        while (true) {
            let parentNode = tempNode.parent
            if (parentNode && parentNode != this.node) {
                posArray.push(parentNode.position)
                tempNode = parentNode
            } else {
                break
            }
        }
        return posArray
    }
}