DaFuWeng/assets/Script/UINode/DiceButtonNode.ts

/*
 * @Author: WoNiu
 * @Date: 2024-03-13 12:19:50
 * @LastEditTime: 2024-03-25 19:49:13
 * @LastEditors: WoNiu
 * @Description:
 */
/*
 * @Author: WoNiu
 * @Date: 2024-03-13 12:19:50
 * @LastEditTime: 2024-03-25 14:19:53
 * @LastEditors: WoNiu
 * @Description:
 */
import {
  _decorator,
  Component,
  EventMouse,
  Node,
  Sprite,
  SpriteFrame,
  Texture2D,
  UITransform,
  v2,
} from "cc";
import { BaseSprite } from "../../GlobalScript/CommonComponent/BaseSprite";
import { NpkImage } from "../../Tool/NPKImage";
import {
  BaseButton,
  BaseButtonState,
} from "../../GlobalScript/CommonComponent/BaseButton";
import { BaseButtonAction } from "../../GlobalScript/CommonComponent/BaseButtonAction";
import { ImagePack } from "../../GlobalScript/ImagePack/ImagePack";
import { GameState } from "../../GlobalScript/GlobalGameState/GameState";
import { ImgInfo } from "../../GlobalScript/GlobalInterface/GlobalInterface";
const { ccclass } = _decorator;

@ccclass("DiceButtonNode")
/**
 * @description: 投骰子按钮的整个节点
 */
export class DiceButtonNode extends Node {
  winButtonComponent: BaseButton;
  diceButtonComponent: BaseButton;

  winButtonBlock: Function;
  diceDownBlock: Function;
  diceUpBlock: Function;

  gaugeAnimation: GaugeAnimation;

  constructor() {
    super();

    this.initBackgroundNode();
    this.initOtherWinButtonNode();
    this.initdiceButtonNode();
    this.initdiceDiceAniNode();
  }

  // 背景节点
  private initBackgroundNode(){
    const backgroundNode = new Node();
    const bs = backgroundNode.addComponent(BaseSprite);
    bs.updateSpriteFrame(NpkImage.ingame, 7);
    this.addChild(backgroundNode);
  }

  // 其他获胜条件按钮节点
  private initOtherWinButtonNode() {
    /// 其他获胜条件
    const winButtonNode = new Node();
    this.addChild(winButtonNode);
    winButtonNode.setPosition(20.5, -123);

    const winBa = winButtonNode.addComponent(BaseButtonAction);
    winBa.onMouseUp = this.winOnMouseUp.bind(this);

    this.winButtonComponent = winButtonNode.addComponent(BaseButton);
    this.winButtonComponent.init(NpkImage.ingame, 60);
  }

  // 骰子按钮节点
  private initdiceButtonNode() {
    /// dice 按钮
    const diceButtonNode = new Node('diceButton');
    this.addChild(diceButtonNode);
    diceButtonNode.setPosition(89, -57);

    const diceBc = diceButtonNode.addComponent(BaseButtonAction);
    diceBc.onMouseLeftDown = this.diceOnMouseDown.bind(this);
    diceBc.onMouseLeftUp = this.diceOnMouseUp.bind(this);

    this.diceButtonComponent = diceButtonNode.addComponent(BaseButton);
    this.diceButtonComponent.init(NpkImage.ingame, 8);
    this.diceButtonComponent.ButtonState = BaseButtonState.Disable;
  }

  // 播放动画节点
  private initdiceDiceAniNode() {
    const node = new Node();
    this.addChild(node);
    node.setPosition(45, -15);

    //设置节点锚点为左上角
    node.addComponent(UITransform).anchorPoint = v2(0, 1);
    this.gaugeAnimation = node.addComponent(GaugeAnimation);
  }

  /// 其他获胜条件
  private winOnMouseUp(event: EventMouse) {
    if (this.winButtonComponent.ButtonState == BaseButtonState.Disable) return;
    if (this.winButtonBlock) this.winButtonBlock();
  }

  /// 投骰子
  private diceOnMouseDown(event: EventMouse) {
    console.log('diceOnMouseDown');
    if (this.diceButtonComponent.ButtonState == BaseButtonState.Disable)
      return;
    if (this.diceDownBlock) this.diceDownBlock();
    this.gaugeAnimation.updatePlayState(PlayAniState.playing);
  }
  private diceOnMouseUp(event: EventMouse) {
    console.log('diceOnMouseUp');
    if (this.diceButtonComponent.ButtonState == BaseButtonState.Disable)
      return;
    if (this.diceUpBlock) this.diceUpBlock();
    this.gaugeAnimation.updatePlayState(PlayAniState.pause);
  }
}

// ─── 动画播放 ────────────────────────────────────────────────────────────────────

export enum PlayAniState {
  //未播放
  unplayed,
  //播放中
  playing,
  //倒放
  reversed,
  //暂停
  pause,
  //播放完成
  done,
}

