From 763cec406fab05361058a58cabb51aa84691fcd2 Mon Sep 17 00:00:00 2001 From: WoNiu Date: Sun, 24 Mar 2024 17:55:56 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=8D=A1=E7=89=87=E5=86=B3?= =?UTF-8?q?=E5=AE=9A=E9=A1=BA=E5=BA=8F=E5=8A=A8=E7=94=BB=E5=92=8C=E5=85=B6?= =?UTF-8?q?=E4=BB=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/Script/DialogNode/CardNode.ts | 161 +++++++++++++++++-- assets/Script/DialogNode/SelectNumberNode.ts | 20 ++- assets/Script/common/TimingProgressBar.ts | 9 +- 3 files changed, 172 insertions(+), 18 deletions(-) diff --git a/assets/Script/DialogNode/CardNode.ts b/assets/Script/DialogNode/CardNode.ts index 5f43251..cd29431 100644 --- a/assets/Script/DialogNode/CardNode.ts +++ b/assets/Script/DialogNode/CardNode.ts @@ -1,12 +1,26 @@ /* * @Author: WoNiu * @Date: 2024-03-22 19:50:30 - * @LastEditTime: 2024-03-23 00:39:47 + * @LastEditTime: 2024-03-24 17:09:16 * @LastEditors: WoNiu * @Description: 选择卡片节点 */ -import { _decorator, EventMouse, Node, Sprite, SpriteFrame, UITransform, v2 } from "cc"; +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; @@ -14,16 +28,19 @@ const { ccclass, property } = _decorator; @ccclass("CardNode") export class CardNode extends Node { //普通精灵帧 - NormalSpriteFrame: SpriteFrame; + private NormalSpriteFrame: SpriteFrame; // 高亮精灵帧1 - oneSpriteFrame: SpriteFrame; + private oneSpriteFrame: SpriteFrame; //高亮精灵帧2 - twoSpriteFrame: SpriteFrame; + private twoSpriteFrame: SpriteFrame; + + // 翻转动画 + flipsAnimation:CardFlipsAnimation; //精灵对象 - SpriteObj: Sprite; + private SpriteObj: Sprite; // 是否按钮失效 Disable = false; @@ -31,14 +48,32 @@ export class CardNode extends Node { constructor() { super(); - if (!this.getComponent(Sprite)) { - this.addComponent(Sprite); - } + const trf = this.addComponent(UITransform); + trf.anchorPoint = v2(0.5, 1) + trf.contentSize = new Size(178,113); - this.getComponent(UITransform).anchorPoint = v2(0, 1); + this.flipsAnimation = this.addComponent(CardFlipsAnimation); - this.SpriteObj = this.getComponent(Sprite); + 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; @@ -49,7 +84,9 @@ export class CardNode extends Node { 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); @@ -65,10 +102,108 @@ export class CardNode extends Node { } OnDown(event: EventMouse) { - //必须是鼠标左键 - if (event.getButton() != EventMouse.BUTTON_LEFT || this.Disable ) return; + 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) {} +} diff --git a/assets/Script/DialogNode/SelectNumberNode.ts b/assets/Script/DialogNode/SelectNumberNode.ts index 510ef64..9a742e7 100644 --- a/assets/Script/DialogNode/SelectNumberNode.ts +++ b/assets/Script/DialogNode/SelectNumberNode.ts @@ -1,7 +1,7 @@ /* * @Author: WoNiu * @Date: 2024-03-21 13:28:47 - * @LastEditTime: 2024-03-23 20:26:10 + * @LastEditTime: 2024-03-24 16:49:37 * @LastEditors: WoNiu * @Description: */ @@ -49,19 +49,19 @@ export class SelectNumberNode extends Node { initCards() { this.oneCard = new CardNode(); - this.oneCard.setPosition(250, -220); + this.oneCard.setPosition(339, -220); this.addChild(this.oneCard); const Onebba = this.oneCard.addComponent(BaseButtonAction); Onebba.onMouseLeftDown = ()=>{ this.onMouseLeftDown(0) }; this.twoCard = new CardNode(); - this.twoCard.setPosition(444.5, -220); + this.twoCard.setPosition(533.5, -220); this.addChild(this.twoCard); const twoBba = this.twoCard.addComponent(BaseButtonAction); twoBba.onMouseLeftDown = ()=>{ this.onMouseLeftDown(1) }; this.threeCard = new CardNode(); - this.threeCard.setPosition(639, -220); + this.threeCard.setPosition(728, -220); this.addChild(this.threeCard); const threeBba = this.threeCard.addComponent(BaseButtonAction); threeBba.onMouseLeftDown = ()=>{ this.onMouseLeftDown(2) }; @@ -73,9 +73,21 @@ export class SelectNumberNode extends Node { this.addChild(time); time.tweenerStart(3,()=>{ console.log('缓动完成'); + this.flipsCard(); }); } + //* 翻转卡片 + flipsCard(){ + const cards = [this.oneCard,this.twoCard,this.threeCard]; + for (let i = 0; i < cards.length; i++) { + const card = cards[i]; + card.Disable = true; + card.flipsAnimation.animationStart(i,'玩家' + i); + } + + } + onMouseLeftDown(tag:number){ const cards = [this.oneCard,this.twoCard,this.threeCard]; cards.forEach((card)=>{ diff --git a/assets/Script/common/TimingProgressBar.ts b/assets/Script/common/TimingProgressBar.ts index ce9af5f..49c756f 100644 --- a/assets/Script/common/TimingProgressBar.ts +++ b/assets/Script/common/TimingProgressBar.ts @@ -1,7 +1,7 @@ /* * @Author: WoNiu * @Date: 2024-03-21 13:44:57 - * @LastEditTime: 2024-03-23 20:26:44 + * @LastEditTime: 2024-03-24 17:53:53 * @LastEditors: WoNiu * @Description: */ @@ -15,6 +15,8 @@ import { _decorator, Component, + Director, + director, Node, ProgressBar, Sprite, @@ -127,6 +129,11 @@ export class TimingComponent extends Component { onComplete(){ this.obj.progress = 1; this.onCompleteBack(); + /// 这一帧结束之后销毁 + director.once(Director.EVENT_END_FRAME, () => { + // 销毁 + this.node.destroy(); + }); } update(deltaTime: number) {}