DaFuWeng/assets/Script/DialogRoot/CardNode.ts

/*
 * @Author: WoNiu
 * @Date: 2024-03-22 19:50:30
 * @LastEditTime: 2024-03-24 17:09:16
 * @LastEditors: WoNiu
 * @Description: 选择卡片节点
 */

import {
  _decorator,
  EventMouse,
  Node,
  Sprite,
  SpriteFrame,
  UITransform,
  v2,
  tween,
  Component,
  Label,
  Color,
  Size,
  v3,
} from "cc";
import { NpkImage } from "../../Tool/NPKImage";
import { BaseSpriteFrame } from "../../GlobalScript/CommonComponent/BaseSpriteFrame";
const { ccclass, property } = _decorator;

@ccclass("CardNode")
export class CardNode extends Node {
  //普通精灵帧
  private NormalSpriteFrame: SpriteFrame;

  // 高亮精灵帧1
  private oneSpriteFrame: SpriteFrame;

  //高亮精灵帧2
  private twoSpriteFrame: SpriteFrame;

  // 翻转动画
  flipsAnimation:CardFlipsAnimation;

  //精灵对象
  private SpriteObj: Sprite;

  // 是否按钮失效
  Disable = false;

  constructor() {
    super();

    const trf = this.addComponent(UITransform);
    trf.anchorPoint = v2(0.5, 1)
    trf.contentSize = new Size(178,113);

    this.flipsAnimation = this.addComponent(CardFlipsAnimation);

    this.initBackgroundNode();
    this.initSpriteFrame();
    this.initEvent();
  }

  initBackgroundNode(){
    // const node = new Node();
    // this.addChild(node);

    // const trf = node.addComponent(UITransform);
    // trf.contentSize = new Size(178,113);
    // trf.anchorPoint = v2(0,1);

    // this.SpriteObj = node.addComponent(Sprite);
    this.SpriteObj = this.addComponent(Sprite);
  }


  initSpriteFrame() {
    /// 不同亮度的卡片
    new BaseSpriteFrame(NpkImage.ingame, 47, (SpriteFrame: SpriteFrame) => {
      this.NormalSpriteFrame = SpriteFrame;
      this.SpriteObj.spriteFrame = SpriteFrame;
    });
    new BaseSpriteFrame(NpkImage.ingame, 48, (SpriteFrame: SpriteFrame) => {
      this.oneSpriteFrame = SpriteFrame;
    });
    new BaseSpriteFrame(NpkImage.ingame, 49, (SpriteFrame: SpriteFrame) => {
      this.twoSpriteFrame = SpriteFrame;
    });
  }

  initEvent() {
    this.on(Node.EventType.MOUSE_ENTER, this.OnHever, this);
    this.on(Node.EventType.MOUSE_LEAVE, this.OffHever, this);
    this.on(Node.EventType.MOUSE_DOWN, this.OnDown, this);
  }

  OffHever() {
    if (this.Disable) return;
    this.SpriteObj.spriteFrame = this.NormalSpriteFrame;
  }
  OnHever() {
    if (this.Disable) return;
    this.SpriteObj.spriteFrame = this.oneSpriteFrame;
  }

  OnDown(event: EventMouse) {
    //必须是鼠标左键
    if (event.getButton() != EventMouse.BUTTON_LEFT || this.Disable) return;
    this.SpriteObj.spriteFrame = this.twoSpriteFrame;
    this.Disable = true;
  }
}



/**
 * @description: 卡片的翻转动画
 */
export class CardFlipsAnimation extends Component {
 // 数字1精灵帧
  oneSpriteFrame: SpriteFrame;

  //数字2精灵帧
  twoSpriteFrame: SpriteFrame;

  //数字2精灵帧
  threeSpriteFrame: SpriteFrame;

  // 数字
  value: number;

  // 单次缓动时间
  tweenTime: number = 0.5;

  // 玩家名称
  nameNode: Node;

  scale = {x:1};

  onLoad() {
    /// 数字卡片
    new BaseSpriteFrame(NpkImage.ingame, 50, (SpriteFrame: SpriteFrame) => {
      this.oneSpriteFrame = SpriteFrame;
    });
    new BaseSpriteFrame(NpkImage.ingame, 51, (SpriteFrame: SpriteFrame) => {
      this.twoSpriteFrame = SpriteFrame;
    });
    new BaseSpriteFrame(NpkImage.ingame, 52, (SpriteFrame: SpriteFrame) => {
      this.threeSpriteFrame = SpriteFrame;
    });


    // this.nameLabel = this.node.addComponent(Label);

  }

  start() {}


  /**
   * @description: 翻转动画
   * @param {1} value: 这个卡牌反转后是几
   */
  animationStart(value: number,name:string) {
    this.value = value;
    if (value > 2) this.value = 2;

    this.initNmaeNode(name);

    tween(this.scale).to(this.tweenTime, { x: 0,},{onComplete:()=>{
      this.flipsTweenBack();
     },onUpdate:()=>{
        this.node.scale = v3(this.scale.x,1,1);
     },easing:'linear'}).start();
  }

  flipsTweenBack(){
    const spriteFrames = [this.oneSpriteFrame,this.twoSpriteFrame,this.threeSpriteFrame];
    this.node.getComponent(Sprite).spriteFrame = spriteFrames[this.value];
    this.nameNode.active = true;

    tween(this.scale).to(this.tweenTime, { x: 1,},{onUpdate:()=>{
        this.node.scale = v3(this.scale.x,1,1);
     },easing:'linear'}).start();
  }


  initNmaeNode(name:string){
    const nameNode = new Node('label');
    this.node.addChild(nameNode);
    this.nameNode = nameNode;

    nameNode.active = false;
    nameNode.setPosition(0,-75);

    const trf = nameNode.addComponent(UITransform);
    trf.anchorPoint = v2(0.5,1);
    trf.contentSize = new Size(178,20);

    const label = nameNode.addComponent(Label);
    label.overflow = Label.Overflow.CLAMP;
    label.string = name;
    label.fontSize = 15;
    label.color = Color.RED;
    label.horizontalAlign = Label.HorizontalAlign.CENTER;
    label.verticalAlign = Label.VerticalAlign.CENTER;

  }

  update(dt: number) {}
}