开始游戏后的 UI 和 倒计时动画完成

This commit is contained in:
DESKTOP-J7I1C4E\a9350 2024-03-13 17:04:19 +08:00
parent d043e46811
commit 71c9847d4f
11 changed files with 423 additions and 160 deletions

View File

@ -5,11 +5,13 @@ const { ccclass, property } = _decorator;
@ccclass('AnimationNode')
export class AnimationNode extends Node{
constructor(AnimationPath: string) {
constructor(AnimationPath: string,aniDone?:Function) {
super();
let aniNode = new Node();
aniNode.addComponent( ScriptMyAnimation).AnimationPath = AnimationPath;
let ani = aniNode.addComponent( ScriptMyAnimation)
ani.AnimationPath = AnimationPath;
ani.onAniDone = aniDone;
this.addChild(aniNode);
}

View File

@ -11,6 +11,10 @@ const { ccclass, property, requireComponent } = _decorator;
@ccclass("MyAnimation")
@requireComponent(Sprite)
export class MyAnimation extends Component {
/// 动画完成回调
public onAniDone : Function;
//Ani加载精灵帧初始化状态
InitState: boolean = false;
@ -165,6 +169,7 @@ export class MyAnimation extends Component {
if (this.AniObject && this.AniObject.Flag && this.AniObject.Flag.get("LOOP"))
this.NowFrame = 0;
else this.PlayState = 3;
if (this.PlayState == 3 && this.onAniDone) this.onAniDone();
}
//设置精灵对象更换图片

View File

@ -2,6 +2,18 @@ import { _decorator, CCInteger, CCString, Component, Node, Sprite, SpriteFrame,
import { BaseSpriteFrame } from './BaseSpriteFrame';
const { ccclass, property } = _decorator;
export enum BaseButtonState{
// 普通
Normal = 0,
// 悬停
Hover = 1,
// 按下
Press = 2,
//失效
Disable = 8
}
@ccclass('BaseButton')
export class BaseButton extends Component {
@ -39,7 +51,7 @@ export class BaseButton extends Component {
InitState = false;
//按钮状态
ButtonState = 0; // 0 普通 1悬停 2按下 8失效
ButtonState = BaseButtonState.Normal; // 0 普通 1悬停 2按下 8失效
start() {
@ -84,16 +96,16 @@ export class BaseButton extends Component {
}
} else {
switch (this.ButtonState) {
case 0:
case BaseButtonState.Normal:
this.UploadSpriteFrame(this.NormalImgSpriteFrame);
break;
case 1:
case BaseButtonState.Hover:
this.UploadSpriteFrame(this.HoverImgSpriteFrame);
break;
case 2:
case BaseButtonState.Press:
this.UploadSpriteFrame(this.PressImgSpriteFrame);
break;
case 8:
case BaseButtonState.Disable:
this.UploadSpriteFrame(this.DisableImgSpriteFrame);
break;
default:
@ -103,26 +115,24 @@ export class BaseButton extends Component {
}
OffHever(event) {
this.ButtonState = 0;
// this.UploadSpriteFrame(this.NormalImgSpriteFrame);
if (this.ButtonState == BaseButtonState.Disable) return;
this.ButtonState = BaseButtonState.Normal;
}
OnHever(event) {
this.ButtonState = 1;
// this.UploadSpriteFrame(this.HoverImgSpriteFrame);
if (this.ButtonState == BaseButtonState.Disable) return;
}
OnEnd(event: EventMouse) {
if (this.ButtonState == BaseButtonState.Disable) return;
if (event.getButton() != EventMouse.BUTTON_LEFT) return;
this.ButtonState = 0;
// this.UploadSpriteFrame(this.NormalImgSpriteFrame);
this.ButtonState = BaseButtonState.Normal;
}
OnPress(event: EventMouse) {
if (this.ButtonState == BaseButtonState.Disable) return;
//必须是鼠标左键
if (event.getButton() != EventMouse.BUTTON_LEFT) return;
this.ButtonState = 2;
// this.UploadSpriteFrame(this.PressImgSpriteFrame);
this.ButtonState = BaseButtonState.Press;
}
}

View File

@ -0,0 +1,68 @@
import { _decorator, Component, EventMouse, Node } from 'cc';
import { BaseSprite } from '../GlobalScript/CommonComponent/BaseSprite';
import { NpkImage } from '../Tool/NPKImage';
import { BaseButton, BaseButtonState } from '../GlobalScript/CommonComponent/BaseButton';
const { ccclass, property } = _decorator;
@ccclass('DiceButtonNode')
export class DiceButtonNode extends Node {
winButtonComponent: BaseButton;
spaceButtonComponent: BaseButton;
constructor(){
super();
const backgroundNode = new Node();
const bs = backgroundNode.addComponent( BaseSprite );
bs.updateSpriteFrame(NpkImage.ingame,7);
this.addChild(backgroundNode);
/// 其他获胜条件
const winButtonNode = new Node();
this.winButtonComponent = winButtonNode.addComponent( BaseButton );
this.winButtonComponent.ButtonState = BaseButtonState.Disable;
this.winButtonComponent.ImgPath = NpkImage.ingame;
this.winButtonComponent.NormalImgIndex = 58;
this.winButtonComponent.HoverImgIndex = 59;
this.winButtonComponent.PressImgIndex = 60;
this.winButtonComponent.DisableImgIndex = 61;
this.addChild(winButtonNode);
winButtonNode.setPosition(20.5,-123);
// winButtonNode.on(Node.EventType.MOUSE_UP,this.winOnTouchUp,this);
/// space
const spaceButtonNode = new Node();
this.spaceButtonComponent = spaceButtonNode.addComponent( BaseButton );
this.spaceButtonComponent.ButtonState = BaseButtonState.Disable;
this.spaceButtonComponent.ImgPath = NpkImage.ingame;
this.spaceButtonComponent.NormalImgIndex = 8;
this.spaceButtonComponent.HoverImgIndex = 9;
this.spaceButtonComponent.PressImgIndex = 10;
this.spaceButtonComponent.DisableImgIndex = 11;
this.addChild(spaceButtonNode);
spaceButtonNode.setPosition(89,-57);
// spaceButtonNode.on(Node.EventType.MOUSE_DOWN,this.spaceOnTouchDown,this);
// spaceButtonNode.on(Node.EventType.MOUSE_UP,this.spaceOnTouchUp,this);
}
winOnTouchUp(event:EventMouse){
if (event.getButton() != EventMouse.BUTTON_LEFT) return;
}
spaceOnTouchDown(event:EventMouse){
if (event.getButton() != EventMouse.BUTTON_LEFT) return;
}
spaceOnTouchUp(event:EventMouse){
if (event.getButton() != EventMouse.BUTTON_LEFT) return;
}
}

View File

@ -2,7 +2,7 @@
"ver": "4.0.23",
"importer": "typescript",
"imported": true,
"uuid": "fa300c02-7511-4957-9ad5-a4577f3f1524",
"uuid": "9fa9f4d2-1eba-49a5-b9f6-3ec51e1fa959",
"files": [],
"subMetas": {},
"userData": {}

View File

@ -1,107 +0,0 @@
// import { _decorator, CCInteger, CCString, Component, Node, Sprite, SpriteFrame, UITransform, v2 } from 'cc';
// import { BaseSpriteFrame } from '../GlobalScript/CommonComponent/BaseSpriteFrame';
// const { ccclass, property } = _decorator;
// @ccclass('Gamer')
// export class Gamer extends Component {
// @property({ type: CCString, displayName: 'img路径', tooltip: "img路径" })
// ImgPath: string;
// @property({ type: [CCInteger], displayName: '普通img编号', tooltip: "普通img编号" })
// NormalImgIndex: number;
// @property({ type: [CCInteger], displayName: '悬停img编号', tooltip: "悬停img编号" })
// HoverImgIndex: number;
// @property({ type: [CCInteger], displayName: '按下img编号', tooltip: "按下img编号" })
// PressImgIndex: number;
// @property({ type: [CCInteger], displayName: '失效img编号', tooltip: "失效img编号" })
// DisableImgIndex: number;
// //普通精灵帧
// NormalImgSpriteFrame: SpriteFrame;
// //悬停精灵帧
// HoverImgSpriteFrame: SpriteFrame;
// //按下精灵帧
// PressImgSpriteFrame: SpriteFrame;
// //失效精灵帧
// DisableImgSpriteFrame: SpriteFrame;
// //精灵对象
// SpriteObj: Sprite;
// //初始化状态
// InitState = false;
// //按钮状态
// ButtonState = 0; // 0 普通 1悬停 2按下 8失效
// start() {
// //判断是否有精灵 如果没有 就给他搞一个
// if (this.node.getComponent(Sprite))
// this.SpriteObj = this.node.getComponent(Sprite);
// else
// this.SpriteObj = this.node.addComponent(Sprite);
// //设置节点锚点为左上角
// this.node.getComponent(UITransform).anchorPoint = v2(0, 1);
// //设置类型
// this.SpriteObj.sizeMode = Sprite.SizeMode.RAW;
// //设置
// this.SpriteObj.trim = false;
// new BaseSpriteFrame(this.ImgPath, this.NormalImgIndex, _SpriteFrame => { this.NormalImgSpriteFrame = _SpriteFrame });
// new BaseSpriteFrame(this.ImgPath, this.HoverImgIndex, _SpriteFrame => { this.HoverImgSpriteFrame = _SpriteFrame });
// new BaseSpriteFrame(this.ImgPath, this.PressImgIndex, _SpriteFrame => { this.PressImgSpriteFrame = _SpriteFrame });
// new BaseSpriteFrame(this.ImgPath, this.DisableImgIndex, _SpriteFrame => { this.DisableImgSpriteFrame = _SpriteFrame });
// }
// UploadSpriteFrame(_SpriteFrame) {
// if (this.SpriteObj.spriteFrame != _SpriteFrame) {
// this.SpriteObj.spriteFrame = _SpriteFrame;
// }
// }
// update(deltaTime: number) {
// if (!this.InitState) {
// if (this.NormalImgSpriteFrame && this.HoverImgSpriteFrame && this.PressImgSpriteFrame) {
// this.InitState = true;
// this.UploadSpriteFrame(this.NormalImgSpriteFrame);
// // this.node.on(Input.EventType.TOUCH_START, this.OnPress, this);
// // this.node.on(Input.EventType.TOUCH_END, this.OnEnd, this);
// this.node.on(Node.EventType.MOUSE_ENTER, this.OnHever, this);
// this.node.on(Node.EventType.MOUSE_LEAVE, this.OffHever, this);
// this.node.on(Node.EventType.MOUSE_DOWN, this.OnPress, this);
// this.node.on(Node.EventType.MOUSE_UP, this.OnEnd, this);
// }
// } else {
// switch (this.ButtonState) {
// case 0:
// this.UploadSpriteFrame(this.NormalImgSpriteFrame);
// break;
// case 1:
// this.UploadSpriteFrame(this.HoverImgSpriteFrame);
// break;
// case 2:
// this.UploadSpriteFrame(this.PressImgSpriteFrame);
// break;
// case 8:
// this.UploadSpriteFrame(this.DisableImgSpriteFrame);
// break;
// default:
// break;
// }
// }
// }
// }

205
assets/Script/GamerNode.ts Normal file
View File

@ -0,0 +1,205 @@
import { _decorator, Color, Director, director, easing, game, Label, Node, Size, Sprite, SpriteFrame, tween, UITransform, VerticalTextAlignment } from 'cc';
import { BaseSprite } from '../GlobalScript/CommonComponent/BaseSprite';
import { NpkImage } from '../Tool/NPKImage';
import { BaseSpriteFrame } from '../GlobalScript/CommonComponent/BaseSpriteFrame';
const { ccclass } = _decorator;
/// 玩家角色类型
export enum CharacterType{
/// 剑魂
JianHun = 0,
}
/// 玩家Node封装
@ccclass('Gamer')
export class GamerNode extends Node {
/// 玩家角色类型
private _characterType : CharacterType;
/// 玩家名称
private GamerNameLabel : Label;
/// 幻想点数
private _count: number = 0;
private countLabel: Label;
/// 玩家排序的精灵
private serialNumberSprite: Sprite;
private serialOneFrame: SpriteFrame;
private serialTwoFrame: SpriteFrame;
private serialThreeFrame: SpriteFrame;
private blue = new Color('00baff');
set charchterType(type:CharacterType){
if(!this.getChildByName('GamerCharacterNode')){
this._characterType = type;
this.initCharacterNode();
}
}
/// 设置新的幻想点数
set count(newCount: number){
let numberString = newCount.toLocaleString();
const obj = {n:this._count};
if (numberString != this.GamerNameLabel.string){
tween(obj).to(1.0,{ n: newCount },{onUpdate:(target,ration)=>{
this._count = obj.n;
const count:number = parseInt(obj.n.toFixed(0));
this.countLabel.string = count.toLocaleString();
this.countLabel.color = this.getCountColor(obj.n);
}},).start();
}
}
/// 设置玩家名称
set gamerName(newName: string){
let name = newName;
if (name.length > 6){
name = newName.slice(0,3) + '...' + newName.slice(newName.length - 3);
}
this.GamerNameLabel.string = name;
}
/// 玩家排序
set serialNumber( serial: 1 | 2 | 3){
switch (serial) {
case 1:
this.serialNumberSprite.spriteFrame = this.serialOneFrame;
this.GamerNameLabel.color = Color.RED;
break;
case 2:
this.serialNumberSprite.spriteFrame = this.serialTwoFrame;
this.GamerNameLabel.color = this.blue;
break;
case 3:
this.serialNumberSprite.spriteFrame = this.serialThreeFrame;
this.GamerNameLabel.color = Color.GREEN;
break;
}
}
private getCountColor(count:number):Color{
if ( count < 50000){
return Color.RED;
}else if ( count < 200000){
return Color.YELLOW;
}else{
return this.blue;
}
}
constructor(gamerName:string){
super();
this.initBackgroundNode();
this.initPNode();
this.initCountNode();
this.initGamerNameNode();
this.initSerialNumberNode();
this.gamerName = gamerName;
/// 提前加载精灵帧
new BaseSpriteFrame(NpkImage.ingame, 1, _SpriteFrame => { this.serialOneFrame = _SpriteFrame });
new BaseSpriteFrame(NpkImage.ingame, 2, _SpriteFrame => { this.serialTwoFrame = _SpriteFrame });
new BaseSpriteFrame(NpkImage.ingame, 3, _SpriteFrame => { this.serialThreeFrame = _SpriteFrame });
}
/// 背景
initBackgroundNode(){
/// 背景节点
const backgroundNode = new Node('GamerBackgroundNode');
this.addChild(backgroundNode);
/// 给背景节点添加 baseSprite 组件
const backgroundComponent = backgroundNode.addComponent( BaseSprite );
backgroundComponent.updateSpriteFrame(NpkImage.ingame,32);
}
/// 角色
initCharacterNode(){
const node = new Node('GamerCharacterNode');
this.addChild(node);
/// 添加 baseSprite 组件
const backgroundComponent = node.addComponent( BaseSprite );
backgroundComponent.updateSpriteFrame(NpkImage.character_sd,this._characterType);
}
/// P图标
initPNode(){
const node = new Node('GamerPNode');
this.addChild(node);
node.setPosition(50,-9.5);
/// 添加 baseSprite 组件
const backgroundComponent = node.addComponent( BaseSprite );
backgroundComponent.updateSpriteFrame(NpkImage.ingame,51);
}
/// 幻想点数
initCountNode(){
const node = new Node('GamerCountNode');
this.addChild(node);
node.setPosition(100,-18);
const trf = node.addComponent(UITransform);
trf.contentSize = new Size(60,20);
const label = node.addComponent(Label);
label.fontSize = 14;
label.string = '0';
label.color = Color.RED;
label.verticalAlign = VerticalTextAlignment.CENTER;
this.countLabel = label;
}
/// 玩家名称
initGamerNameNode(){
const node = new Node('GamerNameNode');
this.addChild(node);
node.setPosition(90,-40);
const trf = node.addComponent(UITransform);
trf.contentSize = new Size(100,20);
const label = node.addComponent(Label);
label.string = '';
label.fontSize = 12;
label.color = Color.GRAY;
label.verticalAlign = VerticalTextAlignment.CENTER;
this.GamerNameLabel = label;
}
/// 玩家顺序
initSerialNumberNode(){
const node = new Node('GamerNameNode');
this.addChild(node);
node.setPosition(160,-30);
this.serialNumberSprite = node.addComponent( Sprite );
}
}

View File

@ -1,23 +0,0 @@
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Pressent')
export class Pressent extends Component {
@property(Node) cancel: Node;
start() {
this.cancel.on(Node.EventType.TOUCH_END,this.touchEnd,this);
}
touchEnd(event:Event){
/// 销毁节点
this.node.destroy();
}
update(deltaTime: number) {
}
}

View File

@ -1,8 +1,10 @@
import { _decorator, BlockInputEvents, Button, Color, EventMouse, Label, Node, sp, Sprite, UITransform, v2 } from 'cc';
import { _decorator, BlockInputEvents, Button, Color, Director, director, EventMouse, Label, Node, sp, Sprite, UITransform, v2 } from 'cc';
import { BaseSprite } from '../GlobalScript/CommonComponent/BaseSprite';
import { NpkImage } from '../Tool/NPKImage';
import { BaseButton } from '../GlobalScript/CommonComponent/BaseButton';
import { AnimationNode } from '../GlobalScript/Animation/AnimationNode';
import { CharacterType, GamerNode } from './GamerNode';
import { UIRoot } from './UIRoot';
const { ccclass } = _decorator;
/// 开始游戏按钮界面
@ -164,6 +166,14 @@ export class StartGameUINode extends Node {
/// 开始游戏
startOnTouchEnd(event:Event){
const uiroot = this.parent.getComponent( UIRoot );
uiroot.initGameUI();
/// 一帧结束之后销毁
director.once(Director.EVENT_END_FRAME,()=>{
// 销毁
this.destroy();
});
console.log('开始游戏');
}

View File

@ -1,28 +1,121 @@
import { _decorator, assetManager, Component, instantiate, Node, Prefab, UITransform } from 'cc';
import { _decorator, Component, Director, director, Node, UITransform } from 'cc';
import { StartGameUINode } from './StartGameUINode';
const { ccclass, property } = _decorator;
import { CharacterType, GamerNode } from './GamerNode';
import { BaseSprite } from '../GlobalScript/CommonComponent/BaseSprite';
import { NpkImage } from '../Tool/NPKImage';
import { AnimationNode } from '../GlobalScript/Animation/AnimationNode';
import { BaseButton, BaseButtonState } from '../GlobalScript/CommonComponent/BaseButton';
import { DiceButtonNode } from './DiceButtonNode';
const { ccclass } = _decorator;
@ccclass('UIRoot')
export class UIRoot extends Component {
init(){
/// 等待玩家
private awaitGamerNode: Node;
/// 玩家一
private gamerOne: GamerNode;
/// 玩家二
private gamerTwo: GamerNode;
/// 玩家三
private gamerThree: GamerNode;
/// 投骰子按钮
private diceButton: DiceButtonNode;
/// 初始化开始游戏界面的UI
initStartGameUI(){
const startGameUINode = new StartGameUINode();
startGameUINode.addComponent( UITransform).setContentSize(1067,600);
this.node.addChild(startGameUINode);
console.log(this.node.parent.children);
console.log('StartUINode');
}
/// 初始化游戏界面UI
initGameUI(){
/// 初始化玩家UI
this.initGamerUI();
this.initDiceButton();
this.initAwaitGamerUI();
}
/// 初始化玩家UI
initGamerUI(){
this.gamerOne = new GamerNode('玩家一')
this.gamerOne.setPosition(0,-540);
this.gamerOne.charchterType = CharacterType.JianHun;
this.node.addChild( this.gamerOne );
this.gamerTwo = new GamerNode('')
this.gamerTwo.setPosition(877,0);
this.node.addChild( this.gamerTwo );
this.gamerThree = new GamerNode('')
this.node.addChild( this.gamerThree );
this.initDiceButton();
}
/// 初始化加载UI
initAwaitGamerUI(){
const node = new Node();
node.setPosition(177.5,-244.5);
this.node.addChild(node);
const spr = node.addComponent( BaseSprite);
spr.updateSpriteFrame(NpkImage.loading_loop,0);
const ani = new AnimationNode('ani/loading_loop01.ani');
ani.setPosition(350,-110);
node.addChild( ani );
this.awaitGamerNode = node;
/// 2秒后 结束加载
this.scheduleOnce(()=>{
/// 这一帧结束之后销毁
director.once(Director.EVENT_END_FRAME,()=>{
// 销毁
this.awaitGamerNode.destroy();
});
/// 初始化开始倒计时
this.initCountFontAni(5);
},2);
}
/// 初始化倒计时动画
initCountFontAni(index:number){
const ani = new AnimationNode('ani/dnf_quiz_' + index +'.ani',()=>{
director.once(Director.EVENT_END_FRAME,()=>{
ani.destroy();
});
if (index > 1){
this.initCountFontAni(index-1);
}else{
this.diceButton.winButtonComponent.ButtonState = BaseButtonState.Normal;
}
});
ani.setPosition(420,-180);
this.node.addChild( ani );
}
/// 初始化投骰子按钮
initDiceButton(){
this.diceButton = new DiceButtonNode();
this.diceButton.setPosition(849,-453);
this.node.addChild(this.diceButton);
}
start() {
this.node.addComponent( UITransform ).setContentSize(1067,600);
this.init();
this.initStartGameUI();
}