build_android/assets/scripts/game/Guide.ts

import { _decorator, Component, Mask, Node, RichText, Size, Tween, tween, UIOpacity, UITransform, v3, Vec3 } from 'cc';
import LocalizedLabel from '../i18n/LocalizedLabel';
import { BlockController } from './Block/BlockController';
import { BlocksAll, GridBoardData } from './Block/BlockData';
import GlobalData from './GlobalData';
import { GridBlockMgr } from './GridBlockMgr';
import { LocalStorageMgr } from './LocalStorageMgr';
import { TouchMgr } from './TouchMgr';
const { ccclass, property } = _decorator;

@ccclass('Guide')
export class Guide extends Component {
    /** 单例模式 */
    private static _ins: Guide;
    constructor() {
        super();
        Guide._ins = this;
    }
    public static get ins(): Guide {
        if (!Guide._ins) {
            Guide._ins = new Guide();
        }
        return Guide._ins;
    }

    newComerReward: any = null;

    @property(Mask)
    private mask: Mask = null;

    @property(Node)
    shade: Node = null;

    @property(UITransform)
    toucher: UITransform;

    @property(UITransform)
    private pointer: UITransform = null;

    @property(Node)
    block: Node = null;

    @property(Node)
    diolog: Node = null;

    @property(RichText)
    diologLabel: RichText = null

    guideindex1: number[] = [3, 3];
    guideindex2: number[] = [3, 3];
    guideindex3: number[] = [4, 3];

    @property(Node)
    guidenode: Node = null;
    guideTarPos: Vec3 = null;
    @property(Node)
    selecnode: Node = null;
    selecOriPos: Vec3 = null;
    // @property(Node)
    // uiGuideNode1: Node = null;
    // uiGuideNodePos1: Vec3 = null;
    // @property(Node)
    // uiGuideNode2: Node = null;
    // uiGuideNodePos2: Vec3 = null;
    // @property(Node)
    // uiGuideNode3: Node = null;
    // uiGuideNodePos3: Vec3 = null;

    @property(Node)
    PopPage: Node = null;

    boardeffectTimes: number = 1;
    protected start(): void {
        // log(GlobalData.isCommer)
        if (GlobalData.isCommer) {
            this.runGuide();
        }
    }

    runGuide() {
        if (!GlobalData.isCommer) {
            this.node.active = false;
            return;
        }
        TouchMgr.ins.resumePromptBlock();
        // Tween.stopAll();
        Tween.stopAllByTarget(this.toucher.node);
        Tween.stopAllByTarget(this.block);
        // tween(this.toucher.node).stop()
        // tween(this.block).stop()

        this.guideTarPos = TouchMgr.ins.getNodeAToNodeBPoint(this.guidenode, this.node);
        this.selecOriPos = TouchMgr.ins.getNodeAToNodeBPoint(this.selecnode, this.node);
        // this.uiGuideNodePos1 = TouchMgr.ins.getNodeAToNodeBPoint(this.uiGuideNode1, this.node);

        // console.log(LocalStorageMgr.getItem(LocalStorageMgr.isCommer_key, true));
        // console.log(LocalStorageMgr.getItem(LocalStorageMgr.guideRecord_key, 1));

        if (GlobalData.guideRecord == 1) {
            GridBlockMgr.ins.generateBoard(GridBoardData.customizeBoardData1);
            GridBlockMgr.ins.generareGuideSelectionBlock([BlocksAll[45], BlocksAll[45], BlocksAll[45]]);
            this.guide1();
        } else if (GlobalData.guideRecord == 2) {
            GridBlockMgr.ins.generateBoard(GridBoardData.customizeBoardData2);
            GridBlockMgr.ins.generareGuideSelectionBlock([BlocksAll[10], BlocksAll[10], BlocksAll[10]]);
            this.guide2();
        } else if (GlobalData.guideRecord == 3) {
            GridBlockMgr.ins.generateBoard(GridBoardData.customizeBoardData3);
            GridBlockMgr.ins.generareGuideSelectionBlock([BlocksAll[11], BlocksAll[11], BlocksAll[11]]);
            this.guide3();
        } else if (GlobalData.guideRecord == 4) {
            this.guide4();
        }

    }

