选择卡片决定顺序动画和其他

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) {}
+}

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)=>{

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) {}