JumpGame/assets/Script/Guide/Guide.ts

// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html

import EventName, { GuideType } from "../EventName/EventName";
import LocalData from "../LocalData";
import MyComponent from "../Template/MyComponent";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Guide extends MyComponent {

    @property(sp.Skeleton)
    Spine: sp.Skeleton = null;
    @property(cc.Node)
    BigDialogBox: cc.Node = null;
    @property(cc.Node)
    SmallDialogBox: cc.Node = null;
    @property(cc.Node)
    Hand: cc.Node = null;
    @property(cc.Node)
    Btn: cc.Node = null;
    start() {

        this.node.children.forEach(e => e.active = false)
        this.regEvent(EventName.ShowGuide, this.ShowGuide, this)

    }

    ShowGuide(str?: string) {

        //有记录了 直接返回
        if (LocalData.getInstance().getGuide(str)) {
            return
        }
        LocalData.getInstance().setGuide(str)
        this.showCommonGuide(() => {
            switch (str) {
                case GuideType.基本跳跃教学引导:
                    //#region 
                    this.Spine.node.setScale(-2, 2)
                    cc.tween(this.Spine.node)
                        .to(1, { position: cc.v3(-240, -644) }, { easing: 'fadeOut' })
                        .call(() => {
                            this.Hand.active = true
                            this.BigDialogBox.active = true
                            this.BigDialogBox.getComponentInChildren(cc.Label).string = '请向下滑动屏幕使用抛物线跳跃。'
                            this.showHandGuide()
                            this.closeState = true
                        })
                        .start()
                    //#endregion
                    break;
                case GuideType.完整抛物线:
                    //#region 
                    this.Spine.node.setScale(-2, 2)
                    cc.tween(this.Spine.node)
                        .to(1, { position: cc.v3(-240, -644) }, { easing: 'fadeOut' })
                        .call(() => {
                            this.BigDialogBox.active = true
                            this.BigDialogBox.getComponentInChildren(cc.Label).string = '使用技能,可展示完整抛物线'
                            this.closeState = true
                        })
                        .start()
                    //#endregion
                    break;

                default:
                    break;
            }
        })


    }


    closeState = false
    clickBtn() {
        if (this.closeState) {
            this.closeState = false
            this.node.children.forEach(e => e.active = false)
        }
    }

    showCommonGuide(cb: Function) {
        this.Spine.node.setPosition(0, -500)
        this.BigDialogBox.active = false
        this.SmallDialogBox.active = false
        this.Hand.active = false
        this.Btn.active = true
        this.Spine.node.active = true

        let RoundState = this.Spine.setAnimation(0, '出场', false);
        this.scheduleOnce(() => {
            this.Spine.setAnimation(0, '待机', true);
            cb?.()
        }, RoundState.animationEnd)
    }


    showHandGuide() {
        if (this.Hand.active) {
            let spine = this.Hand.getComponent(sp.Skeleton)
            let RoundState = spine.setAnimation(0, '点击', false);
            this.scheduleOnce(() => {
                spine.setAnimation(0, '拉', false);

                this.scheduleOnce(() => {
                    this.showHandGuide()
                }, 2)

            }, RoundState.animationEnd)
        }
    }


    clear() {
        LocalData.getInstance().$Guide = []
        LocalData.getInstance().save();
    }

    // update (dt) {}
}