    //第一步引导
    guide1() {

        this.toucher.node.active = true
        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 500, 0));
        this.diologLabel.string = '<color=#855933>拖动方块，填满整行可进行消除</color>';


        // let localizedLabel = this.diologLabel.node.getComponent(LocalizedLabel);
        // localizedLabel.setTextKeyAndOption("guide_Rtext_1");


        this.block.active = true;
        this.block.setPosition(this.selecOriPos);
        this.toucher.node.setPosition(this.selecOriPos.add(v3(100, -60, 0)));
        this.block.getComponent(BlockController).updateBlockSet(false, BlocksAll[45], 150);
        this.block.getComponent(BlockController).addBlockOffset(2);
        this.pointer.node.setPosition(v3(0, 0, 0))
        tween(this.toucher.node)
            .delay(0.2)
            .by(1, { position: v3(0, this.guideTarPos.y - this.selecOriPos.y, 0) })
            .delay(0.2)
            .by(0.01, { position: v3(0, -(this.guideTarPos.y - this.selecOriPos.y), 0) })
            .union()
            .repeatForever()
            .start()
        tween(this.block)
            .delay(0.2)
            .by(1, { position: v3(0, this.guideTarPos.y - this.selecOriPos.y, 0) })
            .delay(0.2)
            .by(0.01, { position: v3(0, -(this.guideTarPos.y - this.selecOriPos.y), 0) })
            .union()
            .repeatForever()
            .start()
    }

    guide2() {
        //这只是展示手指移动
        this.toucher.node.active = true
        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 500, 0));
        this.diologLabel.string = '<color=#855933>点击方块可旋转90°，不限次数哦</color>';


        this.block.active = true;
        this.block.setPosition(this.selecOriPos);
        this.toucher.node.setPosition(this.selecOriPos.add(v3(100, -60, 0)));
        this.block.getComponent(BlockController).updateBlockSet(false, BlocksAll[7], 150);
        this.block.getComponent(BlockController).addBlockOffset(2);
        this.pointer.node.setPosition(v3(0, 0, 0))
        // this.guideTarPos.add3f(0, -55, 0);
        tween(this.toucher.node)
            .delay(0.2)
            .by(1, { position: v3(0, this.guideTarPos.y - this.selecOriPos.y - 55, 0) })
            .delay(0.2)
            .by(0.01, { position: v3(0, -(this.guideTarPos.y - this.selecOriPos.y) + 55, 0) })
            .union()
            .repeatForever()
            .start()
        tween(this.block)
            .delay(0.2)
            .by(1, { position: v3(0, this.guideTarPos.y - this.selecOriPos.y - 55, 0) })
            .delay(0.2)
            .by(0.01, { position: v3(0, -(this.guideTarPos.y - this.selecOriPos.y) + 55, 0) })
            .union()
            .repeatForever()
            .start()
    }

    guide3() {
        this.toucher.node.active = true
        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 500, 0));
        this.diologLabel.string = '<color=#855933>当行与列同时被砖块填满，会一起消除</color>';
        this.block.active = true;
        this.block.setPosition(this.selecOriPos);
        this.toucher.node.setPosition(this.selecOriPos.add(v3(100, -60, 0)));
        this.block.getComponent(BlockController).updateBlockSet(false, BlocksAll[11], 150);
        this.block.getComponent(BlockController).addBlockOffset(2);
        this.pointer.node.setPosition(v3(0, 0, 0))
        tween(this.toucher.node)
            .delay(0.2)
            .by(1, { position: v3(0, this.guideTarPos.y - this.selecOriPos.y - 55, 0) })
            .delay(0.2)
            .by(0.01, { position: v3(0, -(this.guideTarPos.y - this.selecOriPos.y) + 55, 0) })
            .union()
            .repeatForever()
            .start()
        tween(this.block)
            .delay(0.2)
            .by(1, { position: v3(0, this.guideTarPos.y - this.selecOriPos.y - 55, 0) })
            .delay(0.2)
            .by(0.01, { position: v3(0, -(this.guideTarPos.y - this.selecOriPos.y) + 55, 0) })
            .union()
            .repeatForever()
            .start()
    }

    async guide4() {

        GridBlockMgr.ins.generateBoard_effect(GridBoardData.customizeBoardData4);
        this.scheduleOnce(() => {
            GridBlockMgr.ins.generateSelectionBlock(false, [BlocksAll[15], BlocksAll[2], BlocksAll[15]])
        }, 1);
        this.node.active = true;
        this.block.active = false;
        this.toucher.node.active = false

        this.diolog.active = true;
        this.diolog.setPosition(v3(0, 0, 0));
        this.diolog.getComponent(UIOpacity).opacity = 0;
        tween(this.diolog.getComponent(UIOpacity))
            .to(0.5, { opacity: 255 })
            .delay(2)
            .to(0.5, { opacity: 0 })
            .call(() => {
                this.node.active = false;
            })
            .start()
    }

    completeCurGuide(record) {
        GlobalData.guideRecord = record;
        LocalStorageMgr.setItem(LocalStorageMgr.guideRecord_key, GlobalData.guideRecord);

        this.runGuide();
        if (GlobalData.guideRecord >= 5) {
            GlobalData.isCommer = false;
            LocalStorageMgr.setItem(LocalStorageMgr.isCommer_key, GlobalData.isCommer);
        }
    }

}