/**
 * @description: 骰子按钮动画
 */
export class GaugeAnimation extends Component {
  // 所有精灵帧缓存
  private frameMap: Map<number, SpriteFrame> = new Map<number, SpriteFrame>();

  // 精灵帧的数量
  private frameCount: number = 100;

  // 精灵帧初始化状态
  private InitState: boolean = false;

  // 总的播放时间
  private aniTime: number = 1;

  // 当前帧显示时间
  private nowFrameTime: number = 0;

  // 每一帧需要显示的时间
  private frameShowTime: number = 0;

  // 当前帧
  private nowFrameIndex: number = -1;

  //* 动画状态
  private playState: PlayAniState = PlayAniState.unplayed;

  // 节点的精灵
  private sprite: Sprite;

  onLoad() {
    if (!this.node.getComponent(Sprite)) {
      this.sprite = this.node.addComponent(Sprite);
    } else {
      this.sprite = this.node.getComponent(Sprite);
    }

    //设置类型
    this.sprite.sizeMode = Sprite.SizeMode.RAW;
    //设置
    this.sprite.trim = false;

    ImagePack.getInstance().ReadNpkTable(
      "sprite/" + NpkImage.gauge.toLocaleLowerCase(),
      (ImgObj) => {
        const Pngs = ImgObj.Png_List;
        // 总数量
        this.frameCount = ImgObj.Png_Count;

        for (let i = 0; i < Pngs.length; i++) {
          const png = Pngs[i];
          this.initSpriteFrame(i,png);
        }

        this.InitState = true;

      }
    );
  }

  /// 根据拿到的数据 初始化精灵帧
  initSpriteFrame(index:number,Png: ImgInfo) {
    const spriteFrame = new SpriteFrame();
    let tex = new Texture2D();
    tex.reset({
      width: Png.Width,
      height: Png.Height,
      format: Texture2D.PixelFormat.RGBA8888,
      mipmapLevel: 0,
    });
    tex.uploadData(Png.PNGdata);
    // 更新 0 级 Mipmap。
    tex.updateImage();
    spriteFrame.texture = tex;
    spriteFrame.offset = v2(Png.Xpos, -Png.Ypos);

    this.frameMap.set(index, spriteFrame);
  }

  start() {}

  /**
   * @description: 刷新动画状态
   * @param {PlayAniState} palyState: 动画状态
   * @param {number} aniTime：播放动画时需要传入 动画的播放时间
   */
  updatePlayState(palyState: PlayAniState, aniTime?: number) {
    this.playState = palyState;

    // 数据的初始化
    if (this.playState == PlayAniState.unplayed) {
      this.sprite.spriteFrame = null;
      this.nowFrameIndex = -1;
    } else if (
      this.playState == (PlayAniState.playing || PlayAniState.reversed)
    ) {
      this.aniTime = aniTime ?? this.aniTime;
      // 单帧显示时间
      this.frameShowTime = this.aniTime  * 1000 / this.frameCount;
      // this.frameShowTime = this.frameShowTime / this.frameCount;
    }

    // 精灵帧的初始化
    if (this.playState == PlayAniState.playing) {
      this.sprite.spriteFrame = this.frameMap.get(0);
    } else if (this.playState == PlayAniState.reversed) {
      this.sprite.spriteFrame = this.frameMap.get(this.frameCount - 1);
    }
  }

  update(dt: number) {

    //如果游戏世界处于暂停的模式下 不再继续播放
    if (GameState.getInstance().IsPauseState()) return;
    //如果初始化未完成，不播放
    if (!this.InitState) return;

    // this.SetAniFrameByTime();
    //如果不在播放中
    if (this.playState != PlayAniState.playing && this.playState != PlayAniState.reversed)
      return;

    //每帧增加过去的时间 取千分之一秒为单位
    this.nowFrameTime += Math.trunc(dt * 1000);

    // 计算当前加减帧数
    const index = Math.trunc(this.nowFrameTime / this.frameShowTime);
    // 当前帧时间不足 一帧显示就跳过
    if (index < 1) return;

    // 将多余的时间 重新赋值回去
    this.nowFrameTime = this.nowFrameTime % this.frameShowTime;

    if (this.playState == PlayAniState.playing) {
      this.nowFrameIndex += index

      this.sprite.spriteFrame = this.frameMap.get(this.nowFrameIndex);

      // 播放到最后一帧 修改播放状态 为倒放
      if (this.nowFrameIndex >= this.frameCount - 1) {
        this.playState = PlayAniState.reversed;
      }
    } else if (this.playState == PlayAniState.reversed) {
      this.nowFrameIndex -= index;

      this.sprite.spriteFrame = this.frameMap.get(this.nowFrameIndex);

      // 播放到第一帧 修改播放状态 为倒放
      if (this.nowFrameIndex <= 0) {
        this.playState = PlayAniState.playing;
      }
    }
  }
}