team2_jj/assets/scripts/recruit/ui/RecruitItem.ts

import { _decorator, Component, Node, Sprite, Label, sp, Vec3, Tween, SpriteFrame, Animation, isValid, EventHandler } from 'cc';
import { ResourceLoader } from '../../core/resourceManager/ResourceLoader';
import { Sound } from '../../core/sound/Sound';
import { UITween } from '../../core/ui/tween/UITween';
import { Hero_Client } from '../../hero/UserHeroData';
const { ccclass, property } = _decorator;

/**
 * 招募武将卡牌项item
 * @author 郑聂华
*/
@ccclass('RecruitItem')
export class RecruitItem extends Component {
    @property({ type: ResourceLoader, displayName: "资源加载组件", tooltip: "资源加载组件" }) res: ResourceLoader = null;
    @property({ type: Node, displayName: "动画震动节点", tooltip: "动画震动节点" }) animNode: Node = null;
    @property({ type: Node, displayName: "按钮_开奖", tooltip: "按钮_开奖" }) btnOpen: Node = null;
    @property({ type: Node, displayName: "已打开页面", tooltip: "已打开页面" }) nodeOpened: Node = null;
    @property({ type: Sprite, displayName: "图_武将", tooltip: "已打开页面" }) imgHero: Sprite = null;
    @property({ type: Sprite, displayName: "图_阵营", tooltip: "图_阵营" }) imgCamp: Sprite = null;

    @property({ type: Sprite, displayName: "图_背光单抽", tooltip: "图_背光单抽" }) imgLightOne: Sprite = null;
    @property({ type: Sprite, displayName: "图_背光十连抽橙红", tooltip: "图_背光十连抽橙红" }) imgLightTenOR: Sprite = null;
    @property({ type: Sprite, displayName: "图_背光开启紫", tooltip: "图_背光开启紫" }) imgLightOpenedP: Sprite = null;
    @property({ type: Sprite, displayName: "图_背光开启橙红", tooltip: "图_背光开启橙红" }) imgLightOpenedOr: Sprite = null;

    @property({ type: Sprite, displayName: "图_武将背景", tooltip: "图_武将背景" }) imgBgHero: Sprite = null;
    @property({ type: Sprite, displayName: "图_品质框", tooltip: "图_品质框" }) imgRect: Sprite = null;
    @property({ type: Sprite, displayName: "图_名称背板", tooltip: "图_名称背板" }) imgBgName: Sprite = null;
    @property({ type: Label, displayName: "文本_名称", tooltip: "文本_名称" }) txtName: Label = null;
    @property({ type: [Sprite], displayName: "星级", tooltip: "星级" }) stars: Sprite[] = [];

    @property({ type: Node, displayName: "提示_已拥有节点", tooltip: "提示_已拥有节点" }) nodeHasHeroNode: Node = null;
    @property({ type: Label, displayName: "文本_碎片数", tooltip: "文本_碎片数" }) txtSlice: Label = null;

    @property({ type: sp.Skeleton, displayName: "动画_紫色烟雾", tooltip: "动画_紫色烟雾" }) spinePurpleSmoke: sp.Skeleton = null;
    @property({ type: sp.Skeleton, displayName: "动画_蓄能", tooltip: "动画_蓄能" }) spineEnerygy: sp.Skeleton = null;
    @property({ type: sp.Skeleton, displayName: "动画_爆炸", tooltip: "动画_爆炸" }) spineBoom: sp.Skeleton = null;
    @property({ type: sp.Skeleton, displayName: "动画_星星", tooltip: "动画_星星" }) spineStar: sp.Skeleton = null;

    @property({ type: UITween, displayName: "动画_拎起", tooltip: "动画_拎起" }) tweenGetUp: UITween = null;
    @property({ type: UITween, displayName: "动画_开启节点", tooltip: "动画_开启节点" }) tweenBtnOpen: UITween = null;
    @property({ type: UITween, displayName: "动画_开启后节点", tooltip: "动画_开启后节点" }) tweenNodeOpened: UITween = null;
    @property({ type: Animation, displayName: "动画_震动", tooltip: "动画_震动" }) animShock: Animation = null;
    @property({ type: Sound, displayName: "音效组件", tooltip: "音效组件" }) sound: Sound = null;

