303 lines
8.4 KiB
TypeScript
303 lines
8.4 KiB
TypeScript
/*
|
||
* @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;
|
||
}
|
||
}
|
||
}
|
||
}
|