所有按钮组件支持配置点击音效功能

assets/libs/gui/button/ButtonEffect.ts

@@ -4,13 +4,13 @@
  * @LastEditors: dgflash
  * @LastEditTime: 2023-02-09 10:54:28
  */
-import { Animation, AnimationClip, EventTouch, Sprite, _decorator } from "cc";
+import { Animation, AnimationClip, EventTouch, Node, Sprite, _decorator } from "cc";
 import { oops } from "../../../core/Oops";
 import ButtonSimple from "./ButtonSimple";
 
 const { ccclass, property, menu } = _decorator;
 
-/** 准备废弃，请使用UIButton代替 */
+/** 有特效短按按钮 */
 @ccclass("ButtonEffect")
 @menu('ui/button/ButtonEffect')
 export default class ButtonEffect extends ButtonSimple {
@@ -40,6 +40,8 @@ export default class ButtonEffect extends ButtonSimple {
         this.anim.createState(ac_start, ac_start?.name);
         this.anim.createState(ac_end, ac_end?.name);
 
+        this.node.on(Node.EventType.TOUCH_START, this.onTouchtStart, this);
+
         super.onLoad();
     }
 
@@ -56,4 +58,10 @@ export default class ButtonEffect extends ButtonSimple {
 
         super.onTouchEnd(event);
     }
+
+
+    onDestroy() {
+        this.node.off(Node.EventType.TOUCH_START, this.onTouchtStart, this);
+        super.onDestroy();
+    }
 }

assets/libs/gui/button/ButtonSimple.ts

@@ -1,8 +1,9 @@
-import { Component, EventTouch, game, Node, _decorator } from "cc";
+import { AudioClip, Component, EventTouch, Node, _decorator, game } from "cc";
+import { oops } from "../../../core/Oops";
 
 const { ccclass, property, menu } = _decorator;
 
-/** 准备废弃，请使用UIButton代替 */
+/** 短按按钮 */
 @ccclass("ButtonSimple")
 @menu('ui/button/ButtonSimple')
 export default class ButtonSimple extends Component {
@@ -16,18 +17,20 @@ export default class ButtonSimple extends Component {
     })
     private interval: number = 500;
 
+    @property({
+        tooltip: "触摸音效",
+        type: AudioClip
+    })
+    private effect: AudioClip = null!;
+
     private touchCount = 0;
     private touchtEndTime = 0;
 
     onLoad() {
-        this.node.on(Node.EventType.TOUCH_START, this.onTouchtStart, this);
         this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
         this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
     }
 
-    /** 触摸开始 */
-    protected onTouchtStart(event: EventTouch) { }
-
     /** 触摸结束 */
     protected onTouchEnd(event: EventTouch) {
         if (this.once) {
@@ -44,12 +47,21 @@ export default class ButtonSimple extends Component {
         }
         else {
             this.touchtEndTime = game.totalTime;
+
+            // 短按触摸音效
+            this.playEffect();
         }
     }
 
+    /** 短按触摸音效 */
+    protected playEffect() {
+        if (this.effect) oops.audio.playEffect(this.effect);
+    }
+
     onDestroy() {
-        this.node.off(Node.EventType.TOUCH_START, this.onTouchtStart, this);
         this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
         this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
+
+        if (this.effect) oops.audio.releaseEffect(this.effect);
     }
 }

assets/libs/gui/button/ButtonTouchLong.ts

@@ -9,7 +9,7 @@ import ButtonEffect from "./ButtonEffect";
 
 const { ccclass, property, menu } = _decorator;
 
-/** 准备废弃，请使用UIButton代替 */
+/** 长按按钮 */
 @ccclass("ButtonTouchLong")
 @menu('ui/button/ButtonTouchLong')
 export class ButtonTouchLong extends ButtonEffect {
@@ -65,7 +65,9 @@ export class ButtonTouchLong extends ButtonEffect {
             if (this._passTime >= this.time) {
                 this._isTouchLong = true;
                 this.clickEvents.forEach(event => {
-                    event.emit([event.customEventData])
+                    event.emit([event.customEventData]);
+                    // 长按触摸音效
+                    this.playEffect();
                 });
                 this.removeTouchLong();
             }