    private initPos: Vec3;
    public recruitEndBack: EventHandler;
    public isOpened: boolean = false;
    public isRecruitEnd: boolean = false;
    /**抽卡类型 1 单抽 2 十连抽*/
    private drawType: number = 1;
    /**武将品质  1 蓝 2 紫 3 橙 4 红  依次增高  2 紫色烟雾动画 34 蓄力 爆炸 星星动画*/
    private color: number = 1;
    /**是否为碎片*/
    private isSlice: boolean = false;
    /**开启全部参数 isOpenAll 是否为一次性开启全部 isFirst 所有卡的第一张 isSameFirst 同品种卡的第一张*/
    private openParam: { isOpenAll: boolean, isFirst: boolean, isSameFirst: boolean };

    onLoad() {
        this.initPos = new Vec3(this.node.position.x, this.node.position.y, this.node.position.z);
        this.init();
    }
    /**
     * 初始化
     * @param type 抽卡类型 1 单抽 2 十连抽
    */
    init(type: number = 2) {
        this.isOpened = this.isRecruitEnd = false;
        Tween.stopAllByTarget(this.node);
        Tween.stopAllByTarget(this.btnOpen);
        Tween.stopAllByTarget(this.nodeOpened);
        this.node.setPosition(this.initPos);
        this.animNode.setPosition(0, 0);
        this.btnOpen.setScale(Vec3.ONE);
        this.nodeOpened.setScale(new Vec3(0, 1, 1));
        this.imgCamp.node.active = false;
        this.nodeHasHeroNode.active = false;
        this.imgLightOne.node.active = type == 1;
        this.imgLightTenOR.node.active = false;
        this.spinePurpleSmoke.node.setScale(new Vec3(0, 0, 1));//.active = false;
        this.spineEnerygy.node.setScale(new Vec3(0, 0, 1));//.node.active = false;
        this.spineBoom.node.setScale(new Vec3(0, 0, 1));//.scale= .active = false;
        this.spineStar.node.setScale(new Vec3(0, 0, 1));//.active = false;
    }

    /**
     * 抽卡
     * @param hero 武将
     * @param type 抽卡类型 1 单抽 2 十连抽
     * @param isSlice 是否是碎片
     * @param num 碎片数量
     * @param openParam 开启全部参数
    */
    async openDraw(hero: Hero_Client, type: number, isSlice: boolean, num: number = 0, openParam = { isOpenAll: false, isFirst: false, isSameFirst: false }) {
        if (this.isOpened) return; this.isOpened = true;
        this.drawType = type; this.color = hero.color; this.isSlice = isSlice; this.openParam = openParam; //this.sliceNum = num;
        this.imgLightOne.node.active = type == 1;
        this.imgLightTenOR.node.active = type == 2 && hero.color > 2;
        this.imgLightOpenedP.node.active = hero.color == 2;
        this.imgLightOpenedOr.node.active = hero.color > 2;
        this.txtName.string = hero.name;
        this.txtSlice.string = num + "";
        for (let i = 0; i < this.stars.length; i++) { this.stars[i].grayscale = hero.initStar < i + 1 }
        this.imgHero.spriteFrame = await this.res.load<SpriteFrame>("images/general/texture/hero_img/" + hero.hero_res + "/spriteFrame", SpriteFrame);
        this.imgCamp.spriteFrame = await this.res.load<SpriteFrame>("images/general/texture/icon_camp_" + hero.camp + "/spriteFrame", SpriteFrame);
        this.imgRect.spriteFrame = await this.res.load<SpriteFrame>("images/general/texture/kapai_kuang" + hero.color + "/spriteFrame", SpriteFrame);
        this.imgBgHero.spriteFrame = await this.res.load<SpriteFrame>("images/general/texture/kapi_bg" + hero.color + "/spriteFrame", SpriteFrame);
        this.imgBgName.spriteFrame = await this.res.load<SpriteFrame>("images/general/texture/kapai_name" + hero.color + "/spriteFrame", SpriteFrame);
        this.playOpenAni();
    }

    /**播放打开动画*/
    private playOpenAni() {
        //判断是否为橙红 需要有个蓄力Tween;
        if (this.color == 1 || this.color == 2) { this.tweenBtnOpen.play(); if (!this.openParam.isOpenAll || this.openParam.isFirst) this.scheduleOnce(() => { this.sound.play(0) }, 0.5); }
        else { this.tweenGetUp.play(); }
    }

    private async playSpinePurple() {
        let scale = this.drawType == 1 ? 1.5 : 1;
        this.spinePurpleSmoke.node.setScale(new Vec3(scale, scale, 1));//active = true;
        this.spinePurpleSmoke.setAnimation(0, "animation", false);
        await new Promise<void>(resolve => { setTimeout(() => resolve(), (this.spinePurpleSmoke.findAnimation("animation").duration + 0.1) * 1000) });
        isValid(this.node) && (this.spinePurpleSmoke.node.setScale(new Vec3(0, 0, 1)))//;active = false)
    }

    /**蓄力spine*/
    private async playSpineEnerygy() {
        let scale = this.drawType == 1 ? 2.731 : 1;
        this.spineEnerygy.node.setScale(new Vec3(scale, scale, 1));//.active = true;
        this.spineEnerygy.setAnimation(0, "animation", true);
        await new Promise<void>(resolve => { setTimeout(() => resolve(), (this.spineEnerygy.findAnimation("animation").duration + 0.1) * 1000) });
    }

    /**爆炸spine*/
    private playSpineBoom() {
        let scale = this.drawType == 1 ? 1.5 : 1;
        this.spineEnerygy.clearTrack(0);
        this.spineEnerygy.node.setScale(new Vec3(0, 0, 1));//.active = false;
        this.spineBoom.node.setScale(new Vec3(scale, scale, 1));//.active = true;
        this.spineBoom.setAnimation(0, "animation", false);
        if (!this.openParam.isOpenAll || this.openParam.isSameFirst) this.sound.play(5);
    }

    /**星星spine*/
    private async playSpineStar() {
        let scale = this.drawType == 1 ? 2.731 : 1;
        this.spineStar.node.setScale(new Vec3(scale, scale, 1));//.active = true;
        this.spineStar.setAnimation(0, "animation", false);
        await new Promise<void>(resolve => { setTimeout(() => resolve(), (this.spineStar.findAnimation("animation").duration + 0.1) * 1000) });
        if (!isValid(this.node)) return; this.spineStar.node.active = false;
    }

    private onCompleteNodeShock() {  //震动后
        this.animShock.stop();
        this.animNode.setPosition(0, 0);
        this.playSpineBoom();
        this.tweenBtnOpen.play();
        if (!this.openParam.isOpenAll || this.openParam.isFirst) this.scheduleOnce(() => { this.sound.play(0) }, 0.5);
    }

    private onCompleteNodeSetUp() {  //拎起后
        this.animShock.play();
        this.playSpineEnerygy();
        this.scheduleOnce(this.onCompleteNodeShock, 1.5);
        if (!this.openParam.isOpenAll || this.openParam.isSameFirst) this.sound.play(4);
    }

    /**卡牌关闭动画完成*/
    private onCompleteBtnOpen() {
        this.nodeOpened.setScale(new Vec3(0, 1, 1));
        this.nodeOpened.active = true;
        this.tweenNodeOpened.play();
        this.color == 2 && this.playSpinePurple();
        if (!this.openParam.isOpenAll || this.openParam.isSameFirst) {
            if (this.color == 1 || this.color == 2) { if (!this.isSlice) this.sound.play(1); }
            else { if (!this.isSlice) this.sound.play(2); }
        }
    }

    /**卡牌展开动画完成*/
    private onCompleteNodeOpened() {
        this.imgCamp.node.active = true;
        this.nodeHasHeroNode.active = this.isSlice;
        this.color > 2 && this.playSpineStar();
        this.isRecruitEnd = true;
        this.recruitEndBack.emit(null);
        if (!this.openParam.isOpenAll || this.openParam.isSameFirst)
            this.isSlice && this.sound.play(3);
    }
}